实现高性能JavaScript之执行与加载


Posted in Javascript onJanuary 30, 2016

浏览器在处理HTML页面渲染和JavaScript脚本执行的时候是单一进程的,所以在当浏览器在渲染HTML遇到了<script>标签会先去执行标签内的代码(如果是使用src属性加载的外链文件,则先下载再执行),在这个过程中,页面渲染和交互都会被阻塞。

...虽然会有阻塞,但还是有几招可以减少JavaScript对性能的影响的。

1.script标签的位置

当<script>出现在<head>中的时候,比如:

<head>
  <script type="text/javascript" src="js1.js"></script>
  <script type="text/javascript" src="js2.js"></script>
  <script type="text/javascript" src="js3.js"></script>
</head>

这种加载多个js文件的时候,浏览器就会因先下载执行js代码而阻塞页面渲染从而出现白屏页面(浏览器解析到<body>标签之前,不会渲染页面任何内容),没法预览也没法交互,很差劲的用户体验。

注意:

现代浏览器支持资源并行下载,只限于<script>下载外部资源的时候不会阻塞其他<script>标签,但会阻塞其他资源的下载。
下载JavaScript资源是异步的,但是执行JavaScript代码的时候仍是同步的,同样会造成阻塞。
所以把<script>后置到<body>标签的底部,保证执行脚本之前已完成页面渲染,是一种比较常用的JavaScript优化手段。

2.合并多个script标签

浏览器解析HTML时遇到<script>都会因为执行脚本而有一定的延迟,对于有src属性的外链则<script>更加,多HTTP请求则会带来更多的性能开销,尽量减少这种延迟,也是一种优化手段,可以合并多个js文件来减少HTTP请求的次数,减少三次握手的次数和多余的HTTP头传输,降低响应时间提高用户体验。网上有许多合并js的方案以及工具,在这不叙述了。

3.使用无阻塞下载JavaScript的方法

  1. 使用script标签的defer和async属性
  2. 使用动态创建的script标签来下载执行JavaScript代码
  3. 使用XHR对象下载JavaScript代码并注入页面

3.1.使用script标签的defer和async属性

async和defer属性都是用于异步加载js文件,期间不会才生阻塞浏览器其他进程,区别在于async是加载完之后自动执行,而defer需要等到页面加载之后再执行,需要注意的一点是这两个属性必须在有src属性的<script>标签中(外链脚本)才有效。下面是demo:

<!DOCTYPE html>
<html>
<head>
  <title>defer example</title>
</head>
<body>
  <script type="text/javascript" src="defer.js" defer></script>
  <script>
    alert("script");
  </script>
  <script>
    window.onload= function(){
      alert("load");
    }
  </script>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
</body>
</html>

//defer.js的文件下只有alert("defer");一行代码
async的例子也是相同的页面结构,这里就不摆例子了,可以戳下面的链接。
defer example的链接戳这里!
async example的链接戳这里!

虽然页面结构一样,但不一样的是

打开defer.html依次看到是: 弹出"script"的alert框=>页面渲染出文字=>弹出"defer"的alert框=>弹出"load"的alert框
打开async.html依次看到是: 弹出"script"的alert框=>弹出"async"的alert框=>页面渲染出文字=>弹出"load"的alert框

3.2.使用动态创建的script标签来下载执行JavaScript代码

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "file.js";
document.getElementByTagName("head")[0].appendChild(script);

file.js在script元素添加到页面时就启动下载,使用这种方式的优势在于file.js的下载和执行不会阻塞页面其他进程。

从demo上可以明显的看出动态加载方式可以在alert框弹出之前先看到页面上的文字,但是普通的方式只有在alert框弹出之后才可以看到页面上的文字。

我们可以封装一个跨浏览器的读取script脚本并动态创建script标签的函数:

function loadScript(url,callback){
  var script = document.createElement("script");
  script.type = "text/javascript";
  //检测客户端类型
  if(script.readyState){//IE
    script.onreadystatechange = function(){
      if(script.readyState==="loaded"||script.readyState==="complete"){
        script.onreadystatechange = null;
        callback();
      }
    }
  }else{//其他浏览器
    script.onload = function(){
      callback();
    }  
  }
  
  script.src = url;
  document.getElementsByTagName("head")[0].appendChild(script);
}

这类动态加载脚本的方法兼容性好,也比较简单,是一种常用的无阻塞解决方案。

3.3.使用XHR对象下载JavaScript代码并注入页面

另一种无阻塞加载脚本的方式是使用XMLHttpRequest(XHR)对象获取脚本并注入页面中。
这种技术会先创建一个XHR对象,然后用他下载JavaScript文件,最后通过常见动态<script>元素将代码注入页面中。

