css与网络性能
css是页面渲染的关键因素之一，（当页面存在外链csss时），浏览器会等待全部css下载及解析完成后再渲染页面。关键路径上的任何延迟都会影响首屏时间，因而我们需要尽快将css传到用户的首屏设备。否则在页面渲染之前，用户只能看到一个空白的屏幕。
css渲染的主要问题
- 浏览器直到渲染树构建完成之后才能渲染页面。
- 渲染树：DOM+CSSOM
- DOM是HTML标签和同步JavaScript操作的结果。
- CSSOM是CSS规则应用于DOM的结果
- 使用JavaScript非阻塞实现添加async或者defer属性即可
- 法则：（理想状况下）最慢样式表的下载时间决定了页面的渲染时间！
所以我们需要尽快构建dom与cssom。
- 一般情况下，dom的构建相对较快，服务器响应的首个情趣就是HTML文档。
- 一般css是作为html的子资源而存在，所以cssom的构建通常需要更长的时间。
故下面提出相应方法
使用关键css
使用critical css（关键css）模式：找出首次渲染所需要的样式（首屏相关），将它们内联到 <head>标签中
根据媒体类型拆分代码
- 以非常高的优先级下载符合当前上下文（设备，屏幕尺寸，分辨率，方向等）的css文件，阻赛关键路径，
- 以非常低的优先级下载不符合当前上下文的css文件，不会阻塞关键路径。
避免在css文件中使用@import
基本原理：
- 下载html
- 请求并下载以来的css；下载及解析完成后本应该构造渲染树，然而；
- css依赖了其他的css，继续请求并下载css文件
- 构造渲染树
解决方法：将@import请求的文件改为<link rel="stylesheet"可以使得关键路径上的css并行下载，提高网络性能。
注意：如果没有权限修改包含@import的文件，可以在html中补充加入link标签，浏览器会并行下载相应的css文件，且不会重复下载@import引用的文件。
在html文件中谨慎使用@import
谨慎使用import，因为在不同浏览器表现的不一样，firefox和ie在import下是串行（预加载并不会并行下载script标签和link标签后面import引用的资源），blink内核或者ebkit内核的加引号可以实现并行哦～跟浏览器的预加载扫描有关
不要讲动态插入JavaScript的代码放在<link>标签之后
结论：如果script中的代码并不依赖css，则把它们放在样式表之前（无需查询cssom），需要查询的就放在css文件之后。
否则会阻塞do的创建
将<link rel="Stylesheet"/>放在<body>中
使页面达到逐步渲染的效果
如果将css打包成一个css文件会产生三个问题：
- 每个页面都下载全部样式
- 难以制定缓存策略（css分开打包解决）
- app。css解析构建完cssdom之前，页面渲染被阻塞。（css在需要的dom元素之前，cs可用时，页面呈现对应内容）
总结
- 懒加载非关键 CSS：
- 优先加载关键 CSS，懒加载其他 CSS；
- 或根据媒体类型拆分 CSS 文件。
- 避免使用 @import：在 HTML 文档中应该避免；在 CSS 文件之中 更应避免；以及警惕预加载扫描器的怪异行为。
- 关注 CSS 与 JavaScript 的顺序：
- 在 CSS 文件后的 JavaScript 仅在 CSSOM 构建完成后才会执行；
- 如果你的 JavaScript 不依赖 CSS；将它放置于 CSS 之前；如果 JavaScript 依赖 CSS：将它放置于 CSS 之后。
- 仅加载 DOM 依赖的 CSS：这将提高初次渲染的速度使让页面逐步渲染。
参考自前端早读课
839
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
