基于大数据用户行为预测在前端性能优化上的应用.pdfVIP

更多企业商业智能BI 信息化相关信息获取 / / 基于大数据的用户行为预测在前端性能优化上的应用 目的 前端性能优化，最主要的目的就两个：1、提升页面加载速度；2、节约服务器资源。 这里特别提一下节约服务器资源，很多人在做前端性能优化的时候，往往只考虑前端性 能的问题，而完全忽视前端的性能优化对后端服务器性能的影响。其实，对于一个网络流量 比较大的站点来说，节约服务器资源就是省钱啊。比如，js 文件、图片文件的大小越小，服 务器所需的磁盘 IO 贷款和网络 IO 贷款也就越小，自然就可相应省下部分开支了。 现有的方法 前端性能优化，我们目前主流的技术方案主要也就两个：1、合并；2、压缩；3、缓存。 举个例子，一个网站有 A,B,C,D 四个页面，分别需要引用 a\ b, a\ b\c, a\ b\c\d, a\d 这几 个js 文件。于是我们考虑到 a 这个js 文件在四个页面中均有引用，所以不参与合并。然后 把 b\c 两个js 文件合并成 x ，把b\c\d 三个js 文件合并为y。现在A,B,C,D 四个页面对js 文件的引用规则变成了分别引用a\ b, a\x, a\y, a\d 这几个js 文件。接下来，我们将a\ b\x\y\d 这五个js 文件分别混淆压缩。 通过以上一系列的处理，现在用户通过浏览器访问我们的站点的时候，在 A\ B\C\D 四个 页面都只需要发起两个对js 文件的请求。同时，四个页面还可以共享对 a 这个js 文件的缓 存。 现有的问题 上述的这个性能优化方案，我想很多人一眼就可以看出来，其实还存在很多问题。 更多企业商业智能BI 信息化相关信息获取 / / 1、首次加载页面时，缓存策略无法发挥作用，拖慢了页面加载速度。 虽然我们配置了缓存策略，使得用户访问过 B 页面一次之后再访问 B 页面是可以从浏览 器缓存中直接加载其依赖的 a\x 两个js 文件的。但是，如果用户只访问过 A 页面而没有访 问过 B 页面，此时再访问 B 页面的话，只有 a 的缓存能够生效，而 x 是没有缓存的。 2、b\x\y\d 这四个js 文件的内容存在冗余，浪费了服务器资源。 x 包含了 b\c 两个js 文件的内容，但当用户使用浏览器请求了 x 之后再请求 b ，任然需 要重新下载整个 b 文件，这里对 x 的缓存是无法使用在 b 上面的。 从这两个问题来看，似乎还有进步的空间！ 新方法 针对上面的问题，一个个来解决。 首先是首次加载页面时缓存策略无法发挥作用的问题。其实这个问题也是本文的核心， 我的解决方案是预加载。也就是说，当用户还没有访问 B 这个页面的时候，我们就预先让 用户的浏览器加载 B 页面所依赖的 x 这个js 文件。 设计了一个前端资源预加载系统，包括前端js 代码、后端预加载策略逻辑，还有用于计 算加载策略的数据库。还是用上面的那个例子。假设 A 页面是网站的首页，当用户访问 A 页面后，前端js 将用户的 SessionID 和当前页面的 URL 发送到后端，并由后端逻辑将这条 访问行为记录到数据库的 visit_sequence 表，然后收集前端资源形成资源列表，包括页面 中引用的 link、script 等，并计算此资源列表的 MD5 发往后端进行比对。后端逻辑根据页 面 URL 在 page_resource_signature 表中查找相应的 MD5 值，如果没有找到，就要求前 端js 代码发送整个资源列表以及页面 URL 和资源列表的 MD5 值并记录到 更多企业商业智能BI 信息化相关信息获取