基于js文件加载优化(详解)


Posted in Javascript onJanuary 03, 2018

在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里面的脚本。

<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。

js文件放置位置应该放置到body末尾

如果使用async的话,最后加上defer以求向下兼容

<script src="test.js" async defer></script> //如果两者都支持,async会默认覆盖掉defer
//如果只支持一个,则执行对应的即可

通常,我们使用的加载都是defer加载(因为很强的依赖关系).

以上这篇基于js文件加载优化(详解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Firefox+FireBug使JQuery的学习更加轻松愉快
Jan 01 Javascript
JavaScript打字小游戏代码
Dec 26 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
Apr 02 Javascript
js中的getAttribute方法使用示例
Aug 01 Javascript
js防阻塞加载的实现方法
Sep 09 Javascript
jQuery编写网页版2048小游戏
Jan 06 Javascript
Angular2下使用pdf插件的方法详解
Apr 29 Javascript
基于ES6 Array.of的用法(实例讲解)
Sep 05 Javascript
js 毫秒转天时分秒的实例
Nov 17 Javascript
Vue.js 中的实用工具方法【推荐】
Jul 04 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
Sep 16 Javascript
layui监听select变化,以及设置radio选中的方法
Sep 24 Javascript
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 #jQuery
js 取消页面可以选中文字的功能方法
Jan 02 #Javascript
js阻止默认右键的下拉菜单方法
Jan 02 #Javascript
webpack实用小功能介绍
Jan 02 #Javascript
js最简单的双向绑定实例讲解
Jan 02 #Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
Jan 02 #Javascript
js原生方法被覆盖,从新赋值原生的方法
Jan 02 #Javascript
You might like
php遍历CSV类实例
2015/04/14 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
Yii2超好用的日期和时间组件(值得收藏)
2016/05/05 PHP
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
2006/12/27 Javascript
javascript检查日期格式的函数[比较全]
2008/10/17 Javascript
浅谈javascript 面向对象编程
2009/10/28 Javascript
js给onclick事件赋值,动态传参数实例解说
2013/03/28 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
2013/11/19 Javascript
jQuery绑定事件不执行但alert后可以正常执行
2014/06/03 Javascript
JS替换字符串中空格方法
2015/04/17 Javascript
JavaScript中的ajax功能的概念和示例详解
2016/10/17 Javascript
3种不同的ContextMenu右键菜单实现代码
2016/11/03 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
2017/09/26 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
js自定义trim函数实现删除两端空格功能
2018/02/09 Javascript
Bootstrap Paginator+PageHelper实现分页效果
2018/12/29 Javascript
js实现文章目录索引导航(table of content)
2020/05/10 Javascript
python使用cookielib库示例分享
2014/03/03 Python
Python格式化css文件的方法
2015/03/10 Python
Python实现调用另一个路径下py文件中的函数方法总结
2018/06/07 Python
numpy中矩阵合并的实例
2018/06/15 Python
python opencv 读取本地视频文件 修改ffmpeg的方法
2019/01/26 Python
Python 虚拟空间的使用代码详解
2019/06/10 Python
python tkinter实现屏保程序
2019/07/30 Python
详细整理python 字符串(str)与列表(list)以及数组(array)之间的转换方法
2019/08/30 Python
html5 video标签屏蔽右键视频另存为的js代码
2013/11/12 HTML / CSS
HTML5+CSS3模仿优酷视频截图功能示例
2017/01/05 HTML / CSS
h5页面背景图很长要有滚动条滑动效果的实现
2021/01/27 HTML / CSS
.NET面试问题集
2015/12/08 面试题
毕业生见习报告总结
2014/11/08 职场文书
2015年中学元旦晚会活动方案
2014/12/09 职场文书
2014年路政工作总结
2014/12/10 职场文书
小区保洁员岗位职责
2015/04/10 职场文书
小学大队委竞选口号
2015/12/25 职场文书
交通安全学习心得体会
2016/01/18 职场文书
golang使用map实现去除重复数组
2022/04/14 Golang