JS的阻塞特性：当<script>出现的时候，页面必须等待脚本文件的加载、解析、执行完毕后才能继续进行页面的渲染。不管脚本文件是以内联形式还是外部引入的形式出现在<script>中，页面的加载和渲染都必须停下来等待脚本文件的执行完成。因为在脚本文件中可能会修改页面的内容。这就会出现一个问题，当HTML文件中引入很多的外部脚本文件和内联脚本时，可能会导致页面的严重阻塞，影响页面的加载和渲染，用户体验特别的差。因而需要寻找适当的方法来减小脚本文件对页面加载带来的影响。

改善性能的几种方式：

1、 我们都知道脚本文件既可以存放在<head>标签中也可以存放在<body>标签中，并且是循序重复出现的如果将将本文件放在<head>中，如下：

  1.     <!DOCTYPE html>
  2.     <html >
  3.     <head>
  4.       <meta charset="utf-8">
  5.       <title></title>
  6.       <script src="script.js"></script>
  7.           <script src="file1.js"></script>
  8.  <script src="file2.js"></script>
  9.  <script src="file3.js"></script>
  10. <link rel="styleSheet" type="text/css" hhref="styles.css"></link>
  11.     </head>
  12.     <body onload="init()">
  13.     <p> swapCache方法示例</p>
  14.     </body>
  15.     </html>

在上述代码在<head>中加载了四个JS文件，由于脚本阻塞页面的渲染，所以只有当脚本全部下载完并执行完毕后，页面才会开始渲染，在body标签之前是不会渲染任何部分的。同时在加载JS文件时，只有当前一个加载完毕并执行完毕后才会进行下一个JS文件的加载和执行，在早期的浏览器中都是不能进行JS文件的并行下载的，不过目前很多主流的浏览器都支持异步加载JS包，但是页面渲染的其他资源如图片等，仍然或因为JS的加载而阻塞，所以通常建议将JS文件尽量放在<body>标签中，以尽量减少对整个页面下载的影响。

2、由于每个<script>标签的初始下载时都会阻塞页面的渲染，所以尽量减少<script>标签的数量有助于改善页面阻塞情况。也就是说内联JS文件尽量合并，外部引入的文件如果可以合并最好不过，通常单个下载100KB文件比下载4个25KB文件更快。

3、无阻塞脚本的秘诀在于，在页面加载完毕后才加载javascript代码，也就是说当触发window对象的onload事件后再下载脚本。有如下几种方式实现这一效果：

（1）利用属性：async/defer

async:异步加载脚本同时在脚本加载的时执行脚本，不影响页面的加载和渲染

defer：异步加载脚本同时进行页面渲染，但脚本的执行需要等到页面加载完毕

  1.   <!DOCTYPE html>
  2.    <html >
  3.    <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6.     <script defer>
  7.        alert("defer");
  8.     </script>
  9.     <script >
  10.        alert("script");
  11.    </script>
  12.    <script>
  13.       window.onload=function(){
  14.       alert("onload")
  15.        }
  16.   </script>
  17.     <link rel="styleSheet" type="text/css" hhref="styles.css"></link>
  18.     </head>
  19.     <body onload="init()">
  20.     <p> swapCache方法示例</p>
  21.     </body>
  22.     </html>

上述代码在不支持defer的浏览器弹出的顺序依次为:defer,script,load;在支持defer的浏览器中的弹出顺序为：script,defer,load。带有defer属性的标签是在onload的事件执行之前执行的，也即当页面加载完后执行带有defer属性的<script>中大JS代码。但是加载与页面加载异步执行的。

（2）利用动态脚本元素即通过document.createElement("script")动态生成脚本

  1.    var script=document.craateElement("script");
  2.    script.type="text/script"
  3.   script.src="file.js";
  4.    docuemnt.getElementsByTagName("head")[0].appendChild("script");

这种方法的优势在于无论什么时候启动加载，问价的下载和执行都不会阻塞页面的其他进程。该方法具有挂浏览器的兼容性和易用性优势，是最为通用的无阻塞加载的解决方法。

（3）XMLHttpRequest脚本注入的方法

