本文会对web页面的全链路施行完好的解说并针对每一步找到能做的功用优化点，本文的方向是极致的功用优化。
由于针对功用优化，能做的点会独特特其它多，笼罩着一切互联网的拜候过程，是以此文章的体例会较量多且杂，笔者会尽可能对体例施行分类解说。
本文的大概过程为先儒雅论学识，比方怎样评估一个页面的功用好与不好、倘使猎取功用目标，怎样行使各类功用关连对象，扫瞄器怎样猎取并衬着页面。笔者以为这些都是根基，惟有懂得了这些根基才具着手思索怎样去优化。
接下来咱们会投入功用优化枢纽，在这个枢纽我会详细解说在页面的一切过程中，哪些地点也许做哪些优化。
目录里程与线程
输入url到页面展现完好经过
1.用户输入
2.卸载原页面偏重定向到新页面
3.管教ServiceWorker
4.网络要求
5.效劳端反应
6.扫瞄器衬着详细过程
扫瞄器管教每一帧的过程
ChromePerformance(功用)
ChromePerformance对象的行使
PerformanceAPI先容
行使PerformanceAPI猎取功用关连目标
Coverage(笼罩率)
Lighthouse
Network(网络)
网络要求中的Timing(光阴)
网络要求的优先级
网页总资本消息
Network摆设
网络优化战略
淘汰HTTP要求数
行使HTTP缓存
行使HTTP/2.0
防止重定向
行使dns-prefetch
行使域名分片
CDN
紧缩
行使contenthash
正当行使preload、prefetch
扫瞄器衬着优化战略
关键衬着路线
强迫同步布局题目
怎样淘汰重排与重绘
静态文献优化战略
图片格式
图片优化
HTML优化
CSS优化
JS优化
字体优化
扫瞄器积存优化战略
Cookie
LocalStorage
SessionStorage
IndexDB
其余优化战略
行使PWA升高用户领会
扫瞄器衬着道理咱们需求领会扫瞄器是怎样衬着一个页面的，咱们才具领会怎样对页面施行功用优化，是以这边咱们对一些根基学识施行解说
里程与线程扫瞄器有多种里程，此中最重要的5种里程以下
扫瞄器里程负责界面展现、用户交互、子里程经管、供给储备等衬着里程每个页面都有一个独自的衬着里程，用于衬着页面，包罗webworker线程网络里程重要管教网络资本加载（HTML、CSS、JS、IMAGE、AJAX等）GPU里程3D绘制，升高功用插件里程chrome插件，每个插件占用一个里程输入url到页面展现完好经过图1
图11.用户输入用户在扫瞄器里程输入并按下回车健后，扫瞄器决断用户输入的url是不是为无误的url，倘使不是，则行使默许的搜罗引擎将该关键字拼接成url。
2.卸载原页面偏重定向到新页面尔后扫瞄器会将现有页面卸载掉偏重定向到用户新输入的url页面，也即是图中庸过程。
此时扫瞄器会筹备一个衬着里程用于衬着马上到来的页面，和一个网络里程用于发送网络要求。
3.管教ServiceWorker倘使暂时页面挂号了ServiceWorker那末它也许拦挡暂时网站全部的要求，施行决断是不是需求向长途发送网络要求。也即是图中与枢纽
倘使不需求发送网络要求，则取内陆文献。倘使需求则施行下一步。
4.网络要求OSI网络七层模子：物理层、数据链路层、网络层、传输层、会话层、示意层、运用层
在实践运用中物理层、数据链路层被统称为物理层，会话层、示意层、运用层被统称为运用层，是以实践使历时每每分为4个层级
也即是图中、、、、枢纽
图2
图2扫瞄器会拿着url经过网络里程施行以下枢纽
凭借url盘查内陆是不是曾经有强迫缓存，倘使有则决断缓存是不是落后，倘使没落后则直接返回缓存体例，也即是图1中枢纽
倘使没有强迫缓存可能缓存已落后，则将该要求参与队伍施行列队筹备发送网络要求，也即是图2中，尔后投入DNS领会阶段，也即是图1中以及图2中的，DNS凭借域名领会出对应的IP住址。(DNS基于UDP)。
尔后行使IP寻址找到对方，尔后凭借IP住址+端标语缔造一个TCP承接(三次握手)，也即是图1中以及图2中的缔造实现后操纵TCP承接来传输数据。(TCP会将数据拆分为多个数据包，施行有序传输，倘使丢包会重发，TCP的特色是牢固、有序)
决断暂时协定是不是为