浅谈前端网页性能调优

最新推荐文章于 2024-12-11 06:00:00 发布

pamerely

最新推荐文章于 2024-12-11 06:00:00 发布

阅读量401

点赞数

分类专栏：个人笔记文章标签：前端性能优化

本文链接：https://blog.csdn.net/weixin_44372019/article/details/89711399

版权

本文主要探讨了前端性能调优的策略，包括减少时间复杂度和空间复杂度以优化CPU计算和内存占用，避免不必要的重绘重排，合理使用局部变量以减少全局变量的查找，运用事件委托提高效率，实现图片懒加载和CSS动画优化。此外，还介绍了资源加载的优化，如路由懒加载和按需引入，以及服务端、CDN、浏览器缓存、DNS预解析和反向代理服务器等多方面的优化方法。

摘要由CSDN通过智能技术生成

代码调优
减少时间复杂度和空间复杂度
时间复杂度可以简单理解为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)

最低0.47元/天解锁文章