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

Posted on:2014-03-15 21:55
8 min read
    前端 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函数没有重载。

Toggle theme