学习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 相关文章推荐
JavaScript中的闭包原理分析
Mar 08 Javascript
js登录弹出层特效
Mar 07 Javascript
JavaScript中的console.profile()函数详细介绍
Dec 29 Javascript
AngularJs 国际化(I18n/L10n)详解
Sep 01 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
Jul 11 Javascript
vuejs父子组件之间数据交互详解
Aug 09 Javascript
详解Vue2 SSR 缓存 Api 数据
Nov 20 Javascript
Vue仿支付宝支付功能
May 25 Javascript
基于游标的分页接口实现代码示例
Nov 12 Javascript
微信小程序实现简易table表格
Jun 19 Javascript
详解package.json版本号规则
Aug 01 Javascript
VUE 自定义组件模板的方法详解
Aug 30 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
PHP下通过系统信号量加锁方式获取递增序列ID
2009/09/25 PHP
PHP统计目录下的文件总数及代码行数(去除注释及空行)
2011/01/17 PHP
解析在zend Farmework下如何创立一个FORM表单
2013/06/28 PHP
php实现的mongodb操作类
2015/05/28 PHP
获取焦点时,利用js定时器设定时间执行动作
2010/04/02 Javascript
Js放到HTML文件中的哪个位置有什么区别
2013/08/21 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
2013/11/07 Javascript
JavaScript实现的日期控件具体代码
2013/11/18 Javascript
巧用replace将文字表情替换为图片
2014/04/17 Javascript
使用SVG基本操作API的实例讲解
2017/09/14 Javascript
Vue组件Draggable实现拖拽功能
2018/12/01 Javascript
vue transition 在子组件中失效的解决
2019/11/12 Javascript
解决vue+elementui项目打包后样式变化问题
2020/08/03 Javascript
jQuery中event.target和this的区别详解
2020/08/13 jQuery
.netcore+vue 实现压缩文件下载功能
2020/09/24 Javascript
[14:19]2018年度COSER大赛-完美盛典
2018/12/16 DOTA
Flask框架的学习指南之制作简单blog系统
2016/11/20 Python
Python设计模式之观察者模式简单示例
2018/01/10 Python
matplotlib 纵坐标轴显示数据值的实例
2018/05/25 Python
Python3中正则模块re.compile、re.match及re.search函数用法详解
2018/06/11 Python
Python 3.3实现计算两个日期间隔秒数/天数的方法示例
2019/01/07 Python
Python完成毫秒级抢淘宝大单功能
2019/06/06 Python
通过cmd进入python的实例操作
2019/06/26 Python
Python3爬虫带上cookie的实例代码
2020/07/28 Python
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
Monki官网:斯堪的纳维亚的独立时尚品牌
2020/11/09 全球购物
华为慧通面试题
2012/09/11 面试题
绘画设计学生的个人自我评价
2013/09/20 职场文书
工作表现自我评价
2014/02/08 职场文书
安全资料员岗位职责范本
2014/06/28 职场文书
学校师德师风整改措施
2014/10/27 职场文书
三峡大坝导游词
2015/01/31 职场文书
专职安全员岗位职责
2015/04/11 职场文书
MySQL详解进行JDBC编程与增删改查方法
2022/06/16 MySQL
CSS使用Flex和Grid布局实现3D骰子
2022/08/05 HTML / CSS
SQLyog的下载、安装、破解、配置教程(MySQL可视化工具安装)
2022/09/23 MySQL