wordpress建站百科,成都微信网站建设公司哪家好,济南制作网站公司吗,网站验证码目录前端性能优化是前端开发中一个重要环节#xff0c;它包括很多内容#xff0c;其中页面的白屏时间是用户最初接触到的部分#xff0c;白屏时间过长会显著影响用户的留存率和转换率。
我们以一个 APP 内嵌 Webview 打开页面作为例子#xff0c;来分析页面打开过程以及可优化…前端性能优化是前端开发中一个重要环节它包括很多内容其中页面的白屏时间是用户最初接触到的部分白屏时间过长会显著影响用户的留存率和转换率。
我们以一个 APP 内嵌 Webview 打开页面作为例子来分析页面打开过程以及可优化的方向
前置条件 性能监控指标 APP 内点击打开页面DNS 解析 预解析域名收敛 TCP 连接 预连接 发送并响应请求 HTTP/2 浏览器解析页面 服务端渲染 加载资源并渲染页面 骨架屏资源优化资源预加载 请求接口获取数据并渲染 接口预加载接口合并
前端性能监控指标 性能优化的前置条件是性能有测量标准并可以被监控。常用的性能监控指标有以下几块。 Navigation Timing API responseStart - fetchStart收到首字节的耗时domContentLoadedEventEnd - fetchStartHTML 加载完成耗时loadEventStart - fetchStart页面完全加载耗时domainLookupEnd - domainLookupStartDNS 解析耗时connectEnd - connectStartTCP 连接耗时responseStart - requestStartTime to First ByteTTFBresponseEnd - responseStart数据传输耗时domInteractive - responseEndDOM 解析耗时loadEventStart - domContentLoadedEventEnd资源加载耗时页面中同步加载的资源) Lighthouse Performance FPFirst Paint首次绘制FCPFirst Contentful Paint首次内容绘制FMPFirst Meaningful Paint首次有效绘制LCPLargest Contentful Paint最大可见元素绘制TTITime to Interactive可交互时间TTFBTime to First Byte浏览器接收第一个字节的时间 除了上面之外UC 内核也有一套性能监控指标 T0Blink 收到 HTTP Head 的时间。T1首屏有内容显示的时间。T2首屏全部显示出来的时间 DNS 解析优化 DNS 解析优化是性能优化重要的一环DNS 的作用是根据域名获取对应的 IP 地址获取之后后续的 HTTP 流程才能进行下去。 DNS 解析是一个开销较大的过程一次 DNS 解析通常需要耗费几十到上百毫秒而在移动端网络或其他弱网环境下 DNS 解析延迟会更加严重对 DNS 解析优化则可以减少这一步骤的耗时。 2.1 DNS 预解析 我们可以通过 DNS 预解析的方式提前获取 IP 地址以缩短后续请求的响应时间。 前端可以通过 dns-prefetch 预解析具体方式如下 link reldns-prefetch hrefhttps://hzfe.org/ /2.2 域名收敛 域名收敛的目的是减少页面中域名的数量从而减少所需的 DNS 解析次数最终减 少页面的 DNS 解析过程的耗时加快页面加载速度。 TCP 连接优化 前端可以通过 preconnect 在请求发送前预先执行一些操作这些操作包括 DNS 解析TCP 握手 和 TLS 协商。具体方式如下 link hrefhttps://hzfe.org relpreconnect /4. 请求优化 通过使用 HTTP/2 协议可以依赖 HTTP/2 的多路复用、首部压缩、二进制分帧和服务端推送等特性从而加快整体请求的响应速度加快页面的渲染展示。
5. 页面解析优化 浏览器获取 HTML 文件后需要对 HTML 解析然后才能开始渲染页面这个过程中页面也是处于白屏状态。通过对这一过程进行优化可以加快页面的渲染展示。 5.1 服务端渲染Server-Side Rendering 目前流行的前后端分离的开发模式由于前端需要等待 JS 文件和接口加载完成之后才能渲染页面导致白屏时间变长。服务端渲染是指在服务端将页面的渲染逻辑处理好然后将处理好的 HTML 直接返回给前端展示。这样即可减少页面白屏的时间。 5.2 预渲染 除了服务端渲染之外还可以在前端打包时使用 prerender-spa-plugin 之类的插件进行简单的预渲染减少页面白屏的时间。
资源加载优化和页面渲染优化 浏览器解析 HTML 的同时会加载相关的资源通过对资源的加载过程进行优化也可以减少页面的白屏时间。 6.1 骨架屏 骨架屏是在需要等待加载内容的位置提供一些图形组合占位提前给用户描述页面的基础结构等待数据加载完成之后再替换成实际的内容。 骨架屏可以在数据加载前提前渲染页面缩短白屏时间提升用户体验。 6.2 静态资源优化 静态资源的优化主要分为两个方向减小资源大小加快资源加载速度。 减小资源大小 Gzip 压缩文件 JS 文件拆分动态加载 加快资源加载速度 CDNContent Delivery Network HTTP/2 6.3 资源预加载 prefetch 前端可以使用 prefetch 来指定提前获取之后需要使用到的资源浏览器将会在空闲的时候加载资源例如: link relprefetch hrefhttps://hzfe.org/index.js asscript /preload 前端可以使用 preload 来指定提前获取之后需要使用到的资源浏览器将会立即加载对应资源在解析到对应资源时即可立即执行例如: link relpreload hrefhttps://hzfe.org/index.js asscript /quicklink quicklink 是 Google 开源的预加载库quicklink 会判断链接进入视口之后在闲时预加载。quicklink 实际上加速的是次级页面。
接口请求优化 浏览器在加载完 HTML 和资源之后一般需要请求接口获取数据之后才会完整渲染页面对接口请求进行优化也可加快页面的展示。 接口合并 过多的接口请求会影响页面初始化时的渲染过程可以通过增加一层中间层合并部分请求达到加速页面展示的目的。
