前端性能优化-性能优化指标，HTML，函数，对象css优化，回流重绘，复合线程与图层，渲染，代码，资源，构建优化RAIL测量模型，测量Apis,lighthouse

已于 2022-12-18 11:50:01 修改
阅读量158 收藏
点赞数
分类专栏： 前端八股文 文章标签： 前端 webpack 学习
于 2022-12-16 17:53:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43428283/article/details/128323441
版权
本文探讨了前端性能优化的重要性，围绕性能指标如TTFB、FCP、Speed Index等，介绍了RAIL模型和评估工具如Lighthouse、WebPageTest。详细讲解了浏览器渲染原理、资源优化（如HTML、CSS、JS）、图片优化、字体优化以及webpack配置优化等方面，旨在提升网页加载速度和用户体验。
摘要由CSDN通过智能技术生成

为什么要进行web性能优化？

流量-搜索-转换率-用户体验
移动端挑战多
设备硬件，网速，屏幕尺寸，交互方式，持续增长的移动用户和移动电商业务

性能指标和优化目标

TTFB请求发出倒回来多少的事件

FCP第一个有内容的绘制出现的时间，3.6s
Speed Index
交互响应要足够快
Speed Index首次加载时间，页面加载时间
响应时间

在这里插入图片描述
在这里插入图片描述

RAIL测量模型

做什么样子，怎么去做？
Response响应，animation动画，idle空闲,Load加载
让用户有更好的体验
处理时间应该在50ms以内完成的

