关键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)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验. 作为网页设计的热点趋势,越来越多的网站应用了这项技术. 通常 ...
随机推荐
- IT兄弟连 JavaWeb教程 Servlet会话跟踪 Cookie技术简介
Cookie的英文原意是“点心”,它是在客户端访问Web服务器时,服务器在客户端硬盘上存放的信息,好像是服务器送给客户的“点心”.服务器可以根据Cookie来跟踪客户状态,这对于需要区别客户的场合(如 ...
- Luogu P1417烹调方案【dp/背包】By cellur925
题目传送门 我们看到这道题,就会想起背包.于是我就一顿01背包敲,结果发现只有30分.后来看题解发现需要对输入的食材进行排序. 我们回想国王游戏一题,各位大臣的排列顺序会对权值造成影响,所以我们就预先 ...
- plsqldeveloper永久注册码
注册码:Product Code:4t46t6vydkvsxekkvf3fjnpzy5wbuhphqzserial Number:601769 password:xs374ca
- 目标&计划
目标 感觉起来NOIP还是能考到一个比较好的分数的吧 550+? 现在可能还不大行,但是过3个月或许还是能考到的 所以先订下NOIP保底500争取550+吧 至于省选... 前面有一群巨佬挡着,感觉想 ...
- LightOj 1170 - Counting Perfect BST (折半枚举 + 卡特兰树)
题目链接: http://www.lightoj.com/volume_showproblem.php?problem=1170 题目描述: 给出一些满足完美性质的一列数(x > 1 and y ...
- Music in Car CodeForces - 746F
Music in Car CodeForces - 746F 题意很难懂啊... 题意:http://blog.csdn.net/a838502647/article/details/74831793 ...
- SecureCRT的配色方法
配色后效果如下: 下面开始配色 1.首先配置成默认模式 2.终端(Terminal)==>仿真(Emulation) 按图中标注进行勾选,勾选完毕点击确认 2.选项(Options)==> ...
- Joystick
Joystick相当于5个按键的集合,向上.下.左.右.中间5个方向接通,经常用于游戏场合.
- 【学习笔记】深入理解js原型和闭包（3）——prototype原型
既typeof之后的另一位老朋友! prototype也是我们的老朋友,即使不了解的人,也应该都听过它的大名.如果它还是您的新朋友,我估计您也是javascript的新朋友. 在咱们的第一节(深入理解 ...
- 在Android上使用酷狗歌词API
参考自http://blog.csdn.net/u010752082/article/details/50810190 代码先贴出来: public void searchLyric(){ final ...