高性能javascript--读书笔记

非阻塞 JavaScript 下载

• 1、将脚本放在底部
• 2、defer<script type="text/javascript" src="file1.js" defer></script> ，当一个 defer 的 JavaScript 文件被下载时，它不会阻塞浏览器的其他处理过程，所以这些文件可以与页面的其他资源一 起并行下载。 任何带有 defer 属性的<script>元素在 DOM 加载完成之前不会被执行 （在 onload 事件句柄被调用之前)
• 3、动态脚本加载

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 { //Others
script.onload = function(){ callback();
}; }
script.src = url;
document.getElementsByTagName_r("head")[0].appendChild(script); }

• 4、XHR 脚本注入

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

• 5、总结、推荐的向页面加载大量 JavaScript 的方法分为两个步骤:第一步，包含动态加载 JavaScript 所需的代码， 然后加载页面初始化所需的除 JavaScript 之外的部分。这部分代码尽量小，可能只包含 loadScript()函数， 它下载和运行非常迅速，不会对页面造成很大干扰。当初始代码准备好之后，用它来加载其余的 JavaScript。

Data Access 数据访问

JavaScript 中有四种基本的数据访问位置:

• 1、Literal values 直接量，直接量仅仅代表自己，而不存储于特定位置。 JavaScript 的直接量包括:字符串，数字，布尔值，对象， 数组，函数，正则表达式，具有特殊意义的空值，以及未定义。
• 2、Variables 变量，开发人员使用 var 关键字创建用于存储数据值。
• 3、Array items 数组项，具有数字索引，存储一个 JavaScript 数组对象。
• 4、Object members 对象成员，具有字符串索引，存储一个 JavaScript 对象。

标识符识别性能

• 在运行期上下文的作用域链中， 一个标识符所处的位置越深，它的读写速度就越慢。所以，函数中局部变量的访问速度总是最快的，而全局变量通常是最慢的(优化的 JavaScript 引擎在某些情况下可以改变这种状况)。请记住，全局变量总是 处于运行期上下文作用域链的最后一个位置，所以总是最远才能触及的。优化：全局变量的引用存储在一个局部变量中，然后使用这个局部变量代替全局变量
• 改变作用域链，with和catch会将对象中标识符的解析添加到作用域链的最前端
• 动态作用域，
• 闭包，作用域，和内存
• 对象，实例成员和原型成员

var book = {
title: "High Performance JavaScript",
publisher: "Yahoo! Press" };
alert(book.toString()); //"[object Object]" 
book 对象有两个实例成员:title 和 publisher。
toString()函数就是一个 book 对象继承的原型成员

• 原型链，嵌套成员
• 总结
  1、在 JavaScript 中，数据存储位置可以对代码整体性能产生重要影响。有四种数据访问类型:直接量，变 量，数组项，对象成员。它们有不同的性能考虑。
  2、直接量和局部变量访问速度非常快，数组项和对象成员需要更长时间。
  3、局部变量比域外变量快，因为它位于作用域链的第一个对象中。变量在作用域链中的位置越深，访问所需
  的时间就越长。全局变量总是最慢的，因为它们总是位于作用域链的最后一环。
  4、避免使用 with 表达式，因为它改变了运行期上下文的作用域链。而且应当小心对待 try-catch 表达式的 catch 子句，因为它具有同样效果。
  5、嵌套对象成员会造成重大性能影响，尽量少用。
  6、一个属性或方法在原形链中的位置越深，访问它的速度就越慢。
  7、一般来说，你可以通过这种方法提高 JavaScript 代码的性能:将经常使用的对象成员，数组项，和域外变 量存入局部变量中。然后，访问局部变量的速度会快于那些原始变量。

DOM 编程

什么是 DOM?他为什么慢?

重绘和重排版

• 1、重排：当 DOM 改变影响到元素的几何属性(宽和高)——例如改变了边框宽度或在段落中添加文字，将发生 一系列后续动作——浏览器需要重新计算元素的几何属性，而且其他元素的几何属性和位置也会因此改变 受到影响。浏览器使渲染树上受到影响的部分失效，然后重构渲染树。
• 2、重绘： 改变一个元素的背景颜色不会影响它的宽度或高度。 在这种情况下，只需要重绘(不需要重排版)，因为元素的布局没有改变。
• 3、在下述情况中会发生重排版:
  • 添加或删除可见的 DOM 元素
  • 元素位置改变
  • 元素尺寸改变(因为边距，填充，边框宽度，宽度，高度等属性改变)
  • 内容改变，例如，文本改变或图片被另一个不同尺寸的所替代
  • 最初的页面渲染
  • 浏览器窗口改变尺寸
  • 根据改变的性质，渲染树上或大或小的一部分需要重新计算。某些改变可导致重排版整个页面:例如，当一个滚动条出现时。