基于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获取客户端计算机硬件及系统等信息的方法
Jan 02 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
Feb 19 Javascript
jQuery中prevUntil()方法用法实例
Jan 08 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
May 24 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
Aug 20 Javascript
Vue的百度地图插件尝试使用
Sep 06 Javascript
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
vue与TypeScript集成配置最简教程(推荐)
Oct 17 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
May 08 Javascript
react项目实践之webpack-dev-serve
Sep 14 Javascript
JavaScript使用类似break机制中断forEach循环的方法
Nov 13 Javascript
详解vue 命名视图
Aug 14 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
10个实用的PHP正则表达式汇总
2014/10/23 PHP
jQuery 开发者应该注意的9个错误
2012/05/03 Javascript
js单例模式的两种方案
2013/10/22 Javascript
js Date概念详细介绍
2013/11/22 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
2016/04/18 Javascript
js验证框架之RealyEasy验证详解
2016/06/08 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
2017/04/13 Javascript
js 索引下标之li集合绑定点击事件
2018/01/12 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
2018/01/29 jQuery
Vue的路由动态重定向和导航守卫实例
2018/03/17 Javascript
js实现点击展开隐藏效果(实例代码)
2018/09/28 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
2020/08/20 Javascript
js实现简单商品筛选功能
2021/02/02 Javascript
[01:14]2014DOTA2展望TI 剑指西雅图newbee战队专访
2014/06/30 DOTA
python提取页面内url列表的方法
2015/05/25 Python
python定时执行指定函数的方法
2015/05/27 Python
Win7下搭建python开发环境图文教程(安装Python、pip、解释器)
2016/05/17 Python
python判断一个集合是否为另一个集合的子集方法
2018/05/04 Python
Python-while 计算100以内奇数和的方法
2019/06/11 Python
利用anaconda保证64位和32位的python共存
2021/03/09 Python
python3实现斐波那契数列(4种方法)
2019/07/15 Python
pandas-resample按时间聚合实例
2019/12/27 Python
Python TKinter如何自动关闭主窗口
2020/02/26 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
利用CSS3实现文本框的清除按钮相关的一些效果
2015/06/23 HTML / CSS
详解Sticky Footer 绝对底部的两种套路
2017/11/03 HTML / CSS
小学竞选班干部演讲稿
2014/08/20 职场文书
省委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
践行党的群众路线心得体会
2014/11/05 职场文书
观后感格式
2015/06/19 职场文书
2015暑假实习报告范文
2015/07/13 职场文书
2015年幼儿园国庆节活动总结
2015/07/30 职场文书
文艺委员竞选稿
2015/11/19 职场文书
java泛型通配符详解
2021/07/25 Java/Android
Java实现添加条码或二维码到Word文档
2022/06/01 Java/Android