前端好文章收藏列表

1.Combining JavaScript Arrays By Kyle Simpson

这篇文章作者主要讨论了组合数组的几种方式以及他们的优缺点。

• concat：会生成一个新的数组c

  • 优点：易读，js提供的最符合的方法；

  • 缺点：这时内存中有a,b,c三个数组，且c的长度是a+b之和，当数组元素过多或者内存有限的环境中不是很理想。

  var c = a.concat( b );
  
  a; // [1,2,3,4,5,6,7,8,9]
  b; // ["foo","bar","baz","bam","bun","fun"]
  
  c; //[1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun
  "]
  
  a=b=null //清空a,b所占用的内存
  

• for...in： 由于a,b的长度不同，你更倾向于将短数组loop,所以你会在循环中使用push后者unshift，循环的方法也有所不同。

  • 优点：解决了内存的问题；

  • 缺点：代码的易读性和可维护性差。

  // `b` onto `a`
  for (var i=0; i < b.length; i++) {
      a.push( b[i] );
  }
  
  a; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]
  b = null;

  
  // `a` into `b`:
  for (var i=a.length-1; i >= 0; i--) {
      b.unshift( a[i] );
  }
  
  b; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]
  
  a = null;
  

• 函数Tricks:

  • reduce,reduceRight：书写不方便

  • Array.prototype.push.apply

  • Array.prototype.unshift.apply

  • a.push( ...b ),b.unshift( ...a )

  后面几种函数方法也会临时性的加倍内存空间，重要的是，这种方法是通过将另一个数组存入函数调用栈中，也就是说，如果数组过多的话，很容易造成栈溢出。

  可以通过slice来避免栈溢出:

  function combineInto(a,b) {
      var len = a.length;
      for (var i=0; i < len; i=i+5000) {
          b.unshift.apply( b, a.slice( i, i+5000 ) );
      }
  }

总结

作者认为，总的来说，concat是比较合适的方法，但是会存在生成新数组而不是修改旧数组的风险。综上比较，这里所提及的相对比较好的方法就是使用reduce,reduceRight。

我的想法是,如果数据不是过大的话是可以使用concat的，只是要记住他会生成新的数组，并且记住把之前的数组清空内存。其他几种方法仍然要考虑数据的大小，正常情况下，感觉使用push回比reduce写法相对简单，注意栈溢出即可。

2. 浏览器渲染

What Every Frontend Developer Should Know About Webpage Rendering

Rendering: repaint, reflow/relayout, restyle

• 浏览器渲染页面的流程：
  

• 位置的变化叫reflow, 不涉及位置的变化叫repaint

• 浏览器渲染优化：repaint,reflow是非常昂贵的，所以浏览器有一个记录改变的队列，将改变都加入到队列中缓存起来，最后再一段时间后或者一定的改变之后才会发生repaint,reflow。但是如果你在这个过程中去请求css相关的值的话，会强制浏览器发生repaint,reflow.

• 代码优化：

  • 将请求的相关属性缓存下来；

  • 对不可见的元素进行操作，做完所有操作后再添加到render tree中。