相信在大家平常开发页面的时候，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模块中直接引入cssimport ‘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结构就是这样了
CSS性能优化
原文地址：https://www.cnblogs.com/yuanziwen/p/8185118.html