利用XHR对象，借助它进行javascript脚本的下载，最后通过动态创建<script>元素将代码注入到页面当中

  1. var xhr=new XMLHttpRequest();
  2. xhr.open("get","file.js",true);
  3. xhr.onreadystatechange=function(){
  4.     if(xhr.state==4&&xhr.status==200)
  5.      var script=docuemnt.createElement("script");
  6.     script.type="text/script";
  7.    script.text=xhr.reaponseText;
  8.   document.body.appendChild(script);
  9. }

JS脚本文件的位置对页面加载性能影响以及无阻塞脚本（javascript）模式的更多相关文章

  1. 【JavaScript】页面加载性能优化

    核心在于:减少加载时间 1.减少请求次数 2.缩减文件大小 3.异步加载---------------------->比如document.write 4.延迟加载.动态加载---------- ...

  2. js数据显示在文本框中(页面加载显示和按钮触动显示)

    web代码如下: <!DOCTYPE html> <html> <head> <title>jsTest02.html</title> &l ...

  3. 前端开发入门到进阶第三集【js和jquery的执行时间与页面加载的关系】

    https://blog.csdn.net/u014179029/article/details/81603561 [原文链接]:https://www.cnblogs.com/eric-qin/p/ ...

  4. Web前端性能优化——如何提高页面加载速度

    前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒, ...

  5. 【转】Web前端性能优化——如何提高页面加载速度

    前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒, ...

  6. Web前端性能优化——提高页面加载速度

    前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒, ...

  7. 【ASP.NET MVC】提高页面加载速度：脚本优化

    在这里我们说一下脚本优化的三个方法: 一.在我们做Web开发的时候,当我们引用Js文件的时候,我们一般会将js文件放在文档的head标签中,这时当页面加载的时候,浏览器会按着由上到下的顺序,当浏览器遇 ...

  8. angularjs ocLazyLoad分步加载js文件,angularjs ocLazyLoad按需加载js

    用angular有一段时间了,平日里只顾着写代码,没有注意到性能优化的问题,而今有时间,于是捋了捋,讲学习过程记录于此: 问题描述:由于采用angular做了网页的单页面应用,需要一次性在主布局中将所 ...

  9. 20180911 关于页面加载顺序引发的JS的undefined/null错误

    引用: 百度知道-HTML+JavaScript执行顺序问题 这是我在学习JS滚动播放图片案例意外遇到的一个问题,代码完成后console弹出错误警告: Uncaught TypeError: Can ...

随机推荐

  1. soapui中文操作手册(五)----入门与安全测试

    在SoapUI4.0引入的安全测试特点使它非常容易为你来验证你的目标服务的功能性安全,就可以评估您的系统常见的安全攻击的漏洞.特别是如果系统是公开可用的,即使不是这种情况,确保了完全安全的环境也是非常 ...

  2. jQuery的封装和扩展方式

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. Android -----listView的属性大全

    http://www.cnblogs.com/zhengbeibei/archive/2013/03/29/2988814.html 01     <?xml version="1.0 ...

  4. 【POJ3461】Olipo

    Description The French author Georges Perec (1936–1982) once wrote a book, La disparition, without t ...

  5. IEqualityComparer<T>

    在linq中使用union和distinct都不起作用,结果发现必须传入一个实现了IEqualityComparer<T>的比较器 public class CompareUser : I ...

  6. CF 706B 简单二分，水

    1.CF 706B  Interesting drink 2.链接:http://codeforces.com/problemset/problem/706/B 3.总结:二分 题意:给出n个数,再给 ...

  7. Linux 获取设备树源文件（DTS）里描述的资源

    Linux 获取设备树源文件(DTS)里的资源 韩大卫@吉林师范大学 在linux使用platform_driver_register() 注册 platform_driver 时, 需要在 plat ...

  8. Linux的磁盘分区（1）

    分区命名: 1.Linux下的分区命名不同于windows下的命名,对硬盘如IDE硬盘采用类似/dev/hdxy的方式来命名,其中hd表示分区所在的设备类型,如IDE硬盘,x表示硬盘盘号(a为基本主盘 ...

  9. 搜索框js样式（通用型）

    HTML部分代码: -------------------------------------------------------------- <div class="search_ ...

  10. [LintCode] Maximal Rectangle 最大矩形

    Given a 2D boolean matrix filled with False and True, find the largest rectangle containing all True ...