/h1> 假设： css加载会阻塞DOM树解析和渲染 假设结果: 在bootstrap.css还没加载完之前，下面的内容不会被解析渲染，那么我们一开始看到的应该是白屏...并且此时console.log的结果应该是一个空数组。 实际结果:如下图 3.gif 由上图我们可以看到，当css还没加载完成的时候，h1并没有显示，但是此时控制台输出如下 ?...由上面的推论，我们可以得出，css加载不会阻塞DOM树解析，但是会阻塞DOM树渲染。那么，css加载会不会阻塞js执行呢? 同样，通过代码来验证. 会阻塞后面的js语句的执行。详细结果看下图(css加载用了5600+ms): ?....png](/img/bVbf3O2) 结论 由上所述，我们可以得出以下结论: 1.css加载不会阻塞DOM树的解析 2css加载会阻塞DOM树的渲染 3css加载会阻塞后面js语句的执行、 因此，为了避免让用户看到长时间的白屏时间
代码排版工具 不同人代码的排版习惯不一样。遇到自己不喜欢的格式，看起来比较麻烦。可以使用astyle对代码进行排版。 我喜欢以"otbs"格式的排版。...命令如下： astyle -s --style=otbs *.c astyle -s --style=otbs *.h 错误排版 一次使用时，不小心对所有文件进行了排版。...Jun 20 14:31 xlnx_snd_common.h -rw-rw-r-- 1 hankf hankf 12K Jun 20 15:05 xlnx_spdif.c 再编译Linux是，得到下列错误...之间使用 Kconfig.orig、Makefile.orig恢复Kconfig和Makefile。再次编译，又能正常编译了。
01 — 浏览器渲染过程是怎样的？ 按照渲染的时间顺序，流水线可分为如下几个子阶段：构建 DOM 树、样式计算、布局阶段、分层、栅格化和显示。...文本时，会执行一个转换操作，将 CSS 文本转换为浏览器可以理解的styleSheets 创建布局树，遍历 DOM 树中的所有可见节点，并把这些节点加到布局中；而不可见的节点会被布局树忽略掉，如 head...因为页面中有很多复杂的效果，如一些复杂的 3D 变换、页面滚动，或者使用 z-indexing 做 z 轴排序等，为了更加方便地实现这些效果，渲染引擎还需要为特定的节点生成专用的图层，并生成一棵对应的图层树...由此我们可以看出，重绘不一定导致回流，回流一定会导致重绘。 常见的会导致回流的元素： 常见的几何属性有 width、height、padding、margin、left、top、border 等等。...块级作用域就是通过词法环境的栈结构来实现的，而变量提升是通过变量环境来实现，通过这两者的结合，JavaScript 引擎也就同时支持了变量提升和块级作用域了。
如何生成帧图像 任意一帧的生产方式有: 重排、重绘 和 合成 三种方式渲染路径不同，通常渲染路径越长，生成图像花费的时间就越多 重排，需要重新根据 CSSOM 和 DOM 来计算布局树，这样生成一幅图会让整个渲染流程走一遍...利用分层技术优化代码 在于元素的几何形状变换、透明度或者缩放操作，如果使用 JavaScript 来写，会牵涉整个渲染流水线，所以 JavaScript 的绘制效率会非常低下。...此时，可以使用 will-change 来告知渲染引擎会对该元素进行一些变换，渲染引擎会将该元素单独实现一帧，等这些变换发生时，渲染引擎会通过合成线程去直接处理变换，这些变换不会涉及到主线程，所以效率会提高...，多次执行强制布局和抖动操作 尽量不要在修改 DOM 结构时，再去查询一些相关的值 合理利用 CSS 动画 合成动画是直接在合成线程上执行的，如果主线程被 JavaScript 或 一些布局任务占用，...在完成一次完整操作后再把结果应用到 DOM 上，减少不必要的更新，同时还能保证 DOM 稳定输出 MVC MVC 基础结构由模型、视图和控制器组成，核心是将数据和视图分离，基于它又衍生了 MVP、MVVM
等 DOM 和 CSSOM 构建完成后渲染引擎会构造布局树。布局树的结构是过滤不显示元素的 DOM 树结构，渲染引擎会进行样式计算和计算布局完成布局树的构建，最后进行绘制工作。...3.4 利用分层技术优化代码 will-change 优化动画 使用 JavaScript 实现对某个元素的几何形状变换、透明度变换或一些缩放操作等效果，会涉及整个渲染流水线，效率低下；而使用 will-change...虚拟DOM 5.1 DOM 的缺陷 通过 JavaScript 操纵 DOM 会影响整个渲染流水线，触发样式计算、布局、绘制、栅格化、合成等任务，牵一发而动全身，对 DOM 的不当操作还可能引发强制同步布局和布局抖动问题...5.2 VDOM 执行流程 [mhwlrhhcgb.png] 创建阶段：以 React 为例，首先依据 JSX 和基础数据创建虚拟 DOM，然后由虚拟 DOM 树创建出真实 DOM 树，再触发渲染流水线输出页面...Service Worker 在 Web Worker 的基础上增加储存功能，解决了 Web Worker 每次执行完脚本后退出不保存结果而导致的重复执行问题。
计算页面布局是一个很复杂的工作，即使最简单的从上到下的块流结构，也必须考虑字体的大小以及如何划分每一块，因为它们会影响当前段落的大小和形状，然后影响下一块所在的位置。...[image.png] 例如：z-index属性将改变元素的层级，在这种情况下，按 HTML 中编写的元素顺序进行绘制，将导致渲染结果和预期不符。...[image.png] 如上图所示，因为没有正确的考虑z-index，将导致页面被错误的渲染。 在这个绘制的过程中，主线程遍历布局树，然后创建绘制记录。...[image.png] 哪怕渲染的计算可以跟上屏幕刷新，可因为此计算过程发生在主线程上，当执行 JavaScript 脚本时，可能导致渲染过程被阻断。...即使渲染的计算可以跟上屏幕的刷新速度，可因为此计算是在主线程上执行的，这就意味着 JS 代码的执行，也可能导致它被阻断。 [image.png] 如上图，时间轴上的动画帧，被 JS 阻止了一帧。
在大型网站中，会存在大量的 CSS 规则，如果为每个节点都保存一份样式值，会导致内存消耗过大。作为替代，CSS 引擎通常会创建共享的样式结构，计算样式对象一般有指针指向相同的共享结构。...同时，也为了考虑一些复杂的情况，如 3D 变换、页面滚动等，浏览器会对上一步的节点进行分层处理。这个处理过程被称为建立层叠上下文。...将页面分层，可以让一个图层独立于其他的图层进行变换和光栅化处理。...每个 draw quads 是包含一个在屏幕特定位置绘制 tile 的命令，该命令同时考虑了所有应用到 layer tree 的变换。每个四边形引用了内存中 tile 的光栅化输出。...同时，合成器还负责处理页面的滚动，滚动的时候，合成器会更新页面的位置，并且更新页面的内容。
字体成型必须考虑到排版特征，如字距调整letter-spacing和连字。 [文字排列.png] 布局可以计算单个元素的多种边界矩形。例如，当存在溢出时，Layout将同时计算边界框和布局溢出。...[image.png] 而新的NG节点对输入和输出做了明显的区分，而且输出是immutable的，可以缓存结果 [image.png] 布局结果指向描述物理几何的片段树,如图一个NGLayoutResult...看到当前页面的分层，分层的目的是可以对单独的层进行变换transform和栅格化raster 试想一下如果有123三层，其中1，2两层没变化，第3层旋转了，那么只要对第三层每帧进行变换就可以得到每一帧的输出...但是某些样式属性也会导致对应的LayoutObject单独成层，比如transform属性就类似创建新层的“触发器”一样，浏览器遇到这个属性就会单独创建新层，cc(Chromium Compositor...大多数阶段是在渲染器进程里执行的，但是raster和display则在GPU进程中执行。
「视觉属性」会影响到渲染输出，并且「必须在本地帧树片段之间同步」 「不可变的片段树」是渲染管道的「布局阶段」的输出 它表示页面上所有元素的位置和大小 每个「片段」fragment代表一个DOM元素的一部分...视觉属性更新步骤 ❝像设备比例因子device scale factor和视口大小viewport size这样的「视觉属性」会影响到渲染输出，并且「必须在本地帧树片段之间同步」。...不可变的片段树The immutable fragment tree ❝「不可变的片段树」是渲染管道的「布局阶段」的输出 它表示页面上所有元素的位置和大小 ❞ ❝「每个片段fragment代表一个DOM...❝显示项大致对应于CSS绘制顺序规范的「原子步骤」 ❞ 「一个DOM元素可能导致多个显示项」，例如#green有一个背景显示项和另一个内联文本显示项。...，并夹入渲染通道0 表面绘制quad:ID =2，用比例和平移变换绘制 为#「one」的帧绘制带有x/y位置信息的quad 渲染通道 1: 渲染通道 0 : 绘制到输出 浏览器 UI surface:
生成一帧图像的方式 生产一帧的生成方式有重绘、重排、合成三种方式。 重排会重新根据CSSOM和DOM来计算布局树，生成一张图片会将整个渲染流水线都执行一遍。...重绘在生成一张图片的过程中，少了重新布局的阶段，但依然会进重新计算绘制消息，会比重排效率高。 合成不会触发布局和绘制过程，因此合成效率更高。...重排和重绘操作都是在渲染进程的主线程上执行的，比较耗时；而合成操作是在渲染进程的合成线程上执行的，执行速度快，且不占用主线程。...利用分层技术优化代码 当对一些元素进行几何形状变换、透明度变换、缩放等操作时，使用JS操作会牵扯到整个渲染流水线，而使用CSS则只会经过合成线程的合成阶段，效率要大很多。...虚拟DOM收集到足够的改变，将这些变化一次性应用到真实DOM上，这样就能较少一些不必要的更新，同时保证DOM稳定输出。 27 ｜ 渐进式网页应用(PWA):它究竟解决了Web应用的哪些问题？
，异步加载不会造成阻塞浏览器，页面渲染完再执行，可以同时加上async属性，异步执行脚本（利用顶层的this等于undefined这个语法点，可以侦测当前代码是否在 ES6 模块之中） css 动画和...macrotask 执行完之后执行 递归的调用process.nextTick()会导致I/O starving，官方推荐使用setImmediate() 浅拷贝和深拷贝的问题 深拷贝和浅拷贝是只针对...标签会停下来，等到执行完脚本，继续向下渲染 defer 是“渲染完再执行”，async 是“下载完就执行”，defer 如果有多个脚本，会按照在页面中出现的顺序加载，多个async 脚本不能保证加载顺序...加载 es6模块的时候设置 type=module，异步加载不会造成阻塞浏览器，页面渲染完再执行，可以同时加上async属性，异步执行脚本（利用顶层的this等于undefined这个语法点，可以侦测当前代码是否在...macrotask 执行完之后执行 递归的调用process.nextTick()会导致I/O starving，官方推荐使用setImmediate() 浅拷贝和深拷贝的问题 深拷贝和浅拷贝是只针对
(敲重点) 考虑到盒子都是安卓系统，且大多版本较低且硬件性能堪忧，导致一是许多高级 API 无法使用，二是这里只是近似得到动画帧率 原理是，正常而言 requestAnimationFrame 这个方法在一秒内会执行...网页的布局模式意味着一个元素可能影响其他元素，例如 元素的宽度一般会影响其子元素的宽度以及树中各处的节点，因此对于浏览器来说，布局过程是经常发生的。 4.绘制。绘制是填充像素的过程。...由于页面的各部分可能被绘制到多层，由此它们需要按正确顺序绘制到屏幕上，以便正确渲染页面。对于与另一元素重叠的元素来说，这点特别重要，因为一个错误可能使一个元素错误地出现在另一个元素的上层。...OK，这里又提到了图形层（GraphicsLayer），这是一个浏览器渲染原理相关的知识（WebKit/blink内核下）。它能对动画进行加速，但同时也存在相应的加速坑！...过度使用 will-change 会导致生成大量图层，进而导致大量的内存占用，并会导致更复杂的渲染过程，因为浏览器会试图准备可能存在的变化过程，这会导致更严重的性能问题。
考虑到盒子都是安卓系统，且大多版本较低且硬件性能堪忧，导致一是许多高级 API 无法使用，二是这里只是近似得到动画帧率 原理是，正常而言 requestAnimationFrame 这个方法在一秒内会执行...网页的布局模式意味着一个元素可能影响其他元素，例如 元素的宽度一般会影响其子元素的宽度以及树中各处的节点，因此对于浏览器来说，布局过程是经常发生的。 绘制。绘制是填充像素的过程。...由于页面的各部分可能被绘制到多层，由此它们需要按正确顺序绘制到屏幕上，以便正确渲染页面。对于与另一元素重叠的元素来说，这点特别重要，因为一个错误可能使一个元素错误地出现在另一个元素的上层。...OK，这里又提到了图形层（GraphicsLayer），这是一个浏览器渲染原理相关的知识（WebKit/blink内核下）。它能对动画进行加速，但同时也存在相应的加速坑！ ?...过度使用 will-change 会导致生成大量图层，进而导致大量的内存占用，并会导致更复杂的渲染过程，因为浏览器会试图准备可能存在的变化过程，这会导致更严重的性能问题。
如图：该图完整阐述了网页从输入到输出的一个过程。...在Timeline帧渲染的过程中，会产生以下几种颜色： （1）蓝色：网络通信和HTML解析 （2）黄色：javascript执行 （3）紫色：样式计算和布局，即重排 （4）绿色：重绘 （5）两个函数...（能够触发合层的：CSS 3D透视变换、video、webGL、transform动画、加速CSS滤镜、叠加在已经触发合成层，这些发生在GPU中） 重排与重绘 网页生成的时候，至少会渲染一次。...以下三种情况，会导致网页重新渲染： （1）修改DOM （2）修改样式表 （3）用户事件 注释： 重新渲染，就需要重新生成布局（俗称“重排”reflow）和重新绘制（俗称“重绘”repaint）...但是，“重排”必然导致“重绘”，比如改变一个网页元素的位置，就会同时触发“重绘”和“重排”，因为布局改变了。 ####如何开发不会导致重排？
： 有些属性在绘制之前引起重新计算的原因是因为它们会影响元素的「布局」和「外观」，导致浏览器需要重新计算并重新渲染受影响的部分。...过多的动画可能会拖慢浏览器，并导致部分用户出现晕动感。 ---- 14. 避免为耗时的属性制作动画 对元素的尺寸或位置进行动画处理可能会导致整个页面在每一帧上重新布局。...在某些情况下，错误地使用 will-change 可能会导致性能问题，而不是改善。...例如，添加了大量的 will-change: transform 属性，但只有少数元素实际需要变换，这可能会导致性能下降。...如果元素频繁发生变换，而且同时使用了 will-change 和过渡效果，可能会导致页面卡顿。
图形管道中的各个阶段可以同时计算其结果 - 例如，您的应用程序可能会准备新的基元，而图形硬件的不同部分将对先前提交的几何图形执行顶点和片段计算。 然而，后期阶段取决于早期阶段的产出。...此功能允许使用高级渲染算法，如延迟着色，其中您的应用首先渲染一组纹理以存储几何数据，然后执行一次或多次从这些纹理读取的着色过程，并执行光照计算以输出最终图片。...3、变换反馈 图形硬件使用针对矢量处理进行了优化的高度并行化架构。 您可以利用新的变换反馈功能更好地使用此硬件，该功能可以将顶点着色器的输出捕捉到GPU内存中的缓冲区对象中。...当您的应用移动到后台时，您应该刷新命令缓冲区，因为在应用处于后台时在GPU上执行OpenGL ES命令会导致iOS终止您的应用。 （请参阅实施多任务处理型OpenGL ES应用程序。）...为了避免这种情况，请维护您需要查询的任何状态的副本，并直接访问它，而不是调用OpenGL ES。 发生错误时，OpenGL ES会设置一个错误标志。
其中最常见的两个场景是：Crash 和 ANR，这两个错误将会使得程序无法使用。...： 布局优化 在Android种系统对View进行测量、布局和绘制时，都是通过对View数的遍历来进行操作的。...； 注意使用wrap_content，会增加measure计算成本； 删除控件中无用属性； 渲染优化 过度绘制是指在屏幕上的某个像素在同一帧的时间内被绘制了多次。...因此，应用开发者在实现需求的同时，需要尽量减少电量的消耗。...在访问接口时，我们不用设置拦截器，因为一旦出现错误，Retrofit会自动抛出异常。比如，常见请求异常404，500，503等等。
所以为了解决复杂性的问题，layout 阶段浏览器首先会生成一个和 DOM 树节点大致一一对应的 layout 树，然后遍历该树，将经过计算后得出的位置布局数据填入节点。...对于这个过程，Chrome 团队认为没有很好地分离输入和输出，因此下一代的 layout 系统会进行重构，使得分层更加清晰。 ? 然后进入 paint 阶段。...同时 Vulkan 也会被支持。（注：Skia 是一个独立的图形处理函数库，其对硬件做了一层抽象，可以执行一系列相对底层 OpenGL 更复杂的指令。OpenGL 是跨语言跨平台的系统级绘图API。...layer 类似 PS 中图层的概念，可以独立于其他 layer 进行变换和栅格化。开发者工具中对其也有直观的展示。...合成线程需要能够处理用户可能导致页面发生变化的输入事件比如（变换、剪切、滚动、特效），因为这些操作涉及了复合图层的改变。这样可以和主线程执行 js 互不干扰。
原理是，正常而言 requestAnimationFrame 这个方法在一秒内会执行 60 次，也就是不掉帧的情况下。假设动画在时间 A 开始执行，在时间 B 结束，耗时 x ms。...网页的布局模式意味着一个元素可能影响其他元素，例如 元素的宽度一般会影响其子元素的宽度以及树中各处的节点，因此对于浏览器来说，布局过程是经常发生的。 4 .绘制。绘制是填充像素的过程。...由于页面的各部分可能被绘制到多层，由此它们需要按正确顺序绘制到屏幕上，以便正确渲染页面。对于与另一元素重叠的元素来说，这点特别重要，因为一个错误可能使一个元素错误地出现在另一个元素的上层。...OK，这里又提到了图形层（GraphicsLayer），这是一个浏览器渲染原理相关的知识（WebKit/blink内核下）。它能对动画进行加速，但同时也存在相应的加速坑！...过度使用 will-change 会导致生成大量图层，进而导致大量的内存占用，并会导致更复杂的渲染过程，因为浏览器会试图准备可能存在的变化过程，这会导致更严重的性能问题。
云服务器
ICP备案
云直播
即时通信 IM
实时音视频
