前端可以做的一些性能优化本文正在参与 “性能优化实战记录” 现在互联网技术日新月异, 新技术一轮又一轮, 前后端的发展飞

本文正在参与 “性能优化实战记录” 话题征文活动

现代互联网技术日新月异, 新技术一轮又一轮, 前后端的发展飞快. 后端的性能优化方面的实践特别多, 已经出现了各种非常齐全的方案. 而前端方面的性能优化比较零碎, 在工作中用到时, 往往找不到相对全面的内容. 总是查找碎片化内容, 浪费时间不说, 往往得不到不到满意的结果.

前端各层级的优化

前端技术的三个层级: 即 HTML/ CSS/ JavaScript, 当然还有网络请求,资源加载, 页面渲染, 数据结构的处理, 异步机制等等

我们可以根据具体类目可进行深入学习

HTML 层级优化

现代化开发中, 我们推荐使用语义化标签, 这使得我们的代码更加人性化, 不那么古板.

1. HTML 标签嵌套问题

减少标签的嵌套,
减少使用空标签,
减少无用标签的滥用.

CSS 层级优化

1. 样式复用

1.1 样式复用及继承样式
1.2 同一类名避免多次渲染, 不要在多出定义
1.3 选择器的使用, 少用高优先级(比如 !important要慎用少用)

2. 各类标签的灵活使用

2.1 常见的标签的 src 和 alt href 等属性
2.2 比如 img 标签
2.3 link 标签的使用,

3. 各类标签的灵活使用

3.1 标签的自定义属性的使用
3.2 注意标签的 style属性
3.3 模板引擎的合理利用等

JavaScript 层级优化

JavaScript 也是我们打交道最多的了! 项目最主要的逻辑就是 JavaScript层级上的. JavaScript 层级优化的点太多了, 各种点吧, 各种零碎的点面. 大家工作中也肯定不注意间就做到了优化.

合理使用定时器
事件绑定要注意, 比如事件委托, 避免重复的事件监听, 事件的冒泡捕获等机制
比如各大框架源码的优秀思想, Vue React 等.
MVVM 框架的组件生命周期的合理使用

资源加载层面的优化

资源解析优化:请求优化/ CDN部署/ 缓存 HTTP 缓存等等
页面加载模式: 懒加载, 页面无刷新 ajax 加载/ 分页加载等
资源优化处理代码压缩/ base64的妙用/ CSS Sprite/ 图片处理
开发时环境的调试/日志等代码优化
不做重复的加载减少交互请求等
合理使用本地存储: LocalStorage 和 SessionStorage
Cookie 的精简
浏览器请求并发数的限制
异步机制 Promise async/await

在面试中也经常被问到了解到有那些性能优化的点

1、CDN 的使用

2、减少 DNS 查询

3、减少 HTTP 请求数

4、避免重定向

5、图片懒加载

6、减少 DOM 元素数量

7、减少 DOM 操作

8、尽量减少 iframe 使用

9、压缩 JavaScript 、 CSS 、字体、图片等

10、多域名分发划分内容到不同域名

11、使用外部 JavaScript 和 CSS

12、字体裁剪

13、使用 iconfont

14、优化 CSS Sprite

15、避免图片 src 为空

16、把样式表放在中

17、把脚本放在页面底部

前端可以做的一些性能优化