JS初探

2017-09-13  本文已影响0人  cccccccc7355608

CSS和JS在网页中的放置顺序

将样式通过 style 标签或 link 标签放置在 head 内(顶部),而将 JS 放在 body 的末尾(底部)

白屏和FOUC

async和defer

由于 script 加载的特性,对脚本会 立即 加载并执行(记住这个立即执行,之后的跨域会用到!!!),async 和 defer 都可以使得加载后续文档元素的过程和当前脚本的加载并行进行,不同的是,async是让加载和渲染后续文档元素的过程和当前脚本的加载与执行并行进行,而对脚本设置 defer 后,脚本的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成。

网页的渲染机制

  1. 解析 HTML 标签,构建 DOM 树
  2. 解析 CSS 标签,构建 CSSOM 树
  3. 把 DOM 和 CSSOM 组合成 渲染树(render tree)
  4. 在渲染树的基础上进行布局,计算每个节点的几何结构
  5. 把每个节点绘制到屏幕上(painting)
上一篇 下一篇

猜你喜欢

热点阅读