前端性能优化实战（二）

渲染优化

• 禁⽌使⽤ 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~~~