CSS JS 阻塞DOM.

web 性能/优化中 必须理解 html和一个页面是如何在浏览器中构造的. 这样才能找到 由于渲染阻塞导致的页面加载延迟.

什么是DOM

DOM是Document Object Model(文档对象模型)

就是一树形结构.. 由不同的 元素,父节点,子节点,兄弟节点等等组成. 彼此都有层级化的关系..

  1. html
  2. head + body
  3. head: title + link + …
    body: p + div + ul….

什么在阻塞DOM

分析页面速度时候. 总要考虑 什么阻塞了DOM导致页面加载出现延迟. HTML/css/webfont/js 等等都可以阻塞 DOM

最简单查看什么阻塞了DOM就是用谷歌的开发者工具. 或者用 在线检测网址

GDT 查看DOM阻塞 图文参考链接

  1. 打开需测试网址
  2. 启动开发者工具
  3. 找到 network 面板.
  4. 刷新网页 ⌘+R
  5. 这时候就会有 时间瀑布图显示了…

时间瀑布图重点:

瀑布图 就是. 上下显示的. network ,哦人中间的那块:带有 name status type …. 等等. 这里有根很长的竖线(下面叫红线).

CSS 和 JS 都是会阻塞DOM的. 图片 不会阻塞DOM

反正就是红线之前. 尽量只有默认初始页面.html

  1. DOMContentLoaded

  2. 瀑布图中 很长的竖线之前的绿色部分

优化DOM

CSS DOM优化

方法1: 完全无阻塞的CSS:

所有CSS 用内联方式写在 html 代码里面….

有工具可以帮你完成 内联样式自动嵌入:

方法2: 部分阻塞CSS

需要初始渲染的CSS(一般来讲就是第一屏的样式) 直接放到head 的 style 标签里. 剩下的css 放到 /body 之前. 这样做可以完全避免CSS阻塞渲染。

CSS 优化建议

  • 使用媒体查询 用 media queries (媒体查询) 来标记某些CSS为非阻塞资源.

比如 <link href="other.css" rel="stylesheet" media="(min-width: 40em)"> 这样可以在其他屏幕尺寸加载时就不用加载这个css了)

  • 合并所有CSS 到一个文件中
  • 最小化CSS文件. 删除多余的空格、字符、注释等
  • 压缩CSS文件…
  • 优化CSS文件内部.

JS DOM优化

最佳实践经验:

  1. 把脚本放在页面尾部 </body> 之前的位置
  2. 使用async或defer指令来避免阻塞渲染

异步加载JS

async 允许脚本在后台下载. 但是当后台下载完成时候,会立即支持脚本.这时候可能会影响渲染… 问题应该不大…

<script async src="foobar.js"></script>

延迟加载JS

defer 指令和 async基本一样.

区别点在于 defer 是严格要求脚本的执行顺序必须和在HTML中标记的顺序一样。 所以说,可能存在一种情况,当一些脚本已经下载完毕,这些脚本不会立即执行,它们会等待其他脚本下载完成,因为那些脚本在HTML中出现在它们之前。

JS 优化建议

  • 尽量合并成一个文件.
  • 压缩并最小化js文件
  • 可以的话 用内联js

优质js 优化文章

Web Fonts DOM优化

Web字体.也会阻塞DOM. 字体是通过CSS加载的.. 有两个选择: 阻塞渲染 或者 延迟重绘.

字体优化建议

  1. 使用Web Font加载器或者字体加载API
  2. 使用内联嵌入优化字体加载
  3. 使用例如localStorage等存储方法 关于更多深入的加载Web Fonts、如何避免渲染阻塞以及FOUT/FOIT等可以查看这篇博文: 优质 字体优化文章