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现在网络发展已经用的不多了