在说浏览器渲染页面之前，我们需要先了解两个点，一个叫 浏览器解析 URL，另一个就是本章节将涉及的 重绘与回流： 重绘(repaint)：当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时由于只需要 UI 层面的重新像素绘制，因此损耗较少。 常见的重绘操作有： 改变元素颜色 改变元素 ...
分类：
Web程序 时间：
2019-12-21 18:47:35
阅读次数：
123
（1）浏览器解析 URL 为了能让我们的知识层面看起来更有深度，我们应该考虑下面两个问题了： 从浏览器输入 URL 到渲染成功的过程中，究竟发生了什么？ 浏览器渲染过程中，发生了什么，是不是也有重绘与回流？ OK，兴致来了，我们就先从 浏览器解析 URL 看起，先来看看当用户输入 URL，到浏览器呈 ...
分类：
Web程序 时间：
2019-12-21 18:32:43
阅读次数：
145
html 加载时发生了什么 在页面加载时，浏览器把获取到的HTML代码解析成1个DOM树，DOM树里包含了所有HTML标签，包括display:none隐藏，还有用JS动态添加的元素等。 浏览器把所有样式(用户定义的CSS和用户代理)解析成样式结构体 DOM Tree 和样式结构体组合后构建rend ...
分类：
其他好文 时间：
2019-12-19 23:17:11
阅读次数：
86
回流一定引起重绘，重绘不一定引起回流。 回流：回流也被称为重排，重排更让人形象易懂（即重排整个页面）。当render tree中的一部分或全部因为元素的尺寸规模、布局、隐藏等改变时，浏览器会重新渲染部分DOM或全部DOM的过程。 重绘：当页面元素样式改变不影响元素在文档流中的位置时（如backgro ...
分类：
其他好文 时间：
2019-12-07 12:21:06
阅读次数：
83
HTML加载时发生了什么 在页面加载时，浏览器把获取到的HTML代码解析成1个DOM树，DOM树里包含了所有HTML标签，包括display:none隐藏，还有用JS动态添加的元素等。 浏览器把所有样式(用户定义的CSS和用户代理)解析成样式结构体 DOM Tree 和样式结构体组合后构建rende ...
分类：
其他好文 时间：
2019-12-07 10:44:21
阅读次数：
93
一、display:none和visibility:hidden的区别 1.1 空间占据 1.2 回流和渲染 1.3 株连性 二、空间占据 display:none 隐藏后的元素不占据任何空间，而 visibility:hidden 隐藏的元素空间依旧存在。 三、回流和渲染 display:none ...
分类：
其他好文 时间：
2019-12-01 00:31:47
阅读次数：
125
回流、重绘及其优化 渲染过程 渲染引擎通过通过网络请求接收渲染内容 解析HTML抽象DOM tree 抽象出Render tree 布局（layout）render tree 绘画render tree 抽象DOM tree 渲染引擎的第一步是解析html文档并将解析的元素转换为dom树中的实际do ...
分类：
其他好文 时间：
2019-11-27 01:11:20
阅读次数：
100
0.引入echarts组件，和中国地图js 1. 设置地图容器 2.调用echarts绘制地图 3.调用地图绘制方法： 4.展示效果 ...
分类：
其他好文 时间：
2019-11-25 11:15:12
阅读次数：
85
本人第一次接触重绘和回流也是在一次刷题的时候,那么我就讲一下我对重绘和回流的理解吧 了解浏览器渲染过程 1.根据html元素,生成DOM tree 2.根据css样式表,生成style rules 3.两者结合生成render tree 4.根据位置信息大小等信息,生成layout(回流) 5.根据 ...
分类：
其他好文 时间：
2019-11-16 21:23:18
阅读次数：
75
Unity3D中的资源路径路径属性 路径说明Application.dataPath 此属性用于返回程序的数据文件所在文件夹的路径。例如在Editor中就是Assets了。Application.streamingAssetsPath 此属性用于返回流数据的缓存目录，返回路径为相对路径，适合设置一些 ...
分类：
编程语言 时间：
2019-11-02 12:03:39
阅读次数：
92
