web前端优化法则35条

2016年10月26日09:38:31 评论 1,023 574字阅读1分54秒

前两天被人问到前端的优化有哪些,我支支吾吾也只能说出两三条,表示很惭愧。

说到前端优化的必修课,那就是Yahoo的前端优化性能规则,里面都是别人的经验总结,有 35 条之多,这是先分类在文章最后,之后会个别阐述我针对最初的 14 条,借鉴别人的翻译成果和我自己的解读。

web前端优化法则35条

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前段优化方法,我们平时做网站的时候也要稍微注意点,有些站长的网站打开速度那真是个慢。

  • 微信
  • 站长微信
  • weinxin
  • 微信公众号
  • 关注本博公众号
  • weinxin
大鸟
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: