前言

WEB前端性能优化基本套路_前端调优

前端性能优化这是一个老生常谈的话题，但是还是有很多人没有真正的重视起来，或者说还没有产生这种意识。

当用户打开页面，首屏加载速度越慢，流失用户的概率就越大，在体验产品的时候性能和交互对用户的影响是最直接的，推广拉新是一门艺术，用户的留存是一门技术，拉进来留住用户，产品体验很关键，这里我以美柚的页面为例子，用实例展开说明前端优化的基本套路（适合新手上车）。

WEB性能优化套路

基础套路1：减少资源体积

css

  • 压缩

  • 响应头GZIP

WEB前端性能优化基本套路_前端调优_02


js

  • 压缩

  • 响应头GZIP

WEB前端性能优化基本套路_前端调优_03


html

  • 输出压缩

  • 响应头GZIP

WEB前端性能优化基本套路_前端调优_04


图片

  • 压缩

  • 使用Webp格式

WEB前端性能优化基本套路_性能测试_05


  • cookie

    • 注意cookie体积，合理设置过期时间

基础套路2：控制请求数

  • js

    • 合并

  • css

    • 合并

  • 图片

    • 合并

WEB前端性能优化基本套路_前端调优_06

        base64(常用图标：如logo等)  


WEB前端性能优化基本套路_前端调优_07

  • 接口

    • 数量控制

    • 异步ajax

  • 合理使用缓存机制

    • 浏览器缓存

  • js编码

    • Require.JS 按需加载

    • 异步加载js

    • lazyload图片

基础套路3：静态资源CDN

  • 请求走CDN

    • html

    • p_w_picpath

    • js

    • css

综合套路

  • 图片地址独立域名

    • 与业务不同域名可以减少请求头里不必要的cookie传输

  • 提高渲染速度

    • js放到页面底部，body标签底部

    • css放到页面顶部，head标签里

  • 代码

    • 代码优化：css/js/html

    • 预加载，如：分页预加载，快滚动到底部的时候以前加载下一页数据

拓展资料

性能辅助工具