浅谈前端网页性能调优

• 代码调优
  减少时间复杂度和空间复杂度
  时间复杂度可以简单理解为CPU的计算时间
  空间复杂度可以理解为占用的内存
  找对象属性的时间复杂度是O(N)

  减少重绘重排
  重绘重排：修改CSS的属性（color,width,height,etc）
  批量修改DOM操作

  减少全局变量，把全局变量存储在局部变量中
  因为全局变量是挂载到window对象上的，一旦调用全局对象，就会去查找window的所有属性，直到找到需要的全局变量为止。函数中多次使用全局变量时，可以把全局变量保存到函数的局部变量中。

  使用事件委托/事件委托
  利用冒泡原理，

  图片懒加载，css动画优化，小图片可以用base64

• 加载资源调优

  路由懒加载
  更改路由引入方式

按需引入
const testA = ()=> import (/*webpackChunkName: "testA"*/'@/components/testA')

组件异步加载
全局异步组件：
Vue.component("compB", function(resolve){
	require(['@/components/compB.vue'], resolve)
})

局部异步组件：
<script>
	export default {
		name:'App'
		components:{
			//方法一：
			compA:function(resolve){
				require(['@/components/compA.vue'], resolve)
			}
			//方法二：
			compA:()=>import(/*webpackChunkName: "compA"*/'@/components/compA.vue')
			
		}
	}
</script>

高级异步组件:如果该异步组件加载不出来，会有个提示或者加载默认的组件
<script>
	//同步加载组件
	import Loading from "@/components/Loading.vue"
	import ErrorCom from "@/components/ErrorCom.vue"
	
	const AsyncCompC = ()=>({
	//需要加载的组件，是一个promise对象
		component:import(/*webpackChunkName: "compC"*/'@/components/compC.vue',
		//加载中显示的组件
		loading:Loading,
		//延时时间，加载组件的时间
		delay:1000,
		//超时时间
		timeout:2000,
		//错误组件，超时后显示的组件
		error:ErrorCom
		
	})
export default {
		name:'App'
		components:{
			compC:AsyncCompC
		}
	}
</script>

不过是路由懒加载还是异步组件，打包的时候，会从App.js中分离出来。
ES5中用require引入，ES6中用import引入

多次进出同一个异步组件的页面，会不会重复加载该异步组件？
不会，因为首次加载异步组件会发起ajax请求，然后加载后会缓存起来。

在多个地方使用同一个异步组件的时候，会不会多次请求JS文件？
不会，只会加载一次。

更多的优化方式:
服务端优化，
CDN优化，内容分发优化，一般项目图片存在CDN中
浏览器缓存优化，
DNS预解析优化，
反向代理服务器优化，反向代理服务器通过配置缓存的功能去加速web的请求。当用户访问静态内容的时候，会把静态内容缓存在反向代理服务器上，下次用户在请求静态资源的时候，可以直接从反向代理服务器上访问静态内容，从而可以加速web的请求和减轻服务器的压力。反向代理服务器也可以实现负载均衡的功能，通过负载均衡可以构建应用集群，提高系统的处理能力，从而改善高并发。
ngx反向代理服务器