从优酷官网看javascrpt加载

---

一、背景

今天用学校机房的电脑时，没登录学校网入口竟然可以使用google搜索，于是我就想优酷官网一下看一下火影（嘻嘻嘻）。无奈，官网这样了：

这是咋过回事呢？？我就开始思考，javascript在加载时不是会阻塞网页的执行吗？那么javascript标签应该放在那里呢？？于是，我右键检查源码：

竟然发现head标签里面竟然没有script标签（细心的朋友可能已经发现了在body标签里面内容的末尾存在javascript标签）。这是怎么回事，于是我搜索了一下浏览器中script的加载方式。发现了这篇文章javasript的性能优化：加载和执行。

---

二、脚步的位置

2.1 head标签中

开发人员习惯将script标签放在head标签中。但是，由于在head中加载script标签会阻塞页面渲染，那么在script标签之后的元素就不能被渲染执行了。我们就拿优酷官网来说嘛，这样的话，我们就连下面这个页面都看不到（因为这些html元素都是在head之后的）。

2.2 推荐将所有script标签尽可能放到body标签的底部

如标题所说，将所有<script>标签尽可能放到标签的底部，就可以保证几乎所有的网页的内容都显示在网页中去了（虽然美观，交互有一定的影响）。于是我就在优酷官网上找script标签的位置，果不其然，还真让我给找到了。

红笔对应的位置（div）是页面展示的内容，蓝笔对应的就是在body标签末尾的javascript标签。

---

三、组织脚步

需要提一下的是，javascript的标签的个数越少越好。因为：

考虑到 HTTP 请求会带来额外的性能开销，因此下载单个 100Kb 的文件将比下载 5 个 20Kb 的文件更快。也就是说，减少页面中外链脚本的数量将会改善性能。

四、无阻塞脚步

无阻赛脚本的意思是：

不会阻塞浏览器渲染。

减少脚步http请求的次数并不一定完全有效：

尽管下载单个较大的 JavaScript 文件只产生一次 HTTP 请求，却会锁死浏览器的一大段时间

这就意味着要在网页被渲染加载完毕之后再加载我们的script标签。这就要用到window的onload对象了。有多种方式实现这个效果：

1. <script type=“text/javascript” src=“script1.js” defer>，但是支持的浏览器有限
2. 动态加载脚步元素。

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

3. 使用 XMLHttpRequest(XHR)对象

   var xhr = new XMLHttpRequest();
   xhr.open("get", "script1.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);
    	   }
      }
   };
   xhr.send(null);
   

五、参考文档

javasript的性能优化：加载和执行