性能优化——异步加载js文件
2017-08-23 09:30
375 查看
为什么要异步加载:
同步加载会阻塞浏览器的后续处理,即只有当当前文件加载完毕之后才能进行下一步的文件加载(如图像)、渲染、代码执行。如果js中有输出document内容、修改DOM、重定向等行为,就会造成页面阻塞。
什么叫异步加载:
异步加载不会阻塞浏览器的后续操作,即在加载执行js的同时,并行加载其他文件渲染页面。
async 属性仅适用于外部脚本(只有在使用 src 属性时)。
async 属性不能保证执行顺序。
defer属性表示脚本不会改变文档的内容,浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本,它将推迟对脚本的解释,直到文档已经显示给用户为止。以便加快处理文档的速度。
只有 Internet Explorer 支持 defer 属性。
这些代码应被放置在标签前(接近HTML文件底部)
这种加载方式在加载执行完之前会阻止 onload 事件的触发,而现在很多页面的代码都在 onload 时还要执行额外的渲染工作等,所以还是会阻塞部分页面的初始化处理。
这些代码应被放置在标签前(接近HTML文件底部)
这种加载方式不是立即开始异步加载 js ,而是在 onload 时才开始异步加载。这样就解决了阻塞 onload 事件触发的问题。
同步加载会阻塞浏览器的后续处理,即只有当当前文件加载完毕之后才能进行下一步的文件加载(如图像)、渲染、代码执行。如果js中有输出document内容、修改DOM、重定向等行为,就会造成页面阻塞。
什么叫异步加载:
异步加载不会阻塞浏览器的后续操作,即在加载执行js的同时,并行加载其他文件渲染页面。
1. async属性
async属性规定js文件一旦可用就会执行,脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行)async 属性仅适用于外部脚本(只有在使用 src 属性时)。
async 属性不能保证执行顺序。
<script type="text/javascript" src="demo_async.js" async="async"></script>
2. defer属性
defer 属性规定是否对脚本执行进行延迟,直到页面加载为止。defer属性表示脚本不会改变文档的内容,浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本,它将推迟对脚本的解释,直到文档已经显示给用户为止。以便加快处理文档的速度。
只有 Internet Explorer 支持 defer 属性。
<script type="text/javascript" defer="defer"></script>
3. 动态创建DOM
不要求js同源这些代码应被放置在标签前(接近HTML文件底部)
这种加载方式在加载执行完之前会阻止 onload 事件的触发,而现在很多页面的代码都在 onload 时还要执行额外的渲染工作等,所以还是会阻塞部分页面的初始化处理。
<script type="text/javascript"> function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "defer.js"; document.body.appendChild(element); } </script>
4. onload时动态创建DOM
不要求js同源这些代码应被放置在标签前(接近HTML文件底部)
这种加载方式不是立即开始异步加载 js ,而是在 onload 时才开始异步加载。这样就解决了阻塞 onload 事件触发的问题。
<script type="text/javascript"> function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "defer.js"; document.body.appendChild(element); } if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload; </script>
相关文章推荐
- JavaScript 的性能优化:加载和执行(以及动态引入的外部 JS 文件在各浏览器中的加载顺序不一致)
- 前端性能优化之文件按需异步加载
- 前端性能优化:使用异步加载,延迟加载依赖
- JS文件加载优化 ControlJS
- 如何调试异步加载的js文件
- 为了提高性能,如何动态加载JS文件
- Android ListView 性能优化-----(异步加载图片资源)
- Android ListView性能优化,异步加载图片
- 比较简单的异步加载JS文件的代码
- Android进阶:ListView性能优化异步加载图片 使滑动效果流畅
- 异步加载js文件:LABjs和RequireJS
- Android进阶:ListView性能优化异步加载图片 使滑动效果流畅
- AngularJS ui-router 用resolve、service预先加载数据写法,属于优化性能方面吧
- RequireJS 异步加载js文件框架
- ListView性能优化异步加载图片
- Android进阶:ListView性能优化异步加载图片 使滑动效果流畅
- 异步加载js文件的方法总结
- android中ListView性能优化异步加载图片 使滑动效果流畅
- 异步加载js文件并执行js方法:实现异步处理网页的复杂效果(转)
- web前端性能优化,提升静态文件的加载速度