渲染优化详谈
- 禁止使用
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
个人博客地址:大家可以看看