关键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)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验. 作为网页设计的热点趋势,越来越多的网站应用了这项技术. 通常 ...
随机推荐
- luogu P1095守望者的逃离【dp】By cellur925
题目传送门 考虑dp,设f[i]表示到第i时间,能到达的最远距离.因为题目涉及了三种操作:1,补血消耗魔法值:2, 等待增加魔法值:3,直接向前走.而1,3和2,3的操作是可以同时进行没有冲突的,所以 ...
- Robot Framework操作mongodb数据库
RF对mongodb操作需要安装以下两个库: 1.pymongo 可以采用pip install pymongo: (如果下载过慢,可指定下载源,如:http:pypi.douban.com/simp ...
- 题解报告：hdu 1969 Pie（二分）
Problem Description My birthday is coming up and traditionally I'm serving pie. Not just one pie, no ...
- adb logcat教程
1.速查 $adb logcat -g //打印和缓冲区使用情况 $adb logcat -c main //清除main缓存区 $adb logcat -v threadtime -f /data/ ...
- Eclipse显示空白符，及使用google代码格式化
启动Eclipse,打开Preferences对话框.菜单“window”-“Preferences”. 找到Text Editors,勾选show whitespace characters,如图: ...
- 转 Oracle最新PSU大搜罗
Quick Reference to Patch Numbers for Database/GI PSU, SPU(CPU), Bundle Patches and Patchsets (文档 ID ...
- XON/OFF
#define XON 0x11#define XOFF 0x13查找ASCII码表,这两个对应的是DC1(设备控制1)和DC3(设备控制3) X/ON和X/OFF为开启和关闭发送器的信号.X /ON ...
- getAttribute()方法的第二个参数
对于一个img元素,我们想获取它的src属性时可以有两种方式: 1.xxx.getAttribute("src") 2.直接通过xxx.src获取属性值 在src的属性值为相对路径 ...
- CentOS 7.4安装mariadb，启动报错
[root@iZ25b6alxstZ ~]# systemctl start mariadb Job for mariadb.service failed because the control pr ...
- Win7下单机版的伪分布式solrCloud环境搭建Tomcat+solr+zookeeper【转】
Win7下单机版的伪分布式solrCloud环境搭建Tomcat+solr+zookeeper 1.软件工具箱 在本文的实践中,需要用到以下的软件: Tomcat-7.0.62+solr-5.0.0+ ...