渲染优化中那些奇奇怪怪的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 线程和 渲染线程 是互斥的)

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

  • ⽹⻚ gzipCDN 托管, data 缓存 ,图⽚服务器

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

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

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

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

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

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

 

版权声明:本文版权归作者所有,遵循 CC 4.0 BY-SA 许可协议, 转载请注明原文链接
https://www.cnblogs.com/songyajie32C/p/16516818.html