F1V3.0-3 前端开发问题之解决之道

上一篇博文前端开发主要问题说到前端开发主要有三大问题：调试问题、缓存问题和性能问题，针对这几个问题我们逐一探讨一下解决之道。

1 调试问题

在平台2.x中，前端页面主要由jsp组成，前端功能作为一个osgi模块纳入到整个osgi容器中管理，这就导致了任何一点修改都需要进行updm以后才能生效，导致了调试的麻烦。
为了解决这个问题，前端页面开发需要回归到单纯的页面开发。
1、页面静态化：页面不包括任何动态元素，页面就是页面，只是数据展示和交互。和后台的所有通信通过ajax实现。
2、使用nginx作为Web服务器
完成这两步，前端开发回归到单纯的页面开发，可以使用任何页面开发工具，如sublime，webStorm等，实现了页面修改后能够及时刷新，避免了updm的问题。

2 缓存问题

缓存问题的由来及解决方案请参考博客前端集成解决方案

F1平台采用博文中的方式解决缓存问题：

• 使用文件内容hash后生成版本号，每次只对有改变的文件生成新的版本
• 发布前使用webpack统一打包，统一处理版本问题，不改变开发过程。
-

3 性能问题

浏览器请求处理流程如下图：

主要有下列优化方式：

减少http请求

http协议是无状态的应用层协议，意味着每次http请求都需要建立通信链路、进行数据传输，而在服务器端，每个http都需要启动独立的线程去处理。这些通信和服务的开销都很昂贵，减少http请求的数目可有效提高访问性能。
减少http的主要手段是合并CSS、合并javascript、合并图片。将浏览器一次访问需要的javascript和CSS合并成一个文件，这样浏览器就只需要一次请求。图片也可以合并，多张图片合并成一张，如果每张图片都有不同的超链接，可通过CSS偏移响应鼠标点击操作，构造不同的URL。

合理设置 HTTP缓存

缓存的力量是强大的，恰当的缓存设置可以大大的减少 HTTP请求。详见上一部分

启用压缩

在服务器端对文件进行压缩，在浏览器端对文件解压缩，可有效减少通信传输的数据量。如果可以的话，尽可能的将外部的脚本、样式进行合并，多个合为一个。文本文件的压缩效率可达到80%以上，因此HTML、CSS、javascript文件启用GZip压缩可达到较好的效果。但是压缩对服务器和浏览器产生一定的压力，在通信带宽良好，而服务器资源不足的情况下要权衡考虑。

字体图标

使用字体图标代替常用的图标，这样可以一次性把所有的图标请求下来，而且字体图标的尺寸比正常图标小很多。

懒加载

懒加载是指只请求当前需要展示的资源，其他资源在使用时进行下载。这样能有效减少首次加载的请求数和数据量。如：轮播图只下载第一幅图，Tab页只加载当前展示的内容等。

减少cookie传输

一方面，cookie包含在每次请求和响应中，太大的cookie会严重影响数据传输，因此哪些数据需要写入cookie需要慎重考虑，尽量减少cookie中传输的数据量。另一方面，对于某些静态资源的访问，如CSS、script等，发送cookie没有意义，可以考虑静态资源使用独立域名访问，避免请求静态资源时发送cookie，减少cookie传输次数。