标签：https htm 关注 参考 end title creates 延迟加载 渲染
参考：
有兴趣也可以看看这里一篇关于页面加载的文章。以上掘金那篇文章说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的量就是最少的了，能最大限度缩减那些页面空白的时间。
以下用gulp实现这个关键css的抽取过程：
标签：https htm 关注 参考 end title creates 延迟加载 渲染
原文地址：http://www.cnblogs.com/hellohello/p/7633126.html
