前端架构&软实力-性能优化

2020-04-28 21:21:052021-02-20 17:15:50

从问题出发

从输入URL到页面加载完成，发生了什么？

  1. DNS解析
  2. TCP连接
  3. 发送HTTP请求
  4. 服务端处理请求，返回HTTP响应
  5. 浏览器拿到数据，解析响应内容，把解析的结果展示给用户

前端可以做的：

  1. 发送HTTP请求阶段
  2. 渲染服务端响应阶段

网络层面-优化HTTP请求

减少请求次数

  • 精灵图
  • 懒加载

减少单次请求所花费的时间

  • 按需加载
  • gzip压缩

选用正确的图片格式

  • JPEG，有损压缩、体积小、加载快、不支持透明

    适用于呈现色彩丰富的图片，JPG通常作为大的背景图、轮播图或banner图

  • PNG，无损压缩、质量高、体积大、支持透明

    小的logo、颜色简单且对比强烈的图片

  • SVG，文本文件、体积小、不失真、兼容性好

    图标

  • webP，全能型选手，兼容性差

合理使用缓存

通过网络获取内容既速度缓慢又开销巨大。较大的响应需要在客户端与服务器之间进行多次往返通信，这会延迟浏览器获得和处理内容的时间，还会增加访问者的流量费用。因此，缓存并重复利用之前获取的资源的能力成为性能优化的一个关键方面。

渲染阶段

注意script标签放置的位置

使用link的rel属性

  • preload

    告诉浏览器下载资源，因为在当前导航期间稍后将需要该资源。

  • prefetch

    提示浏览器，用户未来的浏览有可能需要加载目标资源，所以浏览器有可能通过事先获取和缓存对应资源，优化用户体验。

扁平化CSS选择器，避免嵌套过深

减少重绘与回流

  • 使用transform代替top
  • 使用visiblity代替display:none
  • 直接改变clsaaName（把要修改的样式集中到一个class内统一修改）
  • 避免使用table布局（尽量不要使用table布局。如果没有定宽，表格一列的宽度则由最宽的一列决定，那个很可能在最后一行的宽度超出之前的列宽，引起整体回流造成table可能需要多次计算才能确定好其在渲染树中节点的属性）

事件委托

避免操作频繁DOM

异步更新DOM （包装成 micro 任务）

结束script脚本的执行 👉 处理micro队列 👉 render