雅虎前端优化 | 易学教程

1、尽量减少HTTP请求次数

　　网页加载中大部分时间都在下载js，css，flash，图片
　　1、合并文件 css，js，图片（css sprite）
　　2、内联图像 data:URL scheme 低级浏览器不支持，如过放到页面中会加大html，放到css中最好，因为他可以在客户端进行缓存

2、减少DNS查找次数即减少页面中的主机名（css,js, img，flash等）
　　dns解析时浏览器处于等待状态大部分浏览器有自己的缓存不会受系统的缓存的影响
　　1、减少主机名数量，则减少了dns查询，但同时减少了页面中并行下载的数量
　　把页面中的主机名分成2~4个，二者可兼得

3、避免跳转
　　降低了用户体验
　　url本身最后应该有/如果不带则用户访问时会发生一次301跳转
　　可以在服务器中进行设置来避免它

4、可缓存的ajax
　　可将请求的地址设置为永不过期，然后请求的地址中带上文件的最后修改时间

5、推迟加载内容（不是立刻要用的）
　　用onload把页面分成两部分折叠的，隐藏的，js效果可以后加重
　　img，css。js 根据需求进行加重

6、预加载
　　在用户空闲时加载以后要用到的 img，css，js，这些都可以缓存
　　在这个页面加载下个页面要用到的页面组件
　　同样可以把这些要加载的放到 onload 里面

7、减少DOM元素数量
　　页面元素越多JavaScript遍历DOM的效率越慢
　　YUI CSS utilities
　　document.getElementsByTagName('*').length 计算页面全部的元素个数

8、根据域名划分页面内容
　　可以并行下载考虑到dns查询时间2到三个最好

9、使iframe的数量最小
　　优点
　　　　解决加载缓慢的第三方内容如图标和广告等的加载问题
　　　　Security sandbox
　　　　并行加载脚本

　　缺点：
　　即时内容为空，加载也需要时间
　　会阻止页面加载
　　没有语意

10、避免404

11、使用内容分发网络

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

13、Gzip压缩文件内容

14、配置ETag
　　web服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制

15、尽早刷新输出缓冲
　　最好放到head和body之间 <?php flush(); ?>

16、使用GET来完成AJAX请求
　　POST方法是一个“两步走”的过程：首先发送文件头，然后才发送数据

17、把样式表置于顶部
　　把样式表放到<head />内会使页面有步骤的加载显示,以便于及时给用户反馈（显示的页面），改善了用户体验

18、避免使用CSS表达式（Expression）
　　它们的计算频率要比我们想象的多，在页面缩放，滚动，或者即使是鼠标移动时都会计算

19、使用外部JavaScript和CSS
　　可以被缓存

20、削减JavaScript和CSS
　　减少请求的大小

21、用<link>代替@import

22、避免使用滤镜
　　完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式来代替

23、把脚本置于页面底部
　　阻止了页面的平行下载
　　HTTP/1.1 规范建议，浏览器每个主机名的并行下载内容不超过两个
　　脚本加载时会阻止页面上所有的元素进行加载，即使是不同域名

24、剔除重复脚本

25、减少DOM访问
　　缓存已经访问过的有关元素
　　线下更新完节点之后再将它们添加到文档树中
　　避免使用JavaScript来修改页面布局

26、开发智能事件处理程序
　　delegate 方法绑定

27、减小Cookie体积

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

29、优化图像

30、优化CSS Spirite
　　水平排列图片会比垂直要小
　　颜色相近的摆放在一起
　　空隙不宜过大

31、不要在HTML中缩放图像

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

33、保持单个内容小于25K

34、打包组件成复合文本