3、探究CSS和JS阻塞问题( 六 ) _css

最优解是一边解析页面，一边下载JS，互不干扰，可以利用async和defer实现。
6、和SVG渲染
除非本身的位置或者大小发生变化，影响了 tree，才会发生重绘或回流。
重绘和回流都是相对于 tree上的元素而言的，本身进行绘制并未对页面其他元素做出更改，则只会引起画布本身的重绘
SVG
SVG其实不会触发回流，因为SVG内存在一个坐标系，SVG内的元素在SVG画布上一般都是绝对定位的。仅更新SVG内部的元素，只会相对于SVG，对其所有子元素进行布局的计算。
SVG内部的DOM元素还是会在DOM树里，也会在树里，只不过针对文档流而言，不会有位置的改变，所以不会引起回流。
为什么SVG内部元素多了后，相比，效率会低很多
是即时模式，没有DOM或文档对象模型，在使用绘制像素时，绘图指令执行后就不管其它了，减少了维护图形内部模型所需的额外内存。
SVG是保留模式，在使用SVG绘制图像时，绘制的每个对象都会添加到浏览器的内部模型中，使得性能降低。除此之外，SVG依赖于树进行渲染，只不过不会触发回流。
7、浏览器渲染产生图层
概念
浏览器在渲染一个页面时，会将页面分为很多图层，图层有大有小，每个图层上有一个或多个节点。渲染DOM时，浏览器会做如下工作。
1、获取DOM后分割为多个图层2、对每个图层的节点计算样式结果（recalculate style–样式重计算）3、为每个节点生成图形和位置（layout–重排,回流）4、将每个节点绘制填充到图层位图中（paint–重绘）5、图层作为纹理上传至GPU6、组合多个图层到页面上生成最终屏幕图像（Composite Layers–图层重组）
图层产生的条件
1、拥有具有3D变换的CSS属性：transform:rotate(7deg)、rotateX()、rotateY()、rotateZ()2、使用加速视频解码的节点3、
8、动画的选择
概述
网页的动画主要有两种实现方式，分别是CSS3动画和JS动画。
CSS3动画
CSS3动画是关键帧动画，补间动画部分由浏览器完成，便于浏览器进行优化，可以更好的控制动画的执行进程。CSS3的动画执行在合成线程，专事专干，不阻塞主线程，合成线程的动画也不会触发回流和重绘。
CSS3动画允许在GPU，专注渲染，更快。
JS动画
JS动画是逐帧动画，每一帧都是由代码控制，操作不当，极易引发回流。JS的动画执行在主线程，主线程还有其他任务要执行，容易引发阻塞和等待，降低动画执行效率。JS动画运行在CPU，但CPU还有其他任务，易受影响。
既然JS动画缺点这么多，为什么还要使用JS动画呢。因为JS可以通过编程实现复杂的动画效果，通常使用定时器或e实现。
相比定时器，e具有两个优点。其一会把每一帧中的所有DOM操作集中起来，再一次重绘或回流中完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般这个频率为每秒60帧。其二隐藏不可见的元素中，e将不会进行重绘或回流，这意味着更少的CPU、GPU和内存使用量。

文章插图
9、骨架屏（）
针对SPA应用进行首屏优化时，需尽可能地减少白屏时间，使首屏内容尽早的展现出来。虽然白屏时间可以通过减少http请求，压缩请求体积，懒加载等各种方法来缩短，但根本上是无法清除的。短暂的白屏会给用户不好的体验，常用的做法可以在内容未加载出来前添加一个的动画。初次之外，更好的方式可以使用使用骨架屏，这算是的一个进阶版。