前端代码优化方法

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.处理页面逻辑，相似逻辑可以适当复用避免造成页面逻辑冗余
12.多重循环的逻辑处理可以适当交给后端处理，避免数据量大时渲染卡顿，让页面主要是履行渲染功能
13.原生写的页面要注意页面的执行顺序(跟据你具体的需求布置加载顺序=>css/html/js)
14.合理使用页面缓存(vue如：keep-alive等)，页面数据本地缓存(localStorage,sessionStorage等)，减少http请求次数（但是要注意数据更新）
15.尽量少的定义data数据，减少页面属性监听次数
16.路由懒加载，降低首次加载给页面的压力
17.压缩本地图片，减少加载静态文件时间(如：https://tinypng.com/)
18.图片懒加载，页面骨架屏，降低网页未加载时用户的恐慌
19.图片上传时大体积图片压缩之后上传
20.合成所有icon图片，文件引入还可以更改颜色
21.开启gzip压缩，加快网站打开速度
22.清除页面死代码，如console.log，注释的代码等
23.第三方资源不可控会影响页面的加载和显示，要异步加载第三方资源(js:async 和 defer，css:import 和 link)