这篇文章主要给大家介绍了关于高性能的 javascript 之加载顺序与执行原理的相关资料, 文中通过示例代码介绍的非常详细, 对大家的学习或者工作具有一定的参考学习价值, 需要的朋友们下面随着小编来一起学习学习吧
前言
javascript 在浏览器中的性能, 可以认为是开发者所面临的最严重的可用性问题, 今天, 自己看完高性能的 javascript 的加载和执行这一章, 聊聊怎么解决 js 的加载顺序和执行的原理, 下面话不多说了, 来一起看看详细的介绍:
当浏览器遇到 < script > 标签的时候, 浏览器必须先话时间下载外链的文件然后并执行, 在这过程中, 页面渲染和用户交互是完全被阻塞的
脚本放在哪里比较好?
这种情况无疑是存在严重的性能问题的, 由于脚本会阻塞页面的渲染, 直到它们全部下载并执行完成后, 页面渲染才会继续, 下面的图就是代码的执行顺序
第一个 js 文件下载, 要等到第一个 js 文件下载完全才会执行第二个 js 文件, 不过现在 IE8,Firefox3.5,Safari4 和 Chrome2 都允许并行下载 js 文件, 遗憾的是, js 下载过程还是会阻塞其他资源的下载, 例如: 图片
所以提高性能的方法之一: 将脚本放在 body 底部
组织脚本
由于每个 < script > 标签下载时都会阻塞页面的渲染, 所以减少页面包含的 < script > 标签数量是必不可少的, 解决方法: 可以把多个 js 文件合并打包成一个 js 文件, 这样子做的好处就是可以最小化延迟时间将会明显的改善页面的总体性能, 除此之外, 还可以减少 HTTP 的请求
一般来说下载单个 100KB 的文件比下载 4 个 25KB 的文件快
如果有多个外链的 js 文件, 可以合并成一个 js 文件
无阻塞的脚本
尽管下载单个较大的 js 文件只产生一次 HTTP 的请求, 但是会假死浏览器一大段时间, 为了避免这种情况, 你需要向页面中逐步加载 js 文件
延迟的脚本
defer 属性指明本元素所含的脚本可以延迟执行, 但是只有 IE4 + 和 Firefox3.5 + 的浏览器支持
简单来说 defer 的机制就是知道 DOM 加载完成前才去下载 js 文件, 不会阻塞浏览器的其他进程
在不支持 defer 属性的浏览器弹出的顺序是: defer,script,load
支持 defer 属性的浏览器弹出的顺序是: script,defer,load
所以说 defer 是在 onload 事件执行之前被调用
动态脚本
动态脚本的注入有两种方式, 第一就是动态创建 script 标签, 第二就是通过 XMLHttpRequest 注入页面
先说说第一种怎么使用:
这种技术的重点在于: 无论在何时启动下载, 文件的下载和执行过程不会阻塞页面其他进程, 但是使用动态脚本节点下载 js 文件时, 返回的代码会立即执行 (除了 Firefox 和 Opera, 它们会等待此前所有动态脚本节点执行完毕)
在主流的浏览器会在 < script > 标签接收完成时触发一个 load 事件, 但是 ie 浏览器没有, 所以我们必须封装一个兼容所有的浏览器都可以使用的方法
这种方式的缺点就是要清楚文件的加载顺序, 当 js 文件多了, 依赖关系复杂的时候, 很难管理加载的依赖顺序
就像这样子写的代码很难维护
第二种动态创建脚本方式
实际上相当于创建一个带有内联脚本的 < script > 标签, 一旦新创建的 < script > 元素被添加到页面, 代码就会立即执行然后准备就绪
优点: 就是下载的 js 代码但是不立即执行, 这样子可以把脚本的执行推迟到你准备好的时候执行, 这种方法还可以兼容所有的浏览器
缺点: js 文件必须与所请求的页面处于相同的域, js 文件不能从 CDN 下载, 一般大型 web 应用都不会使用这种方式
推荐使用无阻塞模式:
先添加动态所需的代码, 然后假装初始化页面的剩下的代码
[图片上传失败...(image-dd3f9-1515902024710)]
上面介绍了那么多, 给大家推荐一些动态延迟加载的库
有 YUI3,LazyLoad 和 LABjs 等这些库, 个人觉得 LABjs 库比较好用, 但是没有用过, 大家可以去了解一下, 使用方法就不在这里说了
总结:
提高 js 性能的几个方面
1.</body > 闭合标签之前, 将所有的 < script > 标签放到页面底部这能确保在脚本执行前页面已经完成了渲染
2. 合并脚本页面中的 < script > 标签越少, 加载也就越快, 响应也更快无论外链文件还是内嵌脚本都是如此
3. 有多种无阻塞下载 js 的方法
3.1 使用 < script > 标签的 defer 属性
3.2 使用动态创建的 < script > 元素来下载并执行代码
3.3 使用 XHR 对象下载 js 代码并注入页面中
通过以上策略, 可以极大提高那些需要使用大量 js 的 web 应用的实际性能
好了, 以上就是这篇文章的全部内容了, 希望本文的内容对大家的学习或者工作具有一定的参考学习价值, 如果有疑问大家可以留言交流, 谢谢大家对 phperz 的支持
来源: http://www.phperz.com/article/18/0225/362654.html