项目优化的方法(渲染优化)
-
禁止使用
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