王静，于2017年加入京麦服务市场成为其中一员，热爱前端，目前负责服务市场前端相关研发工作。
引言
服务市场是将服务商和商家联系在一起，为服务商和商家提供交易的平台；服务市场也给商家提供了各种类型的服务，为商家与第三方服务实现在线交易的功能。整个服务市场项目使用的技术栈较旧，本文主要讲述如何对服务市场进行前端重新构建、以及改进之后对整体性能的提升。
现状
目前服务市场的项目整体使用jquery和velocity进行搭建，采用前后端不分离技术，前端看到的页面效果由后端决定，由后端渲染页面或进行重定向。因此服务市场整体项目重构在所难免，即将采用vue将项目进行前后端分离提高工作效率以便于后期代码开发和维护。现阶段存在有以下问题：
1 整个项目有很多代码书写不规范。
2 请求action不是以json格式进行返回，是以后端直接传输数据到vm文件进行渲染，后期维护较难。
3 数据采用velocity语法渲染到模版中，虽然渲染提升了加载速度，但是代码层面不利于分离，前后端高度耦合，前端页面看到的效果都是由后端渲染页面或重定向。
4 实现不了页面局部刷新效果，性能体验较差。
5 较多图片未压缩导致加载时间长，首屏最大的图片会影响最终的加载速度，没有必要加载看不到的资源。
6 不安全，代码暴露在浏览器中，攻击者可以通过浏览器获取用户信息，造成代码泄露。
7 接到新需求时，不敢删老代码导致页面越来越多，代码大量堆积影响加载速度。
改进方向
重新搭建将采用前后端分离的开发模式，后端返回需要的数据格式，整体的页面展现效果由前端控制。前端整体项目是一个单页面应用（只有一个html页面），以组件的形式进行开发，将头部等公共组件进行抽离方便复用，整体结构如下图：
开发步骤：
a 搭建vue项目框架，配置运行和开发环境，mock数据
b 公共组件封装并进行开发
c 创建路由 ---> 创建路由映射 ---> v-link ---> router-view ---> 启动路由
d 开发完成打包（npm run build）
e 生成的文件放在webapp目录下
f 老项目链入新页面url
前后端分离技术栈
1）使用vue+vue-router+axios+mock+webpack进行搭建
优点：
a 前后端代码分离，耦合性低，前端和后端可以同步进行开发，提高工作效率
b 减少甚至不操作dom（频繁的操作dom，增加重绘和重排，严重的影响渲染效率）
c 前端项目使用mock模拟数据，不需要等接口开发完成再开发，提前约定好接口数据结构，与后端同步开发
d Webpack打包后生成压缩js、css减小了文件的体积和服务器处理的压力，提高了页面渲染的速度
e 安全性：打包后的代码并没有将源码暴露在浏览器中，安全性更高
2）使用vue-router进行路由跳转
优点：用户体验好，可以快速展现给用户，不需要每次都从服务器获取，可以实现按需加载
路由有两种模式（hash和history），本次采用hash模式：http://www.xx.com/#/ 123（hash值的变化，并不会导致浏览器向服务器发送请求，hash值的改变会触发hashchange事件，通过监听事件实现无刷新的更新页面部分内容）。
缺点：#展现在url中不太美观
CDN部署
静态资源文件（css、js等）部署到cdn,用户请求数据时，会先检查本地是否有缓存，过期的话向CDN最近的节点发起请求，请求数据缓存过期的话CDN会向源服务器发起请求获取最新的数据。
优点：CDN减轻了服务器的负担，对访问的速度以及稳定性都有一个保障。用户请求将直接连接离用户最近的服务节点上，尽量避免网络拥挤的状况，使内容传输的更快，提高网站的响应速度。
缺点：CDN需要刷新缓存，缓存需要时间（大约半分钟），后期可以使用添加时间戳等方式进行优化。
跨域
目前整个项目跨域使用jsonp实现。
优点：兼容性更好，在低版本浏览器上都可以运行；并且在请求完毕后可以通过调用callback的方式回传结果。
缺点：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
性能优化
完整的页面加载包括获取地址、查缓存、DNS解析、三次握手、发送请求、响应、渲染DOM树。加载过程中针对不同的情况可以分别进行性能上的优化，提升加载速度。例如：
a 缓存（合理利用缓存）：Cookie、LocalStorge、SessionStorge、CDN等。
b DOM树的渲染： 减少嵌套层数，嵌套越深，页面渲染时间会加长；模块化css代码，提高复用率，代码压缩；图片的压缩、雪碧图；懒加载等。
性能测试（PageSpeed打分）