前端页面性能优化

薄风

开发

  • http combo(js、css、ajax)合并资源请求,减少接口请求
  • dns perfetch,尽量减少dns域名数量,并访问前预解析dns
  • 优先首屏渲染,非必须资源延迟加载,包括js、image等
  • 使用cdn访问资源
  • css

    • css放 </head> 前
    • css减少表达式、@import、通配符等使用
    • 避免位置、大小等会引起 reflow 的操作
  • js

    • js放 </body>  前
    • js减少dom访问,合理的事件监听
    • 减少dom层级
    • 逻辑和组件复用,减少代码
  • iconfront 减少请求和请求体积
  • bundle 公共代码(框架、ui库等)提取,单独引用,减少变更是需要重新下载的代码

编译时

  • 混淆和压缩(css、js、html、image)减少体积
  • gzip 压缩,减少传输体积
  • commons chunk 提取公共代码,减少体积
  • image sprite 雪碧图,减少请求
  • combine(css、js)合并文件,减少请求
  • cdn 域名替换,提升访问速度

服务端

  • gzip 压缩,提升资源传输速度
  • cache 缓存文件

    • Cache-Control 缓存机制
    • Expires 过期时间,如果 Cache-Control 设置 max-age 将被忽略
    • Etag 标示符,防止空中碰撞
    • Last-Modified 最后修改时间,比较是否一致
  • cdn combo 合并资源请求,减少请求
  • ajax combo 服务接口请求合并,减少请求
  • 减少 cookie 长度
  • 禁止 redirect 重定向
  • 防止出现 404 请求
  • SSL/https
阅读 952
5 声望
0 粉丝
0 条评论
你知道吗?

5 声望
0 粉丝
宣传栏