浏览器回流认识

一、什么是回流?

回流是会导致页面重新渲染的一些元素,从而影响性能。

二、哪些因素会导致回流?

1、调整窗口的大小;

2、改变字体,如果用rem 设置了根目录的字体大小,这样就减少了回流的次数;

3、增加或者移除样式表;

4、内容的变化,用户在input中输入了文字(这是不可避免的);

5、激活CSS的伪类;

6、操作class属性;

7、基本操作DOM(包括js中的domcument等);

8、计算offsetWidth与offsetHeight 属性,获取元素在窗口中的位置;

9、在html代码中直接设置style 属性的值,这个降低了代码的利用率,还影响性能。

三、如何避免回流?

1、如果想设定元素的样式,直接改变class名,而不是改变class中的某个特定的属性,比如height,weight;

2、避免设置多项内联样式,就是说少使用style;

3、应用元素动画的时候,使用属性的position属性的fixed值或absolute值;

4、避免使用table布局;

5、尽量在DOM树的最末端改变class,改变子节点的样式。

<think>好的,用户问的是前端代码如何运行。首先,我需要回忆一下前端代码的基本组成部分,包括HTML、CSS和JavaScript。然后,我应该分步骤解释这些代码是如何被浏览器处理的。 可能用户是刚入门的前端开发者,或者对网页运行机制感兴趣的非技术人员。需要确保解释清晰,避免使用过多专业术语,但又要准确。 第一步,应该讲浏览器接收到HTML后的解析过程,构建DOM树。然后CSS的解析,形成CSSOM,接着结合DOM和CSSOM生成渲染树。这部分涉及到关键渲染路径的概念,可能需要简单说明。 接下来是JavaScript的执行,这里需要注意JS如何阻塞DOM解析,以及async和defer的区别。用户可能想知道为什么有时候脚本会影响页面加载速度。 然后,渲染树的布局和绘制阶段,解释回流和重绘的概念,这对性能优化有帮助,用户可能也会关心这些点。 另外,可能需要提到现代浏览器的引擎,比如Blink、WebKit,不同浏览器的差异,但可能不需要深入,避免复杂化。 还要考虑用户可能的疑问,比如前端框架(如React、Vue)是如何运行的,是否需要提到打包工具和构建过程?不过问题可能更基础,所以暂时先集中在原生代码的运行流程上。 确保每个步骤逻辑连贯,从获取资源到解析,再到渲染和执行脚本。最后可以简单总结一下整个过程,帮助用户形成整体认识。 检查是否有遗漏的关键点,比如网络请求部分,浏览器如何获取HTML、CSS和JS文件,这可能也是运行过程的一部分。但用户的问题更侧重于代码如何运行,而非网络层面,所以简要提及即可。 最后,用中文组织语言,保持口语化,避免生硬的技术术语,但需要准确。可能需要使用示例,比如代码片段如何被处理,但用户的问题不需要具体代码,所以用描述性语言即可。</think>前端代码的运行主要依赖于浏览器,其执行过程大致分为以下几个步骤: ### 一、代码加载阶段 1. 浏览器通过HTTP请求获取HTML文件 2. 开始解析HTML文档时: - 遇到`<link>`标签会立即请求CSS文件 - 遇到`<script>`标签会立即停止HTML解析,开始下载并执行JavaScript - 遇到`<img>`等资源标签会发起异步请求(不阻塞解析) ### 二、解析与构建阶段 1. **DOM树构建**: - 解析HTML生成DOM(文档对象模型)树 - 遇到JavaScript时会暂停DOM构建(可通过`async/defer`属性优化) 2. **CSSOM构建**: - 解析CSS生成CSSOM(CSS对象模型) - 多个CSS文件会合并层叠样式 ```html <!-- 示例:典型HTML结构 --> <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <script src="app.js"></script> </body> </html> ``` ### 三、渲染树生成 1. 将DOM树与CSSOM合并为渲染树(Render Tree) 2. 计算布局(Layout): - 确定每个节点的几何位置和尺寸 - 首次称为"回流"(Reflow) 3. 绘制(Painting): - 将布局结果转换为屏幕像素 - 首次称为"重绘"(Repaint) ### 四、JavaScript执行 1. 解释器逐行解析执行JS代码 2. 即时编译(JIT)优化: - V8引擎等现代JS引擎会进行编译优化 - 生成字节码或机器码提高执行效率 3. 事件循环机制: - 调用栈(Call Stack) - 任务队列(Task Queue) - 微任务队列(Microtask Queue) ### 五、持续更新阶段 1. 响应用户交互事件 2. 处理异步请求(AJAX/Fetch) 3. 动态更新DOM(触发重排/重绘) 4. 执行定时任务(setTimeout/setInterval) ### 关键特性说明 1. **浏览器引擎差异**: - Chrome:Blink引擎 + V8 JS引擎 - Firefox:Gecko引擎 + SpiderMonkey - Safari:WebKit引擎 + JavaScriptCore 2. **性能优化点**: - 关键渲染路径优化 - 减少回流/重绘 - 代码拆分(Code Splitting) - 延迟加载(Lazy Loading) 现代前端开发通常会使用打包工具(Webpack/Vite)将源码转换为浏览器可识别的形式,但最终执行流程仍遵循上述基本过程。理解这些底层原理有助于开发高性能的Web应用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值