⽹站性能优化

⽹站性能优化

从前端角度出发可以从以下几个方面对网站性能进行优化

content ⽅⾯

减少 HTTP 请求：合并⽂件、 CSS 精灵、 inline Image
减少 DNS 查询： DNS缓存、将资源分布到恰当数量的主机名
减少 DOM 元素数量

Server ⽅⾯

使⽤ CDN
配置 ETag
对组件使⽤ Gzip 压缩

Cookie ⽅⾯

减⼩cookie⼤⼩

css ⽅⾯

将样式表放到⻚⾯顶部
不使⽤ CSS 表达式
使⽤ <link> 不使⽤ @import

Javascript ⽅⾯

将脚本放到⻚⾯底部
将javascript和css从外部引⼊
压缩javascript和css
删除不需要的脚本
减少DOM访问

图⽚⽅⾯

优化图⽚：根据实际颜⾊需要选择⾊深、压缩优化 css 精灵，不要在 HTML 中拉伸图⽚

 

渲染优化

• 禁⽌使⽤ 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