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

改善性能的几种方式：

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

    <!DOCTYPE html>

    <html >

    <head>

      <meta charset="utf-8">

      <title></title>

      <script src="script.js"></script>

          <script src="file1.js"></script>

 <script src="file2.js"></script>

 <script src="file3.js"></script>

<link rel="styleSheet" type="text/css" hhref="styles.css"></link>

    </head>

    <body onload="init()">

    <p> swapCache方法示例</p>

    </body>

    </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：异步加载脚本同时进行页面渲染，但脚本的执行需要等到页面加载完毕

  <!DOCTYPE html>

   <html >

   <head>

    <meta charset="utf-8">

    <title></title>

    <script defer>

       alert("defer");

    </script>

    <script >

       alert("script");

   </script>

   <script>

      window.onload=function(){

      alert("onload")

       }

  </script>

    <link rel="styleSheet" type="text/css" hhref="styles.css"></link>

    </head>

    <body onload="init()">

    <p> swapCache方法示例</p>

    </body>

    </html>

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

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

   var script=document.craateElement("script");

   script.type="text/script"

  script.src="file.js";

   docuemnt.getElementsByTagName("head")[0].appendChild("script");

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

（3）XMLHttpRequest脚本注入的方法

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

var xhr=new XMLHttpRequest();

xhr.open("get","file.js",true);

xhr.onreadystatechange=function(){

    if(xhr.state==4&&xhr.status==200)

     var script=docuemnt.createElement("script");

    script.type="text/script";

   script.text=xhr.reaponseText;

  document.body.appendChild(script);

}

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. Ajax从服务器端获取数据

    写在前面的话 Ajax从服务器获取的数据都是字符串,但是通过不同的解析,可以解析为XML或JSON来进行应用. 一般来说.使用XML格式的数据比较通用,但是服务器和客户端解析起来都比较复杂一些;而使用 ...

  2. linux建立ssh信任关系

    一.建立SSH信任将A主机做为客户端(发起SSH请求 ip:192.168.200.170)将B主机作为服务器端(接收ssh请求   ip:192.168.200.149)以上以主动发起SSH登录请求 ...

  3. BZOJ3898 : 打的士

    设$f_i$表示选择的答案区间左端点为$i$时,区间长度最小是多少. 那么每来一批人的时候,设$nxt$为$i$右边最近的一个可行决策,则$f_i=\max(f_i,nxt-i)$. 注意到$f$的形 ...

  4. URAL 1117. Hierarchy(DP)

    题目链接 这破题,根本看不懂题意啊...题意:一棵中序遍历是1 2 3 4 5...的满二叉树,从a a+1 a+2 a+3 b,总共多少步.x到y的距离为中间有多少个点.a > b没注意2Y. ...

  5. USACO 5.5 Hidden Password(搜索+优化)

    水了好几下. 优化1:开始初始化的时候,如果左边那个也是最小值,那么此点就不用进队了. 优化2:如果队列里的位置,已经超过了后面位置的初始位置,那么后面这个位置也没用了. /* ID: cuizhe ...

  6. js-小效果-手风琴

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  7. 详解SpringMVC请求的时候是如何找到正确的Controller[附带源码分析]

    目录 前言 源码分析 重要接口介绍 SpringMVC初始化的时候做了什么 HandlerExecutionChain的获取 实例 资源文件映射 总结 参考资料 前言 SpringMVC是目前主流的W ...

  8. not only ... but also

    轉載自http://210.240.55.2/~t311/moe/engb6/b6grammar/b6notonly.htm not only ... but also ... 是「不僅‧‧‧也是‧‧ ...

  9. 使用Privoxy做智能代理切换

    使用Privoxy做智能代理切换 You take the blue pill, the story ends, you wake up in your bed, and believe whatev ...

  10. pdf转word

    一.刚需 pdf转word,这个需求肯定是有的.但是大家都知道,pdf是用来排版打印的,所以编辑起来会比较麻烦,所以,大家都会尝试将pdf的内容转成word,然后再进行编辑. 二.方法 1.用offi ...