减少请求:把网站上的一些图片整合到一张单独的图片中,可以减少网站的HTTP请求数量
渲染:css以及处理页面布局的资源放在head中,先外链(便于维护,可缓存),后本页;js放在body底部,同样外链优于本页;
script还可以考虑异步加载:
defer: 异步加载,在HTML解析完成后执行。defer的实际效果与将代码放在body底部类似
async: 异步加载,加载完成后立即执行
单页面按需加载
资源懒加载于预加载
减少回流、重绘:
元素适当地定义高度或最小高度,否则元素的动态内容载入时,会出现页面元素的晃动或位置,造成回流;
给图片设置尺寸。如果图片不设置尺寸,首次载入时,占据空间会从0到完全出现,上下左右都可能位移,发生回流;
少使用table布局,因为一个小改动可能会造成整个table重新布局。而且table渲染通常要3倍于同等元素时间;、
改变样式时首选切换class或者使用元素的style.csstext属性(小心被覆盖)去批量操作元素样式,减少回流
优化DOM:
缓存dom,减少多次查找
批量离线操作dom
防抖和节流
及时消除对象引用,清除定时器,清除事件监听器
缓存:通过http header配置缓存策略