现代浏览器性能优化-CSS篇

CoffeX 发布于2019-08-29 14:09 / 2269人阅读

摘要：当浏览器发现时，就会下载，解析，然后更新，这时会引起一次重绘。这个过程中，有两个非常严重的问题。如果你对异步加载的方案感兴趣，欢迎留言与我讨论扩展阅读浏览器的工作原理关于你应该知道些什么，和它们在之中的优先级

我来填坑了，CSS篇终于写出来了，如果你没看过前面的JS篇，可以在这里观看。

众所周知，CSS的加载会阻塞浏览器渲染或是引起浏览器重绘，目前业界普遍推荐把CSS放到中，防止在CSS还没加载完，DOM就已经绘制出来了，造成CSS加载完成后的重绘。那在现代浏览器中我们有没有办法提高首屏渲染速度那？

你是不是经常在第一次打开某个网站的时候看到这种情况，本来的页面是这样的

实际上刚加载出来的是这样的

字体文件没加载出来，或者加载的太慢了

理解CSS解析过程

以下面这段HTML为例，解释一遍CSS加载解析的过程。

Text

浏览器自上而下读取HTML文档，当发现headStyle.css的时候，停止Parser HTML，开始下载headStyle.css，解析headStyle.css的过程中发现字体文件webfont.woff2，开始下载webfont.woff2，并继续解析css生成CSSStyleSheet。解析完毕后，继续Parser HTML，当发现p标签时，会将p标签结合当前的CSSStyleSheet展示出来，此时用户屏幕中已经有p标签的内容了。当浏览器发现bodyEndStyle.css时，就会下载headStyle.css，解析CSS，然后更新CSSStyleSheet，这时会引起一次重绘。当字体下载完毕的时候也会引起一次重绘。

这个过程中，有两个非常严重的问题。一、如果headStyle.css文件很大，浏览器需要解析很多行CSS后才能还有个字体文件需要下载，其实此时已经很晚了，字体下载时间稍长一点，就会出现我前面截图提到的问题。二、bodyEndStyle.css中如果存在p标签对应的样式，那p标签的样式会在bodyEndStyle.css解析完成后，改变一次样式，很影响体验。

如何解决这些问题那？其中也会用到一些JS篇中提到的点，如果没看过，建议先看看。

优化核心依旧是减少下载时间

JS篇中的预先解析DNS（dns-prefetch）依旧适用，提前解析CSS文件所在域名的DNS。

Preload

因为CSS已经在head中，我们不需要为css加preload属性了，但是css中用到的字体文件，一定要在所有css之前proload上。

首页CSS内联，非必要CSS异步加载

首页用到的CSS内联写在中，其余CSS均采用异步加载，可以采用这种自己实现的加载CSS的方法，在合适的需要时加载需要的css

function LoadStyle(url) {
  try {
    document.createStyleSheet(url)
  } catch(e) {
    var cssLink = document.createElement("link");
    cssLink.rel = "stylesheet";
    cssLink.type = "text/css";
    cssLink.href = url;
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(cssLink)
  }
}

如果你使用webpack，那就更轻松了，使用import函数，大致如下

// 在a.js模块中直接引入css
import "style.css"

// 在需要a.js模块的地方
improt("path-of-a.js").then(module => {})

webpack打包后，其实是把style.css打包进了a.js，在异步加载a.js的时候，会将style.css中的代码插入haed标签中。

终极完美结构




  
  Faster

在JS篇)中，我已经解释过这套结构中JS的执行顺序了，本篇只是加入了CSS和字体。至此，我心中终极完美的页面HTML结构就是这样了。

如果你对异步加载CSS的方案感兴趣，欢迎留言与我讨论！

扩展阅读

浏览器的工作原理

关于Preload, 你应该知道些什么？

Preload，Prefetch 和它们在 Chrome 之中的优先级

云服务器 GPU云服务器 css优化性能优化优化系统性能网站性能优化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112955.html

现代浏览器性能优化-CSS篇

摘要：当浏览器发现时，就会下载，解析，然后更新，这时会引起一次重绘。这个过程中，有两个非常严重的问题。如果你对异步加载的方案感兴趣，欢迎留言与我讨论扩展阅读浏览器的工作原理关于你应该知道些什么，和它们在之中的优先级我来填坑了，CSS篇终于写出来了，如果你没看过前面的JS篇，可以在这里观看。众所周知，CSS的加载会阻塞浏览器渲染或是引起浏览器重绘，目前业界普遍推荐把CSS放到中，防止在CS...

flyer_dev 2019-08-01 18:19 评论0 收藏0
现代浏览器性能优化-CSS篇

摘要：当浏览器发现时，就会下载，解析，然后更新，这时会引起一次重绘。这个过程中，有两个非常严重的问题。如果你对异步加载的方案感兴趣，欢迎留言与我讨论扩展阅读浏览器的工作原理关于你应该知道些什么，和它们在之中的优先级我来填坑了，CSS篇终于写出来了，如果你没看过前面的JS篇，可以在这里观看。众所周知，CSS的加载会阻塞浏览器渲染或是引起浏览器重绘，目前业界普遍推荐把CSS放到中，防止在CS...

scq000 2019-08-21 18:30 评论0 收藏0
王下邀月熊_Chevalier的前端每周清单系列文章索引

摘要：感谢王下邀月熊分享的前端每周清单，为方便大家阅读，特整理一份索引。王下邀月熊大大也于年月日整理了自己的前端每周清单系列，并以年月为单位进行分类，具体内容看这里前端每周清单年度总结与盘点。感谢王下邀月熊_Chevalier 分享的前端每周清单，为方便大家阅读，特整理一份索引。王下邀月熊大大也于 2018 年 3 月 31 日整理了自己的前端每周清单系列，并以年/月为单位进行分类，具...

2501207950 2019-08-22 14:53 评论0 收藏0
前端每周清单半年盘点之 CSS 篇

摘要：前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。它能够为我们提供类似于预处理器命名空间等多方面的辅助。前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（ID：f...

RaoMeng 2019-08-29 13:21 评论0 收藏0