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

ivan_070 2017-01-19 10:41:01

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

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

...全文

849 2 打赏收藏转发到动态举报

写回复

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

Hello World, 2017-01-20

打赏
举报

回复

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

jshulym 2017-01-20

打赏
举报

回复

可以使用队列麽

JavaScript会阻塞HTML解析与页面渲染，因其可动态修改DOM和CSSOM，而浏览器渲染依赖稳定的DOM树与CSSOM树；且JS执行与Layout/Paint共享主线程，单线程模型下JS长任务将抢占渲染时机，导致白屏或卡顿。核心机制涉及解析流程、script标签行为、async/defer差异及CSSOM依赖关系。

本文详细介绍了React中的setState异步特性，样式导入与动态绑定，图片使用方法，双向数据绑定，条件渲染以及列表渲染。强调了JavaScript在前端开发中的重要性和学习策略。

本文详细介绍了React中的状态值管理，包括如何使用setState进行异步更新，以及在更新后手动触发DOM渲染。还讨论了如何动态绑定样式，展示了图片的引入方法，以及双向绑定在表单元素中的应用。此外，文章涵盖了条件渲染和列表渲染的实践，包括根据分数显示不同评价和数组元素的渲染。

本文详细介绍了浏览器加载和渲染HTML的顺序，包括IE的下载和渲染过程，以及样式表和JavaScript的处理。强调了JS的阻塞下载特性，并提供了加快页面加载速度的多种方法，如页面减肥、减少文件数量、优化元素加载顺序等。此外，还讨论了HTML页面加载和解析的具体流程，以帮助开发者理解并优化网页性能。

本文详细解析了 JavaScript 渲染引擎从 HTML 加载到页面显示的全过程，涵盖 HTML 解析、DOM 和 Render Tree 构建、CSSOM 生成、布局与绘制、回流与重绘等关键环节。重点介绍了 script 元素对解析过程的影响及 defer 和 async 属性的作用，帮助开发者优化前端性能。

87,988

社区成员

224,684

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

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

+ 用AI写文章