有感而发
做前端开发，也有些年头了。除了垒代码之外，也非常重视自己开发的项目的用户体验，经常会以纯用户的角度，去体验自己开发出来的项目。综合自己在项目开发过程中遇到的问题，尤其是合作开发的过程中遇到的情况，以及作为用户的感受，特别想写一点关于项目优化的东西，如有不合适的地方，欢迎批评指正。
8秒原则
我们都知道，互联网圈内有一条著名的 8秒原则，即用户在浏览一个网页的时候，如果等待时间超过 8秒，可能就会放弃访问，作为网站端，我们就会有用户流失。事实上，亲测，一般不会等到 8秒，超过 6秒，我就会放弃访问这个页面（也可能是我太急躁）。也就是说 6秒起，每多等待一秒，就会有一定数量的用户流失。所以，页面性能优化，显得尤为重要。
但是，目前没有相对成熟的前端代码检测工具，来帮助我们去检测我们的代码质量，这就要求我们自己从各个维度查看自己的代码，经常 review 自己的代码，鞭驽策蹇，来提高自己。本文主要是以自身实践角度，探讨一些可行的优化点：
-
资源压缩/合并
压缩代码，缩小文件体积，加快页面的加载速度，这些是提高页面访问体验的基本操作。现在的主流框架，像 vue 引用 webpack 工具，在生成打包文件的时候，都已经做了代码压缩合并的操作，不需要我们单独处理（react、angular 也一样）。
-
代码尽量简洁，减少冗余代码量
说简单点的，能一行代码解决的问题，不要绕大圈子。现在有许多公司，都会把冗余代码量，作为 KPI 考核的一个标准
-
优化 dom 操作：
-
尽量减少 浮动 / 定位 的使用（动画除外）
处于文档流以内的元素或节点，加载速度更快，同时元素更加易于控制。现在有了 flex 布局以后，页面元素几乎不需要再浮动/定位去实现特殊的排版需求。元素脱离文档流，真心不好控制
-
使用动画时，让元素脱离文档流，动画的定位，尽量多用 fixed / absout
此时让元素脱离文档流，是为了减少触发动画时，页面频繁的 重排 / 重绘，关于页面的重排（relayout/reflow）/ 重绘（repain），请前往查阅 前端性能优化：细说浏览器渲染的重排与重绘
-
css 尽量使用 id 或者 class，避免过度层叠
道理很简单，好比你到公司前台找人，你直接说出对方的名字，前台就可以快速的帮你找到他，非必要的情况下，不用报他是哪个部门的，哪个组，是男是女。能一步到位的，不用绕多步。给大家看一个错误示例：
-
公共样式，千万不要嵌套写
这应该是常识。公共样式，如果用嵌套写，就表示在用到某一个类名的时候，必须同时使用他的父级的类名，但是如果两个父级有样式上的冲突呢？
-
-
数据交互方面，降低接口请求频次，减少无关的第三方引用
-
降低请求量，减小引用文件体积
-
合理运用 CDN 加速请求
-
非核心代码，合理使用异步加载
尤其是加载 js 文件的时候，格外突出，合理使用 async 或 defer 加载 js 文件
-
内存资源优化
-
及时清理无用的定时器
-
及时关闭无用的监听
-
及时释放无效的内存占用 - - 比如，闭包
-
-
图片的处理
图片始终是最消耗资源的，对图片的处理，是重中之重
-
图片服务和应用服务分离（从架构的角度）
图片服务和应用服务放在同一服务器上，应用服务很容易因为图片的高 I/O 负责崩溃，服务分离，适用于图片较多的网站，比如电商、购物网站
-
个人处理 - 简单粗暴的图片压缩
在不损坏质量的情况下，减小图片的体积
-
图片转成 base 64 编码
vue.js 其实已经帮我们做了这件事。但是要注意，图片转成 base64 编码，其实是在一定程度上增大了文件的体积，并且，vue.js 对被转码的图片是有要求的，只转10K以下的图片，超过10K，就只是静态引用。一定注意，并不是所有图片都放到 assets 文件夹内，vue就一定会对其 base64 转码
-
合理使用 cssSprites（图片精灵）
小图片整合到一张大图上，可以降低请求频次，不过多解释
-
图片预加载 / 懒加载
提高用户体验的，不用过多解释
-
写在最后
以上啰啰嗦嗦这么多，是我个人在项目开发中，非常注意的地方。
非核心代码的异步加载，是最近在看文章的时候，才学到的技术点，详细内容可参考 你不知道的浏览器页面渲染机制。
如果有不合理的地方，欢迎大佬留言，欢迎批评指正
