网站Web端访问性能提升技巧总结.docxVIP

网站Web端访问性能提升技巧总结 高性能网站建设指南吐;是一本非常有人气的讲解Web 优化的书籍，本文就根据书中对前端的一些经验分享作了网 站Web端访问性能提升技巧总结，需要的朋友可以参考下 《高性能网站建设指南》这本书里为Web性能提升设 置了 14条规则： 1 ?尽量减少HTTP请求 2?使用CDN 添加Expires头 采用Gzip压缩组件 将样式表放在顶部 将脚本放在底部 避免CSS表达式 8?使用外部的javasc ript和CSS 减少DNS查询 精简 javascript 避免重定向 删除重复的脚本 配置ETag 使Ajax可缓存 下面是一些基本总结: 一、理解Ajax性能 做性能优化时，不要浪费时间去尝试为那些不消耗大 量时间的代码提速。 通常浏览器在运行javascrip t上花费的时间很少，绝 大部分时间消耗在DOM上。 Ajax提供了取代页面替换的有效方案，善加利用Ajax 能使应用程序运行的更快。 二、创建快速响应的WEB应用 如何定义快速呢？ javascript代码执行时间超过0. 1秒，页面会给人不 够平滑快捷的感觉；执行时间超过1秒，则会感到应用程 序缓慢；超过10秒，用户会非常沮丧。 java script是单线程的！ 在页面上任何开销很大的（例如，长时间运行） javascrip t操作都应该委托给We bWorkero 在XMLHttpRequ est的异步模式中，X HR实质上就是一 个拥有专用API的WebWo rkero 内存对响应时间的影响: 1?在GC执行回收时，会冻结整个运行环境，直到遍历 完整个创建对象的“堆”。随着应用程序内存占用的增加， 遍历整个堆去查找用户不再使用的对象所需要的时间最终 会引起用户的注意。 2?网页内存需求增长到足够大，迫使操作系统开始内 存分页，系统把内存页从物理内存转移到虚拟内存（例如 从RAM到硬盘）。 如果确定内存有问题，可以通过以下两种方式清理内 存： 使用de lete关键字从内存中移除不再需要的java script对象 从DOM树中移除不再是必须的节点 三、 拆分初始化负载 可以把java script代码拆分到不同的组，第一组包含 初始化页面所必须的函数，剩下的则在这些代码需要执行 时按需加载它们，或者等到初始化的那些ja vascript代码 加载完毕时再加载。 四、 无阻塞加载脚本 浏览器在下载和解析javas cript脚本时，不仅会阻塞 页面中其他内容的下载，还会阻塞脚本后面所有元素的渲 染。 浏览器在下载和执行脚本时出现阻塞的原因在于，脚 本可能会改变页面或ja vascript的命名空间。 很显然jav ascript脚本没有必要按顺序下载，这方面 IE8走在了前面，IE 8是第一个支持脚本并行下载的浏览器。 下面列出异步加载脚本的技术： XHReval：该技术用过XHR从服务器获得脚本，然后 通过eval执行脚本内容。 XHR注入：类似于XHReval,但是与eval不同的是, 该机制是通过创建一个sc ript的DOM元素，然后把XHR的 响应注入到script中执行j avascripto ScriptDO MElement：该技术使用 javascri pt 动态 创建scrip tDOM元素并设置其s rc属性。下载过程中用这 种方式创建脚本不会阻塞其他组件。和前面的技术相比， 该技术允许跨域获取脚本。 Sc riptdefer 属性：HTML4 为 scri pt 标签定义了一 个扩展属性：defero带有defer属性的Jav aScript文件 下载时，它不会阻塞浏览器的其他进程，因此这类文件可 以与其他资源文件一起并行下载。带有defe r属性的 script标签可以放置在文档的任何位置。对应的JavaS cript文件将在页面解析到script标签时开始下载，但不 会执行，直到D0M加载完成，即onload事件触发前才会被 执行。但是，d efer属性只被IE4和Firefox3. 5更高版本 的浏览器所支持，所以它不是一个理想的跨浏览器解决方 案。 Scriptasync 属性：HTML5 为 sc ript 标签定义了一个 新的扩展属性：asyn c。它的作用和defe r 一样，能够异 步地加载和执行脚本，不因为加载脚本而阻塞页面的加 载。但是有一点需要注意，在有async的情况下, JavaScript脚本一旦下载好了就会执行，所以很有可能不 是按照原本的顺序来执行的。如果JavaScript脚本前后有 依赖性，使用async就很有可能出现错误。 五、 布置行内脚本 在样式表后面的行内脚本会阻塞所有后续资源的下载, 解决该问题的方法是调整行内脚本的位置，使其不出现在 样式表和任何其他资源之间。