前端优化

1.JavaScript压缩和模块打包

模块打包则用于将不同脚本打包在一起并放进同一文件。更少的 HTTP 请求和单个文件解析都可以减少加载时间。

使用 Webpack 打包 CSS 文件以及合并图片。这些特性都可以有助于改善启动时间。

2.按需加载资源

资源（特别是图片）的按需加载或者说惰性加载，可以有助于 Web 应用在整体上获得更好的性能。对于使用大量图片的页面来说惰性加载有着显著的三个好处：

减少向服务器发出的并发请求数量（这就使得页面的其他部分获得更快的加载时间）
减少浏览器的内存使用率（更少的图片，更少的内存）
减少服务器端的负载
只在必要的时候才去加载图片或资源（如视频），比如在第一次被显示的时候，或者是在将要显示的时候对其进行加载。

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

Array ids 使得 DOM 操作引擎可以「知道」在什么时候某个节点可以被映射到数组当中的某个元素。没有 array-ids 或者 track-by 的话，大部分库都会进行重新排序而摧毁已有的节点并重新创建新的。这就非常损耗性能了。

4.缓存

缓存可以被放在动态内容服务器和客户端之间，就可以避免公共请求以减少服务器的负载，与此同时改善响应时间。

5.启用 HTTP/2

HTTP/2 为同一服务器的并发连接问题带来了很多好处。

6.应用性能分析

Chrome 提供了非常棒的性能分析工具。特别是 Chrome Dev Tools 中的时间线和网络视图都对于定位延迟问题有着很大的帮助

时间线视图可以帮忙找到运行时间较长的操作。

网络视图可以帮助识别出额外的由缓慢请求导致的延迟或对于某一端点的串行访问。

在大多数情况下，选择一个更优的算法，比围绕着小成本中心所实现的具体优化策略能够获得更大的收益。

7.使用负载均衡方案

为了使负载均衡真正有效，动态内容和静态内容都应该被拆分成易于并发访问的。换句话说，元素的串形访问会削弱负载均衡器以最佳形式进行分流的能力。与此同时，对于资源的并发访问可以改善启动时间。

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

改善 Web 应用程序观感的方式之一，就是减少启动时间或者减少首页渲染时间。

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

10.使用更快的转译方案

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

防止 JavaScript 阻塞解析器和渲染器的一种方法就是将 script 标签标记为异步的。这限制了我们对于 DOM 的访问但是可以让浏览器不管脚本的执行状态而继续解析和渲染页面。换句话说，为了获得最佳的启动时间，确保那些对于渲染不重要的脚本已经通过异步属性的方式标记成异步的了。

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

13.按需加载资源按图片编码优化需加载资源

图片编码优化。PNGs 和 JPGs 在 Web 发布时都会使用次优的设置进行编码。通过改变编码器和它的设置，对于需要大量图片的网站来说可以获得有效的改善。流行的解决方案包括 OptiPNG 和 jpegtran。