互联网架构设计：高性能的前端

当我们讨论互联网产品高性能架构的时候，往往聚焦在高性能的后端服务。其实用户是通过客户端前端来直接体验互联网产品的，前端高性能设计也是很重要的。用户使用互联网产品的基本流程如下图。用户使用电脑Web浏览器或者手机App来直接使用互联网产品服务，用户终端将会把用户的操作行为请求到网站服务器，网站服务器对请求进行响应，用户终端（Web浏览器或者手机App）将解析服务器的响应进行解析，通过屏幕或声音反馈给用户。

从图中可以看出用户直接的体验是通过前端反馈出来的。当用户使用不同互联网产品时，都会有不同的体验感觉，某些客户端或网页使用起来很快，点击请求立即就能有响应，某些客户端或网页使用起来很慢，点击某个按钮半天没有响应，还可以出现客户端崩溃，最后卸载App或者关闭网页。

今天我们主要来讲述一下，互联网架构设计高性能高并发的一些常用方法和策略。当然优秀的互联网产品架构设计从来都是在实践过程中不断优化迭代出来的，一开始就企图就想设计一个包罗万象的牛逼架构做法是行不通的。在互联网产品发展过程中，每个不同阶段的瓶颈指标点是不一样的，所以优秀的架构都是不断迭代优化的历史产物。

一个优秀的产品，不仅需要在产品交互和客户端层面做好，同时需要在网络后端服务也做到优秀，前后端紧密配合才能极大地提升用户体验。对于互联网产品的高性能架构设计通常包括以下几个大方面：

1）Web浏览器高性能设计

2）App客户端高性能设计

3）高性能的网络和硬件

4）后台服务高性能设计

对于一般的互联网产品不需要将以上四个方面做到尽善尽美，可以依据自身的发展阶段选取某些方面进行优先解决和提升。比如一般的创业公司可能不太需要去关心网络和硬件相关的事情，因为目前的腾讯云或阿里云可以帮助做好这些事情。

下面我们先来具体介绍前面两个方面。

1、Web浏览器高性能设计

随着互联网浏览器的发展，现在Web的功能越来越强大，所展现的元素越来越丰富，直接导致浏览器与后台服务器的连接数大幅增长，网络传输的流量越来越大。web浏览器高性能设计方法主要有以下几点：

1）尽量与后台服务器建立长连接。长连接的方式可以避免web端和服务器反复建立和销毁连接，占用大量客户端资源，同时也会给服务器造成一定的压力。

2）本地缓存数据，提升访问效率。对于一些不经常更改的图片和js/css文件可以通过缓存在本地，通过版本号和hash值来协商缓存的更新，从而达到更快速访问的用户体验。

3）合并页面请求，达到减少页面请求，提升网络效率的目的。比如多张小图可以合并为一张图片来请求，一次预请求多一点的数据。

4）页面静态化处理。对于某些不经常变更的页面（如新闻、日志等）可以通过静态页面访问的方式来请求，方便后台进行CDN和缓存。

5）将静态请求和动态请求进行适当的分离。比如图片从http://img.xxx.com服务器去拉取，而动态的用户请求从http://www.xxx.com进行拉取。

6）web端异步请求。如通过ajax异步化和局部化的操作方式，减少一些不必要的请求开销，同时加快前端处理速度。

7）优化业务处理逻辑。比如对于数据量比较大的页面列表，需要进行分页请求，数据量限制等。对于12306网站业务处理逻辑优化的一个重点就在于分时段开售火车票，以往是大量请求在同一时间抢票，这是一个业务逻辑处理的错误，不同的列车就可以通过不同的时间段来售卖，这样可以分散到请求压力。

8）减少cookie传输。cookie在每次请求和响应中都会得到传输，临时和不必要的cookie会使得请求数据量增加。

2、App客户端高性能设计

对于开发者来说，App客户端有更大的自主性，对优化性能方面能做更多事情。来看看，从app端进行高性能设计具体有哪些方法。

1）缓存技术。app客户端是作为操作系统的一个独立进程运行的，相对Web端浏览器有更大的发挥空间。对于数据量比较大的资源、图片的缓存，可以充分利用内存、本地磁盘和网络存储三个方面来进行缓存，可以在客户端上建立一套缓存机制，采用LRU或LFU调度方式管理缓存，用于支撑app更高效的运行。比如图片的存储，可以先从内存中读取，如果内存没有可以从磁盘上读取，如果再没有再通过网络请求读取。

2）资源预加载。基于业务逻辑、用户历史行为和安全机制对于用户行为进行一定预测，在用户未请求前就预先加载一部分资源。比如目前社交类app应用下拉时预加载部分数据。

3）建立长连接，适当压缩数据，减少资源的浪费。

4）路由计划表。针对用户的历史连接行为，后台接入服务的控制策略，制定一份接入站点的路由计划表，为用户选择最优的接入站点。对于一般的用户，他们的网络环境的切换会相对的固定，那么对于某一个确定的用户大部分时间来说，客户端是知道连接到哪里是最快的。

5）请求异步化。app客户端可以通过多线程来异步化请求，提升app的请求吞吐量。

6）优化业务逻辑，比如列表分页、异步发布上传，缓存读取等。例如：你在发表朋友圈的时候，微信客户端显示发布成功，其实在后台不一定是发布成功了，而是写入到本地成功了，后续再通过异步发送到后台服务器的。

本篇文章主要从前端介绍了高性能架构的设计方法，供开发程序员朋友在优化演进自己的产品时参考。但是后端服务的高性能在互联网产品架构设计中占有更大的比重。这一部分会将会在下期文章中得到阐述。

转自原文：https://zhuanlan.zhihu.com/p/28340003