前端性能优化

已于 2023-12-31 21:28:24 修改
阅读量984 收藏 19
点赞数 28
文章标签： 前端 性能优化
于 2023-12-31 16:28:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59742742/article/details/135255935
版权

实践中性能优化的全过程

发现性能问题

发现项目的某个页面在加载的时候出现卡顿

性能测试

  • 浏览器工具的performance、lighthouse
  • 发现性能指标存在问题：比如FCP、TTI过长
  • FCP：页面上第一个内容元素首次呈现在用户屏幕上的时间
  • TTI：用户可以与页面上的元素进行交互的时间

问题分析

  • 页面加载时会先获取较大的图片，导致FCP指标过长

优化方案

  • 使用图片懒加载技术

量化优化指标

  • 结合性能指标，没有量化的性能指标都是耍流氓
  • 终将FCP优化到了1.8秒，TTI优化到了3.8秒

优化是否达标

  • 性能指标的要求：FCP必须在2秒以类等等

系统的优化方案

项目构建时（开发时）性能优化

  • 这一步主要是构建打包方面的问题，和vite、webpack是强耦合的
  • 主要思路是并行加缓存
    • 打包缓存：比如umi的MFSU或者hardsource-webpack-plugin等工具都可以大大减少构建时间
    • 并行构建：释放CPU多核并发的优势。诸如happyPack、thread-loader 等工具都可以在不同阶段开启CPU多核进行并行构建，大大提升开发时效率。
    • 等等

页面（生产时）性能优化

浏览器原理（从输入url到看到界面的过程）

  • 页面性能优化的一系列操作都是围绕着浏览器原理来展开的
  • 主要步骤
  1. 检查缓存：如果浏览器有本地的静态资源文件缓存，并且未过期，则直接从缓存中读取，而不会发送网络请求
  2. DNS解析：将输入的url对应的域名解析成ip
    • DNS解析查找过程： 本机的hosts文件->本地DNS缓存->本地域名服务器->根域名服务器查找->顶级域名服务器查找->权威域名服务器查找。最终获得IP地址后，本地DNS服务器将IP地址返回给请求的用户
    • 用户向本地DNS服务器发起请求属于递归请求，本地DNS服务器向各级域名服务器发起请求属于迭代请求
  3. TCP三次握手建立连接
  4. 发送HTTP请求
  5. 返回数据： 当页面请求发送到服务器端后，服务器端会返回一个 html 文件作为响应，浏览器接收到响应后，开始对 html 文件进行解析，开始页面的渲染过程。
  6. 浏览器解析渲染页面
    在这里插入图片描述
    解析过程：
    1. 首先解析HTML构建DOM树
    2. 碰到css的link标签下载解析css生成CSSOM树，不会影响DOM解析，但是会阻塞Render树的构建过程
    3. 碰到script标签，会下载解析js脚本。判断是否有defer和async属性，没有的话会造成页面渲染的阻塞，会停止解析HTML构建DOM树
    4. 将DOM树和CSSOM结合构建Render树
    5. 布局：计算渲染树上每个节点的几何体，确定所有节点的宽高和位置信息
    6. 渲染：将每个节点绘制到屏慕上
  7. TCP四次挥手断开连接

在浏览器渲染页面过程中的细节：
渲染树用于实际的页面渲染，和DOM树不是一一对应的，渲染树中不存在DOM树中隐藏(display:none)的元素
CSS解析会阻塞渲染，因为构建渲染树需要CSSOM
JS下载解析会阻塞DOM树的构建
defer的JS会异步下载，在DOM树构建之后，DOMContentLoaded事件（一些外部资源如图片等还没加载完成）之前执行脚本，不会阻塞HTML解析
async的js会异步下载，下载完成后执行，即即下载不阻塞HTML解析，但执行阻塞HTML解析

加载时性能优化

加载时即html文件的网络请求过程

  • 优化思路：
    • 文件体积小
    • 网络快，优化网络请求速度或次数
    • 缓存
构建策略：减少文件体积
  • webpack的代码拆分
  • 按需加载，动态导入
  • 压缩资源：压缩html/js/css代码体积
  • 图像压缩
网络策略
  • 使用CDN
  • 减少重定向
  • DNS预解析
  • 避免图片src为空
缓存
  • 强缓存
  • 协商缓存

渲染时性能优化

浏览器渲染的过程中的优化就落实到很多我们前端的具体技术细节上了

CSS策略

CSS规则优化：减少浏览器匹配元素和计算值的时间

  • 避免出现多层嵌套
  • 避免为id选择器添加多于选择器（因为ID选择器已经是具有高优先级的选择器）
  • 避免使用通配符选择器
