前端性能优化

前端性能优化主要是为了提高页面的加载速度,优化用户的访问体验。

optimize

页面的内容

  1. 通过文件合并、css 雪碧图、使用 base64 等方式来减少 HTTP 请求数,避免过多的请求造成等待的情况。

  2. 通过 DNS 缓存等机制来减少 DNS 的查询次数。

  3. 通过设置缓存策略,对常用不变的资源进行缓存。

  4. 使用延迟加载的方式,来减少页面首屏加载时需要请求的资源。延迟加载的资源当用户需要访问时,再去请求加载。

  5. 通过用户行为,对某些资源使用预加载的方式,来提高用户需要访问资源时的响应速度。组件路由按需加载。

  6. 不管对于CSR或者SSR,都建议配合使用Service worker,来控制资源的调配及骨架屏秒开的体验。

服务器

  1. 使用 CDN 服务,来提高用户对于资源请求时的响应速度。

  2. 服务器端启用 Gzip、Deflate 等方式对于传输的资源进行压缩,减小文件的体积。

  3. 尽可能减小 cookie 的大小,并且通过将静态资源分配到其他域名下,来避免对静态资源请求时携带不必要的 cookie

CSS 和 JavaScript

  1. 把样式表放在页面的 head 标签中,减少页面的首次渲染的时间。

  2. 避免使用 @import 标签。

  3. 尽量把 js 脚本放在页面底部或者使用 defer 或 async 属性,避免脚本的加载和执行阻塞页面的渲染。

  4. 通过对 JavaScript 和 CSS 的文件进行压缩,来减小文件的体积。

资源合并压缩 减少HTTP请求

尽量合并和压缩html css和js文件 借助前端工具 例如 webpack gulp grunt…

开启gzip压缩

图片优化

雪碧图 图片压缩 svg base64

懒加载 / 预加载

懒加载:图片进入可视区域之后请求图片资源 对于电商等图片很多,页面很长的业务场景适用 并发加载的资源过多会阻塞 js 的加载,影响网站的正常使用

预加载:图片等静态资源在使用之前的提前请求 资源使用到时能从缓存中加载,提升用户体验

浏览器存储

localStorage:大小为 5M 左右仅在客户端使用,不和服务端进行通信 浏览器本地缓存方案

indexedDB:用于客户端存储大量结构化数据 为应用创建离线版本

浏览器缓存

强缓存:

  • expires: 缓存过期时间,用来指定资源到期的时间,是服务器端的绝对时间 告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据,而无需再次请求

  • cache-control:max-age = xxx 声明该资源在加载后的xxx秒内都直接使用缓存 使用的是相对时间 即加载文件本机的时间

如果在Cache-Control响应头设置了 “max-age” 或者 “s-max-age” 指令,那么 Expires 头会被忽略。

协商缓存:

触发条件

Cache-Control 的值为 no-cache (不强缓存) max-age 过期了 (强缓存,但总有过期的时候)

  • Last-Modified / If-Modified-Since

Last-Modified ——- response header If-Modified-Since ——- request header 缺点:某些服务端不能获取精确的修改时间;文件修改时间改了,但文件内容却没有变

  • Etag / If-None-Match

文件内容的 hash 值 etag ——- response header if-none-match ——- request header

CDN 内容分发网络

jsdelivr/PicGo/puppeteer

前端错误监控以及上报

  • 前端错误分类:
  1. 即时运行错误:代码错误
  2. 资源加载错误
  3. 对于跨域的代码运行错误会显示 Script error. 对于这种情况我们需要给 script 标签添加 crossorigin 属性,并且服务器添加Access-Control-Allow-Origin
  • 即时运行错误捕获 (1)try ….catch (2) window.onerror 或者 window.addEventListener 记住事件捕获阶段获得,不是冒泡阶段
  • 资源加载错误 (1)object.onerror,如img.onerror (2)performance.getEntries (getEntries api返回一个资源加载完成数组,假设为img,再查询页面中一共有多少个img,二者的差就是没有加载上的资源) (3)Error事件捕获
  1. 错误如何上报
  • ajax
  • image的src上报
    1
    (new Image()).src = '错误上报的请求地址'

一般来说都是采用image对象的方式上报错误的;使用图片发送get请求,上报信息,由于浏览器对图片有缓存,同样的请求,图片只会发送一次,避免重复上 报。

本文结束感谢您的阅读
坚持原创技术分享,您的支持将鼓励我继续创作!