本文已参与掘金创作者训练营第三期「话题写作」赛道，详情查看：掘力计划｜创作者训练营第三期正在进行，「写」出个人影响力。
写在前面，说到性能优化，可以说是重中之重了，在日常开发中，性能优化可以说是随处可见，而性能优化的点也是有很多，完善的性能优化可以为用户的体验已指数被增长。那具体又哪些性能优化的点呢？接下来，就让我带大家走进性能优化的世界吧。
网站的性能优化
content ⽅⾯
-
减少 HTTP 请求：合并⽂件、 CSS 精灵、 inline Image
-
减少 DNS 查询： DNS 缓存、将资源分布到恰当数量的主机名
-
减少 DOM 元素数量
Server ⽅⾯
-
使⽤ CDN
-
配置 ETag
-
对组件使⽤ Gzip 压缩
Cookie ⽅⾯
- 减⼩ cookie ⼤⼩
css ⽅⾯
-
将样式表放到⻚⾯顶部
-
不使⽤ CSS 表达式
-
避免使⽤ @import 引⼊多个 css ⽂件，可以使⽤ CSS ⼯具将 CSS 合并为⼀个 CSS ⽂ 件，例如使⽤ Sass\Less 等
-
css 压缩与合并、 Gzip 压缩
-
尽量⽤缩写、避免⽤滤镜、合理使⽤选择器
-
在⽹⻚中的应该使⽤偶数的字体
-
偶数字号相对更容易和 web 设计的其他部分构成⽐例关系
-
动画最小间隔为 16.7ms
-
多数显示器默认频率是 60Hz ，即 1 秒刷新 60 次，所以理论上最⼩间隔为 1/60*1000ms ＝ 16.7ms
Javascript ⽅⾯
-
将脚本放到⻚⾯底部
-
将 javascript 和 css 从外部引⼊
-
压缩 javascript 和 css
-
删除不需要的脚本
-
减少 DOM 访问
图⽚⽅⾯
-
优化图⽚：根据实际颜⾊需要选择⾊深、压缩
-
优化 css 精灵
-
不要在 HTML 中拉伸图⽚
渲染优化
-
禁⽌使⽤ iframe （阻塞⽗⽂档 onload 事件）
-
iframe 会阻塞主⻚⾯的 Onload 事件
-
搜索引擎的检索程序⽆法解读这种⻚⾯，不利于SEO
-
iframe 和主⻚⾯共享连接池，⽽浏览器对相同域的连接有限制，所以会影响⻚⾯的并 ⾏加载
-
使⽤ iframe 之前需要考虑这两个缺点。如果需要使⽤ iframe ，最好是通过 javascript
-
动态给 iframe 添加 src 属性值，这样可以绕开以上两个问题
-
-
禁⽌使⽤ gif 图⽚实现 loading 效果（降低 CPU 消耗，提升渲染性能）
-
使⽤ CSS3 代码代替 JS 动画（尽可能避免重绘重排以及回流）
-
对于⼀些⼩图标，可以使⽤base64位编码，以减少⽹络请求。但不建议⼤图使⽤，⽐较耗 费 CPU
- ⼩图标优势在于
- 减少 HTTP 请求
- 避免⽂件跨域
- 修改及时⽣效
- ⼩图标优势在于
-
⻚⾯头部的 会阻塞⻚⾯；（因为 Renderer 进程中 JS 线程和渲染线程是互斥的）
-
⻚⾯中空的 href 和 src 会阻塞⻚⾯其他资源的加载 (阻塞下载进程)
-
⽹⻚ gzip ， CDN 托管， data 缓存 ，图⽚服务器
-
前端模板 JS+数据，减少由于 HTML 标签导致的带宽浪费，前端⽤变量保存AJAX请求结 果，每次操作本地变量，不⽤请求，减少请求次数
-
⽤ innerHTML 代替 DOM 操作，减少 DOM 操作次数，优化 javascript 性能
-
当需要设置的样式很多时设置 className ⽽不是直接操作 style
-
少⽤全局变量、缓存 DOM 节点查找的结果。减少 IO 读取操作
-
图⽚预加载，将样式表放在顶部，将脚本放在底部 加上时间戳
-
对普通的⽹站有⼀个统⼀的思路，就是尽量向前端优化、减少数据库操作、减少磁盘 IO
meta viewport相关优化
针对大量图片的优化
-
图⽚懒加载，在⻚⾯上的未可视区域可以添加⼀个滚动事件，判断图⽚位置与浏览器顶端 的距离与⻚⾯的距离，如果前者⼩于后者，优先加载。
-
如果为幻灯⽚、相册等，可以使⽤图⽚预加载技术，将当前展示图⽚的前⼀张和后⼀张优 先下载。
-
如果图⽚为css图⽚，可以使⽤ CSSsprite ， SVGsprite ， Iconfont 、 Base64 等技 术。
-
如果图⽚过⼤，可以使⽤特殊编码的图⽚，加载时会先加载⼀张压缩的特别厉害的缩略 图，以提⾼⽤户体验。
-
如果图⽚展示区域⼩于图⽚的真实⼤⼩，则因在服务器端根据业务需要先⾏进⾏图⽚压 缩，图⽚压缩后⼤⼩与展示⼀致。
今天先总结到这里，我们下期再见。
End~~~
