高性能JavaScript读书笔记

根据引言，作者将全书划分为四个部分：
一、页面加载js的最佳方式（开发前准备）
二、改善js代码的编程技巧（开发中）
三、构建与部署（发布）
四、发布后性能检测与问题追踪（线上问题优化）
这样的组织结构也符合我们的开发习惯，首先进入第一部分。

一、JavaScript加载

起因：script脚本的加载会阻塞浏览器渲染页面和处理用户交互，如果加载的script脚本太多太大，就会长时间阻塞，造成页面假死。
解决方案：

1.脚本位置

放在底部。
放在底部可以保证页面主体结构已经基本加载完成展示给用户，才去加载script脚本。这条准则也有特例，如果是一些公司的埋点脚本，可能要求必须放在head里，以确保能上报页面加载时长。

2.组织脚本

减少script数量，合并脚本。
不论是使用concat打包工具合并，还是cdn提供的combo，都能达到该目的。

3.无阻塞脚本

在页面加载完成之后再去触发加载js，这样可以防止script加载阻塞页面。

原生defer

script标签自带defer属性，可以达到这个目的。捎带一提，async属性可以触发异步加载，合理利用了宽带。

动态脚本

或者使用动态脚本元素，通过js文件动态创建script标签，文件加载完成之后会立刻执行。

这个技术的重点在于不论在何时启动下载，文件的下载和执行过程都不会阻塞页面其他进程。

XMLHttpRequest脚本注入

通过XHR加载脚本，由于不是在script标签中加载，所以可以控制script标签中的代码执行时间。在需要的时候再去把script标签添加到页面上。
这也是jsonp的原理。

作者推荐的无阻塞模式

先加载很少量的jsLoader代码，之后通过loader来加载剩余的代码。

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); } loadScript('rest.js', function () { Rest.init() });