传统的DOM渲染方式

DOM渲染的演化过程,大致可以分为可以分为三个阶段:

1、纯后端渲染:
  • 采用这样的渲染方式,就是每一个页面中,在Chrome中展开得到的DOM和服务器返回的DOM是基本一致的(可以通过查看网页源代码来得到服务器返回的DOM)。
  • 当然,这里是“基本”一致,因为实际操作中,页面或多或少还是会带有一些js代码,并且在浏览器端中运行这些js代码来对DOM进行的渲染,不过这一部分js代码并不影响DOM的主体是由服务端返回的。
  • 纯后端的DOM渲染,DOM树的生成完全是在后端服务器中完成的,相当于后端服务器的程序会把各种的数据拼成一个DOM树,并转换成一个字节流作为HTTP Response的body返回给浏览器。
2、纯前端渲染:
  • 纯前端渲染可以解决纯后端渲染中出现的各种体验问题。
  • 纯前端渲染把DOM生成的主题逻辑都放在了前端,这时后端只会返回一个框架的DOM结构,比如只带一个容器元素的的DOM,然后由js代码把页面的主题渲染到这个容器元素中。
3、服务端的js渲染结合前端渲染:
  • 目前是最适于提供最优的使用体验,但不一定开发中最好的方式,在不同的地方,根据不同的方法来解决。
异步等待 DOM 渲染有多种实现方法,以下为你介绍不同场景下的实现方式: ### 使用 setTimeout 进行分批渲染 在普通 JavaScript 环境中,若要渲染大量 DOM 元素,可使用 `setTimeout` 进行分批渲染,避免主线程被长时间阻塞,提升浏览器响应性。 ```javascript function process() { for (let i = 0; i < batchSize; i++) { if (processed >= total) return; const div = document.createElement('div'); // ... fatherDom.appendChild(div); processed++; } if (processed < total) { setTimeout(process, 0); } } ``` `setTimeout(fn, 0)` 并非“立即执行”,而是把 `fn` 推到宏任务队列,等当前执行栈清空后再执行。每次执行仅插入 `batchSize` 个元素,接着将“下一批任务”放入事件循环,使浏览器有机会在任务间处理用户输入、重绘等操作 [^1]。 ### React 中解决异步加载组件渲染 DOM 问题 在 React 编码里,使用异步加载的组件时,可能会碰到渲染 DOM 的问题,特别是代码分割时。这些问题通常涉及组件加载的状态管理,以及在组件加载完成前后提供合适的回退(fallback)UI。常见解决方法可参考相关最佳实践 [^2]。 ### Vue 中使用 $nextTick 解决 DOM 视图更新问题 Vue 采用异步更新 DOM 策略,设置 `vm.someData = 'new value'` 时,组件不会马上重新渲染,而是在下一个事件循环“tick”中更新。若想基于更新后的 DOM 状态操作,可使用 `$nextTick` 方法。 ```javascript vm.someData = 'new value'; vm.$nextTick(() => { // 这里可以访问更新后的 DOM }); ``` 此策略本质上可优化性能,避免对同一数据多次改变导致不必要的计算和 DOM 操作 [^3][^4]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值