性能优化

作者: 戒惜舍得 | 来源:发表于2018-01-03 17:38 被阅读8次

Android性能优化 - 消除卡顿
Android性能优化 - 内存优化
前端性能优化（中）
前端性能优化（下）
Awesome Extra
常用的后端性能优化六种方式：缓存化+服务化+异步化等
webpack 性能优化
iOS性能优化 - 整理
【React.js 20】React性能优化
Android性能优化（下）

注意：

优化最难的地方就是如何在开发生命周期中最适当的时候去做优化。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);