在当今这个唯快不破的互联网大环境下，项目从架构的时候就要考虑性能是否最优，怎么样让用户体验更好

质量相同的情况下，用户体验好坏一般分两种：

• 初始渲染：首屏加载速度

• 页面跳转：页面跳转加载速度

一、大环境下的优化

1.css样式置顶，优化样式减少不必要的重绘

1）样式表放在网页的head中，首先，这样会给用户加载速度快的感觉，其次，因为样式表决定了网页的绘制信息，所以放在头部可以最大话的避免重绘和重排
2）样式表中尽量避免使用计算属性和@import 如：calc，因为计算属性不可避免造成重绘和重排
3）样式表中尽量使用简写如：

/*16进制颜色*/
#000000
/*可以写成*/
#000


margin-top:2px
margin-right:3px;
margin-bottom:4px;
margin-left:5px;

margin:2px 3px 4px 5px;

2.javascript脚本置底，优化dom操作

由于javascript是阻塞加载，所以尽量把javascript放在网页下边，在首屏加载的时候尽量减少对dom的操作，因为这回引起页面大量的重绘

3.减少http请求

可以通过合并静态文件，使用图标字体，精灵图，合并接口等方式减少http请求次数

4.延时加载

可以把首屏显示之外的文件使用延时加载，来提高首屏速度

5.避免请求空src

src值为空的时候，依然会发送http请求

6.使用压缩工具压缩传输

gzip等

7.使用CDN加速

CDN通过寻找离请求最近的资源服务器来提高用户的下载速度，合理使用CDN可以是网站加载速度倍增

8.使用缓存技术

在静态资源配置的时候可以给承载资源加载链接(如:index.html)以强制不缓存，其余资源做强制缓存，静态资源做打包的时候可以直接附加hash值，从而合理给页面缓存，合理使用缓存可以使网站加载速度倍增

9.打包优化

充分利用webpack等打包工具的打包功能，对代码进行拆包，压缩，以及组件的按需导入

二、代码内部优化

1.组件化

首先组件化代码可以提高代码重用率，其次组件化代码能减少不必要的计算和更新提高页面二次渲染性能

2.使用状态管理工具

预估项目最终程度，如果项目达到一定程度使用状态管理工具，方便管理状态，方便各个组件之间状态共享，减少不必要请求，

3.框架使用优化

优化各个框架提供属性和方法：比如减少refs使用，合理设置更新逻辑，避免不必要的重复渲染

4.请求优化

合理优化调用请求方式，减少不必要的维护和代码量比如：

//比如get请求，每次调用需要添加 method:'get'
require({url:'/test',method:'get'})
/*可以替换一下，
 *使用一个方法来封装一下，
 *直接省去了每个调用method:'get'这几个字符
*/
function get(url){
    return require({url,method:'get'})
}


/*虽然这么写看起来知识省掉了几个字符，
 *但是如果请求多了还是可以减少不小的打包量的，
 *其次请求后还需要数据处理，
 *如：
 */
 require({url:'/test',method:'get'}).then(data=>data).catch(err=>err)


/*如果我们在配合状态管理，
 *那么我们可以节约的代码已经非常可观了
 */
function get({url,commit,type,params}){
    require({url:'/test',method:'get'})
        .then(data=>{
            commit(type,{data})
        })
        .catch(err=>{
            commit(type,err)
        })
}


action({commit}){
    get({url:'/test',commit,type})
}

5.路由优化

1）可以合理安排使用嵌套路由，嵌套路由可以减少不必要的重复加载，现实局部更新
2）把一些权限有关的组件可以进行封装，通过路由来实现，减少不必要的判断和加载

<!--
比如列表：操作 列需要固定权限才可以使用
-->
<table>

    <tr>

        <td>姓名</td>
 
 
        <td>账号</td>
 
 
        <td>出生日期</td>
 
 
        <td>爱好</td>
 
 
        <td>操作</td>

    </tr>

</table>
 
 
<!--
可以提取共有表格
-->
<table>

    <tr>

        <td>姓名</td>
 
        <td>账号</td>
 
        <td>出生日期</td>
 
        <td>爱好</td>
 
        <child/>
 
    </tr>
 
</table>
 
<!--
在有权限的路由调用的时候传入操作列
-->
<MyUserTable>

    <td>操作</td>

</MyUserTable>
 
<!--
不同的前端框架有不同的组件使用模式，
但原理是相同的，我们通过这种方式，
可以把操作列和操作相关的代码拿出来，
这样没有对应权限的用户，
就不需要加载这部分永远不会用到的代码了
-->