快速排序，又称划分交换排序。以分治法为策略实现的快速排序算法。

本文主要要谈的是利用javascript实现in-place思想的快速排序

分治法：

在计算机科学中，分治法是建基于多项分支递归的一种很重要的算法范式。字面上的解释是“分而治之”，就是把一个复杂的问题分成两个或更多的相同或相似的子问题，直到最后子问题可以简单的直接求解，原问题的解即子问题的解的合并。（摘自维基百科）

快速排序的思想

数组中指定一个元素作为标尺，比它大的放到该元素后面，比它小的放到该元素前面，如此重复直至全部正序排列。

先看一段代码的执行顺序

1
2
3
4
5
6
7
8
9
10
11
12
13

setTimeout(function () {
  console.log('three');
}, 0);

Promise.resolve().then(function () {
  console.log('two');
});

console.log('one');
// one
// two
// three

从JS执行机制说起

浏览器（或者说JS引擎）执行JS的机制是基于事件循环。
由于JS是单线程，所以同一时间只能执行一个任务，其他任务就得排队，后续任务必须等到前一个任务结束才能开始执行。
为了避免因为某些长时间任务造成的无意义等待，JS引入了异步的概念，用另一个线程来管理异步任务。
同步任务直接在主线程队列中顺序执行，而异步任务会进入另一个任务队列，不会阻塞主线程。等到主线程队列空了（执行完了）的时候，就会去异步队列查询是否有可执行的异步任务了（异步任务通常进入异步队列之后还要等一些条件才能执行，如ajax请求、文件读写），如果某个异步任务可以执行了便加入主线程队列，以此循环。

纸上得来终觉浅，绝知此事要躬行

写在前面

竟然实习都快一个月了，算起来一周四天，也就工作十多天，第一个小程序也基本成型，先上一段感觉自己是傻逼的代码：

1
2
3
4
5

var achor=[2,4] ,len2=achor.length,arr=[1,2,3,4,4,5,5,5] ,len=arr.length, j=0;
for(var i = j; i < len; i++){
                if(i==achor[j]){ arr[i]="洞主";j++}
                else{ arr[i]=i+1-j+"L";}   ;  console.log(arr[i])          
};console.log(arr)//[ '1L', '2L', '洞主', '3L', '洞主', '4L', '5L', '6L' ]

一周有感！

  经历了杭城最剧烈的降温，也忍受了感觉最漫长的口腔溃疡，错过了杭研院做RN的实习，鬼使神差的来到创业公司开发小程序，去学习最匮乏基础知识的时间也变得很少，也不能去刷题，感觉冥冥之中自有定数。
  旁边坐的是位树莓的本科学妹，每天最早来最晚归让我自愧不如，写代码的妹子让人肃然起敬。
  还有中文，金融，设计等等各个专业的妹子，让浸淫理工科多年的已不知风情为何物的，经受春风般的洗涤！
  虽然公司的命运和我这个为了学习技术的搬砖工并不无大关系，也不知道自己能呆多久，还是祝愿这么个小而全的公司，安然度过这个资本寒冬，涅槃重生！
  最后:这一周技术的那点事！还是那句话纸上得来终觉浅，绝知此事要躬行，看书都能看懂。写起来真是错误才出，还是佩服身边的树莓妹子，还要吐槽下微信的ide,简直低效的代名词。

每1s向[1,2,3,4,5]前面添加一个不重复的随机数，数组长度达到10结束

1
2
3
4
5
6
7
8
9
10

var aa = [1,2,3,4,5];
   var timer = setInterval(function () {
       var random = Math.random()*100+1|0;//快速取整
       while (aa.indexOf(random)>-1){
           random = Math.random()*100+1|0;
       }
       aa.unshift(random);
       if(aa.length==10)clearInterval(timer);
       console.log(aa);
   },1000);

位运算快速取整

1
2
3
4
5
6
7
8
9
10
11
12

console.time('计时器')
		parseInt(12222.22222);
console.timeEnd('计时器');
console.time('计时器')
		12222.22222|0;
console.timeEnd('计时器');
	console.time('计时器')
		~~12222.22222;
