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

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

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

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

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

理解CSS解析过程

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

<html>
<head>
<!-- headStyle.css中存在字体文件webfont.woff2 -->
<link rel="stylesheet" type="text/css" href="/headStyle.css">
</head>
<body>
<p>Text</p>
<link rel="stylesheet" type="text/css" href="/bodyEndStyle.css">
</body>
</html>

浏览器自上而下读取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上。

<link rel="preload" href="/webfont.woff2" as="font">

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

首页用到的CSS内联写在<head>中,其余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标签中。

终极完美结构

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Faster</title>
<link rel="dns-prefetch" href="//cdn.cn/"> <link rel="preload" href="//cdn.cn/webfont.woff2" as="font">
<link rel="preload" href="//cdn.cn/Page1-A.js" as="script">
<link rel="preload" href="//cdn.cn/Page1-B.js" as="script"> <link rel="prefetch" href="//cdn.cn/Page2.js">
<link rel="prefetch" href="//cdn.cn/Page3.js">
<link rel="prefetch" href="//cdn.cn/Page4.js"> <style type="text/css">
/* 首页用到的CSS内联 */
</style>
</head>
<body> <script type="text/javascript" src="//cdn.cn/Page1-A.js" defer></script>
<script type="text/javascript" src="//cdn.cn/Page1-B.js" defer></script>
</body>
</html>

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

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

扩展阅读

现代浏览器性能优化-CSS篇的更多相关文章

  1. 性能优化-css,js的加载与执行

    前端性能优化 css,js的加载与执行 javascript是单线程的 一个网站在浏览器是如何进行渲染的呢? html页面加载渲染的过程 html渲染过程的一些特点 顺序执行,并发加载 词法分析 并发 ...

  2. 前端性能优化JavaScript篇

    关于前端性能优化的讨论一直都很多,包罗的知识也很多,可以说性能优化只有更好,没有最好.前面我写了一篇关于css优化的总结文章,今天再从javascript方面聊一聊. 1.从资源加载方面来说,浏览器的 ...

  3. 浏览器兼容性之Css篇

    本文与上一篇随笔<浏览器兼容性之Javascript篇>有一定关联,下来我会继续不断总结,旨在解决浏览器兼容性,对遇到类似问题的同仁有所帮助,如有更多解决浏览器兼容性的案例还望大家分享一起 ...

  4. 浏览器兼容性汇总--CSS篇

    目录 CSS篇 1.       cursor:hand   VS   cursor:pointer 2.        innerText在IE中能正常工作,但在FireFox中却不行 3.     ...

  5. PHP性能优化 -理论篇

    什么情况下,遇到了PHP性能问题?    1 PHP语法使用的不恰当    2 使用PHP语言做不了它不擅长做的事    3 用php语言连接的服务不给力    4 PHP自身的短板    5 我也不 ...

  6. (转)Android性能优化——工具篇

    Android性能优化是Android开发中经常遇见的一个问题,接下来将对Android性能优化方面的知识点做一个简单的梳理和总结,将从工具和代码两方面进行梳理.所谓工欲善其事必先利其器,本文首先来看 ...

  7. 前端性能优化 css和js的加载与执行

    一个网站在浏览器端是如何进行渲染的? html本身首先会被渲染成 DOM 树,实际上 html 是最先通过网址请求过来的,请求过来之后,html 本身会由一个字节流转化成一个字符流,浏览器端拿的就是字 ...

  8. Mysql优化系列之查询性能优化前篇2

    接前一篇,这一篇主要总结下几个经常要用的命令 命令一:explain+sql mysql> explain select * from servers; +----+-------------+ ...

  9. android 性能优化-电量篇

    消耗电量的几个主要原因.功能:1.大数据量的网络传输(网络)2.不停的网络切换(网络)3.解析大量的数据(CPU) 关于网络方面的优化: .网络请求之前,检查网络连接.没有网络连接不进行请求 .判断网 ...

随机推荐

  1. [DEBUG] Springboot打包jar/war后访问包外的路径

    ======================================================== 我是Ruriko,我爱这个世界:)

  2. python Django基础操作

    Django常用命令 创建Django项目 Django-admin startprotect  mysite 创建项目以后,以下生成的文件 最外层的file:mysite/ 根目录只是你的项目的容器 ...

  3. package.json 版本解释

    指定版本:比如1.2.2,遵循“大版本.次要版本.小版本”的格式规定,安装时只安装指定版本.波浪号(tilde)+ 指定版本:比如~1.2.2,表示安装1.2.x的最新版本(不低于1.2.2),但是不 ...

  4. Pod——状态和生命周期管理及探针和资源限制

    一.什么是Podkubernetes中的一切都可以理解为是一种资源对象,pod,rc,service,都可以理解是 一种资源对象.pod的组成示意图如下,由一个叫”pause“的根容器,加上一个或多个 ...

  5. 剑指Offer(4)——替换空格

    题目: 请实现一个函数,把字符串中的每个空格替换成"%20".例如输入“We are happy.”,则输出“We%20are%20happy.”. 思路: 如果按照顺序从前往后依 ...

  6. MyCat 插件 的应用

    什么是MyCat MyCAT是一款由阿里Cobar演变而来的用于支持数据库,读写分离.分表分库的分布式中间件.MyCAT支持Oracle.MSSQL.MYSQL.PG.DB2关系型数据库,同时也支持M ...

  7. 用户注册&单点登录

    package com.tttttt.portal.controller; import java.util.HashMap; import java.util.Map; import javax.s ...

  8. pycharm2019.2永久激活

    Pycharm2019.2永久激活Pycharm官网在不到两个月内与2019.7.24更新到最新版本pycharm2019.2,不可说更新不快,对于"喜新厌旧"的我怎能错过新版本呢 ...

  9. mac OS下 安装MySQL 5.7

    Mac OS X 下 TAR.GZ 方式安装 MySQL 5.7 与 MySQL 5.6 相比, 5.7 版本在安装时有两处不同: 1:初始化方式改变, 从scripts/mysql_install_ ...

  10. CentOS 7 配置VNCServer

    因为一直在用xmanager ,所以CentOS 7 上没过VNCSserver了,最近安装Oracle19C ,xmanager 总是卡死,所以配置VNC. 发现仅仅yum install -y t ...