实现高性能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 相关文章推荐
JS 无法通过W3C验证的处理方法
Mar 09 Javascript
JavaScript格式化数字的函数代码
Nov 30 Javascript
11款新鲜的jQuery插件[附所有demo下载]
Jan 24 Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
Dec 20 Javascript
Javascript中call的两种用法实例
Dec 13 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
Sep 06 Javascript
JavaScript中的object转换成number或string规则介绍
Dec 31 Javascript
JavaScript 异常处理 详解
Feb 06 Javascript
Web 开发中Ajax的Session 超时处理方法
Jan 19 Javascript
微信小程序之分享页面如何返回首页的示例
Mar 28 Javascript
.vue文件 加scoped 样式不起作用的解决方法
May 28 Javascript
微信小程序实现选择地址省市区三级联动
Jun 21 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
PHP5中的时间相差8小时的解决办法
2008/03/28 PHP
Zend Framework动作助手(Zend_Controller_Action_Helper)用法详解
2016/03/05 PHP
php、java、android、ios通用的3des方法(推荐)
2016/09/09 PHP
PHP上传Excel文件导入数据到MySQL数据库示例
2016/10/25 PHP
PHP如何读取由JavaScript设置的Cookie
2017/03/22 PHP
jquery创建div 实现代码
2009/04/27 Javascript
js以对象为索引的关联数组
2010/07/04 Javascript
利用腾讯的ip地址库做ip物理地址定位
2010/07/24 Javascript
JQuery异步加载无限下拉框级联功能实现示例
2014/02/19 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
2014/06/05 Javascript
浅析Node.js 中 Stream API 的使用
2015/10/23 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
2016/05/18 Javascript
关于ES6的六个小特性(二)
2017/02/20 Javascript
AngularJS全局警告框实现方法示例
2017/05/18 Javascript
微信小程序表单弹窗实例
2018/07/19 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
2019/06/04 Javascript
nodejs读取图片返回给浏览器显示
2019/07/25 NodeJs
详解mpvue实现对苹果X安全区域的适配
2019/07/31 Javascript
VUE动态生成word的实现
2020/07/26 Javascript
python字典多条件排序方法实例
2014/06/30 Python
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
Python使用pymysql小技巧
2017/06/04 Python
Django中reverse反转并且传递参数的方法
2019/08/06 Python
Python3基本输入与输出操作实例分析
2020/02/14 Python
泰坦健身器材:Titan Fitness
2018/02/13 全球购物
《我的第一本书》教学反思
2014/02/15 职场文书
工作违纪检讨书
2014/02/17 职场文书
《哪吒闹海》教学反思
2014/02/28 职场文书
法学专业求职信
2014/07/15 职场文书
党课心得体会范文
2014/09/09 职场文书
会计专业自荐信范文
2015/03/05 职场文书
2015年发展党员工作总结报告
2015/03/31 职场文书
运动会三级跳加油稿
2015/07/21 职场文书
2016反腐倡廉警示教育心得体会
2016/01/13 职场文书
应用最多的公文《通知》如何写?
2019/04/02 职场文书
CSS使用伪类控制边框长度的方法
2022/01/18 HTML / CSS