JS加载与执行优化-优快云博客

性能已经越来越被重视了，面对越来越多的需求，越来越多的js代码，我们是应该好好研究研究性能的问题了！
本系列笔记是《高性能js》的图书笔记，高手和大牛绕行。欢迎大家指出错误，一起进步！

今天先看看第一个问题：js的加载和执行。

因为大部分浏览器内核都只用单一进程来处理界面渲染和js执行，从而养成了js嚣张跋扈的性格特点，每当浏览器内核看到<script>标签时，都停止了手里其他的活，一心一意的伺候js的加载和运行，同样的事情也会发生在使用src属性加载js的过程中。在整个过程中，页面渲染和用户交互被完全的阻塞了。因此，我们就需要讨论讨论<script>标签的位置了：

  1：脚本位置
      html规范指出<script>标签可以放到文档的任何位置，很明显，这里面有坑！
            a : 当我们把<script>标签放在<head>标签中时，当浏览器内核解析到这行标签的时候，加载和执行js ，而完完全全的阻塞页面渲染和用户交互，这个时候还没有到<body>标签，很不幸页面一片白色的海洋！
            b : 因此，我们的最佳实践就是放到</body>的前面，这时候,dom已经加载和解析完了，页面也渲染出来了，再去加载和运行js，对用户的体验更好。
   2 ：组织脚本
      说白了就是合并压缩js文件，减少http请求！但是也不是绝对的，还是要根据具体的需求而定。如果真的有多个Js文件要加载，最佳实践就是把<script>标记放到页面底部，同时加载多个js文件。
3 ：无阻塞的脚本（重点来了）
            前面提到的方法，都不能解决js阻塞的问题，我们这里要提到的就是解决js加载和执行的阻塞问题：
                           a :  延迟的脚本  <script type="text/javascript" src="file1.js" defer></script>defer属性告诉浏览器该js文件不会修改dom的结构和样式，因此浏览器可以很放心的延迟加载该js文件。这种方式最大的问题就是兼容性问题，不是所有的浏览器都会支持该属性。
                           b：动态脚本元素通过dom动态的创建<script>,

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "file1.js";
document.body.appendChild(script);

复制代码

file1.js文件在该script元素添加到dom树的时候开始下载和执行，这种技术的重点就是文件的下载和执行不会阻塞页面其他进程。
还有一种很重要的方法 XMLHttpRequest脚本注入：

var xhr = new XMLHttpRequest();
xhr.open("GET","file1.js",true);
xhr.onreadystatechange = function (
if(xhr.readyState == 4){
var script = document.createElement("script");
script.type = "text/javascript";
script.text = xhr.responseText;
document.body.appendChild(script);
}
xhr.send(null);
);

复制代码

这种方式的局限性主要是由于ajax的限制，所请求的js文件必须和该页面处于同一个源。

总结：向页面中大量添加js文件的最佳实践就是分两步a：先<script>添加需要动态加载所需要的代码 b:加载初始化页面所剩下的代码。
<script type="text/javascript" src = "loader.js"></script>

高性能JS系列读书笔记