浏览器的性能优化（重排）

原创已于 2024-02-29 20:44:56 修改 · 505 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

于 2024-02-29 20:44:27 首次发布

在html中我们通常要先经过渲染引擎构建dom树样式表然后组成render（渲染）树；

重排就是当某个子标签的样式发生改变时会影响它的父元素，祖先元素等等一系列元素这时浏览器就会去重新渲染这些元素这就是重排也叫回流

浏览器的不断渲染重排会大大影响web的性能导致有时候我们的页面会很卡；

为了减少重排尽量减少使用

减少dom操作

例如vue中使用的虚拟dom就是为了减少重排节约资源

合并样式使用style的csstext

div.style.cssText = 'padding:5px; border:1px solid #000; margin:5px;';

给几个样式加一个class类名调用类名

<style>
    .boxs{
        padding:5px; 
        border:1px solid #000; 
        margin:5px;
    }
</style>
<body>
<div class="box"></div>
</body>
<script>
	var box = document.querySelector('.box');
    box.classList.add('.boxs');
</script

几何属性

避免多次触发布局

如回到顶部

对于页面中的动画尽量使用绝对定位操作定位属性

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

A_wait_for

关注关注

10
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

浏览器性能优化

m0_72030584的博客

05-04

859

浏览器性能优化实践

浏览器重绘和重排的详细分析及优化策略

七公子77的技术博客

02-24

1027

集中修改样式：合并多次 DOM 操作。优先使用 CSS 动画：利用合成层优化。避免强制同步布局：分离读写操作。减少布局查询：缓存布局信息。使用现代布局方案：Flexbox/Grid 替代浮动布局。

参与评论您还未登录，请先登录后发表或查看评论

web前端网页的渲染你需要知道的东西

conquer_galaxy的博客

04-05

125

web前端网页的渲染你需要知道的东西

浏览器性能优化：打造丝滑流畅的Web体验

你若盛开，清风自来

09-11

1235

浏览器性能优化指南本文从资源加载、渲染优化和内存管理三个维度，系统介绍了提升浏览器性能的关键策略：资源加载优化代码压缩与合并：使用Webpack等工具压缩资源，合理合并文件减少请求数缓存策略：合理配置强缓存和协商缓存，利用CDN加速静态资源懒加载与预加载：对非首屏内容延迟加载，对关键资源提前加载渲染性能优化 关键路径优化：优先加载CSS，异步加载非关键JS DOM优化：简化CSS选择器，使用文档片段批量修改DOM 减少重排重绘：避免频繁修改样式属性，使用transform实现动画内存管理优化

浏览器性能优化（19种）

weixin_58286480的博客

02-17

2599

浏览器的性能优化，应该对你们有用

前端开发者必知的浏览器性能优化关键技巧

我的博客-记录

11-13

538

探索前端开发者的浏览器性能优化指南，了解15种提高网站速度与效率的关键技巧。探索前端开发者的浏览器性能优化指南，了解15种提高网站速度与效率的关键技巧。

浏览器重绘 vs 重排：性能优化必须懂的两大概念

m0_46335150的博客

04-19

746

在这篇博客中，深入探讨了浏览器渲染过程中两个关键概念——重绘（Repaint）和重排（Reflow）。解释了这两者的区别、它们如何影响页面性能，以及为何transform属性的使用可以有效提高页面渲染效率。通过理解这些基础知识，开发者可以优化网页表现，避免不必要的性能瓶颈。

深入理解浏览器原理、性能优化和调试调优

weixin_67925256的博客

05-15

904

本文深入探讨了浏览器原理与前端性能优化的关键技术。首先，解析了浏览器的多进程架构和渲染流程，包括DOM树构建、布局、绘制和合成等关键步骤。接着，介绍了JavaScript的执行原理和内存管理机制。在性能优化方面，文章提出了页面加载、渲染和内存计算的优化策略，如资源压缩、延迟加载、虚拟滚动等。此外，还推荐了Chrome DevTools等调试工具，并提供了结合实际项目的优化实践建议。最后，推荐了相关书籍和在线课程，帮助开发者进一步学习和应用这些技术。

