前端性能优化---------简易篇

前端性能优化(简易篇)

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

1.减少资源的http请求

诸如js、css、html、font、img这些文件都通过http请求来让服务器接受请求、处理请求并进行反应
这就意味着打包整理资源的重要性，以及我们常用的精灵图也是在此方面大大的加快了请求获取资源所花费的时间
还有最基本的一点，文件的资源最好不要出问题避免404，否则十分影响加载速度

2.静态资源使用 CDN

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

3.将css文件放在js文件之前

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

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

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

5.对文件进行压缩

这个方法也不多做描述

6.图片优化（重要）

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

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

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

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

常见，不多举例

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

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

9.事件委托

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

10.if-else 对比 switch

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

11.避免空的src和href

12.css选择器不要太过复杂

13.前后端交互的数据尽量减少无用数据

14.使用服务器端渲染

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

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

参考资料：

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

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