相信在大家平常开发页面的时候，UI给你的PSD总是各种奇葩字体，PM的特殊需求，2M的背景图片，懒加载窗口抖动，以及烦心的代理网速来加载CSS。
有种拿刀先去砍UI再砍PM的冲动（开个小玩笑）。
网速快的人可能感觉不出来，但是有些网速慢的就不一样了。CSS可能托管的网站有问题，请求半分钟也是有可能的。
众所周知，CSS的加载会阻塞浏览器渲染或是引起浏览器重绘，目前业界普遍推荐把CSS放到<head>中，防止在CSS还没加载完，DOM就已经绘制出来了，造成CSS加载完成后的重绘。那在现代浏览器中我们有没有办法提高首屏渲染速度那？
字体文件没加载出来，无法进行渲染；
1 <html> 2 <head> 3 <!-- headStyle.css中存在字体文件webfont.woff2 --> 4 <link rel="stylesheet" type="text/css" href="/Style.css"> 5 </head> 6 <body> 7 <p>Text</p> 8 <link rel="stylesheet" type="text/css" href="/bodyStyle.css"> 9 </body> 10 </html>
浏览器是从上往下解析HTML文档，当发现Style.css的时候，停止解析HTML，下载Style.css，Style.css发现webfont.woff2后进行下载，并继续解析CSS StyleSheet，解析完毕后继续解析HTML，发现P标签后进行渲染，当浏览器发现bodyStyle.css时，就会下载Style.css，解析CSS，然后更新CSSStyleSheet，这时会引起一次重绘。当字体下载完毕的时候也会引起一次重绘。
<link rel="preload" href="/webfont.woff2" as="font">
Preload
因为CSS已经在head里了，不需要再加Preload了；但是css中用到的字体文件，一定要在所有css之前preload上;
主页的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函数,官网教程在这里：https://doc.webpack-china.org
// 在index.js模块中直接引入css import ‘style.css‘
// 在需要index.js模块的地方
improt(‘path-of-index.js‘).then(module => {})
webpack打包后，其实是把style.css打包进了index.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>
本篇只是加入了CSS和字体,我心中终极完美的页面HTML结构就是这样了
