⽹站性能优化

?站性能优化

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

content ??

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

Server ??

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

Cookie ??

减?cookie??

css ??

将样式表放到??顶部
不使? CSS 表达式
使? 不使? @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 请求；避免?件跨域；修改及时?效。

• ??头部的 会阻塞??；（因为 Renderer进程中 JS 线程和渲染线程是互斥的）
• ??中空的 href 和 src 会阻塞??其他资源的加载 (阻塞下载进程)
• ??gzip，CDN托管，data缓存，图?服务器
• 前端模板 JS+数据，减少由于 HTML 标签导致的带宽浪费，前端?变量保存AJAX请求结果，每次操作本地变量，不?请求，减少请求次数
• ?innerHTML 代替DOM操作，减少DOM操作次数，优化javascript性能
• 当需要设置的样式很多时设置className?不是直接操作style
• 少?全局变量、缓存 DOM节点查找的结果。减少IO读取操作
• 图?预加载，将样式表放在顶部，将脚本放在底部 加上时间戳
• 对普通的?站有?个统?的思路，就是尽量向前端优化、减少数据库操作、减少磁盘 IO