雅虎军规 - 前端优化

减少http请求数
- 雪碧图合并
- js合并（一般合并到3~5个，css类似）
- css合并
减少DNS查找次数
- 不要在一个网站中有太多域
- 用到CDN静态服务器
- DNS预解析

// DNS 预解析

尽量免去不必要的跳转，比如index跳转到home
- 浏览器会把用户指向到Location中执行的URL中。
- 301（永久移到新位置）和302（暂时移到新位置）都不会被缓存，除非加一个额外的头选项，Expires或则Cache-Control来指定它缓存。
- meta元素的刷新标签和JS也可以实现URL的跳转，但是如果必须要跳转最好的方法就是使用3XXHTTP状态码，为了确保后退正确使用。
可缓存的AJAX
- 就是我们进行一次AJAX请求后，把资源进行缓存。
- 因为“异步”并不意味着“即时”
- add an expires or a cache-control header
- Nginx静态文件设置缓存
- 其它几条同样适用ajax：
  - gzip压缩文件
  - 减少DNS查找数
  - 精简JS
  - 避免跳转
  - 配置ETags（这个也是后端来配置的，前端设置cache为true，缓存多久是通过请求报头设置的，前端通过beforSend里设置setRquestHeader，后端在response.expires里设置）link，如果不设置，后端直接吐就行
  - 注意：并不是前端在ajax里面设置cache:true就可以缓存了的，http1.0里面没实现，在2.0里面实现了。
- 而且如果设置ajax请求的话尽量设置成get。16：15
推迟加载内容
- 滑动加载
- 移动端模板（先吐最重要的）+异步加载因为在移动端上发ajax比较耗时，这个就需要模板和后端共同配合把它吐出来，pc就无所谓了
预加载
- 页面预加载link
- 有几种预加载方法：
  - 无条件预加载：触发onload事件时，直接加载额外的页面内容。预加载学比如
  - 有条件预加载：根据操作去预加载相应的内容。
  - 有预期的加载：重新设计过的页面加载很慢，因为之前有过完整的缓存，这时就可以在新站访问之前就加载一部分内容来避免这种结果的出现。
减少DOM元素数
根据域名划分页面内容
- 由于DNS查找，确保使用的域名数在2~4个之间。
使iframe的数量减少
- 优点：1、解决加载缓慢的第三方内容如图标和广告等的加载问题。2、并行加载脚本
- 缺点：1、即时内容为空，记载也需要时间。2、会阻止页面加载。3、没有语义
不要出现404错误
使用内容分发网络

*   CDN
*   上线我的css、js、img不能和你的代码放到一起，一定要放到静态服务器上，让用户最快的访问到

为文件头指定Expires或cache-Control

*   对于静态内容：设置文件头过期时间Expires的值为“Never expire”（永不过期）
*   对于动态内容：使用恰当的cache-Control文件头来帮助浏览器进行有条件的请求
*   Etag是可以动态调的更加灵活，而这个是设了多久就是多久，记得加上版本号。

Gzip压缩文件内容 gzip
配置ETag
尽早刷新输出缓存（模板加载完就用flush吐出，现在常用中间层来做。后台只去做和数据库有关的东西）
使用GET来完成AJAX请求

*   因为post会分两步走，先发送文件头，再发送数据，而且post
*   get直接放到URL上发走了,IE上URL请求不能超过2k
*   但是一个有趣的不同是，get意味着获取数据，post意味着发送数据

把样式表置于顶部
避免使用css表达式
使用外部js、css文件
削减JS和CSS
用代替@import

*   应为import是串行的，会阻塞

避免使用滤镜

*   IE属性独有的AlphaImageLoader，用于修正7.0以下版本

把脚本置于底部
剔除重复脚本

*   两个jQuery.js

减少DOM访问

*   取到一个button元素，尽量把它缓存起来

开发智能事件处理程序

*   使用代理，用DOMready代替onload

减少cookies体积
对于内容页面使用无cookie域名
优化图像（压缩）

*   使用imagemagick获取多少种颜色，尝试把gif压缩成png，除了动画用gif

优化CSS Spirite
faicon.ico要小而且可缓存

*   最好小于1k，给它设置Expires文件头做缓存

保持单个内容小于25k
打包组件成复合文本

*   js和css写在一起，*.jscss 现在网络发展已经用的不多了

雅虎军规 - 前端优化

你可能感兴趣的:(雅虎军规 - 前端优化)