前端代码优化方法

1.封装的css样式,增加样式复用性。如果页面加载10个css文件,每个文件1k,那么也要比只加载一个100k的css文件慢
2.减少css嵌套,最好不要嵌套三层以上
3.不要在ID选择器前面进行嵌套,ID本来就是唯一的而且权限值大,嵌套完全是浪费性能
4.减少通配符*或者类似[hidden=“true”]这类选择器的使用,挨个查找所有…这性能能好吗?
5.巧妙运用css的继承机制,如果父节点定义了,子节点就无需定义
6.减少css表达式,表达式只是让你的代码显得更加酷炫,但是对性能的浪费可能超乎你想象
7.css压缩(在线压缩工具 YUI Compressor)
8.减少回流,可以适当重绘,避免不必要的DOM操作
9.减少dom层级,渲染速度页面加快
10.封装常用js,增加逻辑复用性。项目常用的js,可以全局引入
11.页面数据本地缓存,减少http请求次数(但是要注意数据更新)
12.尽量少的定义data数据,减少页面属性监听次数
13.路由懒加载
14.压缩本地图片,减少加载静态文件时间(https://tinypng.com/)
15.图片懒加载,页面骨架屏,降低网页未加载时用户的恐慌
16.图片上传时大体积图片压缩之后上传
17.合成所有icon图片,文件引入还可以更改颜色
18.开启gzip压缩,加快网站打开速度
19.清除页面死代码,如console.log,注释的代码
20.第三方资源不可控会影响页面的加载和显示,要异步加载第三方资源

你可能感兴趣的:(vue,vue3,前端,javascript,css)