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