禁止使用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