学习javascript文件加载优化
2016-02-19 00:00
591 查看
在js引擎部分,我们可以了解到,当渲染引擎解析到script标签时,会将控制权给JS引擎,如果script加载的是外部资源,则需要等待下载完后才能执行。 所以,在这里,我们可以对其进行很多优化工作。
放置在BODY底部
为了让渲染引擎能够及早的将DOM树给渲染出来,我们需要将script放在body的底部,让页面尽早脱离白屏的现象,即会提早触发DOMContentLoaded事件. 但是由于在IOS Safari, Android browser以及IOS webview里面即使你把js脚本放到body尾部,结果还是一样, 所以这里需要另外的操作来对js文件加载进行优化.
DEFER加载
这是HTML4中定义的一个script属性,它用来表示的是,当渲染引擎遇到script的时候,如果script引用的是外部资源,则会暂时挂起,并进行加载。 渲染引擎继续解析下面的HTML文档,解析完时,则会执行script里面的脚本。
他的支持度是<=IE9的.
并且,他的执行顺序,是严格依赖的,即:
当页面解析完后,他便会开始按照顺序执行 outside1 和 outside2文件。
如果你在IE9以下使用defer的话,可能会遇到 它们两个不是顺序执行的,这里需要一个hack进行处理,即在两个中间加上一个空的script标签
ASYNC加载
async是H5新定义的一个script 属性。 他是另外一种js的加载模式。
渲染引擎解析文件,如果遇到script(with async)
继续解析剩下的文件,同时并行加载script的外部资源
当script加载完成之后,则浏览器暂停解析文档,将权限交给JS引擎,指定加载的脚本。
执行完后,则恢复浏览器解析脚本
可以看出async也可以解决 阻塞加载 这个问题。不过,async执行的时候是异步执行,造成的是,执行文件的顺序不一致。即:
这时,谁先加载完,就先执行谁。所以,一般依赖文件就不应该使用async而应该使用defer.
defer的兼容性比较差,为IE9+,不过一般是在移动端使用,也就不存在这个problem了。
脚本异步
脚本异步是一些异步加载库(比如require)使用的基本加载原理. 直接上代码:
这时候,可以异步加载文件,不会造成阻塞的效果.
但是,这样加载的js文件是无序的,无法正常加载依赖文件。
这时候,我们需要对上述函数进行优化.
但是,使用脚本一步加载的话,需要等待css文件加载完后,才开始进行加载,不能充分利用浏览器的并发加载优势。而使用静态文本加载async或者defer则不会出现这个问题。
使用脚本异步加载时,只能等待css加载完后才会加载
使用静态的async加载时,css和js会并发一起加载
关于这三种如何取舍,那就主要看leader给我们目标是什么,是兼容IE8,9还是手机端,还是桌面浏览器,或者两两组合。
但是对于单独使用某一个技能的场景,使用时需要注意一些tips。
1、js文件放置位置应该放置到body末尾
2、如果使用async的话,最后加上defer以求向下兼容
通常,我们使用的加载都是defer加载,因为很强的依赖关系。
以上就是本文的全部内容,希望对大家的学习有所帮助。
动态加载JS文件的三种方法
php ci框架中加载css和js文件失败的解决方法
使用jQuery动态加载js脚本文件的方法
JSP加载JS文件不起作用的有效解决方法
js怎么判断flash swf文件是否加载完毕
在css加载完毕后自动判断页面是否加入css或js文件
jquery动态加载js/css文件方法(自写小函数)
如何调试异步加载页面里包含的js文件
JS获取浏览器语言动态加载JS文件示例代码
放置在BODY底部
为了让渲染引擎能够及早的将DOM树给渲染出来,我们需要将script放在body的底部,让页面尽早脱离白屏的现象,即会提早触发DOMContentLoaded事件. 但是由于在IOS Safari, Android browser以及IOS webview里面即使你把js脚本放到body尾部,结果还是一样, 所以这里需要另外的操作来对js文件加载进行优化.
DEFER加载
这是HTML4中定义的一个script属性,它用来表示的是,当渲染引擎遇到script的时候,如果script引用的是外部资源,则会暂时挂起,并进行加载。 渲染引擎继续解析下面的HTML文档,解析完时,则会执行script里面的脚本。
<script src="outside.js" defer></script>
他的支持度是<=IE9的.
并且,他的执行顺序,是严格依赖的,即:
<script src="outside1.js" defer></script> <script src="outside2.js" defer></script>
当页面解析完后,他便会开始按照顺序执行 outside1 和 outside2文件。
如果你在IE9以下使用defer的话,可能会遇到 它们两个不是顺序执行的,这里需要一个hack进行处理,即在两个中间加上一个空的script标签
<script src="outside1.js" defer></script> <script></script> //hack <script src="outside2.js" defer></script>
ASYNC加载
async是H5新定义的一个script 属性。 他是另外一种js的加载模式。
渲染引擎解析文件,如果遇到script(with async)
继续解析剩下的文件,同时并行加载script的外部资源
当script加载完成之后,则浏览器暂停解析文档,将权限交给JS引擎,指定加载的脚本。
执行完后,则恢复浏览器解析脚本
可以看出async也可以解决 阻塞加载 这个问题。不过,async执行的时候是异步执行,造成的是,执行文件的顺序不一致。即:
<script src="outside1.js" async></script> <script src="outside2.js" async></script>
这时,谁先加载完,就先执行谁。所以,一般依赖文件就不应该使用async而应该使用defer.
defer的兼容性比较差,为IE9+,不过一般是在移动端使用,也就不存在这个problem了。
脚本异步
脚本异步是一些异步加载库(比如require)使用的基本加载原理. 直接上代码:
function asyncAdd(src){ var script = document.createElement('script'); script.src = src; document.head.appendChild(script); } //加载js文件 asyncAdd("test.js");
这时候,可以异步加载文件,不会造成阻塞的效果.
但是,这样加载的js文件是无序的,无法正常加载依赖文件。
这时候,我们需要对上述函数进行优化.
var asyncAdd = (function(){ var head = document.head, script; return function(src){ script = document.createElement('script'); script.src= src; script.async=false; document.head.appendChild(script); } })(); //加载文件 asyncAdd("first.js"); asyncAdd("second.js"); //或者简便一点 ["first.js","second.js"].forEach((src)=>{async(src);});
但是,使用脚本一步加载的话,需要等待css文件加载完后,才开始进行加载,不能充分利用浏览器的并发加载优势。而使用静态文本加载async或者defer则不会出现这个问题。
使用脚本异步加载时,只能等待css加载完后才会加载
使用静态的async加载时,css和js会并发一起加载
关于这三种如何取舍,那就主要看leader给我们目标是什么,是兼容IE8,9还是手机端,还是桌面浏览器,或者两两组合。
但是对于单独使用某一个技能的场景,使用时需要注意一些tips。
1、js文件放置位置应该放置到body末尾
2、如果使用async的话,最后加上defer以求向下兼容
<script src="test.js" async defer></script> //如果两者都支持,async会默认覆盖掉defer //如果只支持一个,则执行对应的即可
通常,我们使用的加载都是defer加载,因为很强的依赖关系。
以上就是本文的全部内容,希望对大家的学习有所帮助。
您可能感兴趣的文章:
用ajax动态加载需要的js文件动态加载JS文件的三种方法
php ci框架中加载css和js文件失败的解决方法
使用jQuery动态加载js脚本文件的方法
JSP加载JS文件不起作用的有效解决方法
js怎么判断flash swf文件是否加载完毕
在css加载完毕后自动判断页面是否加入css或js文件
jquery动态加载js/css文件方法(自写小函数)
如何调试异步加载页面里包含的js文件
JS获取浏览器语言动态加载JS文件示例代码
相关文章推荐
- 基于JavaScript实现弹出框效果
- JavaScript深度复制(deep clone)的实现方法
- javascript每日必学之循环
- javascript下使用Promise封装FileReader
- js下将金额数字每三位一逗号分隔
- js面向对象的写法
- js之番外
- JSP基础语法1
- JSP基础语法2
- JSP内置对象
- json、xml的区别
- JSON介绍
- js的解析--预处理(三)
- jsp的 javascript中 嵌套 html 注释
- Createjs学习心得之使用EaselJs实现拖拽效果
- 我的第一个jsp程序
- JSP的自定义标签(五)之Tag File
- Javascript自学-4
- Fastjson反序列化泛型类型时候的一个问题
- JSP的自定义标签(四)之定义函数