推荐使用link引入样式

推荐使用link引入样式

style标签是由HTML解析器进行异步解析的，而HTML页面中由link引入的CSS就不通过HTML解析器进行异步解析，而是通过CSS解析器进行同步解析

使用link时，必须css解析器完成样式解析后，页面才能加载出HTML内容

link的问题是会产生页面阻塞，阻塞多久，用户看到的界面就会白屏多久，目前前端通常的方案是要么不显示内容，显示内容所见的就是完美的，而不应该出现“闪屏”

总结

只有link引入的外部css才能产生阻塞

style标签中的样式

1. 由HTML解析器进行解析
2. 不阻塞浏览器渲染（可能会导致“闪屏”现象）
3. 不阻塞DOM解析

link引入的外部css样式

1. 由CSS解析器进行解析
2. 阻塞浏览器渲染（可以利用此解决“闪屏”，但是可能会出现白屏）
3. 阻塞其后面的js语句执行（因为JS能设置样式，不阻塞的话会与css代码形成冲突）
4. 不阻塞DOM解析

优化方案

核心理念，尽可能快的提高外部css资源加载速度

1. 使用CDN节点进行外部资源加速
2. 对css进行压缩
3. 减少http网络请求数，合并css文件
4. 优化样式表的代码