前端常考性能优化| css性能让javascript变慢新建dom的过程，chrome创建图层的条件， insertAdjacentHTML/Text/Element，CSS width 与 clie

最新推荐文章于 2024-05-02 11:51:10 发布
最新推荐文章于 2024-05-02 11:51:10 发布
阅读量15 收藏
点赞数
分类专栏： 前端八股文 文章标签： 前端 性能优化 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43428283/article/details/137581481
版权
前端性能优化中，CSS可能导致JavaScript变慢。频繁的回流和重绘会影响UI渲染，进而影响JS执行效率。文章探讨了回流与重绘的区别，列举了触发回流的CSS属性，并介绍了新建DOM过程。此外，还讲解了Chrome创建图层的条件，以及如何通过创建独立图层优化性能。优化策略包括避免触发重绘回流的属性，使用insertAdjacentHTML等方法，以及理解CSS width与clientWidth的差异。最后，文章涉及浏览器存储、Service Worker在PWA中的作用，以及Vue渲染优化和多层次优化方案。
摘要由CSDN通过智能技术生成

css性能让javascript变慢

一个线程=》js解析
一个线程=》UI渲染
js从代码当中获取到相关的渲染结果
频发触发重绘和回流，会导致ui频繁渲染，最终导致js变慢

回流

当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)当页面布局和几何属性改变时就需要回流

重绘

当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。
回流必将引起重绘而重绘不一定会引起回流

触发页面重布局的属性

盒子模型相关属性会触发重布局
定位属性及浮动也会触发重布局
改变节点内部文字结构也会触发重布局
width top text-align
height bottom overflow-y
padding left font-weight
margin right overflow
display position font-family
border-width float line-height
border clear vertival-align

了解本专栏 订阅专栏 解锁全文 超级会员免费看
学习记录wanxiaowan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
JavaScript（四）（DOM/Node/NodeList/Document/Element）
qq_43456781的博客
07-22 783
JavaScript（四）（DOM） 文章目录JavaScript（四）（DOM）六、DOM33. DOM 概述33.1 DOM33.2 节点33.3 节点树（Document只有两个子节点doctype/html根节点）34. Node 接口34.1 属性34.1.1 Node.prototype.nodeType34.1.2 Node.prototype.nodeName34.1.3 Node.prototype.nodeValue34.1.4 Node.prototype.textContent34.
【性能优化】DNS解析优化
最新发布
owo_ovo的博客
08-08 820
【性能优化】DNS解析优化
HTML&CSS基础+JavaScript进阶
hm342133194的博客
03-27 1870
HTML、CSS基础，JS进阶内容
重绘与回流：网页性能优化的重要概念
你若盛开，清风自来
05-02 806
本文将介绍重绘与回流的概念及其对网页性能的影响，并提供一些优化方法。重绘与回流是影响网页性能的关键因素。通过优化重绘与回流，我们可以提高网页的性能，提升用户体验。
dom操作之element.insertAdjacentHTML
sdyin的博客
04-12 495
element.insertAdjacentHTML，实现分页dom渲染
【精华】Javascript对DOM增删改查，class及CSS操作，一篇全，绝对实用！
qq_40670457的博客
05-03 788
先上个最灵活，且难把握的(创建、克隆节点)： node.insertAdjacentHTML('beforeBegin', html); //在此node之前插入html代码 node.insertAdjacentHTML('afterEnd', html); //在此node之后插入html代码 node.insertAdjacentHTML('beforeEnd', ...
【JavaScript 教程】DOM——Element 节点
油墨香^-^的博客
06-18 527
作者 | 阮一峰 Element节点对象对应网页的 HTML 元素。每一个 HTML 元素，在 DOM 树上都会转化成一个Element节点对象（以下简称元素节点）。 元素节点的nodeType属性都是1。 var p = document.querySelector('p'); p.nodeName // "P" p.nodeType // 1 Element对象继承了Node接口，因此Node的属性和方法在Element对象都存在。此外，不同的 HTML 元素对应的元素节点是不一样的，浏览
HTML、CSS、JavaScript实现表格行信息的删除添加
Code6E的博客
02-12 610
来自李立超老师的练习，这个是自己写的事件委托优化后的版本，原视频网址https://www.bilibili.com/video/BV1mG411h7aD?p=147&vd_source=efd4241fdf9061e2f928f58914d04b92
HTML，CSS，JavaScript知识点
爱敲键盘的程序源的博客
09-28 1117
从0基础学开始学前端，JS+CSS+HTML
JavaScript DOM节点操作方法总结
10-21
JavaScript DOM（文档对象模型）是Web开发中一个非常重要的概念。DOM将HTML文档表示为树形结构，它允许开发者通过JavaScript脚本对页面进行操作和修改。本文将总结介绍JavaScript中有关DOM节点操作的主要方法。 ...
15-DOM-Element 对象
记录java学习日常~
05-18 397
在 DOM 树中，每个 HTML 元素都是一个 Element 对象，它们是 Document 对象的子节点。Element 对象表示 HTML 元素，并且有许多属性和方法可以用于操作这些元素的内容和样式。
前端八股文（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 1173
前端学习
JavaScript教程|导出导入，import*,export default,
VAN
01-07 993
这是我们在本节和前面章节中介绍的所有 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加载与执行效率：避免阻塞与提升性能
本文主要探讨如何提高JavaScript的加载和执行效率，以减少对网页性能的影响。在JavaScript代码的编写和应用中，浏览器在遇到`<script>`标签时会暂停页面的渲染和用户交互，直至脚本执行完毕。这可能导致用户体验下降...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

学习记录wanxiaowan

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

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

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

打赏作者

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

抵扣说明：

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

余额充值