开发者课程【Node.js 入门与实战:try-catch与异步操作】学习笔记,与课程紧密联系,让用户快速学习知识
课程地址:https://developer.aliyun.com/learning/course/588/detail/8238
页面reflow和layout过程
内容介绍
一、观看视频效果
二、面试题分析
三、实操
本节课主要给讲解reflow和layout 过程。
一、观看视频效果
首先输入网址
https://www.youtube/com/watch?V=ZTnlxlA5KGw,进入视频,此视频主要讲解一个网页的reflow和layout 过程。
首先从最上面开始渲染,然后到中间,然后结束后会顺延移动如图:
此时第一轮结束,然后进行第二轮渲染。最后全部完毕之后,就会显示如下网页:
二、面试题分析
假如有一个网页,在包里面有两个元素,第一个是按钮,下面有一个div,此时如果有一个需求是,想要有50个文本框,同时将这50个文本框放到div里面,此时需要怎么做?
分析:此时不应该每创建一个文本框都放到div一遍,因为如果这样的话,需要添加50次文本框,每添加一个文本框,都需要reflow 渲染一次,这样操作,显然性能会出现问题。
所以需要,当点击这个按钮的时候,需要先创建50个文本框放到一个地方,然后再一次性的添加到div里面,这样会更容易一些。
三、实操
打开浏览器开发人员工具,找到更多工具-渲染
此时刷新网页,可以看到网页绿色在闪,此时就是网页已经被 reflow了。