Open fayeah opened 2 years ago
性能的重要性我就不说了,都是老生常谈的话题了。直入主题。
首次内容绘制:测量页面从开始加载到页面内容的任何部分在屏幕上完成渲染的时间。对于该指标,"内容"指的是文本、图像(包括背景图像)、元素或非白色的元素。
import {getFCP} from 'web-vitals'; // 当 FCP 可用时立即进行测量和记录。 getFCP(console.log);
new PerformanceObserver((entryList) => { for (const entry of entryList.getEntries()) { console.log('LCP candidate:', entry.startTime, entry); } }).observe({type: 'largest-contentful-paint', buffered: true});
TTFB:是web服务响应的测量指标,发出页面请求到接收到应答数据第一个字节所花费的毫秒数。使用CDN,较快的web服务,可靠的DNS提供商能极大减少TTFB的时间。
Gzip:(资源从服务器端返回客户端之前的压缩技术)
HTTP缓存 HTTP 缓存是一种提高负载性能的有效方式,因为它减少了不必要的网络请求。所有浏览器都支持该功能,并且不需要太多设置。缓存API包括:Cache-Control,ETag,Last-Modified。
使用HTTP2.0:只用于https协议,http协议继续使用HTTP1.0。
图片:优化图片大小、替换掉矢量图(像logo等较小的图片可用矢量图绘制)。
请求数量:越多越慢,尽可能减少,使用CSS Sprites等方式。
提供合适的图片:例如,你上传的图片400px,但它所占用的位置只有300px,通过CSS技术将图片缩小到300px以匹配视觉大小。其实最好的办法是按比例上传图片。
字体,自定义字体需要额外的HTTP请求,也是会阻塞渲染的。
硬件:考量因素包括且不限于,CPU、内存利用率、磁盘空间,总的来说,web 服务器要用好的。
CDN :依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。【百度百科】
JS
<link href='${url}' rel='preconnect' crossorigin>
CSS,减少重绘
避免301:重定向是性能杀手,会产生额外的RTT(round trip times),使得初始HTHML文档加载时间加倍,尽可能避免。
DB的优化,一般是后端同学来维护,但也需要关注数据库是否有优化的空间。
优化关键渲染路径:所有可能阻碍页面渲染的资源。
浏览器从获取 HTML 到最终在屏幕上显示内容需要完成以下步骤:
CSSOM 会阻塞渲染,只有当 CSSOM 构建完毕后才会进入下一个阶段构建渲染树。
通常情况下 DOM 和 CSSOM 是并行构建的,但是当浏览器遇到一个script标签时,DOM 构建将暂停,直至脚本完成执行。但由于 JavaScript 可以修改 CSSOM,所以需要等 CSSOM 构建完毕后再执行 JS。
Google
React developer tools: Profile
以上。
性能的重要性我就不说了,都是老生常谈的话题了。直入主题。
影响性能的两大原因
两个角度
性能指标
首次内容绘制:测量页面从开始加载到页面内容的任何部分在屏幕上完成渲染的时间。对于该指标,"内容"指的是文本、图像(包括背景图像)、
性能优化手段
TTFB:是web服务响应的测量指标,发出页面请求到接收到应答数据第一个字节所花费的毫秒数。使用CDN,较快的web服务,可靠的DNS提供商能极大减少TTFB的时间。
Gzip:(资源从服务器端返回客户端之前的压缩技术)
HTTP缓存 HTTP 缓存是一种提高负载性能的有效方式,因为它减少了不必要的网络请求。所有浏览器都支持该功能,并且不需要太多设置。缓存API包括:Cache-Control,ETag,Last-Modified。
使用HTTP2.0:只用于https协议,http协议继续使用HTTP1.0。
图片:优化图片大小、替换掉矢量图(像logo等较小的图片可用矢量图绘制)。
请求数量:越多越慢,尽可能减少,使用CSS Sprites等方式。
提供合适的图片:例如,你上传的图片400px,但它所占用的位置只有300px,通过CSS技术将图片缩小到300px以匹配视觉大小。其实最好的办法是按比例上传图片。
字体,自定义字体需要额外的HTTP请求,也是会阻塞渲染的。
硬件:考量因素包括且不限于,CPU、内存利用率、磁盘空间,总的来说,web 服务器要用好的。
CDN :依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。【百度百科】
JS
<link href='${url}' rel='preconnect' crossorigin>
CSS,减少重绘
避免301:重定向是性能杀手,会产生额外的RTT(round trip times),使得初始HTHML文档加载时间加倍,尽可能避免。
DB的优化,一般是后端同学来维护,但也需要关注数据库是否有优化的空间。
优化关键渲染路径:所有可能阻碍页面渲染的资源。
浏览器从获取 HTML 到最终在屏幕上显示内容需要完成以下步骤:
CSSOM 会阻塞渲染,只有当 CSSOM 构建完毕后才会进入下一个阶段构建渲染树。
通常情况下 DOM 和 CSSOM 是并行构建的,但是当浏览器遇到一个script标签时,DOM 构建将暂停,直至脚本完成执行。但由于 JavaScript 可以修改 CSSOM,所以需要等 CSSOM 构建完毕后再执行 JS。
Tools
Google
React developer tools: Profile
以上。