前端性能优化
css，js的加载与执行
javascript是单线程的
一个网站在浏览器是如何进行渲染的呢？
html页面加载渲染的过程
html渲染过程的一些特点
- 顺序执行，并发加载
- 词法分析
- 并发加载
- 并发上限
- 是否阻塞
- 依赖关系
- 引入方式
css阻塞
- css head中阻塞页面的渲染
- css阻塞js的执行
- css不阻塞外部脚本的加载
js阻塞
- 直接引入的js阻塞页面的渲染
- js不阻塞资源的加载
- js顺序执行，阻塞后续js逻辑的执行
依赖关系
- 页面渲染依赖于css的加载
- js的执行顺序的依赖关系
- js逻辑对于DOM节点的依赖关系
js引入方式
- 直接引入
- defer
- async
- 异步动态引入js
加载和执行的一些优点
- css样式表置顶
- 用link代替import
- js脚本置地
- 合理使用js的异步加载能力
可以使用Chrome浏览器的performance工具分析页面的加载过程