序言
在后端合作开发的操作过程中，许多这时候除了日常生活的市场需求合作开发之外，他们还须要对他们的网页展开操控性强化，所以此次就撷取一下后端合作开发我能想不到的一些强化计划展开归纳。
后端操控性强化是甚么？
有许多爸爸妈妈不论是日常生活碰到强化市场需求或是复试的这时候被问及操控性强化，常常并没较好的完备预测出操控性困局在那儿。复试操作过程中，许多这时候并没能很系统的去提问完备后端的操控性强化的计划。
甚么是后端操控性强化呢？要是分为以下两绝大部分：
图形强化读取强化运转强化操控性强化怎样预测
在对网页展开强化前，要弄清楚究竟须要强化的点在那儿，是井字读取非常快？资源读取慢？之类。所以他们须要怎样预测一个网页须要怎样强化呢？
首先他们要要弄清楚你现阶段是强化井字慢（CM3天数长），可可视化天数长，在那时的后端合作开发中，常常他们通过performance来查阅网页的onload天数或是domReady天数其实并不可信。举个范例，他们一般那时合作开发已经愈来愈多使用React鳟甲端套模版输入html夏斯利得多。
回到难题上，假如去预测强化的方向呢？假如你是CM3强化，所以要是看html的读取天数以及domReady天数，找出导致domReady天数长的原因是这儿？假如你是要考虑可可视化天数的强化，所以就须要功能定位网页图形可可视化原素的方法论，怎样将可视化模块尽量提早图形。上面Sonbhadra详尽说说各种强化的点和方式。
图形强化
图形操控性强化常常更多是解决CM3的难题，假如CM3天数增加，所以可可视化时间也会增加！
这是两张应用程序导出html，css的时序。
导出html条码碰到style并行导出，但不能堵塞导出，但会堵塞图形碰到css并行读取，但不能堵塞导出，但会堵塞图形碰到img会并行读取，但是不能堵塞导出和图形碰到js，预设并行读取，并堵塞图形，运转完js后才继续图形最后html条码图形完，促发domReadyHTML强化：
HTML强化主要新体验在增加无谓的html条码数量，比如注解，这CSS强化：
css的有一个特点，就是应用程序碰到style或是css条码的这时候，因为dom树和css树的构建是并行构建的，所以读取css或是导出style并不能堵塞dom的解释。但因为最终的图形树是须要dom树和css树结果得出的，所以css和style的读取和导出是会堵塞dom的图形的。
增加css体积（gzip，webpack混淆）。增加css的原素。增加使用加长css解释天数的属性，比如：媒体查询、css表达式等。JavaScript强化：
JavaScript的读取是会堵塞dom的导出和图形的，因为js的导出线程是和ui图形的线程公用，导致解释js时，所有图形都要停下，等待js的读取和执行完毕后才能继续对网页展开解释和图形。
增加js体积（gzip，webpack混淆）。假如js不必等待html完全解释和图形完成才能执行的话，可以使用script条码的async属性。让js的读取不能堵塞dom的解释，但下载完成后将会立马执行js，还是会堵塞解释和图形，只是将堵塞延后到js读取完毕后才出发而已。可以使用script条码的defer属性，让js的读取不能堵塞dom的解释，但js的运转时机会在html导出瘤果再展开执行。归纳
一般比较好的处理方式是将css放在head展开读取，将js尽量靠近html底部展开读取。当然也有例外，比如计算rem的js，可能须要尽量的内联在css读取之前，在导出css之前将rem的单位计算好。或是一些收集统计的代码，尽量内联在html的最开始。
因为html的图形，是须要导出完dom树和css树，最终合成图形树才能呈现画面在屏幕上，中间碰到的外部资源或是内联资源都会存在不同程度的影响图形树的完成天数。所以总体来说就是怎样让图形树尽量的快完成，这也是强化关键图形路径的核心思想。
读取强化
图形强化基本上就是对不同资源不同的作用调整位置，或是添加属性让一些本来影响导出的操作尽量延后或是并行。但读取强化会比图形强化复杂得多，我主要会分成两种读取强化：
资源读取强化网络强化资源读取强化
资源读取强化一般的强化计划如下：
js资源利用webpack展开拆分，尽量的利用应用程序提供的并发读取来加速资源的读取速度。对框架（React或是Vue之类）的runtime代码抽离，利用应用程序缓存对比较大的框架文件展开缓存，提高框架的runtime.js的读取速度。对公用js文件，如swiper，axios等常用工具库展开拆分，理由同上。异步读取非井字或可视范围外的模块，利用webpack的异步读取或是利用框架自带的一些工具展开模块抽离，尽量增加井字读取时的业务代码体积。对于图片资源应该使用懒读取的方式展开图形，而且为了节省带宽，应该将图片放到井字出来后再开始展开读取。可以使用preload对本页资源展开预读取，比如字体文件，可以让css使用的字体可以提早展开读取。可以使用prefetch对之后其他网页可能用到的资源展开预读取。优先级会比preload低。DNS 预导出 dns-prefetch，对一些常用的域名展开预导出，提高dns的速度。网络强化
网络强化一般须要协同后端或是运维人员展开解决，但作为后端，他们可以发现难题，并且提出解决的方式，强化的计划如下：
静态资源上cdn。接口拆分，对井字用到的接口展开拆分。后端返回html天数强化。对资源按需处理过期天数，对于长久的资源使用超长过期天数，并通过webpack构建出带有文件md5的文件名，对文件展开强制更新。启用http2.0，使用多路复用，提高并发请求中的tcp重复握手难题。运转强化
运转强化是指对于JavaScript代码的运转速度强化，这个网上也有许多资料，我就举一些常规强化。
慎用定时器，用完记得清除虚拟滚动，长列表强化图片按需读取事件委托增加堵塞线程操作，比如数据量大的循环，频繁的事件响应（节流，防抖）…归纳
后端的操控性强化并不能说有一套万能的计划，上面所说到的仅仅只是我日常生活合作开发操作过程中，使用过的一些操控性强化的计划归纳，多种计划可以搭配使用，但还是须要根据每个公司不同团队，以及网页的性质做强化的完备方案。比如能不能用SSR展开图形Vue或是React的网页，能不能让App中对html的读取做拦截，实现本地html的超级缓存等操作。具体难题须要具体预测。希望还有强化的骚操作展开补充。
