前端 | web应用优化的一些方法步骤



1.javascript压缩和模块打包

可以使用Webpack对CSS和JS进行压缩，以及合并图片。

 

2.按需加载资源（惰性加载）

react-lazy-load处理react惰性加载

• 减少了像服务器发出的并发请求数量；
• 减少了浏览器的内存使用率；
• 减少了服务器端的负载。             

 

3.在使用DOM操作库时用上array-ids

尽可能多的重用已有的节点。

 

4.缓存

Caches用于存储那些被频繁存取的静态数据，便于随后对该数据的请求更快速。

 

5.启用HTTP/2

在延迟和性能方面优于http1，为同一服务器的并发连接带来了好处。

 

6.应用性能分析

chrome提供了Chrome  Dev Tools，其中的时间线和网络视图对于定位延迟问题有很大的帮助。

 

7.使用负载均衡方案

把负载分配到不同的服务器可以给你的用户提供更好的延迟时间，特别是在处理很多的并发请求时。

 

8.为了更快的启动时间考虑一下同构javascript

可以让服务器端来执行页面的首次渲染，先把已渲染的页面发送出去然后再由客户端的脚本接管。

同构js:在客户端和服务器端同时运行

meteor.js对客户端和服务器端混用支持度高

 

9.使用索引加速数据库查询

索引是一个过程，是数据库创建的快速访问数据结构，从内部映射到键，可以提高检索数据的速度。

文档型数据（比如MongoDB），关系型数据库（比如PostgreSQL）都支持索引。

 

10.使用更快的转译方案

使用ECMAScript，并使用相应的转译器。

 

11.避免或最小化javascript和css的使用而阻塞渲染

js和css资源都会阻塞页面的渲染，可以采取某些方式让这些资源尽快被处理。

css 媒体查询可以被设置为<link>标签属性：

<link rel="stylesheet" type="text/css" media="only screen and （max-device-width:480px）" href="mobole-device.css"/>

javscript 防止js阻塞，可以将<script>标签设置为异步的

<script src="async.js" async ></script>

限制了DOM访问，但可以让浏览器不管脚本的执行状态而去继续解析和渲染。

 

12.用于未来的一个建议：使用serviceworker+流

主旨是在网站和客户端之间放置一个service worker，可以在获取缺失信息的同时缓存某些数据（比如header和一些不会经常改变的数据），缺失的内容就可以尽可能快速地流向被渲染的页面。

 

13.更新：图片编码优化

使用OptiPNG和jpegtran使用次优的设置进行编码，对于需要大量图片的网站来说可以获得有效的改善。