DOM策略

先理解回流和重绘

  • 回流一定会引起重绘，回流是十分消耗性能的
  • 所以避免回流和重绘也是渲染时优化的重要部分

回流

当渲染树中部分或者全部元素的大小、位置、布局发生改变时，浏览器重新渲染部分或者全部文档的过程称为回流

会导致回流的操作：

  • 比如DOM结构发生变化(添加新的节点或者移除节点)
  • 比如改变了布局(修改了width、height、padding、font-size等值)
  • 比如窗口resize(修改了窗口的尺寸等)
  • 比如调用getComputedStyle方法
  • 获取尺寸、位置等信息

注意，多次修改DOM结构不一定会触发多次回流

document.getElementById('root').stlye.width = '100px';
document.getElementById('root').stlye.height = '100px';
document.getElementById('root').stlye.top = '10px';
document.getElementById('root').stlye.left = '10px';

上面代码是写操作，只会触发一次回流，这是因为浏览器的优化机制

但是获取offset等元素属性，每获取一次都会触发一次回流，这是因为offset等属性，要会及时回流完才能拿到最新的值

如何减少重排

  1. 避免元素影响到所在文档流
    使用**绝对定位(position:absolute)**使元素脱离文档流，这样元 素的变化不会导致其他元素的布局变化，也就不会引起重排

    如果使用CSS的transform属性实现动画，则不需要重排和重绘，直接在合成线程合成动画操作

  2. 读写分离

  • 浏览器对写操作会采用渲染队列机制，将写操作放入异步渲染队列，异步批量执行。
  • 当JS遇到读操作时候（offset / scroll / client），会把异步队列中相关的操作提前执行，以便获取到准确的值。
div.style.left = '10px';
console.log(div.offsetLeft);
div.style.top = '10px';
console.log(div.offsetTop);
div.style.width = '20px';
console.log(div.offsetWidth);
div.style.height = '20px';
console.log(div.offsetHeight);

上面代码如果没有console.log的读操作，执行后，浏览器并不会触发4次重排，而是会将3个操作放入一个渲染队列中，异步批量执行，因此可能只会触发一次重排。

当遇到读操作时候，则立刻执行渲染队列中相关操作，从而马上触发重排。

上面每个console.log()都会让浏览器取出异步渲染队列中的写操作执行，然后返回重排后的值。

对于上面的情况，为了避免重排，应该进行读写分离

div.style.left = '10px';
div.style.top = '10px';
div.style.width = '20px';
div.style.height = '20px';
console.log(div.offsetLeft);
console.log(div.offsetTop);
console.log(div.offsetWidth);
console.log(div.offsetHeight);

上面代码在执行console.log()的时候，浏览器把之前上面四个写操作的渲染队列都给清空了。因为渲染队列是空的，所以后面的读操作并没有触发重排，仅仅取值而已。

如果需要根据当前的样式设置新样式，应该先缓存当前样式，然后批量更新样式。

// bad 强制刷新，触发两次重排
div.style.left = div.offsetLeft + 1 + 'px';
div.style.top = div.offsetTop + 1 + 'px';

// good 缓存布局信息，读写分离
var curLeft = div.offsetLeft;
var curTop = div.offsetTop;
div.style.left = curLeft + 1 + 'px';
div.style.top = curTop + 1 + 'px';
  1. 集中改变样式
    虽然浏览器有异步渲染队列的机制，但是异步flush的时机我们没有办法控制，为了保证性能，还是应该集中改变样式。
// bad
var left = 10;
var top = 10;
el.style.left = left + "px";
el.style.top  = top  + "px";

// good 
el.className += " theclassname";
// good
el.style.cssText += "; left: " + left + "px; top: " + top + "px;";
  1. 离线操作DOM
    如果需要进行多个DOM操作（添加、删除、修改），不要在当前的DOM中连续操作（如循环插入li）。

在要操作DOM之前，通过display隐藏DOM，当操作完成之后，才将元素的display属性为可见，因为不可见的元素不会触发重排和重绘。

dom.display = 'none';

// 执行DOM操作...

dom.display = 'block';
  • 通过使用DocumentFragment缓存批量化DOM操作，在它上面批量操作DOM，操作完成之后，再添加到文档中，这样只会触发一次重排。
  • 复制节点，在副本上操作，然后替换原节点。

参考原文

重绘

浏览器根据元素的样式发生改变而重新绘制元素的过程，但不会影响布局

会导致重绘的操作：

  • 比如修改背景色、文字颜色、边框颜色、样式等
阻塞策略
  • 脚本与DOM/其它脚本的依赖关系很强：对script设置defer
  • 脚本与DOM/其它脚本的依赖关系不强：对script设置async
