前端渲染优化有哪些？

禁止使用 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 读取操作