js修改div的样式后如何能立即渲染

ivan_070 2017-01-19 10:41:01

很早前看过一篇文章，当触发页面样式变化的时候，页面并不是立即渲染的。
刚刚对一个div修改了margin-left和width，然后执行css3的annimation，发现width没有被渲染。
如果在修改div样式之后，执行一次获取div的宽度就好了。

请问有没有什么办法能强制页面渲染一下

...全文

858 2 打赏收藏举报

写回复

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

Hello World, 2017-01-20

打赏
举报

回复

CSS修改了是立即生效的，除非你的代码不正确

jshulym 2017-01-20

打赏
举报

回复

可以使用队列麽

JS阻塞渲染的核心原因是JS可能修改DOM和CSSOM，而浏览器渲染依赖稳定的DOM和CSSOM结构。JS执行与渲染共用主线程，单线程模型下必须暂停渲染以执行JS。默认的<script>标签会阻塞HTML解析和渲染，而async和defer属性可实现并行下载JS，减少阻塞。CSS会间接阻塞JS执行（当JS依赖CSSOM时）。解决方案包括：使用async/defer、拆分长任务、动态加载JS。面试需掌握底层流程（DOM/CSSOM构建→渲染树→布局→绘制）及单线程机制，区分阻塞解析与渲染的区别。

javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可免费下载因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。[外链图片转存中…(img-OVVf7J9h-1712202676962)][外链图片转存中…(img-0siF7K4P-1712202676963)]既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化。

文章摘要本文详细解析了HTML页面的渲染流程，涵盖从加载到显示的完整过程。核心流程包括：解析HTML构建DOM树、关联样式生成CSSOM、合并为渲染树、布局计算、绘制和最终显示。重点分析了脚本阻塞解析的现象及其优化方案（defer/async属性），对比了DOM树与渲染树的差异，并探讨了回流(Reflow)与重绘(Repaint)的触发条件及性能优化策略。通过代码示例说明现代开发中如何减少渲染延迟，提升页面性能。

前阵子，在组内给大家做了一次关于“浏览器加载和渲染HTML的顺序”的分享，这里再总结一下吧。浏览器加载和渲染html的顺序1.IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。2.在渲染到页面的某一部分时，其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完)。3. 如果遇到语义解释性的标签嵌入文件(JS脚本，CSS样式)，那么此时IE的下载过程会启用单...

87,984

社区成员

224,681

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章