渲染优化中那些奇奇怪怪的rules

• 禁⽌使⽤ iframe

  • iframe 会阻塞主⻚⾯的 Onload 事件

  • 搜索引擎的检索程序⽆法解读这种⻚⾯，不利于 SEO

  • iframe 和主⻚⾯共享连接池，⽽浏览器对相同域的连接有限制，所以会影响⻚⾯的并⾏加载

  • 使⽤ iframe 之前需要考虑这两个缺点。如果需要使⽤ iframe ，最好是通过 javascript

  • 动态给 iframe 添加 src 属性值，这样可以绕开以上两个问题

• 禁⽌使⽤ gif 图⽚实现 loading 效果（这样可以降低 CPU 消耗，提升渲染性能）

• 使⽤ CSS3 代码代替 JS 动画（尽可能避免重绘重排以及回流）

• 对于⼀些⼩图标，可以使⽤ base64 位编码，以减少⽹络请求。但不建议⼤图使⽤，⽐较耗费 CPU，⼩图标优势在于：

  • 减少 HTTP 请求
  • 避免⽂件跨域
  • 修改及时⽣效

• ⻚⾯头部的  <style></style>  <script></script>  会阻塞⻚⾯；（因为 Renderer(渲染)进程中 JS 线程和 渲染线程 是互斥的）

• ⻚⾯中空的 href 和 src 会阻塞⻚⾯其他资源的加载 (阻塞下载进程)

• ⽹⻚ gzip ， CDN 托管， data 缓存 ，图⽚服务器

• 前端模板 JS+数据，减少由于 HTML 标签导致的带宽浪费，前端⽤变量保存 AJAX 请求结果，每次操作本地变量，不⽤请求，减少请求次数

• ⽤ innerHTML 代替 DOM 操作，减少 DOM 操作次数，优化 javascript 性能

• 当需要设置的样式很多时，设置 className ⽽不是直接操作 style

• 少⽤全局变量、缓存 DOM 节点查找的结果。减少 IO 读取操作

• 图⽚预加载，将样式表放在顶部，将脚本放在底部 加上时间戳

• 对普通的⽹站有⼀个统⼀的思路，就是尽量向前端优化、减少数据库操作、减少磁盘 IO