非阻塞 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); }
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 元素
• 元素位置改变
• 元素尺寸改变(因为边距，填充，边框宽度，宽度，高度等属性改变)
• 内容改变，例如，文本改变或图片被另一个不同尺寸的所替代
• 最初的页面渲染
• 浏览器窗口改变尺寸
• 根据改变的性质，渲染树上或大或小的一部分需要重新计算。某些改变可导致重排版整个页面:例如，当一个滚动条出现时。
网友评论