实现高性能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 相关文章推荐
JavaScript 应用类库代码
Jun 02 Javascript
JavaScript DOM 学习第七章 表单的扩展
Feb 19 Javascript
javascript操作referer详细解析
Mar 10 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
Mar 28 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
Dec 01 Javascript
JavaScript为事件句柄绑定监听函数实例详解
Dec 15 Javascript
js实现手机拍照上传功能
Jan 17 Javascript
Node.js读取文件内容示例
Mar 07 Javascript
浅谈Vuejs Prop基本用法
Aug 17 Javascript
vue项目打包后怎样优雅的解决跨域
May 26 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
Dec 17 Javascript
vue 动态创建组件的两种方法
Dec 31 Vue.js
深入探秘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
PHP4中session登录页面的应用
2008/07/25 PHP
解析Win7 XAMPP apache无法启动的问题
2013/06/26 PHP
6个超实用的PHP代码片段
2015/08/10 PHP
解决AJAX中跨域访问出现'没有权限'的错误
2008/08/20 Javascript
jQuery ui 1.7更新小结
2009/08/15 Javascript
js实现在页面上弹出蒙板技巧简单实用
2013/04/16 Javascript
jquery实现div阴影效果示例代码
2013/09/16 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
2014/11/28 Javascript
Javascript实现div的toggle效果实例分析
2015/06/09 Javascript
有关json_decode乱码及NULL的问题
2015/10/13 Javascript
canvas实现十二星座星空图
2017/02/14 Javascript
基于JavaScript实现轮播图原理及示例
2020/04/10 Javascript
bootstrap中添加额外的图标实例代码
2017/02/15 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
2017/02/18 Javascript
JavaScript中闭包的详解
2017/04/01 Javascript
JS+canvas绘制的动态机械表动画效果
2017/09/12 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
2018/03/19 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
JS实现换肤功能的方法实例详解
2019/01/30 Javascript
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
[55:35]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第二场 1月22日
2021/03/11 DOTA
python+Splinter实现12306抢票功能
2018/09/25 Python
朴素贝叶斯Python实例及解析
2018/11/19 Python
python常用库之NumPy和sklearn入门
2019/07/11 Python
python 和c++实现旋转矩阵到欧拉角的变换方式
2019/12/04 Python
基于python3实现倒叙字符串
2020/02/18 Python
python 日志模块 日志等级设置失效的解决方案
2020/05/26 Python
浅谈python处理json和redis hash的坑
2020/07/16 Python
Web时代变迁及html5与html4的区别
2016/01/06 HTML / CSS
标准毕业生自荐信范文
2013/11/04 职场文书
实习教师个人的自我评价
2013/11/08 职场文书
神州牡丹园的导游词
2019/11/20 职场文书
HTML通过表单实现酒店筛选功能
2021/05/18 HTML / CSS
用 Python 定义 Schema 并生成 Parquet 文件详情
2021/09/25 Python
MySQL Server 层四个日志
2022/03/31 MySQL
Android开发手册Chip监听及ChipGroup监听
2022/06/10 Java/Android