学习javascript文件加载优化


Posted in Javascript onFebruary 19, 2016

在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

1、js文件放置位置应该放置到body末尾
2、如果使用async的话,最后加上defer以求向下兼容

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
jQuery中使用了document和window哪些属性和方法小结
Sep 13 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
Aug 28 Javascript
javaScript中Math()函数注意事项
Jun 18 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
May 17 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
Dec 07 Javascript
canvas实现图像布局填充功能
Feb 06 Javascript
js实现城市级联菜单的2种方法
Jun 23 Javascript
解读vue生成的文件目录结构及说明
Nov 27 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
Mar 01 Javascript
微信小程序实现日期格式化和倒计时
Nov 01 Javascript
Vue多环境代理配置方法思路详解
Jun 21 Javascript
react使用CSS实现react动画功能示例
May 18 Javascript
初识angular框架后的所思所想
Feb 19 #Javascript
复杂的javascript窗口分帧解析
Feb 19 #Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
Feb 19 #Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
Feb 19 #Javascript
谈一谈javascript中继承的多种方式
Feb 19 #Javascript
多种js图片预加载实现方式分享
Feb 19 #Javascript
JS实现1000以内被3或5整除的数字之和
Feb 18 #Javascript
You might like
Windows2003 下 MySQL 数据库每天自动备份
2006/12/21 PHP
php实现图片局部打马赛克的方法
2015/02/11 PHP
禁止F5等快捷键的JS代码
2007/03/06 Javascript
document.open() 与 document.write()的区别
2007/08/13 Javascript
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
2011/03/01 Javascript
js调用css属性写法
2013/09/21 Javascript
Ubuntu中搭建Nodejs开发环境过程分享
2014/06/01 NodeJs
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
简单纯js实现点击切换TAB标签实例
2015/08/23 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
2015/12/08 Javascript
深入浅析JavaScript中的Function类型
2016/07/09 Javascript
JQuery遍历元素的后代和同胞实现方法
2016/09/18 Javascript
JavaScript 拖拽实例代码
2016/09/21 Javascript
几种响应式文字详解
2017/05/19 Javascript
详解webpack介绍&amp;安装&amp;常用命令
2017/06/29 Javascript
vue实现条件叠加搜索的解决方法
2019/05/28 Javascript
[52:20]DOTA2-DPC中国联赛正赛 SAG vs XGBO3 第一场 3月5日
2021/03/11 DOTA
python使用opencv对图像mask处理的方法
2019/07/05 Python
python简单实现矩阵的乘,加,转置和逆运算示例
2019/07/10 Python
Python threading的使用方法解析
2019/08/28 Python
Python 中list ,set,dict的大规模查找效率对比详解
2019/10/11 Python
keras 如何保存最佳的训练模型
2020/05/25 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
Python的logging模块基本用法
2020/12/24 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
匡威英国官网:Converse英国
2018/12/02 全球购物
质检部职责
2013/12/28 职场文书
偷看我的初中毕业鉴定
2014/01/29 职场文书
2014年小学工作总结
2014/11/26 职场文书
门卫岗位职责
2015/02/09 职场文书
2015年反洗钱工作总结
2015/04/25 职场文书
员工开除通知书
2015/04/25 职场文书
2015年基层党支部工作总结
2015/05/21 职场文书
大学生团支书竞选稿
2015/11/21 职场文书
应届毕业生的自我评价
2019/06/21 职场文书
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP