性能优化-css，js的加载与执行

前端性能优化

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工具分析页面的加载过程