Web操控性强化仍旧是首要任务，特别是在市场竞争如此惨烈的现在。不可否认是，更快的中文网站浏览速率已显示出能提升访客的留存率和信任度和采用者满意率，特别是对于互联网速率较快的采用者和终端设备上的采用者而言！
常见web强化形式
1. HTTP允诺增加
一次完备的允诺都须要经过堆栈等候、 DNS串行、与伺服器建立相连、推送允诺、等候伺服器积极响应、浏览数据这样一个 “艰难” 而复杂的过程。一般来说，网页允诺的HTTP越多，加载速率就越来越快。即使应用程序限制了一般而言搜索引擎下与此同时一定数目的与此同时通话量（一般为6-12个）。为防止困局，采用资源分拆、希伯尼安斯图等以增加了一般而言网页的允诺数目。进而增加HTTP允诺和读取网页所需的来往单次。增加HTTP允诺是最重要的强化技术，其影响最大。
2.文档填充
Web网页是由HTML、CSS和JavaScript等标识符文档构成的。随着网页精确性的提升，其标识符文档和随后的读取时间也骤然增加。文档填充能将标识符文档增加共约80％，进而提升公交站点反应速率。一般来说采用webpack、gulp或grunt来填充web标识符, 采用tinypng来填充相片。
3. 应用程序内存
内存强化可增加伺服器阻抗，频宽采用量和延后，如果容许应用程序内存您的公交站点文档（内部JSP，JavaScript文档，影像等）意味着不须要每天采用者允诺公交站点上的网页时都浏览文档。这能加快采用者导航系统到另一个网页时的新体验，即使不须要重新浏览譬如JSP、相片和手写体等等的内容，即使它们已经储存在采用者的应用程序内存中。
那么，他们怎样容许应用程序内存文档？
当应用程序从他们的Web伺服器允诺文档时，伺服器将执行的操作不可否认就是推送文档的HTTPfile。文档的HTTP标头包涵相关所允诺文档的元数据，和相关应用程序应怎样处理文档的说明。
他们能选定的标准HTTPfile表头不可否认是Cache-Control来增设内存形式，Cache-Control容许他们表述他们希望应用程序内存文档的形式。他们能采用Cache-Controlfile表头来告诉应用程序是否如果内存文档，和如果内存文档多久。
您能在DevTools 的Response Headers中看到Cache-control表头
Cache-Control: max-age=2592000顺便说一句，max-age以秒为单位选定。2,592,000秒= 30天。
对于要内存文档的确切时间，没有具体的规定，但是最佳实践是将文档内存的时间尽可能长。
内存持续时间取决于您更新公交站点文档的频率和要内存的文档类型。例如，您能max-age为不经常更改的文档（例如中文网站的LOGO，JS文档和CSS文档）增设更长的时间。
文档类型内存持续时间CSS1年JavaScript1年相片（例如PNG，JPG，GIF）1个月HTML不采用内存
对于SVG文档，他们能采用svg-sprite-loader来创建一个属于自己的图标库:
4. 开启GZIP
虽然开启GZIP填充能很大程度上填充资源文档，但是也有一些须要注意的地方：
较旧的应用程序：某些应用程序可能仍无法处理填充内容（他们说能接受，但实际上不能）。已经填充的内容：大多数影像，音乐和视频已经被填充。不要浪费时间再次填充它们。实际上，您可能只须要填充“三大文档”（HTML，CSS和JavaScript）。CPU阻抗：动态填充内容会占用CPU时间并节省频宽。一般来说鉴于填充速率和CPU的操控性限制，一般来说将填充等级增设为6(随着填充级别的升高，填充比有所提升，但到了级别6后，很难再提升，并且填充时间和填充比例成正相关)。如果采用Nodejs作为伺服器，能采用compression插件来开启gzip。如果采用nginx作为静态资源伺服器，开启gzip形式如下:
gzip on; gzip_min_length 1k; gzip_buffers 4 16k; gzip_http_version 1.0; gzip_comp_level 6; gzip_typestext/plain application/javascript application/x-javascript text/javascript text/xml text/css image/jpeg image/jpg image/gif image/svg image/png;gzip_disable “MSIE [1-6]\.”; gzip_vary on;5. 预读取
DNS预取-DNS Prefetch
须要从www.gogoing.site中文网站下浏览。在HTML的<head>中，加入以下标识符：
<link rel=“dns-prefetch” href=“//www.gogoing.site”>然后，当我们允诺文档时，他们将不再须要等候DNS查找。Chrome一直在做类似的事情。如果您仅在URL栏中键入搜索引擎的一小部分，它将自动预解析DNS（有时甚至预渲染网页），进而节省了每个允诺至关重要的毫秒数。
资源预取-Prefetch
<link rel=“prefetch” href=“//cloud.gogoing.site/files/2020-08-07/95baf0bf-5878-4723-8ea0-159822f693ed.jpg”>Prefetch和DNS Prefetch相同。Prefetch应主要用于预读取静态资源，例如影像，CSS和JavaScript文档。整个文档将浏览并保存在应用程序内存中。也能预取HTML文档。
但是，您不能依赖正在浏览的资源。应用程序会在处于空闲状态时并且没有其他要执行的任务浏览资源文档。如果采用者的互联网相连较快，它也将完全忽略大文档。
子资源- subresource
<link rel=“subresource” href=“//cloud.gogoing.site/files/2020-08-07/95baf0bf-5878-4723-8ea0-159822f693ed.jpg”>subresource与Prefetch相同。都是从伺服器预浏览选定的文档，并将其储存在应用程序的内存中。但是不同的是，根据Chromium文档，它的工作形式如下：
LINK rel=“subresource”提供了一种新的链接关系类型，其语义与LINK rel=”prefetch”不同。尽管rel=”prefetch”提供了低优先级的资源浏览，以供后续网页采用，而rel=”subresource”则容许及早读取当前网页中的资源。
因此，如果当前网页须要该资产，或者尽快须要该资产，则最好采用它subresource，否则请采用prefetch。
预渲染-Prerender
预渲染功能是此处介绍的最强大的技术。从根本上确保具有所有必要静态资源的URL在后台完全读取和增设。您能想象它是在新选项卡中预先打开URL，但在采用者实际调出网页之前它一直处于隐藏状态。并且所有在实际网页浏览期间发生的活动都将在后台进行。
但是由于兼容性问题，一般情况下，他们都会与此同时采用Prefetch和Prerender来预读取HTML文档。
任何丢失的文档都会产生HTTP 404 错误。如果允诺一个不存在的脚本文档，即使应用程序在允诺脚本文档的时候，即便是返回404，它也会尝试去按照Javascript的形式解析积极响应中的内容。这无疑会增加很多处理的时间。
6. 重绘和回流
在了解重绘和回流之前，他们先回顾一下应用程序的工作原理：
应用程序解析HTML源标识符，并构造一个DOM树，其中每个HTML标签在树中都有一个对应的节点，标签之间的文本块也会生成一个文本节点。DOM树中的根节点是documentElement（<html>标记）应用程序解析CSS标识符：基础规则在User-AgentJSP（应用程序默认增设）中，然后可能有采用者JSP，作者JSP，内部样式，导入样式，内联样式和最终样式被编码为styleHTML标签的属性，head和其中的所有元素）也是如此。另一方面，例如在渲染树状文本节点中可能存在* 用多个节点表示的DOM元素。渲染树中的节点称为box（CSS box 中的盒模型），每个节点都有CSS框属性-宽度，高度，边框，边距等构造渲染树后，对于每个visible节点，匹配合适的节点CSSOM rules并应用它们，然后应用程序在屏幕上绘制渲染树节点。重绘-repaint
由于节点属性的更改或样式更改（例如更改opacity，color，background-color，visibility），因此须要更新屏幕的某些部分。此屏幕更新称为重绘（repaint）。
回流-reflow
渲染树的一部分（或整个树）需要重新计算，包括元素的位置、宽高度和边框等几何形状和所有受影响的其他元素的位置都会由应用程序重新绘制，此过程称为回流。更改一般而言元素会影响所有的子元素，祖先元素和兄弟元素。
回流一定会导致重绘。
一般来说情况下，以下情况会导致回流：
激活伪类，如:hover内容输入，如input输入添加、删除JSP添加、删除、更新DOM节点采用offsetWidth和offsetHeight为DOM节点增设动画和采用JS来块操作DOM节点采用display: none（重绘和回流）或visibility: hidden（仅重绘，即使不会没有位置发生更改且不会影响后面节点的显示）隐藏DOM节点采用者操作，如调整窗口大小，更改手写体大小或滚动怎样增加重绘和回流
防止采用表格进行布局通过为容器增设固定高度来限制受影响的元素采用offsetWidth和offsetHeight时， 先将其内存到本地变量中，不要每天直接从元素属性中读取尽量通过添加/修改className来控制节点样式，且增加CSS规则层级和采用复杂的CSS选择器批量更新DOM，且增加DOM深度。采用documentFragment来操作DOM变化数据。更新/克隆/替换节点时，先将节点样式增设为display: none, 替换完成后再移出display: none样式（总共2个回流和2个重绘），7. 防止301重定向
重定向是操控性的杀手，如果尽可能防止使用它们。重定向将产生额外的来往时间（RTT），因此在应用程序甚至开始读取其他资源之前，读取初始HTML文档所需的时间将迅速增加一倍。
8. 应用程序储存
采用应用程序储存（localStorage或sessionStorage）来储存中文网站中采用的不可变数据以保证网页的读取速率和增加不必要的允诺。在某些情况下（如商城），还能保存首页数据，以保证首页的快速读取和增加白屏时间。
9. 防止404错误
前端学堂，更多精彩文章等着你！
