关键css
参考：
有兴趣也可以看看这里一篇关于页面加载的文章。以上掘金那篇文章说css的加载不会影响其他资源的下载，但是我测试了一下，发现是css会影响图片的加载：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="2.css">
<link rel="stylesheet" href="1.css">
</head>
<body>
<img src="avator.jpg"/>
</body>
</html> const http = require('http');
const fs = require('fs');
const hostname = '127.0.0.1';
const port = 9000; http.createServer((req, res) => {
if(req.url === "/") {
fs.readFile("index.html", "utf-8", function(err, data) {
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(data);
}) }else if(req.url === "/1.css") {
fs.readFile("1.css", "utf-8", function(err, data) {
res.writeHead(200, { 'Content-Type': 'text/css' });
setTimeout(function () {
res.end(data);
}, 5000);
})
}else if(req.url === "/2.css") {
fs.readFile("2.css", "utf-8", function(err, data) {
res.writeHead(200, { 'Content-Type': 'text/css' });
setTimeout(function () {
res.end(data);
}, 10000);
})
}else if(req.url === "/avator.jpg") {
fs.readFile("avator.jpg", function(err, data) {
res.writeHead(200, { 'Content-Type': 'image/jpeg' });
setTimeout(function () {
res.end(data);
}, 2000);
})
} }).listen(port, hostname, () => {
console.log('Server running at ' + hostname);
});
另外两个css是空的css。运行结果如下：
图片总是等到第一个css下载后才开始下载
测试2：
使用以上的后端，是有带延迟的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="1.css">
</head>
<body>
1111111111111111111111111111111111111111
</body>
</html> // 1.css
*{
color: red;
}
运行结果查看performance：
5秒后才出发onload（ps：onload被称为“最后的回调”，onload触发的时候，代表页面上所有东西都下载好了）
我先后把link放在head中和放在body后，chrome61的行为都是一致的，前5秒一片空白，接着再显示红色的字体
而ff54和ie11的行为是一致，却和chrome不同：link放在head中，前5秒一片空白，接着显示红色字体；如果link放到body后，则先显示黑色字体，5秒后显示红色字体。
看来不同浏览器之间差异挺大的。对于css的加载，会影响chrome的dom渲染和资源下载，而对于ie和ff，却不会影响dom渲染，会不会影响资源的下载这个我还没测试。
根据以上的测试，我觉得去研究css是否会影响dom渲染和资源下载，其实意义不是很大。更应该去关注的是是否应该让用户看到无css渲染下的html？
如果回答是，则把css放到body后，这样不管浏览器对css的加载行为是怎么样的，都能保证html能最快显示出来；
如果回答否，则把css放到head中，这样能保证html显示出来的时候，就肯定有css渲染过了。
除此之外，js也一般要放到body后，因为js的加载和执行会影响dom渲染和其他资源下载，js放到后面能保证UI优先，对于用户来说，看到界面和开始执行操作必定有一段时间间隔，这段时间留给底部的js来下载和执行就够了。
对于css的回答，一般回答否。不让丑陋的界面显示出来，但css可能会影响加载速度【如以上测试中的chrome会一片空白，而ff和ie则不会】，如何减少空白的时间呢？答案是使用“关键css”，简单来说就是从css中抽取第一屏用到的css，作为关键的css，这些css的意义就是必须要先加载这些css，把他们放到head中。其余非关键的css，则放到body后面，从而实现延迟加载这些css的目的，这样一来先加载的css的量就是最少的了，能最大限度缩减那些页面空白的时间。
以下用在node环境下实现这个关键css的抽取过程：
// 1.css
#first{
height: 920px;
background-color: darkmagenta;
}
#second{
height: 30px;
background-color: green;
}
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./1.css">
</head>
<body>
<div id="first">
333
</div>
<div id="second">
1231
</div>
</body>
</html> // handle.js
var critical = require('critical');
critical.generate({
inline: true,
base: __dirname,
src: 'index.html',
dest: 'index-critical.html',
minify: true,
width: 1300,
height: 900
});
运行handle.js，会生成一个文件：
可见，工具仅仅把第一屏的样式给抽取出来。noscript作用：浏览器不支持js的时候，标签内的东西会变得有效；如果支持js的话，则可以无视这个标签，关于preload的作用，可以参考这篇文章。除此之外，还多了一段脚本，看了一下代码，感觉是跟延迟加载有关的。
关键css的更多相关文章
- 翻译 | 关键CSS和Webpack: 减少阻塞渲染的CSS的自动化解决方案
原文地址: Critical CSS and Webpack: Automatically Minimize Render-Blocking CSS 原文作者: Anthony Gore 译者: 蜗牛 ...
- 关键CSS和Webpack: 减少阻塞渲染的CSS的自动化解决方案
原文地址: Critical CSS and Webpack: Automatically Minimize Render-Blocking CSS 原文作者: Anthony Gore 译者: 蜗牛 ...
- [css]我要用css画幅画(八) - Hello Kitty
接着之前的[css]我要用css画幅画(七) - 哆啦A梦,这次画的是Hello Kitty. /* 开始前先说点废话, 一转眼就2016年了,过完年后一直没更新博客,无他,就是懒得动. 这一转眼,一 ...
- css 多栏自适应布局
在页面重构中,我们经常会需要实现多栏布局,例如n栏固定宽度 + m栏自适应宽度的组合,绝对布局+padding+百分比宽度是容易想到的比较暴力的解决方法,但是作为未来的"工程师", ...
- 谈谈一些有趣的CSS题目（十四）-- 纯 CSS 方式实现 CSS 动画的暂停与播放！
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- css代码实现
纯 CSS 实现下面我们探讨下,使用纯 CSS 的方式能否实现. hover 伪类实现 使用 hover 伪类,在鼠标悬停在按钮上面时,控制动画样式的暂停. 关键代码如下: <div class ...
- 2017春 前端自动化(二) 页面自动刷新、sass与css转换的使用、pxToRem直观转换
2017春 前端自动化(二) 页面自动刷新.sass与css转换的使用.pxToRem直观转换 引言: 此文要演示:浏览器页面自动刷新:移动端px与rem的转换,简单直观化:使用sass自动生 ...
- CSS技术实例1-使用CSS计数器实现数值计算小游戏实例页面
一 实例要达到的要求如图所示: 二 分析 1.7个圆角矩形标签(或按钮) 2. 点击触发并开始运算,最后一个标签显示结果 3.计算成功后弹出"万岁"字眼 三 代码实现 关键CSS代 ...
- 滚动视差？CSS 不在话下
何为滚动视差 视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验. 作为网页设计的热点趋势,越来越多的网站应用了这项技术. 通常 ...
随机推荐
- python界面工具pyqt基础教程
这里有一份很详细的中文翻译供我们学习pyqt,很适合初学者和中级学者,直接丢传送门,不多说 http://www.qaulau.com/books/PyQt4_Tutorial/introductio ...
- 微信小程序红包开发 小程序发红包 开发过程中遇到的坑 微信小程序红包接口的
微信小程序红包开发 小程序发红包 开发过程中遇到的坑 微信小程序红包接口的 最近公司在开发一个小程序红包系统,客户抢到红包需要提现.也就是通过小程序来给用户发红包. 小程序如何来发红包呢?于是我想 ...
- Hive导入10G数据的测试
Hive导入10G数据的测试 让Hadoop跑在云端系列文章,介绍了如何整合虚拟化和Hadoop,让Hadoop集群跑在VPS虚拟主机上,通过云向用户提供存储和计算的服务. 现在硬件越来越便宜,一台非 ...
- oracle 查询用户权限
查询用户和权限 select object_name,created from user_objects; 受权 grant select any table,create table,create ...
- AtCoder Grand Contest 016 C - +/- Rectangle
题目传送门:https://agc016.contest.atcoder.jp/tasks/agc016_c 题目大意: 给定整数\(H,W,h,w\),你需要判断是否存在满足如下条件的矩阵,如果存在 ...
- Asp.net WebApi 异常处理解决方案
一.使用异常筛选器捕获所有异常 我们知道,一般情况下,WebApi作为服务使用,每次客户端发送http请求到我们的WebApi服务里面,服务端得到结果输出response到客户端.这个过程中,一旦服务 ...
- Codeforces Round #544 (Div. 3) C. Balanced Team
链接:https://codeforces.com/contest/1133/problem/C 题意: 给n个数, 在这n个数中选最多n个数,来组成一个队伍. 保证这n个数的最大最小差值不大于5. ...
- UVA - 1658 Admiral
3. C - Admiral 题意:给定v(3<=v<=1000)个节点,e(3<=e<=10000)条边的又向加权图,求1->v的两条不相交的路径,使得权和最小. 思路 ...
- [WOJ1138]最大子序和
题目链接: WOJ1138 题目分析: 是很经典的一道题,乱搞的方法应该有不少,这里介绍O(n)的单调队列做法 首先维护一个前缀和,然后枚举每一个位置,维护一个前缀和单增的单调队列,但队列仅储存下标, ...
- UVa 1218 Perfect Service 完美的服务
***状态设计值得一看dp[u][0]表示u是服务器(以下v均指任意u的子结点,son指u的所有子结点)ap[u][0]=sum{dp[v][1]}+1//错误,服务器是可以和其他服务器相邻的dp[u ...