前端性能优化 (简易篇)

本文只记录了我曾了解过或者用到过的优化性能的方法

减少资源的 http 请求

诸如 js、css、html、font、img 这些文件都通过 http 请求来让服务器接受请求、处理请求并进行反应
这就意味着打包整理资源的重要性，以及我们常用的精灵图也是在此方面大大的加快了请求获取资源所花费的时间

使用服务器端渲染

1. 客户端渲染: 获取 HTML 文件，根据需要下载 JavaScript 文件，运行文件，生成 DOM，再渲染。
2. 服务端渲染：服务端返回 HTML 文件，客户端只需解析 HTML。

• 优点：首屏渲染快，SEO 好。
• 缺点：配置麻烦，增加了服务器的计算压力。

参考资料：

• [Vue.js 服务器端渲染指南] (https://ssr.vuejs.org/zh/)

静态资源使用 CDN

这一个方法很常见就不多做叙述了

将 css 文件放在 js 文件之前

1. 将 css 放在头部里，这样防止加载了 html，css 未加载完成造成页面无样式，
2. 将 js 放在 css 之后也是方便了有些 js 需要用到元素的 width、height 或者 offset 等属性，
3. 写在底部的 js 记得添加 domready、或者 windowonload 入口函数。

小的图片可以使用字体图标来代替

1. 字体图标文件小，并且多个字体图标都在同一个文件里，
2. 不会失真，并且很好控制颜色大小

对文件进行压缩

这个方法也不多做描述

图片优化

1. 不是详情图或者 kv 图，可以将图片转成 jpg 格式
2. 图片的大小不易过大，单倍图、二倍图、三倍图分情况使用，可以通过媒体查询屏幕大小自动适配对应的图片，
3. lazyload 一项发展成熟的延迟加载图片方法，

4. 将 10k 以内的图片转换成 base64 编码

   • 优点：减少 http 请求次数
5. 有一些变色，翻转之类的效果通过 css3 的样式来控制。（css 的 filter 就很有意思）

对于一些过大的第三方库进行按需加载

常见，不多举例

减少重绘重排（细节需要更新）

1. 用 JavaScript 修改样式时，最好不要直接写样式，而是替换 class 来改变样式。
2. 先隐藏元素再进行删除
3. 使用 transform 和 opacity 来实现一些动画不会触发重排重绘

事件委托

事件委托利用了事件冒泡，子元素众多的情况下，将事件绑定在父元素上，减少内存使用

if-else 对比 switch

当判断条件数量越来越多并且判断的值为常量的情况下，越倾向于使用 switch 而不是 if-else。

使用 flexbox 而不是较早的布局模型（？？不是太确定优点在哪等待更新）