注意：
优化最难的地方就是如何在开发生命周期中最适当的时候去做优化。Donald Knuth 有一句名言：「过早优化乃万恶之源」。这句话背后的原因非常简单：因为一不小心就会浪费时间去优化某个 1% 的地方，但是结果却并不会对性能造成什么重大影响。与此同时，一些优化还妨碍了可读性或者是可维护性，甚至还会引入新的 Bug。换句话说，优化不应当被认为是「意味着得到应用程序的最佳性能」，而是「探索优化应用的正确的方式，并得到最大的效益」。再换句话说，盲目的优化可能会导致效率的丢失，而收益却很小。在你应用以下技巧的时候请将此铭记在心。你最好的朋友就是分析工具：找到你可以进行通过优化获得最大程度改善的性能点，而不用损害应用开发的进程或者可维护性。
程序员们浪费了大量时间来思考，或者说是担忧，他们的程序中非关键部分的运行速度。并且他们对于性能的这些尝试，实际上却对代码的调试和维护有着非常消极的影响。我们应当忘记那些不重要的性能影响，在 97% 的时间里都可以这么说：过早优化乃万恶之源。当然我们也不应当在那关键的 3% 上放弃我们的机会。—— Donald Knuth
容易实现并且效果比较大
１ 减少请求
２ 合并压缩文件
规则05：将CSS样式表放在顶部如果将css样式定义放在页面中或者页面底部，会出现短暂白屏或者某一区域短暂白板的情况，这和浏览器的运营机制有关的，不管页面如何加载，页面都是逐步呈现的。所以在每做一个页面的时候，用Link标签把每一个样式表定义放在head中。规则06：将javascript脚本放在底部浏览器在加载css文件时，页面逐步呈现会被阻止，直到所有css文件加载完毕，所以要把css文件的引用放到head中去，这样在加载css文件时不会组织页面的呈现。但是对于js文件，在使用的时候，它下面所有也页面内容的呈现都会被阻塞，将脚本放在页面越靠下的地方，就意味着越多的内容能够逐步呈现。
规则08：使用外部javascript和CSS内联js和css其实比外部文件有更快的响应速度，那为什么还要用外部呢？因为使用外部的js和css可以让浏览器缓存他们，这样不仅HTML文档大小减少，而且不会增加HTTP请求数量。另外，使用外部js和css可以提高组件的可复用性。
减少 回流与重绘 的tips
-
使用最佳的布局实践
尽量不要使用行内样式或者table去布局。
减少使用flex布局。 -
减少
css的选择器的层级
有几个工具可以减少ｃｓｓ选择器的层级。
Tools like Unused CSS, uCSS, grunt-uncss, and gulp-uncss can significantly reduce your style definitions and file sizes.
- 减少
dom实现的层级
如果不需要适配老旧的浏览器，可以试着去减少不必要的嵌套标签（元素）。
-
更新样式时选择在dom树层级较低的标签（元素）来更新
dom树层级越低的标签（元素），更改样式的时候回流时影响的元素越少 -
让复杂的动画脱离文档流
为了确保一个动画只作用于一个标签（元素），可以通过设置position:absolute;或者position:fixed;使当前元素脱离文档流。 -
编辑隐藏的标签（元素）
一个不显示display:none;的标签（元素）在改变的时候不会触发回流和重绘。在开发时，注意在
标签（元素）显示之前操作它们。
- 成组的更新标签（元素）
一个操作更新多个元素可以提高性能。
不推荐
var myelement = document.getElementById('myelement');
myelement.width = '100px';
myelement.height = '200px';
myelement.style.margin = '10px';
推荐
var myelement = document.getElementById('myelement');
myelement.classList.add('newstyles');
.newstyles {
width: 100px;
height: 200px;
margin: 10px;
}
使用文档碎片来操作dom
var
i, li,
frag = document.createDocumentFragment(),
ul = frag.appendChild(document.createElement('ul'));
for (i = 1; i <= 3; i++) {
li = ul.appendChild(document.createElement('li'));
li.textContent = 'item ' + i;
}
document.body.appendChild(frag);
- 限定被影响的元素（这段自己没有真正明白）
考虑使用选项卡去切换现实内容。 这几个显示的选项卡要设置固定的高度或者让每一个卡片脱离文档流。
９. 动画的平滑性和性能之间的选择
每次动画移动一个像素可能看起来平滑，但对设备的性能要求较高。如果每次移动四个像素，会减少四分之一的回流，平滑性会降低一点。
- 使用浏览器工具去分析
主流浏览器都提供工具去高亮显示回流是如何影响性能的。
打开时间面板记录活动。
在 ｉｅ 浏览器中使用 UI Responsiveness 可以查看
UI Responsiveness in the Internet Explorer
image.png
所有的浏览器回流和重绘的时间显示为绿色。
chrome 开发者工具中文文档（太棒了）
http://www.css88.com/doc/chrome-devtools/network-performance/resource-loading/
参考：
https://zhuanlan.zhihu.com/p/21417465
https://www.sitepoint.com/10-ways-minimize-reflows-improve-performance/
网友评论