前端开发知识手册

CSS&JS是这样阻塞DOM解析和渲染的

  • 关于 CSS，大家肯定都知道的是标签放在头部性能会高一点，少一点人知道如果

    没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。

    有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。

    有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。

    width_auto和width_100%的区别

    1
    2
    3
    4
    5
    6
    <div><p>1</p></div>
    <style>
      div{width:600px;overflow:auto;}
      p{width:100%;padding:10px;}
      p{width:auto;padding:10px;}
    </style>

    如果是width:100%，则说明p的width会得到600px就已经充满div区域，然后自己又有padding，所以会出现滚动条。

    而width:auto则比较聪明，它是总体宽度（广义，包括width，margin,padding,border这些）等于父级宽度（狭义，内容区，仅指width），所以如果padding已经左右占去20px的空间，那么width给的值就是580px。

    所以，如果：

    1
    2
    3
    4
    5
    6
    p{
      width:auto;
      background-color: red;
      margin:10px;
      padding:10px;
    }

    其实最后实际的width值为560px。
    但无论是width:100%还是auto，其计算的参照都是父级 *内容区 *width值，而非总宽度值。