| Web后端高阶手册

有关后端操控性强化的习题

“福寿和凡客使徒，商品优劣顾客知”，做为后端开发，他们更著重顾客新体验，商品的优劣下定决心着顾客的新体验，所以这款商品的好坏有许多不利因素，当中操控性是下定决心不利因素，所以是不是强化就能让商品的操控性达至卓越，让顾客新体验较好，那时我就带我们去介绍自学后端操控性强化。

强化的目地

强化的目地是让网页读取的更快，对使用者操作方式积极响应更及时处理，为使用者增添更快的使用者新体验，对开发人员而言强化能增加网页允诺数，能节约天然资源。

后端强化的方式有许多种不同，能将其分成两类，第三类是网页等级的强化如http允诺数，H55NJAVA的边线强化等，第三类为标识符等级的强化，例Javascript中的DOM 操作方式强化、CSS选择符强化、相片强化和 HTML内部结构强化之类。

强化什么样？

所以他们须要强化这些点呢？

读取天然资源强化图形强化应用程序内存思路相片强化IIS与HDR

读取天然资源强化

说起读取，当他们输入URL时，他们要晓得这中间发生了什么？

首先做 DNS 查询，如果这一步做了智能 DNS 解析的话，会提供访问速度最快的 IP 地址回来接下来是 TCP 握手，应用层会下发数据给传输层，这里 TCP 协议会指明两端的端口号，然后下发给网络层。网络层中的 IP 协议会确定 IP 地址，并且指示了数据传输中如何跳转路由器。然后包会再被封装到数据链路层的数据帧内部结构中，最后就是物理层面的传输了TCP 握手结束后会进行 TLS 握手，然后就开始正式的传输数据数据在进入服务端之前，可能还会先经过负责负载均衡的服务器，它的作用就是将允诺合理的分发到多台服务器上，这时假设服务端会积极响应一个 HTML 文件首先应用程序会判断状态码是什么，如果是 200 那就继续解析，如果 400 或 500 的话就会报错，如果 300 的话会进行重定向，这里会有个重定向计数器，避免过多次的重定向，超过次数也会报错应用程序开始解析文件，如果是 gzip 格式的话会先解压一下，然后通过文件的编码格式晓得该如何去解码文件文件解码成功后会正式开始图形流程，先会根据 HTML 构建 DOM 树，有 CSS 的话会去构建 CSSOM 树。如果遇到 script 标签的话，会判断是否存在 async 或者 defer ，前者会并行进行下载并执行 JS，后者会先下载文件，然后等待 HTML 解析完成后顺序执行，如果以上都没有，就会阻塞住图形流程直到 JS 执行完毕。遇到文件下载的会去下载文件，这里如果使用 HTTP 2.0 协议的话会极大的提高多图的下载效率。初始的 HTML 被完全读取和解析后会触发 DOMContentLoaded 事件CSSOM 树和 DOM 树构建完成后会开始生成 Render 树，这一步就是确定网页元素的布局、样式之类诸多方面的东西在生成 Render 树的过程中，应用程序就开始调用 GPU 绘制，合成图层，将内容显示在屏幕上了

他们从输入 URL 到显示网页这个过程中，涉及到网络层面的，有三个主要过程：

DNS 解析TCP 连接HTTP 允诺/积极响应

这里他们就不用去管DNS解析和TCP链接了，毕竟不是他们的事，也干不来，但是HTTP允诺和积极响应是他们强化的重点。

HTTP强化可分成两个方面：

尽量增加允诺次数尽量增加单次允诺所花费的时间

增加允诺数：

合理的设置http内存，恰当的内存设置能大大增加http允诺。要尽可能地让天然资源能在内存中待得更久。从设计实现层面简化网页，保持网页简洁、增加天然资源的使用时是最直接的。天然资源合并与压缩，尽可能的将外部的JAVA、样式进行合并，多个合为一个。CSS Sprites，通过合并 CSS相片，这是增加允诺数的一个好办法

H55NJAVA的边线：

