Loading...

前端渲染优化有哪些?

禁止使用 iframe ( 阻塞父文档 onload 事件)

   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 读取操作

0

回到顶部