var xhr = new XMLHttpRequest();
xhr.open("get","file.js",true);
xhr.onreadystatechange = function(){
  if(xhr.readyState===4){
    if(xhr.status>=200&&xhr.status<300||xhr.status==304){
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.text = xhr.responseText;
      document.body.appendChild(script);
    }
  }
}

以上代码发送GET请求file.js文件,onReadyStateChange检测readyState是否为4(4表示请求完成)和HTTP状态吗是否有效(200表示有效响应,304表示读取缓存)。判断响应有效之后,就动态创建一个<script>标签,内容就是服务器接收到的responseText。

这种方法的优点以及缺点:

优点:下载JavaScript代码可以不立即执行,且兼容性好适合所有主流浏览器。
缺点:JavaScript文件必须与所请求页面处于同一个域,这种情况下JavaScript文件不能从CDN下载,不适合大型的Web应用。

4.一种推荐的无阻塞方案

如果页面有大量的JavaScript代码需要添加,可以先在页面中去外链之前我们封装好的动态读取script脚本的函数loadScript,然后再使用它去加载其他所需脚本,例如:

<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript">
  loadScript("file.js",function(){
    //do something
  });
</script>

这样只需在第一个<script>下载比较精简的loader.js文件时对页面有些许影响,之后的<script>并不会有太多影响。

Javascript 相关文章推荐
ext实现完整的登录代码
Aug 08 Javascript
Prototype ObjectRange对象学习
Jul 19 Javascript
JavaScript Cookie的读取和写入函数
Dec 08 Javascript
jquery 日期分离成年月日的代码
May 14 Javascript
javascript消除window.close()的提示窗口
May 20 Javascript
基于JS实现PHP的sprintf函数实例
Nov 14 Javascript
详解javascript的变量与标识符
Jan 04 Javascript
JS中使用FormData上传文件、图片的方法
Aug 07 Javascript
简单实现jquery焦点图
Dec 12 Javascript
微信小程序组件之srcoll-view的详解
Oct 19 Javascript
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
使用Promise封装小程序wx.request的实现方法
Nov 13 Javascript
深入探秘jquery瀑布流的实现
Jan 30 #Javascript
深入分析Javascript事件代理
Jan 30 #Javascript
详解javascript实现瀑布流列式布局
Jan 29 #Javascript
详解javascript实现瀑布流绝对式布局
Jan 29 #Javascript
理解Javascript文件动态加载
Jan 29 #Javascript
JavaScript操作select元素和option的实例代码
Jan 29 #Javascript
JavaScript学习总结之JS、AJAX应用
Jan 29 #Javascript
You might like
解决phpmyadmin 乱码,支持gb2312和utf-8
2006/11/20 PHP
php+mysql结合Ajax实现点赞功能完整实例
2015/01/30 PHP
PHP学习笔记(三):数据类型转换与常量介绍
2015/04/17 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
PHP7修改的函数
2021/03/09 PHP
javascript下判断一个对象是否具有指定名称的属性的的代码
2010/01/11 Javascript
21个JavaScript事件(Events)属性汇总
2014/12/02 Javascript
javascript实现简单的分页特效
2015/08/12 Javascript
javascript字符串替换函数如何一次性全部替换掉
2015/10/30 Javascript
浅析如何利用JavaScript进行语音识别
2016/10/27 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
2017/06/08 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
2018/08/22 Javascript
vue-cli的工程模板与构建工具详解
2018/09/27 Javascript
浅谈JSON5解决了JSON的两大痛点
2020/12/14 Javascript
Python简明入门教程
2015/08/04 Python
以视频爬取实例讲解Python爬虫神器Beautiful Soup用法
2016/01/20 Python
Python continue继续循环用法总结
2018/06/10 Python
用Python将mysql数据导出成json的方法
2018/08/21 Python
利用Python将文本中的中英文分离方法
2018/10/31 Python
pycharm显示远程图片的实现
2019/11/04 Python
利用Python脚本实现自动刷网课
2020/02/03 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
phpquery中文手册
2021/03/18 PHP
MCAKE蛋糕官方网站:一直都是巴黎的味道
2018/02/06 全球购物
运动会入场解说词300字
2014/01/25 职场文书
前处理班长职位说明书
2014/03/01 职场文书
本科生导师推荐信范文
2014/05/18 职场文书
应用心理学专业求职信
2014/08/04 职场文书
2014年社团工作总结范文
2014/11/27 职场文书
会议邀请函
2015/01/30 职场文书
老公写给老婆的检讨书
2015/05/06 职场文书
卫生院义诊活动总结
2015/05/07 职场文书
描写九月优美句子(39条)
2019/09/11 职场文书
Python中的程序流程控制语句
2022/02/24 Python
动画《新网球王子 U-17 WORLD CUP》希腊队PV公开
2022/04/02 日漫
在MySQL中你成功的避开了所有索引
2022/04/20 MySQL