应用程序是并发允诺的，许多时候他们会加入许多的外链JAVA，而外链JAVA在读取时却常常阻塞其他天然资源，例如在JAVA读取完成之前，它后面的相片、样式和其他JAVA都处于阻塞状态，直到JAVA读取完成后才会开始读取。如果将JAVA放在比较靠前的边线，则会影响整个网页的读取速度从而影响使用者新体验。所以说尽可能的将JAVA往后挪，增加对并发下载的影响。

图形优化

顾客端的图形

后端去取后端的数据生成DOM树，读取过来后，自己在应用程序由上而下跑执行JS，随后就会生成相应的DOM。

优点：

顾客端的图形使得前后端分离，开发效率高使用者新体验更快，他们将网站做成SPA（单页面应用）或者部分内容做成SPA，当使用者点击时，不会形成频繁的跳转

缺点：

后端积极响应速度慢，特别是首屏，这样使用者是受不了的不利于SEO强化，因为爬虫不认识SPA，所以它只是记录了一个网页

服务端的图形

DOM树在服务端生成，然后返回给后端，网页上展现的内容，他们在HTML源文件也能找到。

优点：

服务端图形尽量不占用后端的天然资源，后端这块耗时少，速度快利于SEO强化，因为在后端有完整的html网页，所以爬虫更容易爬取信息

缺点：

不利于前后端分离，开发的效率降低了对html的解析，对后端而言加快了速度，但是加大了服务器的压力

类似企业级网站，主要功能是网页展示，它没有复杂的交互，并且须要较好的SEO，那他们应该使用服务端图形。

现在许多网站使用服务端图形和顾客端图形结合的方式：首屏使用服务端图形，其他网页使用顾客端图形。这样能保证首屏的读取速度，也完成了前后端分离。

区分：源码里如果能找到后端网页中的内容文字，那就是在服务端构建的DOM，就是服务端图形，反之是顾客端图形。

应用程序图形

应用程序图形机制一般分成：

分析HTML并构建DOM树分析CSS构建CSSOM树将DOM和CSSOM合并成一个图形树根据图形树布局，计算每个节点的边线调用GPU绘制，合成图层，显示网页

在图形DOM的时候，应用程序所做的事情：

每个节点生成图形和边线（layout — 回流和重布局）将每个节点绘制填充到图层位图中（paint setup 和 paint — 重绘）图层做为纹理上传至GPU复合多个图层到网页上生成最终屏幕图像（composite layers — 图层重组）

新建独立图层会增加重回回流增添的影响，但是在图层重组的时候会消耗大量的操控性，所以要权衡利弊，有所选择。

图形流程的CSS强化

CSS的图形是从右到左进行匹配的，他们应该注意：

选择器拖后腿，例如.header#title增加嵌套，后代选择器的开销最高，不要一大串，要将选择器的深度降到最低，尽可能使用类来关联每一个标签元素。

CSS阻塞

他们将css放在head标签里和尽快启用CDN实现静态天然资源读取速度的强化，因为只要CSSOM不OK，所以图形就不会完成。

JS阻塞

JS引擎是独立于图形引擎存在的，就是说插在网页那，就在那执行，应用程序遇到script标签时，它就会停止交于JS引擎图形，等它图形完，应用程序又交于图形引擎继续CSSOM和DOM的构建。

DOM图形强化

也就是说重绘回流问题

回流：前面他们通过构造图形树，他们将可见DOM节点和它对应的样式结合起来，可是他们还须要计算它们在设备视口(viewport)内的确切边线和大小，这个计算的阶段就是回流。重绘：最终，他们通过构造图形树和回流阶段，他们晓得了什么样节点是可见的，和可见节点的样式和具体的几何信息(边线、大小)，所以我们就能将图形树的每个节点都转换为屏幕上的实际像素，这个阶段就叫做重绘节点。

当网页布局和几何信息发生变化的时候，就须要回流。比如以下情况：

