20230616----重返学习-前端性能优化方案-辅助知识

day-093-ninety-three-20230616-前端性能优化方案-辅助知识

前端性能优化方案

CRP思想

  • 当代前端性能优化的主要方案:CRP思想「按照关键的渲染路径进行优化」;再结合一些性能监测工具,可以分析出性能消耗较大的地方,有针对性的进行优化;但最后整体来讲,我们主要还是围绕以下几方面进行优化:
    • 第一部分:加快打包速度和降低打包后文件的体积

      • 基于DllPlugin插件,把一些固定不变的依赖进行缓存,后期打包的时候就不会再打包这些文件了!
      • 可基于新一代打包工具 vite/turbopack 代替 webpack!
      • 基于 SplitChunksPlugin 插件对代码进行分割,让页面首次加载的JS文件变的更小!
      • 在webpack打包编译的时候,尤其是生产环境下,我们应该取消ESLint的检测、取消sourceMap文件的生成,以此来加快项目的打包速度!
      • 应该尽可能忽略对 node_modules 的处理,加快打包的速度
    • 第二部分:提高页面第一次渲染的速度

      • 减少HTTP请求的次数和大小

        • 使用 CSS Sprite(雪碧图)技术,把N多小图合并为一张大图
        • 对于非关键性资源(例如:图片、第三方插件、音视频等等),在页面首次渲染的时候,进行懒加载
        • 尽可能的进行封装,减少页面冗余代码,降低打包后文件的体积(还需要对代码进行压缩)
        • 第三方UI组件库需要按需导入
        • 服务器端开启GZIP压缩,加快HTTP的传输效率
        • 把CSS合并为一个,JS也合并为一个,以此来减少HTTP请求的次数!
      • 前端骨架屏技术

        1. 这种方式,可以让页面第一次更快的渲染出来,减少白屏等待时间!
        • SSR服务器渲染的骨架屏「主流模式」:vue + nuxt.js + node.js
        • 在服务器抗压能力较强的情况下,页面的首屏信息是服务器渲染的;第一次加载页面,只要向服务器发送请求,请求回来的HTML页面中,首屏的内容已经是在服务器渲染好的,客户端直接呈现即可!
          其余屏的数据,依然借用客户端骨架屏方案,由客户端动态获取数据进行绑定!
          • 客户端骨架屏:在页面第一次渲染的时候,把需要呈现内容的部分,用一些骨架(可以是灰色背景,也可以是Loading效果)先占位,第一次渲染完,再向服务器发送请求,把获取的真实数据,渲染到指定的区域!
      • 开启静态资源文件的CDN部署

      • 基于 Connection:keep-alive 保持TCP通道的长链接,防止每一次请求都要进行三握四挥,加快资源的获取

      • 减少对Cookie的使用,因为每一次向服务器发送请求,都会把本地的cookie自动传递给服务器

      • 资源要分服务器进行部署,在增加了DNS解析次数的基础上,使用DNS预解析,来加快域名解析速度!

      • 针对于图片方面的处理

        • 使用字体图标或者矢量图,来代替位图
        • 网站中使用位图,优先使用 webp 格式,其次是 jpeg/jpg 、png 、gif 这些格式
        • 基于webpack,对小于一定范围的图片进行BASE64处理,减少HTTP请求的次数,加快图片的渲染!「但是不要乱用,因为使用了BASE64,会增加html/css等文件的体积;而且增加了代码维护的成本(我们一般都需要基于webpack进行base64编译)」
      • 对于数据请求,可以采用分批次(例如:分页、触底加载)和异步加载(或数据的延迟加载)

      • 建议减少对 @import 的使用,因为其会阻塞GUI的渲染!对于移动端页面,如果样式代码较少,可以使用内嵌式!

      • 尽量把放在页面的头部,让CSS资源的获取和GUI的渲染同时进行,加快页面的渲染;尽量把

你可能感兴趣的:(ES6,重返学习,webpack,前端,学习,性能优化)