前端性能优化：重排（reflow）和重绘（repaint）

你若盛开，清风自来

06-22

1021

本文将介绍重排（reflow）和重绘（repaint）的概念，以及它们对网页性能的影响。了解这些概念可以帮助开发者优化网页性能，提升用户体验。本文介绍了重排（reflow）和重绘（repaint）的概念，以及它们对网页性能的影响。了解这些概念可以帮助开发者优化网页性能，提升用户体验。

浏览器渲染性能优化

天涯学馆

11-05

1685

Web Worker 为了解决主线程阻塞问题，提供了后台线程执行脚本的能力，提升了页面响应速度。SharedWorker 在此基础之上，增加了多页面间资源共享的能力，适合需要跨页面共享状态的应用场景。Service Worker 则更进一步，不仅能够处理后台任务，还具备网络代理能力，是实现离线缓存、推送通知等高级功能的关键技术，是PWA技术栈中的重要组成部分。

浏览器性能优化-渲染性能1

08-03

浏览器性能优化-渲染性能1 浏览器性能优化是指为了提高浏览器的加载速度和响应能力所采取的一系列优化措施。其中，渲染性能是浏览器性能优化的关键部分，本文将详细介绍浏览器渲染性能优化的相关知识点。 Render ...

精选资源

前端性能优化之重排和重绘

01-27

有经验的大佬对这个概念一定不会陌生，“浏览器输入URL发生了什么”。...切回正题，我们继续探讨何为重排。浏览器下载完页面所有的资源后，就要开始构建DOM树，于此同时还会构建渲染树(Render Tree)。

vue2/vue3前端创建脚手架并引入RBAC权限模型

demotang的博客

12-18

206

本文介绍了基于Vue的RBAC权限管理系统实现方案。主要内容包括：1) 使用VueCLI创建项目并配置基础结构；2) 封装axios请求，实现请求/响应拦截；3) 通过Vuex管理角色和权限状态；4) 实现路由守卫和动态路由生成；5) 开发权限指令和按钮组件进行细粒度控制；6) 完整RBAC流程实现，包括登录认证、权限获取和访问控制。该方案覆盖了前端RBAC的核心功能，可根据项目需求灵活调整。

使用 Python 语言从 0 到 1 搭建完整 Web UI自动化测试学习系列 34--基础知识 9--文件上传功能

我的xiaodoujiao，软件测试人员

12-21

709

Web UI自动化测试学习系列第三十四篇

12.17 脚本网页创意导航

2503_93413701的博客

12-17

518

分享一下短小，好看的导航。

【Svelte】怎样实现一个图片上传功能？

最新发布

纠缠AI的亮子

12-21

160

在 Svelte 中实现这个功能，最优雅的方式是结合使用bind:this（获取 input 引用）和（生成本地预览地址）。

万字讲解内网横向渗透vulnstack（七）：红日靶场7实战全流程1-提权Web1/Web2（CVE-2021-3493）

mooyuan的网络安全博客

12-18

1150

本文详细记录了针对红日靶场7的多层渗透测试过程。首先通过外网攻击利用Redis未授权漏洞获取Web1跳板机权限，随后以此为跳板对内网Web2服务器进行渗透，先后利用Laravel漏洞获取初始访问权限、通过环境变量提权获取Docker容器内root权限，最后利用特权模式实现Docker逃逸，成功控制宿主机。整个渗透过程涉及信息收集、漏洞利用、权限提升、容器逃逸等多个环节，展示了从外网到内网的完整攻击链。

前端接收了id字段，发送给后端就变了

Hcy_code的博客

12-20

222

后端传的 id 到前端，前端发送时 id 发生变化

【每日算法】LeetCode 78. 子集

LYFlied的博客

12-18

689

