项目优化的方法(渲染优化)

-
禁止使用
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读取操作 -
图片预加载,将样式表放在顶部,将脚本放在底部 加上时间戳
-
对普通的网站有一个统一的思路,就是尽量向前端优化、减少数据库操作、减少磁盘
IO


