减少请求：把网站上的一些图片整合到一张单独的图片中，可以减少网站的HTTP请求数量
渲染：css以及处理页面布局的资源放在head中，先外链（便于维护，可缓存），后本页；js放在body底部，同样外链优于本页；
script还可以考虑异步加载：
defer: 异步加载，在HTML解析完成后执行。defer的实际效果与将代码放在body底部类似
async: 异步加载，加载完成后立即执行
单页面按需加载
资源懒加载于预加载
减少回流、重绘：
元素适当地定义高度或最小高度，否则元素的动态内容载入时，会出现页面元素的晃动或位置，造成回流；
给图片设置尺寸。如果图片不设置尺寸，首次载入时，占据空间会从0到完全出现，上下左右都可能位移，发生回流；
少使用table布局，因为一个小改动可能会造成整个table重新布局。而且table渲染通常要3倍于同等元素时间；、
改变样式时首选切换class或者使用元素的style.csstext属性（小心被覆盖）去批量操作元素样式，减少回流
浏览器的优化机制
现代的浏览器都是很聪明的，由于每次重排都会造成额外的计算消耗，因此大多数浏览器都会通过队列化修改并批量执行来优化重排过程。浏览器会将修改操作放入到队列里，直到过了一段时间或者操作达到了一个阈值，才清空队列。但是！当你获取布局信息的操作的时候，会强制队列刷新，比如当你访问以下属性或者使用以下方法：
- offsetTop、offsetLeft、offsetWidth、offsetHeight
- scrollTop、scrollLeft、scrollWidth、scrollHeight
- clientTop、clientLeft、clientWidth、clientHeight
- getComputedStyle()
- getBoundingClientRect
以上属性和方法都需要返回最新的布局信息，因此浏览器不得不清空队列，触发回流重绘来返回正确的值。因此，我们在修改样式的时候，最好避免使用上面列出的属性，他们都会刷新渲染队列。如果要使用它们，最好将值缓存起来
优化DOM:
缓存dom，减少多次查找
批量离线操作dom
防抖和节流
及时消除对象引用，清除定时器，清除事件监听器
缓存：通过http header配置缓存策略