前两天被人问到前端的优化有哪些,我支支吾吾也只能说出两三条,表示很惭愧。
说到前端优化的必修课,那就是Yahoo的前端优化性能规则,里面都是别人的经验总结,有 35 条之多,这是先分类在文章最后,之后会个别阐述我针对最初的 14 条,借鉴别人的翻译成果和我自己的解读。
35条分类
标注 * 号的是最初的14条
- 内容
- 减少HTTP请求 *
- 减少DNS查询 *
- 避免重定向 *
- Ajax缓存化 *
- 后载入组件
- 预先载入组件
- 减少DOM元素数量
- 跨域分离组件
- 最少化iframe
- 避免404错误
- 服务端
- 使用CDN(内容分布网络) *
- 增加过期时间或者可控制缓存的请求头 *
- 使用Gzip组件 *
- 配置ETags(实体标签) *
- 提前刷新缓冲区
- Ajax请求使用Get方法
- 避免空的图片src
- Cookie
- 减少Cookie大小
- 为组件使用无Cookie域
- CSS
- 将样式放在顶部 *
- 避免使用CSS表达式 *
- 选择而不要@import
- 避免过滤器
- JavaScript
- 将JS放在底部 *
- 使用外部的JS和CSS *
- 压缩JS和CSS *
- 去掉重复的脚本 *
- 最小化Dom读取
- 开发灵活的事件处理器
- 图片
- 优化图片
- 优化CSS Sprites(CSS精灵)
- 在HTML中不要缩放图片
- 制作小的和可缓存的favicon.ico
- 移动
- 组件维持在25kb以下
- 将组件放入复合的文档中
国外主机优惠注:这么多web前段优化方法,我们平时做网站的时候也要稍微注意点,有些站长的网站打开速度那真是个慢。