前端开发者学习算法的重要性与实践文章摘要：算法学习对前端开发者至关重要，是从"页面构建者"向"复杂系统设计者"转变的关键。以LeetCode 78题子集问题为例，展示了回溯法、迭代法和位运算三种解法，并分析了各自的优缺点。回溯法因其可读性和灵活性成为最优解，特别适合前端场景如权限系统、商品筛选器等。文章强调算法思想比具体实现更重要，建议前端开发者通过实际应用场景来理解和练习算法，从而提升技术视野和问题解决能力。

前端开发浏览器性能优化

08-06

在前端开发中，浏览器性能优化是提升用户体验的关键环节。优化方法可以从多个维度入手，包括网络加载、渲染执行、资源管理、代码结构优化等。以下是一些核心的优化策略和最佳实践。 ### 3. 网络加载优化 - **减少请求数量**：通过合并 CSS、JavaScript 文件，使用雪碧图（CSS Sprites）减少图片请求次数。 - **启用浏览器缓存**：设置合适的 `Cache-Control` 和 `Expires` 头信息，减少重复加载资源。 - **使用 CDN 加速**：将静态资源部署在离用户更近的 CDN 节点上，缩短网络延迟。 - **启用 Gzip 或 Brotli 压缩**：压缩文本资源，减少传输体积。 - **异步加载非关键资源**：使用 `async` 或 `defer` 属性加载非关键 JavaScript，避免阻塞页面渲染[^2]。 ### 3. 渲染与执行优化 - **减少 DOM 操作**：频繁的 DOM 操作会引发重排和重绘，应尽量批量操作或使用虚拟 DOM。 - **避免强制同步布局**：读写 DOM 属性时避免触发强制同步布局，导致性能下降。 - **使用防抖（debounce）与节流（throttle）**：控制高频事件的触发频率，如滚动、调整窗口大小等。 - **利用 Web Workers**：将复杂计算任务移出主线程，避免阻塞 UI 渲染。 - **合理使用懒加载（Lazy Load）**：对图片、视频等资源延迟加载，直到用户滚动到可视区域再加载。 ### 3. 用户体验优化 - **预加载关键资源**：使用 `<link rel="preload">` 提前加载关键字体、脚本或图片。 - **骨架屏（Skeleton Screen）**：在内容加载前展示占位符，提升用户感知速度。 - **服务端渲染（SSR）或静态生成（SSG）**：提升首屏加载速度和 SEO 表现，适用于 Vue、React 等现代框架。 - **优化关键渲染路径（Critical Rendering Path）**：减少关键路径上的阻塞资源，缩短首次渲染时间[^1]。 ### 3. Vue 项目中的性能优化实践 - **组件懒加载（路由懒加载）**：使用 `() => import('...')` 实现按需加载组件。 - **v-if 与 v-show 的合理使用**：频繁切换使用 `v-show`，不频繁切换使用 `v-if`。 - **避免在模板中使用复杂表达式**：将复杂逻辑移至 `computed` 或 `methods` 中。 - **使用 keep-alive 缓存组件状态**：避免重复渲染和状态丢失。 - **使用 Vue Devtools 进行性能分析**：识别组件渲染瓶颈，优化响应速度[^3]。 ### 3. Chrome DevTools 的性能调试技巧 - **Performance 面板**：记录页面加载过程，分析主线程任务、重排重绘、长任务等性能瓶颈。 - **Lighthouse 插件**：生成性能评分报告，提供优化建议，如减少未压缩资源、移除未使用 CSS 等。 - **Network 面板**：监控资源加载时间、大小、请求顺序，识别慢速请求。 - **Memory 面板**：检测内存泄漏，分析对象保留树。 - **Coverage 面板**：查看 CSS/JS 文件中未被使用的代码比例，指导代码瘦身。 ### 3. 示例：使用防抖优化高频事件 ```javascript function debounce(func, delay) { let timer; return (...args) => { clearTimeout(timer); timer = setTimeout(() => { func.apply(this, args); }, delay); }; } // 使用示例 window.addEventListener('resize', debounce(() => { console.log('Window resized'); }, 300)); ``` ###