前端零碎问题（三）前端优化

前端页面的优化，老生常谈了，目前公认优化方案中最为突出的就是yahoo的34条军规了，附上

• 1.减少HTTP请求：提供性能首先做的一步，这是改进首次访问用户等待时间的最重要的方法。

  • 合并文件：如合并css文件、脚本文件（但要权衡利弊，一个文件太大并不是最好的办法）
  • css sprite：利用css-background相关元素进行背景图绝对定位
  • 图片地图：把多张图片整合到一张图片中（只有在图片的所有组成部分在页面中是紧挨在一起的时候可用，如导航栏，不具备可读性，坐标会比较繁琐易出错，不推荐使用）
  • 内联图象 使用 data: URL scheme 在实际的页面嵌入图像数据

• 2.减少DNS查找次数：输入域名后DNS解析器就会返回这个域名对应的IP地址，这个解析也是需要时间的，这段时间内浏览器什么都不会做，直到解析完毕。（一般为服务端配置）

  • 缓存DNS查找改善页面性能：需要一个特定的缓存服务器
  • 减少主机名的数量可以减少 DNS 查找次数，还可以减少页面中并行下载的数量

• 3.避免跳转 跳转是使用301和302代码实现的

  • 在写页面中跳转的连接时，加上末尾的斜杠（/）。

• 4.可缓存的AJAX，AJAX在应用时带来了很大的方便，但异步并不是即时，优化AJAX响应。

  • Gzip 压缩文件
  • 减少DNS查找次数
  • 精简Javascript
  • 避免跳转
  • 配置ETags

• 5.推迟加载内容

  • 把整个过程按照 onload 事件分隔成两部分，隐藏或折叠部分的内容可延迟加载。

• 6.预加载

  • 无条件加载：触发onload事件时，直接加载额外的页面内容。
  • 有条件加载：根据用户的操作来有根据的判断用户下面可能去往的页面并相应的加载页面内容。
  • 有预期的加载：载入重新设计过的页面时使用预加载。

• 7.减少DOM元素数量

  • 简化页面结构
  • 使用更语义化的标签来给页面布局
  • 使用 document.getElementsByTagName('*').length 可以查看页面里面标签的总数。

• 8.根据域名划分页面内容 把页面内容划分为若干部分可以使你最大限度的实现平行下载。

• 9.使iframe的数量最小

  • iframe优点：解决加载缓慢的第三方内容如图标和广告等的加载问题，并行加载脚本。
  • iframe缺点：即使内容为空，加载也需要时间，会阻止页面加载，没有语意。

• 10.不要出现404错误

  • 降低用户体验，浪费服务器资源

• 11.使用内容分发网络：使用 CDN 是一个只需要相对简单地修改代码实现显著改善 网站访问速度的方法。

  • 减少网页内容的下载时间，提高下载速度还可以通过CDN(内容分发网络)来提升

• 12.为文件头指定 Expires 或 Cache-Control

  • 对于静态内容:设置文件头过期时间 Expires 的值为“Never expire”(永不过期)
  • 对于动态内容:使用恰当的 Cache-Control 文件头来帮助浏览器进行有条件的请求

• 13.Gzip 压缩文件内容

  • Gzip通常可以减少70%网页内容的大小，包括脚本、样式表、图片等文件。Gzip比deflate更高效，主流服务器都有相应的压缩支持模块。
  • 值得注意的是pdf文件可以从需要被压缩的类型中剔除，因为pdf文件本身已经压缩，gzip对其效果不大，而且会浪费CPU。

• 14.配置 ETag

  • 虽然标题叫配制ETags，但是这里你要根据具体情况进行一些判断。首先Etag简单来说是通过一个文件版本标识使得服务器可以轻松判断该请求的内容是否有所更新，如果没有就回复304 (not modified)，从而避免下载整个文件。
  • 但是Etags的版本信息即使主流服务器未能很好地支持跨服务器的判断，比如你从一个服务器集群中一台得到Etags，然后发送到了另一台那么校验很有可能会失败。

• 15.尽早刷新输出缓冲

  • 网页后台程序中我们知道有个方法叫Response.Flush()，一般我们调用它都是在程序末尾，但注意这个方法可以被调用多次。目的是可以将现有的缓存中的回复内容先发给客户端，让客户端“有活干”。

• 16.使用 GET 来完成 AJAX 请求

  • 浏览器在实现XMLHttpRequest POST的时候分成两步，先发header，然后发送数据。
  • 而GET却可以用一个TCP报文完成请求。
  • 另外GET从语义上来讲是去服务器取数据，而POST则是向服务器发送数据，所以我们使用Ajax请求数据的时候尽量通过GET来完成。

