页面 reflow 和 layout 过程|学习笔记

简介: 快速学习页面 reflow 和 layou t过程

开发者课程【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 过程。

首先从最上面开始渲染,然后到中间,然后结束后会顺延移动如图:

image.png

此时第一轮结束,然后进行第二轮渲染。最后全部完毕之后,就会显示如下网页:

image.png

二、面试题分析

假如有一个网页,在包里面有两个元素,第一个是按钮,下面有一个div,此时如果有一个需求是,想要有50个文本框,同时将这50个文本框放到div里面,此时需要怎么做?

分析:此时不应该每创建一个文本框都放到div一遍,因为如果这样的话,需要添加50次文本框,每添加一个文本框,都需要reflow 渲染一次,这样操作,显然性能会出现问题。

所以需要,当点击这个按钮的时候,需要先创建50个文本框放到一个地方,然后再一次性的添加到div里面,这样会更容易一些。

 

三、实操

打开浏览器开发人员工具,找到更多工具-渲染

image.png

此时刷新网页,可以看到网页绿色在闪,此时就是网页已经被 reflow了。

相关文章
不用涉及到各种冲突常规打造酷炫下拉视差效果SmartRefreshLayout+ViewPager+RecyclerView
不用涉及到各种冲突常规打造酷炫下拉视差效果SmartRefreshLayout+ViewPager+RecyclerView
275 0
|
Android开发
Android 如何实现带滚动条的TextView,在更新文字时自动滚动到最后一行
1、主布局代码:       2、主要代码 :   package com.android09; import android.
2364 0
|
存储 缓存
RecyclerView 动画原理 | 换个姿势看源码(pre-layout)
RecyclerView 动画原理 | 换个姿势看源码(pre-layout)
81 0
|
存储 缓存 索引
RecyclerView 动画原理 | pre-layout,post-layout 与 scrap 缓存的关系
RecyclerView 动画原理 | pre-layout,post-layout 与 scrap 缓存的关系
95 0
|
XML Android开发 数据格式
Android控件显示、隐藏时,增加动画效果
Android控件显示、隐藏时,增加动画效果
510 0
|
Android开发
从Toast显示原理初窥Android窗口管理
从Toast显示原理初窥Android窗口管理
217 0
从Toast显示原理初窥Android窗口管理
|
JavaScript 前端开发
【前端工程师手册】学习回流和重绘(reflow和repaint)
【前端工程师手册】学习回流和重绘(reflow和repaint)
113 0
|
算法 Android开发
Android嵌套滑动机制分析
Android嵌套滑动机制分析
Android嵌套滑动机制分析
|
存储 缓存 前端开发
【Android 性能优化】布局渲染优化 ( 过渡绘制 | 背景设置产生的过度绘制 | Android 系统的渲染优化 | 自定义布局渲染优化 )
【Android 性能优化】布局渲染优化 ( 过渡绘制 | 背景设置产生的过度绘制 | Android 系统的渲染优化 | 自定义布局渲染优化 )
224 0
【Android 性能优化】布局渲染优化 ( 过渡绘制 | 背景设置产生的过度绘制 | Android 系统的渲染优化 | 自定义布局渲染优化 )
|
Android开发 开发者 异构计算
【Android 性能优化】布局渲染优化 ( GPU 过度绘制优化总结 | CPU 渲染过程 | Layout Inspector 工具 | View Tree 分析 | 布局组件层级分析 )(二)
【Android 性能优化】布局渲染优化 ( GPU 过度绘制优化总结 | CPU 渲染过程 | Layout Inspector 工具 | View Tree 分析 | 布局组件层级分析 )(二)
274 0
【Android 性能优化】布局渲染优化 ( GPU 过度绘制优化总结 | CPU 渲染过程 | Layout Inspector 工具 | View Tree 分析 | 布局组件层级分析 )(二)