雅虎军规33条

1.减少http请求数

  • 雪碧图合并
  • js合并(一般合并到3~5个,css类似)
  • css合并

2.减少DNS查找次数

  • 不要在一个网站中有太多域
  • 用到CDN静态服务器
  • DNS预解析
//DNS预解析
<mate http-equiv="x-dns-prefetch-control" content="on"/>
<link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />
<link rel="dns-prefetch" href="http://nsclinck.baidu.com" />

3.尽量免去不必要的跳转,比如index跳转到home

  • 浏览器会把用户指向到Location中执行的URL中
  • 301(永久移到新位置)和302(暂时移到新位置)都不会缓存,除非加一个额外的头选项,Expires或则Cache-Control来指定他缓存
  • meta元素的刷新标签和JS也可以实现URL的跳转,但是如果必须要跳转最好的方法就是使用3XXHTTP状态码,为了确保后退正确使用

4.可缓存的AJAX

  • 就是我们进行一次AJAX请求后,把资源进行缓存

  • 因为“异步”并不意味着“即时”

  • add an expires or a cache-control header

  • Nginx静态文件设置缓存

  • 其他几条同样适用ajax:

    • gzip压缩文件
    • 减少DNS查找数
    • 精简JS
    • 避免跳转
    • 配置ETags(这个也是后端来配置的,前端设置cache为true,缓存多久是通过请求报头设置的,前端通过beforeSend里设置setRquestHeader,后端在response.expires里设置),如果不设置,后端直接吐就行
    • 注意:并不是前端在ajax里面设置cache:true就可以缓存了的,http1.0里面没实现,在2.0里面实现了
  • 而且如果设置ajax请求的话尽量设置成get

5.推迟加载内容

  • 滑动加载
  • 移动端模板(先吐最重要的)+异步加载 因为在移动端上发ajax比较耗时,这个就需要模板和后端共同配合把它吐出来,pc就无所谓了

6.预加载

  • 页面预加载
  • 有几种预加载方法:
    • 无条件加载:触发onload事件时,直接加载额外的页面内容。
    • 有条件加载:根据操作去预加载相应的内容
    • 有预期的加载:重新设计过的页面加载很慢,因为之前有过完整的缓存,这时就可以在新站访问之前加载一部分内容来避免这种结果的出现

7.减少DOM元素数

8.根据域名划分页面内容

  • 由于DNS查找,确保使用的域名数在2~4个之间

9.使iframe的数量减少

  • 优点 :1、解决加载缓慢的第三方内容如图标和广告的加载问题。2、并行加载脚本
  • 缺点:1、即使内容为空,记载也需要时间。2、会阻止页面加载。3、没有语义

10.不要出现404错误

11.使用内容分发网络

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

12.为文件指定Expires或cache-Control

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

13.Gzip压缩文件内容gzip

14.配置Etag

15.尽早刷新输出缓存(模板加载完就用flush吐出 现在常用中间层来做 后台只去做和数据库有关的东西)

16.使用GET来完成AJAX请求

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

17.把样式表置于顶部

18.避免使用css表达式

19.使用外部js、css文件

20.削减js和css

21.用< link >代替@important

22.避免使用滤镜

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

23.把脚本置于底部

24.剔除重复脚本

  • 两个jQuery.js

25.减少dom访问

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

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

  • 使用代理 用DOMready代替onload

27.减少cookies体积

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

29.优化图像(压缩)

  • 使用imagemagick获取多少种颜色,尝试吧gif压缩成png

30.优化CSS Spirite

31.faicon.ico要小而且可缓存

  • 最好小于1k 给他设置Expires文件头做缓存

32.保持单个内容小于25k

33.打包组件成复合文本

  • js和css写在一起,*.jscss现在网络发展已经用的不多了
发布了22 篇原创文章 · 获赞 17 · 访问量 456

猜你喜欢

转载自blog.csdn.net/webblock/article/details/105565674