2020-03-10

1. css会阻塞渲染

css加载不会阻塞DOM树的解析
css加载会阻塞DOM树的渲染
css加载会阻塞后面js语句的执行

• 1.页面初始加载时，HTML解析文件，生成DOM Tree， 解析CSS文件生成CSSOM Tree。

• 2.将DOM Tree和CSSOM Tree结合， 生成 Render Tree

• 3.根据Render Tree渲染绘制，将像素渲染到屏幕上。
  DOM解析和CSS解析是两个并行的进程，所以这也解释了为什么CSS加载不会阻塞DOM的解析。

  然而，由于Render Tree是依赖于DOM Tree和CSSOM Tree的，所以他必须等待到CSSOM Tree构建完成，也就是CSS资源加载完成(或者CSS资源加载失败)后，才能开始渲染。因此，CSS加载是会阻塞Dom的渲染的。

  由于js可能会操作之前的Dom节点和css样式，因此浏览器会维持html中css和js的顺序。因此，样式表会在后面的js执行前先加载执行完毕。所以css会阻塞后面js的执行。

因为css为阻塞浏览器的渲染，因此如果css加载速度过慢，用户会看到长时间白屏，我们应该尽可能的提高css加载速度，比如可以使用以下几种方法:

1. 使用CDN(因为CDN会根据你的网络状况，替你挑选最近的一个具有缓存内容的节点为你提供资源，因此可以减少加载时间)
2. 对css进行压缩(可以用很多打包工具，比如webpack,gulp等，也可以通过开启gzip压缩)
3. 合理的使用缓存(设置cache-control,expires,以及E-tag都是不错的，不过要注意一个问题，就是文件更新后，你要避免缓存而带来的影响。其中一个解决防范是在文件名字后面加一个版本号)
4. 减少http请求数，将多个css文件合并，或者是干脆直接写成内联样式(内联样式的一个缺点就是不能缓存)

DOMContentLoaded和onload

对于浏览器来说，页面加载主要有两个事件，一个是DOMContentLoaded，另一个是onLoad。而onLoad没什么好说的，就是等待页面的所有资源都加载完成才会触发，这些资源包括css、js、图片视频等。
而DOMContentLoaded，顾名思义，就是当页面的内容解析完成后，则触发该事件。那么，正如我们上面讨论过的，css会阻塞Dom渲染和js执行，而js会阻塞Dom解析。那么我们可以做出这样的假设

1.当页面只存在css，或者js都在css前面，那么DomContentLoaded不需要等到css加载完毕。
2.当页面里同时存在css和js，并且js在css后面的时候，DomContentLoaded必须等到css和js都加载完毕才触发。

2. 纯css实现滚动进度条的效果

html,
    body {
      position: relative;
      padding: 0;
      margin: 0;
      z-index: 1;
      background-image: linear-gradient(to left bottom, #ccc 50%, yellow 50%);
      background-size: 100% calc(100% - 100vh + 5px);
      background-repeat: no-repeat;
    }

    body::after {
      content: "";
      position: fixed;
      top: 5px;
      left: 0;
      right: 0;
      bottom: 0;
      background: #fff;
      z-index: -1;
    }

仅适用于body元素

3. 水平垂直居中 （茴字的写法 0.0）

• 1. 父元素position属性值不为static,子元素position: absolute; margin: auto;
• 2. 父元素position属性值不为static,子元素绝对定位，left，top为50%，margin-left, margin-top各自为子元素宽高的负值的一半。（因此，仅限于子元素宽高已知）
• 3. 父元素position属性值不为static,子元素绝对定位，left，top为50%，transfrom： translate(-50%, -50%);（需要对css3的支持）。意思是定位好之后，向上左个偏移自身宽度的一半。
• 4. 父元素position属性值不为static, 子元素绝对定位，left，top为calc(50%-50px)。(50px为子元素的一半，因此，这种方法，也需要已知子元素宽高)，与2,3方法相似，2,3都是定位好之后偏移，二这个方法直接将元素定位到位。
• 5. 使用行内元素， 子元素设为inlin-block,vertical-align: middle;，父元素设置line-height: 300px; height: 300px(height等于line-height即可)这样，便垂直居中了，父元素再设置水平居中。
• 6. table布局，将需要居中的内容放到td中，因为table单元格中的东西天生垂直居中，只需添加text-align: center即可。但是因为语义化不好，并且要添加一些冗余代码（table, tbody,tr），因此，不建议使用。
• 7. css-table

    .box {
      width: 300px;
      height: 300px;
      display: table-cell;
      text-align: center;
      vertical-align: middle;
    }

    .child {
      width: 100px;
      height: 100px;
      background: #f00;
      display: inline-block;
    }

• 8. flex
• 9. writing-mode(改变布局方向)

    .box {
      width: 300px;
      height: 300px;
      writing-mode: vertical-lr;
      text-align: center;
    }

    .child {
      width: 300px;
      height: 100px;
      background: #f00;
      display: inline-block;
      writing-mode: horizontal-tb;
      text-align: center;
    }

    .child1 {
      width: 100px;
      height: 100px;
      background: blue;
      display: inline-block;
    }

• 10. grid布局

.box {
      width: 300px;
      height: 300px;
      display: grid;
    }

    .child {
      width: 100px;
      height: 100px;
      background: #f00;
      justify-self: center;
      align-self: center;
    }