添加或删除可见的DOM元素元素的边线发生变化元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）内容发生变化，比如文本变化或相片被另一个不同尺寸的相片所替代。网页一开始图形的时候（这肯定避免不了）应用程序的窗口尺寸变化（因为回流是根据视口的大小来计算元素的边线和大小的）

注意：回流一定会触发重绘，而重绘不一定会回流，回流比重绘做的事情要多，增添的开销也大，在开发中，要从标识符层面出发，尽可能把回流和重绘的次数最小化。

如何最小化重绘和重排

用 translate 替代 top用 opacity 替代 visibility不要一条一条的修改 DOM 的样式，预先定义好 class，然后修改 DOM 的 className把 DOM 离线后修改，比如：先把 DOM 给 display: none（有一次 reflow），然后修改100次，然后再显示出来不要把 DOM 节点的属性值放在一个循环里当成循环里的变量不要使用 table 布局，可能很小的一个改动就会造成整个 table 的重新布局动画实现的速度的选择对动画新建图层启用 GPU 硬件加速

应用程序内存

强内存

发现有内存直接用。

Expires: 绝对时间，判断顾客端日期是否超过这个时间

Cache-Control：相对时间，判断访问间隔是否大于3600秒

//在设定时间之前不会和服务端进行通信了

//如果两个都下发以后者为准

协商内存

询问服务器内存是否能用，在进行判断是否用。

Last-Modified/If-Modified-Since

第一次允诺，respone的header加上Last-Modified（最后修改时间）

再次允诺，在request的header上加上If-Modified-Since

和服务端的最后修改时间对比，如果没有变化则返回304 Not Modified，但是不会返回天然资源内容；如果有变化，就正常返回天然资源内容。应用程序收到304的积极响应后，就会从内存中读取天然资源

如果协商内存没有命中，应用程序直接从服务器读取天然资源时，Last-Modified的Header在重新读取的时候会被更新

Etag/If-None-Match

这两个值是由服务器生成的每个天然资源的唯一标识字符串，只要天然资源有变化就这个值就会改变；其判断过程与

Last-Modified/If-Modified-Since类似，他能精确到秒的更高等级。

DNS预解析

在一些应用程序的a标签是默认打开dns预解析的，在https协议下dns预解析是关闭的，加入mate后会打开。

相片强化

减小相片大小

我看到有的文章通过计算相片大小来强化相片，就是说：

比如一张100*100的相片，相片上有10000个像素点，如果每个像素的值是RGBA存储的话，所以也就是说每个像素有4个通道，每个通道1个字节（8位 = 1个字节），所以该相片的大小大概为39KB。所以说通过：

增加像素点增加每个像素点能显示的颜色

上面的两种方式减小相片的大小，不过在他们开发中直接压缩来减小相片的大小。

改变相片的格式

这个相片的类型也下定决心着相片的属性，详细的我再微头条说过，附上链接：

各种相片格式的特点

IIS和HDR

日常开发过程中，滚动事件做复杂计算频繁调用回调函数很可能会造成页面的卡顿，这时候他们更希望把多次计算合并成一次，只操作方式一个精确点，JS把这种方式称为debounce（HDR）和throttle（IIS）

函数IIS

当持续触发事件时，保证在一定时间内只调用一次事件处理函数，意思就是说，假设一个使用者一直触发这个函数，且每次触发小于既定值，函数IIS会每隔这个时间调用一次

用一句话归纳HDR和IIS的区别：HDR是将多次执行变为最后一次执行，IIS是将多次执行变为每隔一段时间执行

实现函数IIS他们主要有两种方式：时间戳和定时器var throttle = function(func, delay) { var prev = Date.now(); return function() { varcontext =this; //this指向window var args = arguments; var now = Date.now(); if(now – prev >= delay) { func.apply(context, args); prev =Date.now(); } } } function handle() { console.log(Math.random()); }window.addEventListener(scroll, throttle(handle, 1000));

这个IIS函数利用时间戳让第一次滚动事件执行一次回调函数，此后每隔1000ms执行一次，在小于1000ms这段时间内的滚动是不执行的