怎么做到性能优化？ 什么是回流，什么是重绘，有什么区别？

前端面经

怎么做到性能优化？

• 1、JavaScript外联文件引用放在html文档底部；CSS外联文件引用在html文档头部，位于head内；
• 2、http静态资源尽量用多个子域名；
• 3、服务器端提供html文档和http静态资源时，尽量开启gzip压缩；
• 4、尽量减少HTTP Requests的数量；
• 5、使用雪碧图来减少CSS背景图片的HTTP请求次数；
• 6、首屏不需要展示的较大尺寸图片，请使用lazyload；
• 7、图片无损压缩的优化；
• 8、减少cookies的大小：尽量减少cookies的体积对减少用户获得响应的时间十分重要；
• 9、引入textarea/script元素做延迟解析异步渲染。

什么是回流，什么是重绘，有什么区别？

• 当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这
  就称为回流(reflow)。
• 当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响
  布局的，比如background-color。则就叫称为重绘。
• 区别：
  • 回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流 当页面布局和几何属性改变时就需要回流 比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变。