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

前端页面的优化，老生常谈了，目前公认优化方案中最为突出的就是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不支持）。