了解本专栏 订阅专栏 解锁全文 超级会员免费看
学习记录wanxiaowan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
浅谈回流重绘
qq_44473483的博客
06-30 81
加粗样式通常来说，渲染引擎会解析HTML文档来构建DOM树，与此同时，渲染引擎也会用CSS解析器解析CSS文档构建CSSOM树。接下来，DOM树和CSSOM树关联起来构成渲染树（RenderTree），这一过程称为Attachment，最后把渲染树交给浏览器GPU进行绘制。 当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并
前端性能优化之 Web 性能优化、性能指标和优化目标、RAIL 测量模型和常用的性能测量 APIs
浮生离梦的博客
04-09 626
一、Web 性能优化 进行 Web 性能优化，因为性能是 Web 网站和应用的支柱，流量、搜索、转换率和用户体验的关系。 寻找性能瓶颈，如下所示： 了解性能指标，多快才算快 利用测量工具和 APIs 优化问题，重新测量迭代 移动端挑战多，如下所示： 设备硬件、网速、屏幕尺寸、交互方式 用户更缺少耐心，大于 3 秒加载导致 53% 的跳出率 持续增长的移动用户和移动电商业务 二、性能指标和优化目标 性能优化加载，如下所示： 理解加载瀑布图 基于 HAR 存储与重建性能信息 速度指数 Sp
前端性能优化之浏览器渲染原理和关键渲染路径、复合线程、图层及优化、JS 开销及优化和 HTML 和 CSS 优化
浮生离梦的博客
04-09 531
一、浏览器渲染原理和关键渲染路径 浏览器构建渲染树，DOM 树和 CSSDOM 树合成为 Render Tree 渲染树。 浏览器的渲染流程，如下所示： JavaScript -> Style -> Layout -> Paint -> Composite。 布局与绘制，如下所示： 渲染树只包含网页需要的节点 布局计算每个节点精确的位置和大写，盒模型 绘制是像素化每个节点的过程 影响回流的操作，如下所示： 添加、删除元素 操作 styles display: none
谈谈前端性能优化-面试版
loveX001的博客
10-11 352
当我们去面试的时候，很大概率会被面试官问这么一个问题：你有尝试过对项目做性能优化吗？或者你了解哪些性能优化的方法？听到这个问题的你可能是这样的：似曾相识但又说不清楚，往往只能零散地说出那么几点，难以做到有条理的回答。那么，本文就带你简单了解前端性能优化的几个主要方面，旨在抛砖引玉。请求过程中一些潜在的性能优化点：总结： 深入理解请求的过程是前端性能优化的核心。优化核心首页案例学习代码压缩就是压缩一些在文本文件中有意义，但是在中不显示的字符，包括空格，制表符，换行符等，还有一些其他意义的字符，如**注释**也
前端面试复习6---web前端性能优化
EthanSmile
08-18 224
前端性能优化是提升用户体验的关键。通过压缩和合并文件、减少网络请求、延迟加载图片等优化，可以加快网页加载速度。优化关键渲染路径、减少回流重绘，提升交互响应。优化资源缓存、使用CDN加速，减少服务器请求。合理使用缓存、压缩和分块传输，减少资源大小。持续监测性能，优化前端代码和设计。最终目标是提高用户体验，让用户感受到更快、流畅的网页加载和交互。
前端性能优化：7.页面渲染优化
qq_41185702的博客
01-20 2815
本文将主要关注浏览器获取到资源后，进行渲染部分的相关优化内容。 7.1 页面渲染性能 页面渲染阶段对性能体验的应i昂与资源加载阶段同样重要，而对于设计高交互频次的应用来说可能更加重要。 本节将整个渲染过程划分为五个串行阶段进行概述。优化渲染的实质，就是尽量压缩每个阶段的执行时间或跳过某些阶段的执行。 7.1.1 流畅的使用体验 要达到怎样的性能指标，才能满足用户流畅的使用体验呢？ 目前大部分折别的屏幕分辨率都在60fps左右，也就是每秒屏幕会刷新60次，所以要满足用户的体验期望，就需要浏览器在渲染页面动画或
前端性能优化
nihaio25的博客
10-08 1030
前端的性能的优化，可优化的方式有很多，性能优化是把双刃剑，有好的一面也有坏的一面。浏览器会对那些对页面影响较大的元素进行分层操作类似于Ps的图层的概念，这样当我们去操作这个元素，那只会对该图层的元素进行回流，而不影响其他的图层里的元素。img标签的loading=“lazy”属性-----------------------目前浏览器支持程度不佳 缺乏可拓展性。使用高效的css选择器 浏览器会自右向左进行元素的查找-----随着浏览器的优化，这一条已经不在使用。
前端性能优化的整理笔记_前端 优化 浏览器闲置时间
最新发布
2401_85158710的博客
07-12 886
疯狂编程学习效果可视化写博客阅读优秀代码心态调整。
当面试官问我前端可以做的性能优化有哪些_面试官问前端项目如何优化
2401_84418883的博客
04-27 1153
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】我特地针对初学者整理一套前端学习资料s：跳过整个模块/文件，直接查看该文件是否有副作用两种不同的配置方案， 有不同的效果。
前端项目优化 -Web 开发常用优化方案、Vue & React 项目优化
雲的博客
08-15 1662
前端项目优化 -Web 开发常用优化方案、Vue & React 项目优化
前端八股文（3）53-84
VAN
09-12 1522
前端八股文
javascript常见100问|前端基础知识|offsetHeight-scrollHeight-clientHeight-区别，HTMLCollection-NodeList-区别，vue-com
VAN
04-01 1317
适用于兄弟组件，或者“距离”较远的组件。常用 API● 绑定事件 event.on(key, fn) 或 event.once(key, fn)● 触发事件 event.emit(key, data)● 解绑事件 event.off(key, fn)Vue 版本的区别● Vue 2.x 可以使用 Vue 实例作为自定义事件● Vue 3.x 需要使用第三方的自定义事件，例如 https://www.npmjs.com/package/event-emitter。
前端八股文-Nodejs介绍，组成，架构和依赖，特点，运行环境安装，包和NPM,NPM包的版本管理，V8 引擎 和 libuv 库，BFF 中间层，服务端渲染，
VAN
11-05 1172
前端学习
JavaScript教程|导出导入，import*,export default,
VAN
01-07 992
这是我们在本节和前面章节中介绍的所有 export 类型：你可以阅读并回忆它们的含义来进行自查：在声明一个 class/function/… 之前：独立的导出：重新导出：export * from “module”（不会重新导出默认的导出）。export {default [as y]} from “module”（重新导出默认的导出）。
JavaScript教程| 私有的和受保护的属性和方法，内部接口和外部接口受保护的 “waterAmount”
VAN
01-02 971
面向对象编程最重要的原则之一 —— 将内部接口与外部接口分隔开来。在开发比 “hello world” 应用程序更复杂的东西时，这是“必须”遵守的做法。为了理解这一点，让我们脱离开发过程，把目光转向现实世界。通常，我们使用的设备都非常复杂。但是，将内部接口与外部接口分隔开来可以让我们使用它们且没有任何问题。
JavaScript教程|F。prototype,构造器，
VAN
12-29 943
在本章中，我们简要介绍了为通过构造函数创建的对象设置 [[Prototype]] 的方法。稍后我们将看到更多依赖于此的高级编程模式。一切都很简单，只需要记住几条重点就可以清晰地掌握了：F.prototype 属性（不要把它与 [[Prototype]] 弄混了）在 new F 被调用时为新对象的 [[Prototype]] 赋值。F.prototype 的值要么是一个对象，要么就是 null：其他值都不起作用。
JavaScript基础教程| 模块 (Module)模块级作用域import.meta,Async 适用于内联脚本,外部脚本，nomodule,构建工具
VAN
01-06 935
一个模块（module）就是一个文件。一个脚本就是一个模块。就这么简单。模块可以相互加载，并可以使用特殊的指令 export 和 import 来交换功能，从另一个模块调用一个模块的函数：export 关键字标记了可以从当前模块外部访问的变量和函数。import 关键字允许从其他模块导入功能。例如，我们有一个 sayHi.js 文件导出了一个函数：export标记了可以从当前模块外部访问的变量和函数`);……
JavaScript基础教程|Proxy 和 Reflect，私有字段， 内部插槽包装函数：“apply“，不变量，使用 “set” 捕捉器进行验证
VAN
01-07 897
Proxy 是对象的包装器，将代理上的操作转发到对象，并可以选择捕获其中一些操作。它可以包装任何类型的对象，包括类和函数。……然后，我们应该在所有地方使用 proxy 而不是 target。代理没有自己的属性或方法。如果提供了捕捉器（trap），它将捕获操作，否则会将其转发给 target 对象。我们可以捕获：读取（get），写入（set），删除（deleteProperty）属性（甚至是不存在的属性）。函数调用（apply 捕捉器）。
Webpack 打包优化实践：加速前端性能
"这篇教程总结了前端性能优化和Webpack的学习，强调了现代前端开发的模块化和构建工具的重要性。文章提到了MVC架构的优势和构建工具如Grunt、Gulp、browserify，尤其是Webpack，因其丰富的插件和加载系统而备受青睐...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

学习记录wanxiaowan

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值