高性能网站优化-创建快速响应的Web

《高性能网站建设进阶指南》

优化原则

优化的目的是希望降低程序的整体开销。

减少开销

通常认为开销就是程序的执行时间。而在进行优化工作时，应该把重点放在对程序开销影响最大的那部分。
假设我们有四个模块：A，B，C，D，其中模块A运行所需开销54%，模块B运行所需开销4%，模块C运行开销30%，模块D运行开销12%。
即使可以通过某种方法将模块B性能开销减少到2%，其实也只是降低了整体开销的2%。如果A的开销减少10%，却可以获得更好的效果，而显然模块A更值得去优化。优化那些开销不大的模块回报太低。

优化循环

程序大部分的时间都消耗在循环上，优化那些只执行一次的代码得到的回报微不足道。但优化循环得到的好处却总是让人欣慰。

合理利用Ajax

利用Ajax技术，客户端将较小的数据包发送到服务端，然后服务端响应请求返回另一个较小的数据包，客户端的JavaScript程序处理服务端返回的数据包，更新浏览器中的页面。这样数据的传输量和反馈时间间隔都大大减少，同时客户端和服务端工作量也减少。万万不可将所有的应用数据都发送给浏览器，这样反而会增加服务端的响应时间，而返回给客户端的数据也增加程序运行的压力，从而降低性能。

注意DOM

浏览器不是为应用平台而设计的，所以在处理Ajax应用程序的时候具有挑战。但是浏览器的发展速度很快，远远超出想象，已经有足够的能力去处理和执行复杂的应用。通过Ajax库可以碾碎很多障碍。
但是浏览器对DOM的解析依然低效。浏览器运行时，最大的开销往往是解析DOM而不是JavaScript 。注意优化DOM结构，避免多余的开销大的DOM操作。

---

伪多线程

就像所有的GUI应用程序一样，浏览器按队列顺序完成其队列中单独事件的处理。它按照先进先出的顺序从队列中取出，然后决定如何处理。但是，在浏览器中这个过程是单线程的，浏览器每次只能处理这些任务中的一个，并且其他任意一个任务都可以阻止其他任务的执行。由于JavaScript现在不支持多线程，所以无法创建一个后台程序执行开销很大的代码。而实际上，我们有一些方法可以在JavaScript中实现多线程的工作，但是却没有线程之间相互入侵的危险。

定时器

待完善

Web Workers

使用 setTimeout()、setInterval()、XMLHttpRequest 和事件处理程序等技术模拟“并行”，确实都是异步运行的。但没有阻碍未必就意味着并行。系统会在生成当前执行脚本后处理异步事件。可以通过Web Worker执行一些操作，同时却不会阻碍UI和其他脚本。

内存管理

JavaScript中绝大部分的运行环境（？为什么是绝大部分？）都实现了垃圾回收。但是自动管理内存是有开销的。在执行回收时，它们会冻结整个运行环境，包括正在调用的主线程，直到遍历完整整个创建对象的“堆”。在这个过程中查找不再使用或者能够回收内存的对象。
对于大部分应用程序而言，GC是完全透明的。冻结运行环境的时间短到完全可以忽略。但是随着内存占用的增加，遍历整个内存中保存着对象的“堆”查找不再使用的对象的时间将增长，最终引起注意。
当这种情况发生是，应用程序开始定期出现间歇迟钝，更严重一点整个浏览器可能出现反映迟钝。
在编写代码时要注意：

• 使用delete关键词从内存中移除不再需要的对象；

• 从网页DOM树中移除不再需要的节点

通过拆分节省下载

将JavaScript分成两部分：一部分是渲染初始页面必须的，剩下的作为另一部分。在初始化时只加载必要的 JavaScript，其余的JavaScript稍后再加载。
拆分JavaScript代码的一个难点就是要避免出现未定义标识符错误。如果在执行的时候引用到了一个被延时加载的标识符时，就会出现这种问题。不过也有解决方法：
在延迟加载的代码和UI界面相关联的情况下，可以通过提示来巧妙的避开与用户的冲突。比如菜单中可以添加一个“加载中”的图标，告诉用户正在加载。或者干脆在延迟加载的代码里绑定事件处理程序，这样一来代码还未加载执行时，点击不会执行任何JavaScript代码。将两者结合更佳。

延时加载的代码不与页面元素相关联的情况下，可以使用模拟函数（stub function）来解决这个问题。模拟函数是一个与原函数名称相同但是函数体为空，或者包含一些临时代码的函数。当调用它们时，动态加载其他的JavaScript代码。当增的JavaScript代码下载完成之后，模拟函数便被新的函数覆盖。JavaScript函数没有重载。