基于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 相关文章推荐
用Javascript 和 CSS 实现脚注(Footnote)效果
Sep 09 Javascript
文本框的字数限制功能jquery插件
Nov 24 Javascript
js 与或运算符 || &amp;&amp; 妙用
Dec 09 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
Mar 03 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
Jan 29 Javascript
javascript内置对象操作详解
Feb 04 Javascript
javascript中apply、call和bind的使用区别
Apr 05 Javascript
VUE2.0中Jsonp的使用方法
May 22 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
Dec 04 Javascript
如何阻止小程序遮罩层下方图层滚动
Sep 05 Javascript
使用kbone解决Vue项目同时支持小程序问题
Nov 08 Javascript
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
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
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
PHP的serialize序列化数据以及JSON格式化数据分析
2015/10/10 PHP
Zend Framework教程之Resource Autoloading用法实例
2016/03/08 PHP
php安装dblib扩展,连接mssql的具体步骤
2017/03/02 PHP
PHP压缩图片功能的介绍
2019/03/21 PHP
javascript 继承实现方法
2009/08/26 Javascript
Javascript 中的 &amp;&amp; 和 || 使用小结
2010/04/25 Javascript
jquery的ajax请求全面了解
2013/03/20 Javascript
javascript判断chrome浏览器的方法
2014/03/26 Javascript
深入理解javascript变量声明
2014/11/20 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
2015/06/15 Javascript
JS实现点击按钮获取页面高度的方法
2015/11/02 Javascript
jQuery实现元素的插入
2017/02/27 Javascript
jQuery tip提示插件(实例分享)
2017/04/28 jQuery
详解React Native顶|底部导航使用小技巧
2017/09/14 Javascript
angularJS的radio实现单项二选一的使用方法
2018/02/28 Javascript
Vue组件之单向数据流的解决方法
2018/11/10 Javascript
JavaScript实现更换背景图片
2019/10/18 Javascript
[00:43]魔廷新尊——痛苦女王至宝捆绑包
2020/06/12 DOTA
python中关于时间和日期函数的常用计算总结(time和datatime)
2013/03/08 Python
python抓取网页中的图片示例
2014/02/28 Python
python实现杨辉三角思路
2017/07/14 Python
详解python3中的真值测试
2018/08/13 Python
python自定义时钟类、定时任务类
2021/02/22 Python
小狗电器官方商城:中国高端吸尘器品牌
2017/03/29 全球购物
办公室文秘自我评价
2013/09/21 职场文书
护理专业毕业生推荐信
2013/10/31 职场文书
元旦获奖感言
2014/03/08 职场文书
愚人节活动策划方案
2014/03/11 职场文书
喜之郎果冻广告词
2014/03/20 职场文书
《池塘边的叫声》教学反思
2014/04/12 职场文书
团委工作总结2015
2015/04/02 职场文书
售后前台接待岗位职责
2015/04/03 职场文书
Python基础之函数嵌套知识总结
2021/05/23 Python
教你用Python+selenium搭建自动化测试环境
2021/06/18 Python
详解SQL的窗口函数
2022/04/21 Oracle