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

1、网站web端访问性能提升技巧总结高性能网站建设指南吐;是一本非常有人气的讲解web 优化的书籍，本文就根据书中对前端的一些经验分享作了网 站web端访问性能提升技巧总结，需要的朋友可以参考下高性能网站建设指南这本书里为web性能提升设 置了 14条规则：1 尽量减少http请求 2使用cdn3. 添加expires头4. 采用gzip压缩组件5. 将样式表放在顶部6. 将脚本放在底部7. 避免css表达式8使用外部的javasc ript和css9. 减少dns查询10. 精简 javascript11. 避免重定向12. 删除重复的脚本13. 配置etag14. 使ajax可缓存下面是一些基

2、本总结:一、理解ajax性能做性能优化时，不要浪费时间去尝试为那些不消耗大 量时间的代码提速。通常浏览器在运行javascrip t上花费的时间很少，绝 大部分时间消耗在dom上。ajax提供了取代页面替换的有效方案，善加利用ajax 能使应用程序运行的更快。二、创建快速响应的web应用 如何定义快速呢？javascript代码执行时间超过0. 1秒，页面会给人不 够平滑快捷的感觉；执行时间超过1秒，则会感到应用程 序缓慢；超过10秒，用户会非常沮丧。java script是单线程的！在页面上任何开销很大的（例如，长时间运行） javascrip t操作都应该委托给we bworkero在xm

3、lhttprequ est的异步模式中，x hr实质上就是一 个拥有专用api的webwo rkero 内存对响应时间的影响:1在gc执行回收时，会冻结整个运行环境，直到遍历 完整个创建对象的“堆”。随着应用程序内存占用的增加， 遍历整个堆去查找用户不再使用的对象所需要的时间最终 会引起用户的注意。2网页内存需求增长到足够大，迫使操作系统开始内 存分页，系统把内存页从物理内存转移到虚拟内存（例如 从ram到硬盘）。如果确定内存有问题，可以通过以下两种方式清理内 存：1. 使用de lete关键字从内存中移除不再需要的java script对象2. 从dom树中移除不再是必须的节点三、拆分初始化

4、负载可以把java script代码拆分到不同的组，第一组包含 初始化页面所必须的函数，剩下的则在这些代码需要执行 时按需加载它们，或者等到初始化的那些ja vascript代码 加载完毕时再加载。四、无阻塞加载脚本浏览器在下载和解析javas cript脚本时，不仅会阻塞 页面中其他内容的下载，还会阻塞脚本后面所有元素的渲 染。浏览器在下载和执行脚本时出现阻塞的原因在于，脚 本可能会改变页面或ja vascript的命名空间。很显然jav ascript脚本没有必要按顺序下载，这方面 ie8走在了前面，ie 8是第一个支持脚本并行下载的浏览器。 下面列出异步加载脚本的技术：l. xhreva

5、l：该技术用过xhr从服务器获得脚本，然后 通过eval执行脚本内容。2. xhr注入：类似于xhreval,但是与eval不同的是, 该机制是通过创建一个sc ript的dom元素，然后把xhr的 响应注入到script中执行j avascripto3. scriptdo melement：该技术使用 javascri pt 动态 创建scrip tdom元素并设置其s rc属性。下载过程中用这 种方式创建脚本不会阻塞其他组件。和前面的技术相比， 该技术允许跨域获取脚本。4. sc riptdefer 属性：html4 为 scri pt 标签定义了一 个扩展属性：defero带有defer

6、属性的jav ascript文件 下载时，它不会阻塞浏览器的其他进程，因此这类文件可 以与其他资源文件一起并行下载。带有defe r属性的 script标签可以放置在文档的任何位置。对应的javas cript文件将在页面解析到script标签时开始下载，但不 会执行，直到d0m加载完成，即onload事件触发前才会被 执行。但是，d efer属性只被ie4和firefox3. 5更高版本 的浏览器所支持，所以它不是一个理想的跨浏览器解决方 案。scriptasync 属性：html5 为 sc ript 标签定义了一个 新的扩展属性：asyn c。它的作用和defe r 一样，能够异 步地加

7、载和执行脚本，不因为加载脚本而阻塞页面的加 载。但是有一点需要注意，在有async的情况下,javascript脚本一旦下载好了就会执行，所以很有可能不 是按照原本的顺序来执行的。如果javascript脚本前后有 依赖性，使用async就很有可能出现错误。五、布置行内脚本在样式表后面的行内脚本会阻塞所有后续资源的下载, 解决该问题的方法是调整行内脚本的位置，使其不出现在 样式表和任何其他资源之间。六、编写高效的javas cript尽量避免使用会增长作用域链的结构，比如使用with 语句和try-catch语句中的catch从句。如果非局部变量 的使用超过一次，那么为了降低性能损耗，应该把它

8、存储 到一个局部变量中。例如，如果函数中多次访问处于作用 域链底层的doc ument,可以把do cument赋值给一个局部 变量，从而减少降低在作用域链中搜索变量的时间。存储和读取数据的方式对脚本的性能影响很大。局部 变量和字面量总是最快的，存取数组元素和对象属性会引 起性能损耗。如果数组元素或对象的属性使用超过一次， 那么为了提高存取速度，应该把它存储到一个局部变量中。在jav ascript中，循环经常成为性能瓶颈，为了使循 环高效，可以使用倒序的方式来处理元素，即在控制条件 中，将迭代变量和0作比较。流控制也是影响脚本执行速度的一个重要因素。if语 句适用于少量离散值或一段区间值的判

9、断；swi tch语句最 好用于：t10个离散值的判断。谨慎的使用dom中的htmlnodelis t对象，每次存取这 类对象的属性，都会重新查询d0m中的匹配节点。为了避免 这种高昂的开销，只有必要时才存取nodelist对象，并将 经常存取的值存储在局部变量中。例如，当用for遍历通 过 getelem entsbytagna me 得到的 nodeli st 对象时，应该 把no delist的leng th赋值给一个局部变量。如果javasc ript代码运行时间过长，可以使用定时器 把任务拆分执行。七、超越g zip压缩所有的浏览器都支持gzip压缩，并可以通过添加acc ept-e

10、ncodin g的http头来向we b服务器声明支持压缩：accept-en coding: gzip , def la te当请求中包含这个头时，w eb服务器就会开启gz ip压 缩功能。八、图像优化各种图片格式介绍g if：1只支持二进制透明（要么完全透明，要么完全不透 明）2. 支持动画3. 是无损格式4. gif有256色的限制，不适合显示照片jpeg：1不支持透明2. 不支持动画3是有损格式，压缩比很高，适合显示照片png：1. 支持alpha透明2. 不支持动画3. 是无损格式4. 不是动画时，应该尽可能使用pn g8 （调色板png） 代替gifo 图像优化建议1首先要选择合

11、适的格式：用jpeg保存照片，用gif 保存动画，其他所有图像用png保存，并且尽量使用png82. 不要在html中对图像进行缩放3. 不要忘了 favicons4. 使用并优化csss prite九、划分主域ie6、7等老浏览器把从同一个服务器并行下载的资源 数限制为2个，ie8、firefo x和chrome增加到了 6个。浏览器执行“每个服务器端最大连接数”的限制是根 据url上的主机名，而不是解析出来的ip地址。可以把网页中的资源放在不同的服务器上，加速资源 的下载。十、少用ifr ame使用iframe会带来的问题：if rame是开销最高的d 0m元素，创建ifra me的开销 比创建其他类型的dom元素要高2个数量级。使用i frame会阻塞页面的onload事件