前端和后端优化

以你之姓@ 2024-02-20 09:13 12阅读 0赞

1.前端资源优化

1.1 html结构优化  
保证简洁、清晰的html结构，减少或避免多余的html标签  
使用HTML5的web语义化标签，结构清晰且利于seo  
css文件在head中引入，js文件放在body底部引入，这样做可以防止阻塞。另外如果有需要提前加载的js，请在window.onload方法中处理。浏览器加载js文件时其他一切渲染活动都会停止，直到js文件下载完成， 如果把js文件放头部加载，就会造成阻塞，也就是加载js时会阻止页面渲染。 因此通常js文件需要放body底部加载，等页面渲染完成后再加载js文件。

1.2 css优化  
使用gulp、webpack等构建工具，对css进行合并、压缩等处理，以缩小css文件体积  
如果你的应用css样式很庞大，可拆分成多个css文件，并做压缩处理，避免单个css文件过大  
如果使用webpack，推荐使用extract-text-webpack-plugin之类的插件将css样式抽离出来，防止其随js一起打包  
如果使用react、vue等框架，推荐使用css-modules、css in js等css模块化解决方案使用sass/less等预编译处理方案(后期不推荐使用，推荐使用css模块化方案)  
尽量减少或避免使用内联样式  
对于一些需要复杂计算的样式，比如box-shadow、import等，减少使用  
使用css3动画时，请开启GPU硬件加速

1.3 JS优化  
使用gulp、webpack等构建工具进行合并、压缩处理，以缩小js文件体积和数量  
使用webpack构建时，推荐拆分成2-3个js文件进行打包，并开启压缩，防止单个js文件过大  
使用webpack构建时，推荐使用tree-shaking、prepack插件优化js代码构建，缩小体积  
使用innerHTML替代DOM操作，防止页面不断重复地全局渲染  
使用react、vue等高性能UI构建框架，避免直接操作DOM  
使用jslint等js语法检查工具，优化js代码

1.4 图片资源优化  
图片合并——对小图进行sprite(雪碧图)处理  
图片压缩——缩小图片体积  
图片大小——做图时避免单个图片过大  
静态资源优化推荐的工具：gulp、webpack、fis3

1.5.API请求优化  
http请求异常处理，请求超时处理——timeout，当http请求超过限定的时间后中断请求，给予用户相应的提示错误处理，根据不同的响应错误给予用户相应的提示；

2. 后端接口优化  
避免无响应的情况发生  
避免过度操作复杂的逻辑  
避免过度的嵌套查询  
与前端约定好一套响应规则，包括响应状态码、数据格式、消息提示等等  
服务器开启gzip压缩、以及服务器缓存  
2.1 服务器缓存  
客户端缓存——cookie、WebStorage  
使用cdn存储静态资源  
启用压缩，我们的线上代码（JS、CSS 和 HTML）都会做压缩，图片也会做压缩（PNGOUT、Pngcrush、JpegOptim、Gifsicle 等）。对于文本文件，在服务端发送响应之前进行 GZip 压缩也很重要，通常压缩后的文本大小会减小到原来的 1/4 - 1/3。  
减少 DNS 查询：我们知道，建立 TCP 连接需要知道目标 IP，而绝大部分时候给浏览器的是域名。浏览器需要先将域名解析为 IP，这个过程就是 DNS 查询，一般需要几毫秒到几百毫秒，移动环境下会更慢。DNS 解析完成之前，请求会被 Block。浏览器一般都会缓存 DNS 查询结果，页面使用的域名（包括子域名）越少，花费在 DNS 查询上的开销就越小。另外，合理使用浏览器的 DNS Prefetching 技术，也是很好的做法。  
减少重定向：无论是通过服务端响应头产生的重定向，还是通过 或者 JS 产生的重定向，都可能引入新的 DNS 查询、新的 TCP 连接以及新的 HTTP 请求，所以减少重定向也很重要。浏览器基本都会缓存通过 301 Moved Permanently 指定的跳转，所以对于永久性跳转，可以考虑使用状态码 301。对于启用了 HTTPS 的网站，配置 HSTS 策略，也可以减少从 HTTP 到 HTTPS 的重定向。  
TCP缓冲机制：TCP缓冲是为了解决后端服务器网速与客户的前端网络速度不匹配而造成的服务器资源浪费的问题。由于服务器与负载均衡设备之间的网络带宽速率高，时延小，通过将服务器端的请求缓冲在负载均衡设备的缓冲区中，防止由于客户端缓慢的网络链路和较高的时延造成服务器端连接阻塞问题。  
使用BigPipe技术：BigPipe是一个重新设计的基础动态网页服务体系。大体思路是，分解网页成叫做Pagelets的小块，然后通过Web服务器和浏览器建立管道并管理他们在不同阶段的运行。  
2.2 SSL加速（SSL Acceleration）  
一般情况下，HTTP采用明文的方式在网络上传输，有可能被非法窃听，尤其是用于认证的口令信息等。为了避免出现这样的安全问题，一般采用SSL协议（即：HTTPS）对HTTP协议进行加密，以保证整个传输过程的安全性。在SSL通信中，首先采用非对称密钥技术交换认证信息，并交换服务器和浏览器之间用于加密数据的会话密钥，然后利用该密钥对通信过程中的信息进行加密和解密。

SSL是需要耗费大量CPU资源的一种安全技术。目前，大多数负载均衡设备均采用SSL加速芯片进行SSL信息的处理。这种方式比传统的采用服务器的SSL加密方式提供更高的SSL处理性能，从而节省大量的服务器资源，使服务器能够专注于业务请求的处理。另外，采用集中的SSL处理，还能够简化对证书的管理，减少日常管理的工作量。

SSL的处理流程如下：

1） 客户端发起HTTPS连接请求，协商传输的加密算法，确认双方身份，并交换会话密钥。

2） 负载均衡收到客户端加密的HTTPS请求后，对请求的信息进行解密，然后通过HTTP的方式发送给后端的服务器。

3） 服务器将请求的处理结果返回给负载均衡设备。

4） 负载均衡设备利用会话密钥对请求的结果进行加密，然后将结果返回给客户端。

5） 客户端采用会话密钥对返回结果进行解密，并显示在浏览器上。

在负载均衡设备中实现SSL加速功能，只需要在负载均衡设备上导入SSL证书和密钥即可。当客户端发起对虚拟服务器的HTTPS请求时，负载均衡设备自动和客户端进行SSL协议的协商并交换会话密钥。客户端发送的请求以及负载均衡返回的响应均采用会话密钥进行加密，而负载均衡设备与后端服务器之间则采用HTTP的方式进行请求的发送和处理。