first
1.减少 DOM 元素数量
复杂的页面不仅下载的字节更多,JavaScript DOM 操作也更慢。例如,同是添加一个事件处理器,500 个元素和 5000 个元素的页面速度上会有很大区别。
从以下几个角度考虑移除不必要的标记:
是否还在使用表格布局?
塞进去更多的 <div> 仅为了处理布局问题?也许有更好、更语义化的标记。
能通过伪元素实现的功能,就没必要添加额外元素,如清除浮动。
浏览器控制台中输入以下代码可以计算出页面中有多少 DOM 元素:
document.getElementsByTagName('*').length;
对比标记良好的的网站,看看差距是多少。
2.把脚本放在页面底部
浏览器下载脚本时,会阻塞其他资源并行下载,即使是来自不同域名的资源。因此,最好将脚本放在底部,以提高页面加载速度。
一些特殊场景无法将脚本放到页面底部的,可以考虑