前端性能优化的例子

● CSS样式表置于头部导入，在渲染DOM-TREE的时候预先请求样式资源，让页面渲染速度加快

● 基于ajax/fetch获取的数据，对于不经常更新的做缓存【本地存储】

● 减少DNS解析次数【真实项目往往是增加解析次数，来多服务器资源部署，但是可以DNS预解析】

● 实现资源文件的强缓存和协商缓存

● CSS选择器层级不要太深

● 避免404【SEO优化手段】

● 基于事件委托实现事件绑定

● 函数的防抖和节流，降低触发的频率

● 尽可能使用CSS3动画，如果需要使用JS动画，则最好使用requestAnimationFrame

● 使用HTTP2.0来处理【多路复用 & 主动推送 & 减少头信息的传输 & 二进制格式传输】

● cookie存储的信息尽可能少一些【原因：每一次项服务器发送请求，都会把cookie带上】

● 不要使用@import导入CSS资源【原因：阻塞GUI的渲染】

● 代码编写中要“低耦合高内聚【封装】”

● 减少闭包的使用【原因：占用栈内存】，最好手动释放没用的内存“内存优化”

● 避免循环的多级嵌套【原因：时间复杂度过高】，避免死循环【原因：阻塞JS引擎线程的渲染】

● script放在页面底部，而且可以使用defer/async，使其变为异步获取

● 图片格式尽可能使用webp

● 开启HTTP的Connection:Keep-Alive

● 使用webworker和scoket.io实现数据实时通信，避免长轮询

● 及时清除没用的定时器【属于内存优化】

● 开启服务器端的GZIP压缩

● 避免死递归【原因：死递归会导致栈内存溢出】

● 在js中有一些代码尽量少用（打死都别用，性能消耗很大）：with/eval...

● 使用正则表达式虽然可以很方便的处理字符串，但是复杂的正则表达式也会带来性能上的损耗

● 各种循环方式性能的对比（好->坏）：for/while、内置方法（例如：forEach）、for of、for in

● CSS中减少对filter的使用

● 图片使用BASE64【正常方式加载图片，需要经历：请求、编码、渲染三个步骤，而每个步骤都需要一些时间】，而BASE64是直接给图片设置对应的编码，浏览器只需要渲染即可。【问题：BASE64码太长了，不方便开发和维护，也增加了页面请求的时间，所以真实项目中，BASE64我们一般会基于webpack编译生成，而且不要过度使用】

● 音视频采用流信息播放

1. 减少直接对DOM的操作
   • 操作DOM耗性能，因为会引发DOM的重排（回流）和重绘
   • Vue/React等框架是不需要我们自己操作DOM的【推荐】
   • 读写分离
   • 基于文档碎片或者字符串拼接等方式，批量实现DOM的创建
   • 修改样式尽可能使用transform
   • 要修改样式的元素，尽可能在单独的文档流（层）中【使用position定位】
2. 减少页面中的HTTP请求数量和请求大小【HTTP有并发限制、多个HTTP请求需要等待资源加载回来后再渲染、网络通道阻塞...】
   • 资源合并&压缩【例如：CSS合并为一个、JS合并为一个、雪碧图 -> webpack】
   • 图片/音视频懒加载【首次渲染页面，减少HTTP请求，以此来优化白屏等待时间；当页面渲染完，再去请求真正的图片/音视频】
   • 在保证图片不失真的情况下，尽可能压缩大小。或者使用字体图标
   • CSS代码不多的情况下，使用内嵌式【原因：减少HTTP请求 & 加快样式渲染】
3. 前端骨架屏方案==>首次渲染更快，减少页面白屏等待时间
   • 服务器渲染（SSR）【vue:nuxt.js react:next.js】
     • 服务器渲染有利于SEO优化，而客户端渲染是做不了的【SEO：搜索引擎优化；SEM：百度竞价排名】
     • 在服务器并发压力较强的情况下，服务器渲染是可以更快实现页面渲染的
     • 弊端：导致服务器的压力过大，而且前后端没有完全分离
     • 服务器只需要完成首屏信息的渲染即可，其余屏幕还是交给客户端完成
   • 纯前端骨架屏方案【Loading效果】 终极优化方案：使用CDN（服务器分布式）

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！