本文重要引见“症结衬着途径”与“收集”两个方面的机能优化并供应demo，篇幅较长发起电脑寓目。
前端优化的方面太多，本文引见的仅仅是个中的一部份，力图涵盖“症结衬着途径”的各个方面，及一些不常被提到的“收集优化”部份。
测试环境如无特别申明均为Chrome 57
衬着页面历程
浏览器从翻开一个URL到衬着完页面共有：
下载HTML文档
下载HTML文档中的css
下载Js文件
实行js剧本
下载其他资本
经由过程HTML文档构建DOM（Parse HTML）
经由过程CSS文件构建CSSOM（Parse CSS）
经由过程DOM与CSSOM盘算render tree
依据render tree举行绘制，盘算各个元素位置与大小（Layout）
对页面举行上色，衬着为终究显现的像素（Paint）
第一次完成Paint称为“首次衬着”，这时刻用户就能够看到render tree内里的东西了。而完成首次衬着的历程称为“症结衬着途径”，症结衬着途径上须要加载的资本叫做“症结资本”
这个历程很多很庞杂，个中的依靠关联也很庞杂，笔者尝试绘图来示意，然则实在是没画出来，所以照样用笔墨来表述吧：
引入的资本，哪怕被壅塞（比方被js剧本壅塞后续link标签），浏览器依旧会智能的预先加载它们（然则不实行）
“CSS文件的加载”会壅塞“Js文件实行”。若CSS援用在Js文件之前，“加载CSS文件”会壅塞“Js文件实行”。即CSS文件未加载剖析完成前，js文件不会获得实行。因为js有能够会修正CSSOM。带有async和defer属性的script不受限定。
Parse HTML的剖析是增量的，因而浏览器能够边下载HTML边构建DOM树
“CSS文件的加载”会壅塞“Layout”。若页面有正在加载的CSS文件，在CSS文件加载完之前，浏览器不会对页面举行Layout，这是为了防备款式突变带来的发抖
“加载Js文件”会壅塞“Parse HTML”，这个预计人人都晓得了，因为js能够经由过程document.write修正HTML文档流
“Js文件实行”会险些会壅塞一切东西，包含Layout
比较有意思的是，字体的加载会壅塞部分的衬着。若某一段文本的字体运用了一个还没有加载完的字体，这段文本则先不会被Paint，直到字体加载完也许凌驾某个时刻（通常是3秒）文本才会倏忽显现。
浏览器为了防止FOUT(Flash Of Unstyled Text)，会只管守候字体加载完成后，再显现运用了该字体的内容。只有当字体凌驾一段时刻仍未加载胜利时，浏览器才会降级运用体系字体。每一个浏览器都划定了自身的超时时刻（Chrome是3秒）。但这也带来了FOIT(Flash Of Invisible Text)题目。内容没法尽快地被展现，致使空缺
一些Demo来诠释浏览器衬着流程
CSS会壅塞Layout：Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css" />
<!-- 这个css文件会加载3秒钟，在这个css加载完成前浏览器不会layout -->
<link rel="stylesheet" href="../conn/sleep.php?sleep=3&content=h2{color:red;}" />
<title>Title</title>
</head>
<body>
<h1>Hello</h1>
<h2>World</h2>
</body>
</html>CSS会壅塞Js实行：Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css" />
<!-- 这个css文件会加载3秒钟 -->
<link rel="stylesheet" href="../conn/sleep.php?sleep=3&content=h2{color:red;}" />
<script>
// 这段js会守候css加载完才会运转
alert('js is run!');
</script>
<title>Title</title>
</head>
<body>
<h1>Hello</h1>
<h2>World</h2>
</body>
</html>Js实行会壅塞症结衬着途径，哪怕是defer照样async：Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
function sleep(ms){
var ts =+new Date;
while(true){
if(+new Date -ts >=ms) break;
}
return +new Date -ts;
}
</script>
<!-- 这个css文件会加载2秒钟，所以会在js文件以后加载完 -->
<link rel="stylesheet" href="../conn/sleep.php?sleep=2&content=h2{color:red;}" />
<!-- 这个js文件会霎时加载完，然则会运转3秒钟 -->
<script defer src="run3s.js"></script>
<!-- 这个js文件会霎时加载完，然则会运转2秒钟 -->
<script async src="run2s.js"></script>
<title>Title</title>
</head>
<body>
<!-- 翻开页面后5秒钟才会显现，因为js实行会壅塞症结衬着途径 -->
<h1>Hello</h1>
<h2>World</h2>
</body>
</html>Foot会壅塞部分衬着，然则智能的浏览器会给他设定一个上限，平常是3秒钟：Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@font-face {
font-family: "test-font";
src: url("../conn/sleep.php?sleep=5&file=scripts_.ttf");
}
h1{
font-family: "test-font";
}
</style>
<title>Title</title>
</head>
<body>
<h1>Hello</h1>
<h2>World</h2>
</body>
</html>CSS篇优化战略
优化中心观点是：将首次衬着不须要的CSS想办法剥离出症结衬着途径
如果仅仅是为了提早首次衬着时刻而举行优化，将页面必备的CSS剥离症结衬着途径而形成款式突变致使页面发抖，则得不偿失了
运用link/style的media属性
对某些媒体查询前提触发后才运用的css，能够在link标签中到场media属性，以下：
<link rel="stylesheet" href="index_print.css" media="print">此款式表仍会加载。当浏览器环境不婚配媒体查询前提时，该款式表不会壅塞衬着。我们可针对差别媒体环境拆分CSS文件，并为link标签增添媒体查询，防止为了加载非症结CSS资本，而壅塞首次衬着
运用DOM API增添CSS
能够运用js代码来增添css
var style = document.createElement('link');
style.rel = 'stylesheet';
style.href = 'index.css';
document.head.appendChild(style);运用resoure hint范例的preload
将link标签的rel属性设置为preload，浏览器碰到碰到标记为preload的link时，会最先加载它，然则因为rel不是stylesheet，因而不会壅塞衬着。
<link rel="preload" href="index_print.css" as="style" onload="this.rel='stylesheet'">然后在恰当的时刻，在rel改成stylesheet，即可运用此款式。
然则这个属性兼容性比较差，细致能够参考这里。不过有一个polyfill能够用loadCSS，道理是经由过程DOM API插进去款式资本。
这个属性的运用情形有些偏，也多是我明白题目：
当运用preload引入css文件时，实际上证实这个页面基础不须要这个css，它有多是打印款式，也许是相应式网站的另一套css代码。然则，运用preload属性，浏览器反而会预先加载它，也就是说，在window.onload之前，用户将耗费了收集资本在加载一个临时不须要的款式。收集资本不多是无穷的，也就是说这个css会占用页面其他资本比方图片的收集资本。
讯问瓜瓜先生本人后，瓜瓜先生说：
举个例子。第三屏有个广告版，它的款式
如许确切这个css的紧要水平就介于症结衬着途径的css与页面图片之间了，不过貌似这个情形很受限。
JS篇优化战略
运用defer耽误剧本实行
当script标签具有defer属性时，该剧本会被推晚到全部HTML文档剖析完后，再最先实行。因而将剧本放在head中，能够提早浏览器对剧本文件的加载，然则却不会壅塞parse HTML。
<script src="index.js" defer></script>
<!-- 百度统计代码 -->
<script src="tongji.js" defer></script>注重，defer的剧本不会被css壅塞，parse HTML完成后立时实行，然则有能够会壅塞症结衬着途径。为何说有能够呢，如果剧本文件在render tree天生前加载终了，则会最先实行，实行历程中会壅塞症结衬着途径。请参考这个Demo
被defer的剧本，在实行时会严厉按照在HTML文档中涌现的递次实行，然则实际上貌似不是如许，js文件前后文件如有依靠需郑重运用。
运用async耽误剧本实行
和defer相似，只是当js加载完后立时实行，而不在乎parse HTML是不是完成，因而如果剧本比css先加载完，也会壅塞症结衬着途径。
<script src="index.js" defer></script>
<!-- 百度统计代码 -->
<script src="tongji.js" defer></script>运用DOM API
据笔者所知，这是唯一一种100%不会壅塞症结衬着途径的js剧本加载体式格局。经由过程DOM API引入的js剧本会比及页面Layout和Paint后再最先实行，不管你将载入js文件的代码放在head中照样body背面亦是云云。
其他的优化
运用Web Font Loader加载字体
若不想让字体壅塞部分衬着，可运用Web Font Loader
收集优化篇
收集优化和CSS优化战略雷同，只管让症结资本提早加载完，所以优化时只管将以下目标紧缩到最低：
症结资本数
症结资本体积
症结资本收集往返数
当然，如果你的项目运用了先进的SPDY或HTTP/2，下面的要领能够并不实用。
优化症结资本数
RFC2616划定同域名同时只能有 2 个衔接（RFC7230 中无穷定），而当代浏览器平常许可同域6个并发衔接。因而，当页面中有很多须要外链的资本（script、link等），浏览器最多在每一个域同时并发下载6个。
每一个要求，若运用域名，则须要分外增添一次DNS查询时刻（若缓存未过期会掷中缓存），因而一个网站过量的运用差别域名的资本会分外增添DNS查询开支，这点在挪动端异常显著。
当然，每一个要求竖立依据TCP协定划定，还须要先举行3次捂手才够竖立链接。
兼并要求
只管的兼并要求，削减收集要求数。这一点能够在其他机能优化文章都说烂了：
小图片转base64
兼并打包CSS、JS文件
如今的比较盛行的webpack就异常善于做这类事变
适度运用内联CSS和Js
运用内联的CSS和JS当然能够削减要求，然则运用内联也意味着你的CSS和JS将不会再被浏览器缓存，因而要适度的运用内联，内联不是全能的。
从HTTP协定动手
最好计划肯定是过渡到HTTP/2无疑，然则如今HTTP/2的支撑并不算太好，而且各大浏览器仅支撑TLS下完成的HTTP/2（说白了就是HTTPS），使得HTTP/2的运用存在许些限定。
如果没有HTTP/2，也许能够：
运用
Keep-Alive能够躲避TCP三次握手的时刻运用
Transfer-Encoding:chunked分块输出文件，还记得parse HTML的历程是增量的吗？若浏览器能够边下载HTML文件边剖析，岂不美哉？削减重定向，这个看上去天经地义然则实际上却很轻易被疏忽
适度运用域名散列
浏览器同域并行下载数目有限，所以只需多竖立几个二级域名就好了，然后合理的分派各个资本就好了。
如果因为某些不可抗拒缘由，症结资本数是12个，那末只需竖立2个二级域名离别分派给个中的12个资本，浏览器会同时并行下载它们了。
不过，运用域名散列要适度，每一个域名都须要分外的增添一次DNS查询时刻。当然，DNS自身也有缓存，也许恰当的增添DNS TTL时刻也是个不错的主张。
紧缩症结资本体积
关于js、css文件，如今网上现成的紧缩工具一堆，而且运用非常普遍，置信人人都晓得了，这里就不多说了。
说到紧缩，服务器开启肯定的紧缩战略（如gzip）是个不错的主张，结果拔群，资本大概会紧缩到原有的1/3摆布。
图片紧缩，这个须要晓得什么情境下合适什么范例的图片，GIF、JPG、PNG运用情形各不雷同，详细能够参考这篇文章：图片格式那末多，哪一种更合适你？
症结资本收集往返数
如果一个页面须要引入2个CSS才事情，下面有2种体式格局
2个均用link引入
1个用link引入，在css中import另一个css
毫无疑问肯定是前者快，因为前者的收集往返数是1，而后者是2。
因而，只管将资本加载扁平化，削减症结资本收集往返数是个不错的主张。
当然，优化时要注重的点也有不少，比方前面提到的浏览器同域并发限定等，须要衡量使其不要影响到其他的致使首次衬着时刻延后。
一些无效的优化战略
运用document.write打印link标签引入css仍会壅塞首次衬着。
援用
奇舞团@瓜瓜先生：
奇舞团@屈屈先生：
W3C范例：
