前端页面性能优化

页面编译渲染阶段

1、减少http请求，webpack设置url-loader，设置limit对于小容量图片转换成base64位图片，为什么不对所有图片使用转换是因为容量较大的图片转换成base64位体积会成倍的增加，违反性能优化的初衷；合并多个小型功能性图片，变成css spirit(雪碧图），减少http图片资源对于服务器的请求；

2、减少重绘回流，特别是回流，回流对于页面有比较大的性能损耗，减少无意义的html的标签的深度嵌套，动画特效可以使用css3特效。

3、压缩图片，通过配置image-webpack-loader不失真压缩图片。

4、页面访问路由时对路由设置按需加载，以vue为例，用route异步import引入的方式。

const Home =  () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home')
const Index = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/index')
const About = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/about')

const route = [
{    
  path: '/home',
  name: 'home',
  component: Home
},
{
  path: '/index',
  name: 'Index',