代码实践策略
  • 防抖、节流
  • 懒加载
  • 绘图时可开启GPU加速
  • 时间分片、Web Worker处理大、长逻辑
  • …
本地跑没问题
关注
  • 28
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端性能优化探索.pdf
04-12
前端性能优化探索 前端性能优化是当前互联网开发中的一个重要话题。随着互联网技术的快速发展，Web前端技术也逐渐成为了互联网开发的重要一环。然而，在如今这个追求极致体验的时代，我们不仅要实现业务需求，更...
前端性能优化与实践.zip
07-23
"前端性能优化与实践.zip"这个压缩包包含了一系列关于前端性能优化的深度文章和教程，涵盖了浏览器缓存机制、首屏加载优化、服务端渲染、事件处理策略、图片优化、性能监测工具以及CDN的工作原理等多个方面。...
如何优化fcp
weixin_42611177的博客
01-12 318
优化First Contentful Paint (FCP) 的方法有很多, 主要有以下几点: 使用预渲染，将首屏内容预先渲染好。 使用 code splitting 和 lazy loading 优化资源加载。 使用 Content Delivery Network (CDN) 加速资源加载。 优化图片和视频的加载，使用 webp 格式的图片和视频。 减少首次请求数量，合并文件并使用 HTTP...
前端性能优化策略
qq_34865249的博客
01-13 616
本文将从三部分展开介绍，逐步为读者呈现一套清晰的前端性能优化方案。 1、介绍一套合理有效的参考模型(RAIL性能模型) 2、给出一套实用的性能测试手段 3、给出基于此标准的性能提升方案（结合我们自己项目中的业务实例） 一、参考模型 web性能优化，这是大家耳熟能详的东西了。一说到性能优化，大家可能马上就会想到从一些时间节点切入，例如： 首字节时间 白屏时间 首屏时间 用户可交...
前端页面性能及其分析工具
最新发布
2401_84103903的博客
04-22 1036
点击这里即可免费获取，包括答案解析。进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！**[外链图片转存中…(img-np4ZaOAv-1713730789684)]由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）[外链图片转存中…(img-XjXLAarW-1713730789684)]点击这里即可免费获取，包括答案解析。
前端进击笔记第二十三节 前端性能优化与解决方案
fegus的博客
08-14 721
为什么要进行性能优化呢？因为对于一个产品来说，用户的体验是最重要的。当页面加载时间过长、交互操作不流畅时，会给用户带来很糟糕的体验，最坏的情况下会导致用户的流失，到最后还会出现“代码写得好看又怎样，产品还不是一样难用”的情况。正因为如此，在各种技术优化的解决方案中，性能优化出现的频率最高、优先级也常常是更高的。所以，今天我会带大家了解前端常见的性能优化手段。首先我们来看看常见的性能优化方案。...
聊聊前端性能指标那些事儿
yy的博客
07-19 249
FCP： First Contentful Paint 首次内容绘制是指测量页面从开始加载到页面内容（文本、图片、背景图、svg 元素或非白色 canvas 元素）的任何部分在屏幕上完成渲染的时间，是测量加载速度感知的重要指标之一。示例：从上图可以观察到，页面加载开始到页面渲染完成的时间轴中，FCP 发生在第二帧，首批文本和图片在屏幕上已经渲染完成。虽然页面一部分内容已完成渲染，但这并非页面所有内容全部完成渲染；这就是首次内容绘制（FCP）与最大内容绘制（LCP）最重要的区别。
前端性能优化原理与实践.zip
07-09
这本"前端性能优化原理与实践"小册子深入探讨了如何通过一系列技术手段优化前端页面，旨在帮助开发者构建更快、更流畅的Web应用。以下是该压缩包文件中可能涉及的一些核心知识点： 1. **延迟加载（Lazy Loading）**...
web前端性能优化进阶路
03-23
Web前端性能优化WPO，相信大多数前端同学都不会陌生，在各自所负责的站点页面中，也都会或多或少的有过一定的技术实践。可以说，这个领域并不缺乏成熟技术理论和技术牛人：例如Yahoo的web站点性能优化黄金法则，以及...
前端性能优化全面汇总图.zip
06-19
"前端性能优化全面汇总图.zip" 提供了一个综合性的视角，让我们一起探讨其中涉及的多个知识点。 1. **延迟加载（Lazy Loading）**：非关键内容如图片、视频等可以采用延迟加载策略，即在用户滚动到相关内容时才开始...
当我们谈前端性能的时候，我们谈的是什么
vivo互联网技术
12-09 516
本文结合谷歌官方工具 Lighthouse，分析了最新的前端页面性能评分标准，帮助大家更好地理解各项性能指标，以提升并优化相关的前端项目。 一、前端页面性能及其分析工具 前端页面的性能，一直都是大家持续关注的一个领域，因为用户的留存率和页面加载性能息息相关。根据google做出的数据统计，页面访问时长从1s增加到3s，用户跳出率增加32%。 对于前端页面性能的评估，一般是两种形式：一种是使用性能分析工具，在线对网页各项指标进行打分评估；一种是使用性能监控，通过 performance api 或者自定
我的前端性能优化体系总结
BigChicken3的博客
06-14 2091
前段性能优化体系总结
web前端面试题附答案001-说一说你对FCP这个指标的理解
xingyu_qie的专栏
09-15 935
怎么证明自己懂呢，面试官问的问题你先回答概念性的东西，然后说一说自己的理解，光理解还不够，因为但凡面试题，其实他不光是一道题，而是开发工作中的某一项痛点或者问题，而被无数人总结出来的一个精炼的问题，所以你最好还是能说一些自己在工作中使用情况。而本次的FCP只是前端性能优化指标里的一个点，面试官有的会问前端性能优化整个的问题，也有的会从单方面入手，但面试只是一次考试，不是上手开发，所以我们尽量给大家后续带来更多适合面试讲的东西，尤其是疫情了，线上面试居多，希望大家可以把问题更好的讲出来，讲出你自己的气场。
fcp使用
weixin_30546189的博客
12-08 201
参考1 fcp是Front-end Compile Platform的简写，即前端编译平台。 随着各大公司对前端开发越来越重视，前端开发人数越来越多，就引发了很多的问题： 1、如何让大家都按照编码规范来 2、如何很方便的进行前端性能优化 3、如何避免前端安全漏洞 如何使用 fcp是用PHP开发的，里面用到了很多第三方的工具，所有使用的时候需要编译机器要装一些工具...
前端性能优化之性能优化的指标和工具（chrome devtools、lighthouse、webpagetest）
jieyucx的博客
08-10 1265
测量模型是谷歌为帮助开发者更好地了解和改善性能问题而开发的一种用户体验评估框架。响应、动画、空闲和加载，对每个阶段都提出了性能目标。响应（Response）：处理用户交互的目标是在100毫秒内完成。动画（Animation）：每帧的渲染目标是16毫秒，对应的帧率是60帧/秒。空闲（Idle）：利用空闲时间执行后台工作，且在50毫秒内能够回应用户的交互。加载（Load）：尽量在1000毫秒内完成内容的加载。通过这个框架，开发者可以有针对性地优化并提升用户体验。
Web前端最新优化指标：FP、FCP、FMP、LCP、TTI、CLS、FID、FPS等
知之为知之，不知为不知
05-05 3036
Web前端最新优化指标：FP、FCP、FMP、LCP、TTI、CLS、FID、FPS等；加载性能指标、可交互时间、稳定性指标、流畅性指标
前端优化
飞翔企鹅的专栏
11-23 373
现阶段了解的前端优化： HTTP客户端一般对同一个服务器的并发连接个数都是有限制的（chrome为6个），增加多域名。 js、css文件限制最大size，50KB。
2023前端性能优化
12-27
前端性能优化是指通过一系列的技术手段和优化策略，提升网页的加载速度和用户体验。下面是一些前端性能优化的方案： 1. 页面渲染优化： - 减少HTTP请求：合并和压缩CSS和JavaScript文件，使用CSS Sprites技术来减少图片请求。 - 延迟加载：将非关键资源（如图片、视频等）的加载推迟到页面其他内容加载完成后再进行加载。 - 使用CDN加速：将静态资源部署到全球分布的CDN节点上，加快资源的加载速度。 - 使用懒加载：只加载当前可见区域的内容，延迟加载其他区域的内容。 2. 打包优化： - 代码分割：将代码按照功能模块进行拆分，按需加载，减少首次加载的文件大小。 - Tree Shaking：通过静态分析，去除未使用的代码，减少打包后的文件大小。 - 按需加载：根据路由或用户操作，动态加载所需的模块和组件，减少初始加载的资源。 3. 总体优化： - 缓存优化：合理设置缓存策略，利用浏览器缓存、CDN缓存、本地缓存等，减少重复请求和数据传输。 - 压缩资源：对CSS、JavaScript、HTML等静态资源进行压缩，减少文件大小，提高加载速度。 - 减少重绘和回流：通过优化CSS样式和DOM操作，减少页面的重绘和回流，提高渲染性能。 - 使用Web Workers：将一些耗时的任务放到Web Workers中执行，避免阻塞主线程。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值