Dzwebs.Net

撰写电脑技术杂文十余年

JS加载优化的方法

Admin | 2016-2-20 20:36:07 | 被阅次数 | 4042

温馨提示!

如果未能解决您的问题,请点击搜索;登陆可复制文章,点击登陆

  放置在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文件。

  ASYNC加载

  async是H5新定义的一个script 属性。 他是另外一种js的加载模式。

  渲染引擎解析文件,如果遇到script(with async)

  继续解析剩下的文件,同时并行加载script的外部资源

  当script加载完成之后,则浏览器暂停解析文档,将权限交给JS引擎,指定加载的脚本。执行完后,则恢复浏览器解析脚本

  这时,谁先加载完,就先执行谁。所以,一般依赖文件就不应该使用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。


该杂文来自: 网页制作杂文

上一篇:div阴影的简单方法

下一篇:按钮事件onclick return false的解释

网站备案号:

网站备案号:滇ICP备11001339号-7

版权属性:

Copyright 2007-2021-forever Inc. all Rights Reserved.

联系方式:

Email:dzwebs@126.com QQ:83539231 访问统计