Web前端面试指导(三十八):js延迟加载的方式有哪些?
2016-10-11 20:32
585 查看
题目点评
主要考察对程序的性能方面是否有研究,程序的性能是一个项目不断地追求的,通常也是项目完成后需要长期做的一件事情,像腾讯QQ依然对程序的性能不断地做优化,让用户的体验更好,性能优化的核心思想就是快,可以预先准备数据(如缓存的使用),可以按需获取,可以分段获取等都是常见的优化手段。解题思路
1.defer
属性
<scriptsrc="file.js" defer></script>
浏览器会并行下载 file.js和其它有 defer 属性的script,而不会阻塞页面后续处理。defer属性在IE 4.0中就实现了,超过10多年了!Firefox从 3.5 开始支持defer属性 。
注:所有的defer脚本保证是按顺序依次执行的。
2.async
属性
<scriptsrc="file.js" async></script>
async属性是HTML5新增的。作用和defer类似,但是它将在下载后尽快执行,不能保证脚本会按顺序执行。它们将在onload 事件之前完成。
Firefox3.6、Opera 10.5、IE 9和 最新的Chrome 和 Safari 都支持 async 属性。可以同时使用 async 和 defer,这样IE 4之后的所有IE 都支持异步加载。
3.动态创建DOM方式
<script type="text/javascript"> function downloadJSAtOnload() { varelement = 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>
4.使用Jquery的getScript()方法
$.getScript("outer.js",function(){//回调函数,成功获取文件后执行的函数 console.log("脚本加载完成") });
从源码可以看出,这个方法最后还是调用了jQuery.ajax()来请求了js文件的。
相关文章推荐
- Web前端面试指导(十一):样式导入有哪些方式?
- js延迟加载的方式有哪些
- Web前端面试指导(十五):CSS样式-display有哪些作用?
- 爱创课堂每日一题第五十二天- js延迟加载的方式有哪些?
- Web前端面试指导(五十一):javascript的编写规范有哪些?
- Web前端面试指导(四十):CSS3有哪些新特性?
- Web前端面试指导(二十二):用js实现千位分隔符,怎么实现?
- js延迟加载的方式有哪些?
- 爱创课堂每日一题100天- js延迟加载的方式有哪些
- Web前端面试指导(十):元素定位有哪些?
- Web前端面试指导(五十):CSS样式书写有哪些规范?
- Web前端面试指导(四十一):html5有哪些新特性、移除了那些元素?
- Web前端面试指导(四十七):页面优化有哪些方法
- Web前端面试指导(十二):::before 和:before有什么区别?
- 转:web前端面试题合集 (Javascript相关)(js异步加载详解)
- Web前端面试指导(五):掌握面试技巧,让面试变得轻松
- Web前端面试指导(九):盒子模型你是怎么理解的?
- 前端优化之图片延迟加载(lazyload.js)
- Web前端面试指导(十三):css样式的优先级是怎么样的?
- Web前端面试指导(六):面试后需要总结和交流