console.timeEnd('计时器');
//计时器: 0.021ms
//计时器: 0.019ms
//计时器: 0.00781ms

相关概念：绘制频率、屏幕刷新频率、硬件加速、60fps

绘制频率：

页面上每一帧变化都是系统绘制出来的(GPU或者CPU)【参考浏览器渲染原理】。但这种绘制又和PC游戏的绘制不同，它的最高绘制频率受限于显示器的刷新频率(而非显卡)，所以大多数情况下最高的绘制频率只能是每秒60帧(frame per second，以下用fps简称)，对应于显示器的60Hz。60fps是一个最理想的状态，在日常对页面性能的测试中，60fps也是一个重要的指标，the closer the better。

刷新频率：

图像在屏幕上更新的速度，也即屏幕上的图像每秒钟出现的次数，它的单位是赫兹（Hz）。刷新频率越高，屏幕上图像闪烁感就越小，稳定性也就越高，换言之对视力的保护也越好。一般人的眼睛、不容易察觉75Hz以上刷新频率带来的闪烁感，因此最好能将您显示卡刷新频率调到75Hz以上。要注意的是，并不是所有的显示卡都能够在最大分辨率下达到70Hz以上的刷新频率（这个性能取决于显示卡上RAMDAC的速度），而且显示器也可能因为带宽不够而不能达到要求。影响刷新率最主要的还是显示器的带宽。

显示器带宽是显示器视频放大器通频带宽度的简称，指电子枪每秒钟在屏幕上扫过的最大总像素数，以MHz(兆赫兹)为单位。 带宽的值越大，显示器性能越好。

硬件加速 ##：

硬件有三个处理器，CPU、GPU和APU（不是加速处理器是声音处理器）。他们通过PCI/AGP/PCIE总线交换数据。今天，GPU已经不再局限于3D图形处理了，GPU通用计算技术发展已经引起业界不少的关注，事实也证明在浮点运算、并行计算等部分计算方面，GPU可以提供数十倍乃至于上百倍于CPU的性能。

写在前面的话

阅读本文之前，先看下面这个webpack的配置文件，如果每一项你都懂，那本文能带给你的收获也许就比较有限，你可以快速浏览或直接跳过；如果你和十天前的我一样，对很多选项存在着疑惑，那花一段时间慢慢阅读本文，你的疑惑一定一个一个都会消失；如果你以前没怎么接触过Webpack，而你又你对webpack感兴趣，那么动手跟着本文中那个贯穿始终的例子写一次，写完以后你会发现你已明明白白的走进了Webpack的大门。

早就耳闻《javaScript语言精粹》写的很经典，一定要反复读，自觉前端已初窥门径，而且这段时间又接触算法和ES6，看完之后的确很棒，原来理解不深的地方恍然大悟，对这门语言的优雅和糟粕也更加了然于心；这里把里面一些代码略作摘抄，也算是再加咀嚼代码是敲出来的

fade-background

1
2
3
4
5
6
7
8
9
10
11
12

var fade =(node)=>{
var level=1;
var step=()=>{
    var hex =level.toString(16);
    node.style.backgroundColor="#FFFF"+hex+hex;
    if(level<15){
       level+=1;
       setTimeout(step,100);
    }
 };setTimeout(step,100);
}
fade(document.body);

rem这是个低调的css单位，近一两年开始崭露头角，有许多同学对rem的评价不一，有的在尝试使用，有的在使用过程中遇到坑就弃用了。但是我对rem综合评价是用来做web app它绝对是最合适的人选之一。

rem是什么？

  rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

纸上得来终觉浅，绝知此事要躬行

  回顾下暑假到现在看的js书目：《Javascript DOM编程艺术》《javascript高级程序设计》《锋利的Jquery》《javascript语言精粹》《github入门指南》；现在新买了《高性能javascript》《ES6标准入门》《javascript权威指南》；学习到现在时间不长，回想啃高级程序设计时很多似懂非懂，经过亲手做些东西，经常翻些技术博客，再回头看书有种恍然大悟的感觉，绝知此事要躬行。

  这几天看了吴军先生的《浪潮之巅》和《数学之美》，不免内心波澜起梦想，梦想归梦想，become优秀前端er才是眼前要紧事！