• 17.把样式表置于顶部

  • 以link方式引入
  • 让网页显得加载速度更快，因为这样做可以使浏览器逐步加载已将下载的网页内容。
  • 避免浏览器裸奔

• 18.避免使用 CSS 表达式(Expression)

  • 在IE5-IE8中支持，其他浏览器中表达式会被忽略
  • 效率低，为了兼容低版本IE浏览器所写，尽量避免。

• 19.使用外部 JavaScript 和 CSS

  • 结构、表现、行为分离
  • 便于管理与维护

• 20.削减 JavaScript 和 CSS

  • 去掉多余的空行和注释
  • 合并多余的脚本和css样式

• 21.用 link 代替@import

  • 避免使用@import的原因很简单，因为它相当于将css放在网页内容底部。

• 22.避免使用滤镜

  • IE5.5 - IE8中支持，这种滤镜的使用会导致图片在下载的时候阻塞网页绘制，另外使用这种滤镜会导致内存使用量的问题。

• 23.把脚本置于页面底部

  • 把脚本置底，这样可以让网页渲染所需要的内容尽快加载显示给用户。
  • 现在主流浏览器都支持defer关键字，可以指定脚本在文档加载后执行。
  • HTML5中新加了async关键字，可以让脚本异步执行。

• 24.剔除重复脚本

  • 重复的脚本不仅浪费浏览器的下载时间，而且浪费解析和执行时间。

• 25.减少 DOM 访问

  • 通过Javascript访问DOM元素没有我们想象中快，元素多的网页尤其慢，对于Javascript对DOM的访问我们要注意 缓存已经访问过的元素 、Offline更新节点然后再加回DOM Tree 、避免通过Javascript修复layout

• 26.开发智能事件处理程序

  • 这里说智能的事件处理需要开发者对事件处理有更深入的了解，通过不同的方式尽量少去触发事件，如果必要就尽早的去处理事件。
  • 比如一个div中10个按钮都需要事件句柄，那么我们可以将事件放在div上，在事件冒泡过程中捕获该事件然后判断事件来源。

• 27.减小 Cookie 体积

  • 去除没有必要的cookie，如果网页不需要cookie就完全禁掉
  • 将cookie的大小减到最小
  • 注意cookie设置的domain级别，没有必要情况下不要影响到sub-domain
  • 设置合适的过期时间，比较长的过期时间可以提高响应速度。

• 28.对于页面内容使用无 coockie 域名

• 29.优化图像：尽可能在不损失质量的前提下压缩图片的大小

  • 检查GIF图片中图像颜色的数量是否和调色板规格一致。如果你发现图片中只用到了4种颜色，而在调色板的中显示的256色的颜色槽，那么这张图片就还有压缩的空间。
  • 尝试把GIF格式转换成PNG格式，看看是否节省空间。大多数情况下是可以压缩的。
  • 在所有的PNG图片上运行pngcrush（或者其它PNG优化工具）。
  • 在所有的JPEG图片上运行jpegtran。这个工具可以对图片中的出现的锯齿等做无损操作，同时它还可以用于优化和清除图片中的注释以及其它无用信息

• 30.优化 CSS Spirite

  • Spirite中水平排列图片，垂直排列会增加文件大小；
  • Spirite中把颜色较近的组合在一起可以降低颜色数，理想状况是低于256色以便适用PNG8格式；
  • 不要在Spirite的图像中间留有较大空隙。这虽然不大会增加文件大小,但对于用户代理来说它需要更少的内存来把图片解压为像素地图。100×100的图片为1万像素，1000×1000就是100万像素。

• 31.不要在 HTML 中缩放图像

  • 不要通过图片缩放来适应页面，如果你需要小图片，就直接使用小图片吧。

• 32.favicon.ico 要小而且可缓存

  • 要确保文件存在、文件尽量小，最好小于1k、设置一个长的过期时间

• 33.保持单个内容小于 25K

  • 这限制是因为iphone，他只能缓存小于25K，注意这是解压后的大小。所以单纯gzip不一定够用，精简文件工具要用上了。

• 34.打包组件成复合文本

  • 把页面内容打包成复合文本就如同带有多附件的Email，它能够使你在一个HTTP请求中取得多个组建。当你使用这条规则时，首先要确定用户代理是否支持（iPhone不支持）。