前端综合优化有哪些

减少请求：把网站上的一些图片整合到一张单独的图片中，可以减少网站的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配置缓存策略