标题可能起的有点大，这次是实践是对目前在做的项目的一次性能调优，但是也没有尝试所有方式。

起因是我们的网站被客户吐槽慢。。。

然后开始了性能调优。

gzip实践

服务器端的优化是首先想到的方法，因为这个优化的力度是前端code层面优化比不了的。项目是Angular6的，打包之后用–stats-json和webpack-bundle-analyzer可以看到目前打包之后各个js的大小以及gzip压缩之后的大小，gzip压一压，最少能小一半，有些能压到十分之一。
gzip的原理是在服务器进行配置，对制定类型的文件采用gzip压缩，客户端在获得传输的数据之后再进行解压。通过这个方式可以减少文件传输的时间，但是会增加压缩和解压的时间，所以对于一些很小的文件是不建议启用gzip的（服务器配置的时候也可以设置文件大小）。
配置大概是

LoadModule deflate_module modules/mod_deflate.soAddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript

在httpd.conf开启mod_deflate，然后选一下文件类型。

本地build了一个docker测试 => 快得一批！

部署到服务器打开网站 => 没得卵用！又改了几次配置，部署到服务器上都是一样。

开始怀疑gzip，开始怀疑服务器，开始怀疑自己。

• 问题：本地测试gzip生效，但服务器上相同配置gzip后不生效。
• 思路：服务器的机器和本地机器肯定有不同，但是两边最终都是build出来docker image，image内的环境配置和安装的软件都是一样的，搜了“gzip不生效”找到的基本是怎么配置gzip -> 两边不同的还有协议，服务器端proxy设置了强制ssl，所有访问都是https本地是http://localhost，搜“gzip https 不生效”找到答案：因为有BREACH（大致是ssl会对文件加密，以保护文件内容不被他人获取和篡改）但是如果引入gzip，hackers可以通过victim的机器发送大量明文请求和压缩算法(gzip 压缩在 HTTP 中的工作方式是这样：如果在响应中有同一个字符串的多个实例，第一个实例将被保留，而其余实例将被替换成指向第一个实例位置的短引用，以减少响应消息的体积)来破解文件内容。=> SSL和gzip不能同时使用（搜索时候找到了一个关于apache的SSLCompression的配置，进行了尝试，无果）

Brotli实践

• 问题：SSL和gzip不能同时使用，对于我们现有site SSL不能disable => 无法实现服务器端优化？
• 思路：(看看别人是怎么做的）-> bootstrap，load很快，它也是https，接着看了network，文件被压缩过->继续看response头-> 发现：content-encoding: br->搜索“content-encoding br”->找到Brotli是一种类似gzip的压缩算法，接下来就是在server上进行Brotli的配置。

1. 首先要在httpd.conf配置当中打开mod_brotli，这一步有点类似于gzip打开mod_deflate，然后配置需要压缩的文件类型，配置大概长这样：

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

   # Load brotli module LoadModule brotli_module modules/mod_brotli.so <IfModule brotli_module> # Output filter AddOutputFilterByType BROTLI text/plain text/css text/xml text/javascript application/javascript # SetOutputFilter BROTLI # SetEnvIfNoCase Request_URI \.txt$ no-br # Compression ## BrotliCompressionLevel: 0-11 (default: 11) BrotliCompressionLevel 10 ## BrotliWindowSize: 10-24 (default: 22) BrotliWindowSize 22 # Specifies how to change the ETag header when the response is compressed ## BrotliAlterEtag: AddSuffix, NoChange, Remove (default: AddSuffix) BrotliAlterEtag AddSuffix # Filter note BrotliFilterNote Input brotli_in BrotliFilterNote Output brotli_out BrotliFilterNote Ratio brotli_ratio LogFormat '"%r" %{brotli_out}n/%{brotli_in}n (%{brotli_ratio}n)' brotli CustomLog logs/access_log brotli </IfModule>

try -> not work -> docker exec -it container /bin/bash 检查了一下/usr/local/apache2/module里面没有这个mod -> 所以首先要先build出来这个mod

1. 修改Dockerfile内的build脚本

   1 2	RUN git clone --depth=1 --recursive https://github.com/kjdev/apache-mod-brotli.git RUN cd ./apache-mod-brotli && sh ./autogen.sh && ./configure && make && install -p -m 755 -D .libs/mod_brotli.so /usr/local/apache2/modules/mod_brotli.so

主要是这两句命令，大概就是clone了brotli的代码然后build出来需要的mod。
中间碰到一个坑，apt-get install的时候需要修改source.list，否则jessie-backports会出错。因为不太懂这个配置文件，中间查了很多关于”Failed to fetch jessie backports repository”这个错的文章，照着改了n多次。最后试下来加了这几句：

1
2
3
4

RUN sed -i '/deb http:\/\/deb.debian.org\/debian jessie-updates main/d' /etc/apt/sources.list
RUN echo 'deb http://archive.debian.org/debian jessie-backports main' > /etc/apt/sources.list.d/backports.list
RUN echo 'deb-src http://archive.debian.org/debian jessie-backports main' > /etc/apt/sources.list.d/backports.list
RUN apt-get -o Acquire::Check-Valid-Until=false update

3. 安装必须软件
   这步就比较简单，build时候如果报错了把需要的软件装一下。

   1 2 3 4 5 6 7

   RUN ["apt-get", "install", "-y", "git"] RUN ["apt-get", "install", "-y", "make"] RUN ["apt-get", "install", "-y", "autotools-dev"] RUN ["apt-get", "install", "-y", "automake"] RUN ["apt-get", "install", "-y", "libtool"] RUN ["apt-get", "install", "-y", "apache2-dev"]

到这里Brotli这个module就配置好了。实测网站首页load时间缩短了一半以上。

终于二刷。

墨西哥，亡灵节，梦想，家人。故事远不止寻梦，但是中文的名字加上海报里的吉他很容易让人误解这是一个动画版的好声音故事。

米格，男主，蠢萌属性，歌神后代，鞋匠世家。故事基本都是围绕他展开，家庭内主要的矛盾也是在他身上爆发出来——米格喜欢唱歌，且唱的很好听（毕竟如果唱得难听故事也推不动，不过他家基因确实强，祖上好几代都禁止唱歌，到他这儿歌神基因还屹立不倒 :) <- 来自音痴礼貌的围笑），但家里不让唱：大致的原因是，他的曾曾曾（几个曾来着）爷爷为了音乐出去唱巡回了，一直没有回来，于是曾曾曾祖母一个人把家庭撑了起来，而且发扬了鞋匠的技艺，逐渐米格家变成了世代制鞋的家族，而且由于这件事情曾曾曾祖母禁止家里有音乐出现，并把那个负心汉的照片丢掉，从家里除名了。于是米格的音乐梦想一直在地下进行，偷偷用吉他跟着他崇拜的歌神学。一直到亡灵节这一天他发现歌神是自己的那个曾曾曾祖父，于是他拿着吉他和家人说出了自己的梦想。

然并卵，吉他被砸了，小哭宝离家出走了。

之后米格偷取歌神的吉他要去参加比赛，却阴差阳错地来到了亡灵之地。他看到了无数亡灵，其中包括自己的家人。米格需要得到家人的祝福才能回到自己的世界，但是家人可以在祝福里加上任何条件。在他的曾曾曾祖母加上了不许米格碰音乐的条件之后，米格决定去找自己的曾曾曾爷爷——歌神（他以为的曾曾曾爷爷）。最后他发现歌神不是自己的曾曾曾爷爷，而是谋杀了曾曾曾爷爷并盗用他的词曲而成名的小人，而米格的曾曾曾爷爷是一直想通过万寿菊桥去看望女儿coco的诶里克，但因为家里没有供奉他的照片他无法通过，<-这段讲出来有点乱，反正就是小米格认贼作父然后幡然悔悟了。

为了梦想，我可以放弃一切。

因为你不曾失去。

第一次看的时候觉得米格为了自己的梦想一往无前很感人，但是这次居然开始觉得他有点熊，发生这个想法的点是在他怒吼自己曾曾曾祖母的时候：“我有自己的梦想，你这是在害我，你们从来不懂！”然后再一次逃离了自己的家人。仔细想想，能够以梦想的名义放弃一切的人往往没有失去过什么，他们没有经历食不果腹，没有操心什么柴米油盐，所以才能振振有词，大言不惭。后来听到了米格曾曾曾祖母唱歌更觉得心酸。是啊，梦想，热爱，我怎么会不懂。我也曾为歌唱忘食废寝，我知道月亮曾经代表谁的心，我也唱过四季和愁绪。可是终于有一天，睡意来袭，而我饥肠辘辘，我终于看见现实把跨不过的山海放在我面前，我终于妥协，和解，平静。其实，说得出“我可以为梦想放弃一切”的人到底是幸福的，至少你有一些什么可以放弃。

你可以不原谅他，但你不能忘了他。

这句话是米格对曾曾曾祖母说的，劝说她帮助诶里克去抢回照片。一直以为爱的反面是恨，其实不是，爱的反面是遗忘。死去的人只能凭借我们的记忆再存在于这个世界这个设定真的很感人，听到只要coco忘记诶里克他就会从冥界消失也让人很难过，他在这一天假扮了无数人，讨好了无数人，为了去见自己的女儿一面，最后他们又注定见不上彼此一面。一个人真正从这个世界消失，是世界上没有一个人再记得他的故事，没有一个角落能听到他的传说。他死了，就像没有存在过。所以我们才有这么多关于死亡、鬼魂、重生的故事，所以我们才有这么多祭奠、祈求的习俗。曾经有人说，清明节的习俗其实是告诉活着的人在以后也要这么去凭吊自己的亲人。这话是有道理的，我们都不希望自己不留痕迹地离去，所以用力地活着，用力地去留下自己存在过的证据。

我们把祝福送给你。

没有任何条件。

这段是米格的曾曾曾祖父和曾曾曾祖母一起对他说的。他们在看到将要日出的时候，唯一的想法就是把米格安全送回去。曾曾曾祖母不再纠结于对米格音乐梦想的限制，诶里克甚至也放弃了找回照片去看望coco的愿望。看吧，他们到底还是爱你的。最终他们也能接受你的面貌，忘记你的罪恶，忘记社会的公序良俗，忘记自己一生的愿望。他们希望你幸福，希望你快乐。只是有时候，他们会告诉你一些方法，会给你指一条路。如果这和你心里所盼望的不一样，你不要抱怨和责怪。他们只是希望你走得顺利一些，平稳一些。

var longestPalindrome = function(s) {    var max = 0;    var start = 0;    for(var i = 0; i < s.length; ++i) {        for(var j = i; j < s.length; ++j) {            if(isPalindrome(s, i, j))  {                if((j-i+1) >= max){                    max = (j-i+1);                    start = i;                }            }        }    }    return s.substr(start, max);};var isPalindrome = function(s, start, end) {    for(var i = start; i < end; ++i) {        if(s[i] != s[end-i+start]){            return false;        }    }    return true;};

枚举所有子字符串n²，因为不是子序列问题，所以不是n!。

2.0 n²

var longestPalindrome = function(s) {    var maxl = 0;    var start = -1;    for(var i = 0; i < s.length; ++i) {        var j = 0;        for(; (i-j>=0) && (i+j < s.length); ++j) {            if(s[i-j] != s[i+j]){                break;            }        }        j -= 1;        if(maxl < 2*j+1) {            maxl = 2*j+1;            start = i-j;        }        var k = 0;        for(; i-k >= 0 && i+k+1 < s.length; ++k) {            if(s[i-k] != s[i+k+1]){                break;            }        }        k -= 1;        if(maxl < 2*k+2) {            maxl = 2*k+2;            start = i-k;        }    }    return s.substr(start, maxl);};

遍历一次所有元素，以它为中心向左右扫描找到当前数字为中心的最长字符串。需要考虑字符串为奇数或偶数的情况。

实现函数 makeClosures，调用之后满足如下条件：

1、返回一个函数数组 result，长度与 arr 相同

2、运行 result 中第 i 个函数，即 resulti，结果与 fn(arr[i]) 相同

输入例子:

  var arr = [1, 2, 3];  var square = function (x) {      return x * x;  };  var funcs = makeClosures(arr, square);  funcs[1]();

输出例子:
4

answer:

function makeClosures(arr, fn) {     var funs = [];     for(var i = 0; i < arr.length; ++i) {        (function(num){            var temp = function() {                return fn(num);            }            funs.push(temp);        })(arr[i]);    }    return funs;}

why use anonymous function here?

curry,
toString
parseInt
for in loop

“你一直都在这里啊？”

问完这句我便醒了，屋里还没有光线透进来，应该不到六点。心里想着再睡会，脑子里翻腾的都是刚才的梦。

昨天室友谈起了她最近看的一个灵异类的综艺节目，大家就聊了一下各地的一些习俗和自己觉得奇怪的事情。有些地方亲人死了不能哭，你舍不得他/她就不能往生了。如果你梦到亲人和你说最近过得不好，那你要烧一点东西过去。还有七月半是鬼节，家里会接亡人回来，鬼门关再送他们回去。

我不是彻底的有神或者无神论者，但是抱着惯有的怀疑态度，我不太相信室友说的那个节目里面看到的事情。我总觉得里面每一个桥段只要节目组和参与者串通好，完全可以拍出来，甚至这可能根本就是节目组请来一堆演员拍的节目。室友又告诉我，里面的那些灵媒是很有名的灵媒，都是在当地有真人真事佐证的。

关于灵媒，我记得我看过一篇文章，讲的是一个年轻的灵媒师，如何帮那些想念亡者的生者。大概是他自己是一个媒介，可以让亡者借由他回来，于是生和死就暂时相互妥协。后来这个灵媒被打了，因为他为一个黑帮招回来的人不是那个人。最后，他说，其实自己并没有作媒介的能力，只不过每次从亡者的资料和社交网站查到一些这个人生前的事情，然后用这一星半点的了解和现场那些亲人、朋友的反应来糊弄。偶尔碰到不好糊弄的就容易穿帮。所以，其实又是一场攻心。文末我记得是一句诗，“可怜夜半虚前席，不问苍生问鬼神。”

可能你们真的不存在吧，只是我思念成疾。是我的意识编织了我的梦，我的怀念造成了你的存在，其实是我而不是你。是我的那一点不甘心，不甘心这样的结局，不甘心那些没有弥补的过错，不甘心我再也想不起来最后和你说的话是什么。所以我夜不能寐，我梦到你，我感受到你。我说了这日日夜夜堵在我心里的话，我做了来不及做的事，我看见我想看见的。然后，我心满意足。于是，我深信不疑——你，回来看我了。

可能你们真的存在，就在我身后，我手边。注视着我，还深爱着我。我解释不清逻辑，说不出为什么你们还在而没有离去。但可能现在你正握着我的手，也不怕我。虽然在你眼中也不知道我是怎样的存在。

“如果我死了之后，你在街上看到我，你会吓得跑开还是紧紧抱住我？”

“嗯，主要看脸。” : )

插排和冒泡平均时间复杂度o(n^2)，最优o(n)，前两种稳定。选择都是n^2不稳定。

提一下冒泡，一直以为它最坏最好都是n^2复杂度，不过写的时候发现每次冒泡可以检查本次是否交换过元素，如果没有直接退出，最优情况排好序的数组，一趟遍历退出。

通常小数据量选择和插排比较快。基本排好序，小数据量用插排.

1. 直接插入

function insertSort(arr) {    console.time("insert sort: ");    for (var i = 0; i < arr.length; i++) {      var j = i;      var value = arr[i];      while(j>0 && value < arr[j-1]) {        arr[j] = arr[j-1];        j--;      }      arr[j] = value;    }    console.timeEnd("insert sort: ");    return arr;  }

2. 冒泡

function bubbleSort(arr) {    console.time("bubble sort: ");    for(var i = 0; i < arr.length; ++i){  //n次遍历      var change = false;      for(var j = arr.length-1; j > i; --j) { //从最后冒泡至i，一次冒泡i最小        if(arr[j] < arr[j-1]) {          var temp = arr[j-1]          arr[j-1] = arr[j];          arr[j] = temp;          change = true;        }      }      if(!change) {        console.timeEnd("bubble sort: "); //0.074        return arr;      }    }    console.timeEnd("bubble sort: "); //0.095    return arr;  }

3. 选择

function selectSort(arr) {    console.time("select sort: ");    for(var i = 0; i < arr.length-1; ++i) {      var min = i;      for(var j = i; j < arr.length; ++j) {        if(arr[j] < arr[min]) {          min = j;        }      }      var temp = arr[min];      arr[min] = arr[i];      arr[i] = temp;    }    console.timeEnd("select sort: ");    return arr;  }

4. 快排

然后是快排，平均o(nlogn)，最差o(n^2)在原数据正序或逆序时。快排复杂度能到nlogn主要是每次选取pivot可以把元素划分为两段更小元素处理从而实现divide-conquer的目的，但是如果数据正序或逆序，每次划分后子问题规模是n-1就退化成了n^2复杂度。不稳定。

function qS(arr) {    var partition = function(a, l, h) {      var p = l;      l++;      while(l<h) {        while(l<h && a[h] > a[p]) {          h--;        }        while(l<h && a[l] <= a[p]) {          l++;        }        if(l < h) {          var temp = a[l];          a[l] = a[h];          a[h] = temp;          // h--;          // l++; //交换之后继续从当前位置扫        }      }      // console.log(h);      // console.log(l);      var temp = a[p];      a[p] = a[h];      a[h] = temp;      // console.log(a);      return h;    }    var sort = function(a, l, h) {      if(l<h) {        var pivot = partition(a, l, h);        // console.log(pivot);        sort(a, l, pivot-1);        sort(a, pivot+1, h);      }    }    return {sa:arr, sort:sort}  }

5. 堆排序

利用大顶堆或小顶堆性质排序，复杂度最优平均都是o(nlogn)，不稳定。核心是构建大顶堆，和每次取元素之后对堆的maxheapify——递归的方法调整堆，使得其满足根大于子节点的特性，注意停止条件。

[codesyntax lang=”php”]

function heapSort(arr) {    function maxHeapify(arr, index, size) {      var max = index;      var left = 2*index+1;      var right = 2*index+2      if(left < size && arr[left] > arr[max]) {        max = left;      }      if(right < size && arr[right] > arr[max]) {        max = right;      }      if(index != max){        swap(arr, index, max);        maxHeapify(arr, max, size);      }    }    function buildHeap(arr) {      for(var i = Math.floor((arr.length-1)/2); i >= 0; --i) {        maxHeapify(arr, i, arr.length);      }    }    function sort(arr) {      buildHeap(arr);      for(var i = 0; i < arr.length; ++i) {        swap(arr, 0, arr.length-i-1);        //console.log(arr);        maxHeapify(arr, 0, arr.length-i-1);      }      return arr;    }    function swap(arr, a, b) {      var temp = arr[a];      arr[a] = arr[b];      arr[b] = temp;    }    return{arr:arr, sort:sort};  }

6. 希尔排序

基于插排的改进，通过调整步长减少元素移动的次数（插排中相当于每次只能移动1位，如果调整2341中1的位置就需要比较3次移动3次）o(nlogn)

function shellSort(arr) {    var gap = 1;    while(gap < arr.length) {      gap = gap*3 + 1;    }    for(; gap > 0; gap=Math.floor(gap/3)) {      for(var j = gap; j < arr.length; ++j) {        var value = arr[j]        while(j>=0 && arr[j-gap] > value) {          arr[j] = arr[j-gap];          j = j-gap;        }        arr[j] = value;        var value = arr[j];      }    }    return arr;  }

7. 归并排序

典型分治思想，复杂度o(nlogn)，递归，空间需求大。（外排）

function mergeSort(arr) {    if(arr.length == 1) {      return arr;    }else {      var m = Math.floor(arr.length/2);      return merge(mergeSort(arr.slice(0,m)), mergeSort(arr.slice(m,arr.lenth)));    }  }  function merge(arr1, arr2) {    var i = 0;    var j = 0;    var result = [];    while(i + j < arr1.length + arr2.length) {      if(arr1[i] <= arr2[j] || j == arr2.length) {        result[i+j] = arr1[i];        i++;      }else if(i < arr1.length || i == arr1.length){        result[i+j] = arr2[j];        j++;      }    }    return result;  }

解决的问题大概是查找一个字符串A是否包含字符串B。暴力o(mn)，即每次不匹配字符串A，B相对位置移动1位。KMP相当于在这个基础上优化，每次不止移动一位，next数组解决的就是每次移动多少相对位置的问题。

最简单的一种情况是，字符串B中没有重复，如abc，则每次不匹配之后可以直接把字符串B的首字符移动至字符串不匹配位置处继续比较，如图（-v- 灵魂画手）

这个比较好理解因为没有重复字符，比较到一个不同就直接从字符串B的首字符重新比较。

吊诡的是，如果字符串B里面有重复就不能直接移动到首位比较，然后问题就是应该移动到哪里。KMP的解决方案是维护一个next数组。以后解释，先直接贴代码

function getNext(str) {    var len = str.length;    var k = -1;    var j = 0;    var next = [-1];    while(j < len) {      if(k==-1 || str[j] == str[k]) {        k++;        j++;        next[j] = k;      }else {        k = next[k];    //from k to next[k] no need to compare      }    }    console.log(next);    return next;  }

function KMP(m, n) {    console.time("KMP:");    var i = 0;    var j = 0;    var next = getNext(n);    while(i < m.length && j < n.length) {      if(j==-1 || m[i] == n[j]) {        i++;        j++;      } else {        j = next[j];      }    }    if(j == n.length) {      console.timeEnd("KMP:");      return (i-j);    }    console.timeEnd("KMP:");    return "not found";  }

数组里存的是每次字符串A，B不匹配时候应该把字符串B移到什么位置，利用这个数组KMP的实现如下：

demo：https://arron-lai.github.io/algorithm/kmp

JS object以key－value方式保存，操作按地址操作，所以赋值后newObj和obj其实指向相同地址。

2. ajax事件：ajaxStart、ajaxStop、ajaxSuccess、ajaxError、ajaxComplete、ajaxSend

3.

Promise构造器的prototype上还有两个方法，分别是then和catch。这两个方法的参数也是回调函数，这些函数会在Promise实例进入不同状态后被调用。Then对应到resolve，catch对应到reject
错误，promise构造器的方法是resolve和reject。

2. 标签变化
1). <!DOCTYPE HTML> - 说明html版本
html4 -> loose/transitional/strict dtd
html5 -> 不需要引入dtd 和原来doctype相同，why？
2） dtd -> doc type definition(xml) 定义一系列合法元素的结构（W3C） 但html5 不是基于此定义。

3. 新增标签
-结构 ——相当于div 但是增加了语义
1）article 定义了一篇文章
2）header 一个页面或一个区域的头部
3）nav 导航链接
4）section 定义一个区域（类似div）
5）aside 定义页面部分的侧栏
6）hgroup 标题组 h1，h2
7）figure 一组多媒体内容及其标题
8）figcaption figure元素标题
9）footer 一个页面或一个区域底部
10）dialog 定义一个对话框
补充：header/section/aside/article/footer 一般不要嵌套使用 header/section/footer > aside/article/figure/hgroup/nav > div

-多媒体标签：
1) video
2) audio
3) source
—example: <audio src=”sample.mp3” autoplay=”autoplay” loop=”-1” controls=”controls”>browser not support meida</audio>
<video src=”sample.mp4” autoplay=”autoplay” loop=”-1” controls=”controls”></video>
—-source -> 文件格式兼容性问题
<audio autoplay=”autoplay”>
     <source src=”sample.mp3” type=”audio/mpeg”>
</audio>      type->转码器
<video controls=”controls” width=”” height””>
    <source src=”sample.mp4” type=”video/mp4”>
</video>
4) canvas
5) embed -flash <embed src=”sample.swf”></embed>
 
-状态标签
1) meter 气压/温度/电压等 (chrome, opera)
<meter value=”” min=”” max=”” low=”” high=”” optimum=””></meter> 会根据各值的区间显示当前状态，若只有value将按百分比计算
2) progress (chrome ff opera)
<progress value=”” max=””> 根据value和max的值计算其加载进度
<progress max=””> 加载中动画
-列表标签
1) datalist
<input placeholder=”” list=””>
<datalist id=”plist”>
     <option value=””>
     </option>
     <option value=””>
     </option>
</datalist></input>
2) details
<details open=”open”><summary></summary><p></p></details>
-menu标签 主流浏览器支持不好

-其他标签
1) ruby，rt，rp -注释（音标）rp针对不兼容rt的浏览器的fallback
<ruby><rp></rp><rt>content</rt><rp></rp></ruby>
2) mark
3) output 对应表单input用于打印结果，配合form oninput事件

4.删除的标签
1) basefont, big, center, font, s, strike, tt, u (偏向styling的标签）
2）frame, frameset, noframes（对可用性造成负面影响）
3) acronym, applet isindex, dir（混淆元素）

5. 重定义标签
1) b, i -没有重要的意义
2) dd, dt -原本是dl下的标签，现在可以和details, figure一起使用
3) hr -水平线并表示主题结束
4) small 小字体并表示批注
5) strong 重要性

2. a++ ++a

3. 数组可以指定长度，如new Array(12);但实际还是变长的，可以储存长度之外个数组。

    .length

    二维数组：相当于一维数组的元素是数组

4. switch

switch() {

    case 1:

    break;

    default:

}

注意 break;

5. for, while, do while -  break;  continue;

6. 事件 onclick, onmouseover, onmouseout, onfocus, onselect, onchange, onload, onunload(window close)

7. 对象

1) Date

A. new Date(); new Date(2017,2,15); new Date(“Oct 1 2017”);

B. 方法：getFullYear(); getDay(); getTime(); setTime(); - 注：milliseconds

2) String

A. 方法：toUpperCase(); toLowerCase; charAt(); indexOf(substr, pos); split(char, limit); substring(start, end);  substr(start, length);

3) Math

A. 方法：ceil(); floor(); round(); random(); （注：无参数）

4) Array

A. new Array(); new Array(10); new Array(1,2,3);

B. 方法：concat();（注：不修改数组本身） join();（注：可空，逗号）reverse(); slice(start, end);（注：end可省可负，不改变原数组）sort(function()); （注：－1，1）

8. window对象

1) setInterval(function, interval); 注：interval以milliseconds计算。clearInterval(i);

2) setTimeout(function, time); clearTimeout(i);

9. History 对象

1) 属性：length

2) 方法：go();（注：代表向前或向后多少页） back(); forward();

10. Location

获取与当前地址相关信息

href, window.location.reload(); window.location.assign();

11. Navagator

当前browser相关信息

1) userAgent; -> 用户代理字符串

12. screen (window.screen/screen)

1)属性：width, height, availWidth, availHeight

12. DOM

1) getElementById(); getElementsByName(); getElementsByTagName();

2) getAttribute(); setAttribute(name, value);

3) nodeName, nodeValue, nodeType

4) childNodes, parentNode, firstChild, lastChild, nextSibling, previousSibling

5) appendChild(); insertBefore(,); removeChild(node); replaceChild(new, old);

6) document.createElement(); （注：创建元素节点，参数为tag name）document.createTextNode(); （注：创建的即为普通文本节点）

13. 网页尺寸

1) 窗口宽高：cross browser：document.documentElement.clientWidth || document.body.clientWidth; document.documentElement.clientHeight || document.body.clientHeight;

2) 内容宽高: cross browser: document.documentElement.scrollWidth || document.body.scrollWidth; document.documentElement.scrollHeight || document.body.scrollHeight; 注：IE，Opera返回值可比clientHeight/clientWidth小，FF返回最小值等于窗口宽高。

3) 网页宽高：offsetHeight/offsetWidth = clientHeight/clientWidth + 滚动条 ＋ 边框

4) 滚动距离: scrollTop; scrollLeft; offsetTop; offsetLeft; （注：offset相对于该元素的父元素）

<script type=”text/javascript”> //code </script>

<script src=””></script>

2. 变量命名：字母、下划线、美元符号开头，由任意数字、字母、下划线、美元符号组成。区分大小写。

3. io

document.write()用于向html流输出，可输出变量

alert()确认框打印，类似document.write，点击确定前不进行任何操作

confirm()获取用户输入，true/false

prompt()获取用户输入，null/string

4. window

window.open(string url, string name, string params)  name(‘_blank’, ‘_self’, ‘_top’); params包括window距离屏幕的位置，window大小，menubar、scrollbar是否包括等。

window.close(); - 关闭当前窗口 or [窗口对象].close();

5. DOM

1) Document Object Model将html呈现为节点树结构（包括元素，属性，文本三种节点）eg.<a href=”http”//www.arronlai.com">click me</a>

2) document.getElementById() 返回HTML Object

3) .innerHTML

4) .style.property (display)

5) className

2 基本结构：选择器+声明

3 内联式css，嵌入式css，外部式css（相同权值，就近）

4 选择器

1）标签选择器

2）类选择器（多对多）

3）ID选择器（一对一）

4）子选择器>

5）后代选择器

6）通用选择器*

7）伪类选择符 （选择html中标签的某种状态，如a:hover - 兼容性问题）

5 特性

继承，特殊性（权值：标签1，类10，ID100），重要性

6 字体

1）font-family:”Microsoft Yahei”;

2）font-style, font-weight

3）text-decoration:underline; line-through

4）text-indent

5）line-height

6）letter-spacing, word-spacing

7）text-align

7 块元素 display:block;

1）<div>、<p>、<h1>…<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

2）特性：独占一行；宽度、高度、行高、顶底边距可设；宽度为设置为父元素100%

8 内联元素 display:inline

1）<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

2）特性：和其他内联元素在同行；宽度、高度、顶底边距不可设置；宽度为其包含文字或图片的宽度

9 内联块元素 display:inline-block

1）<img>、<input>

2）特性：和内联/内联块元素同行，宽度、高度、顶底边距可设置

10 盒模型

1）块模型具有盒模型的特点。内外填充（padding，margin，border）

2）border: {border-width border-style border-color} (dashed, dotted, solid)

3）宽度：包括margin，border，padding，和content（内容）宽度

11 布局模型

1）流动模型（默认）：块元素自上而下，每个占一行，未分配情况下宽度100%；内联元素从左到右排布

2）浮动模型：实现块元素同行显示，任何元素都可以加float。

3）层模型：position:{relative,absolute,fixed} （absolute和fixed的相对位置是父元素中具有相对属性即position:relative的元素，找不到则是body）

11 代码简写

1）盒模型：margin，padding，上，右，下，左；上下，左右；上下左右

2）颜色值缩写：#333，#369

3）字体缩写：font-weight, font-style, font-family, font-size, line-height, font-variant 等可合为font（font-size/line-height, font-family 必填）

12 字体大小

1）像素：px css规定90px为1英寸

2）em：以font-size为标准，如font-size:12px; text-indent:2em; 其中1em=12px，如果font-size是em则以父元素font-size为标准（responsive）

3）百分比：仍然以font-size为标准计算

13 水平居中

1）内联：父元素text-align:center;实现

2）定宽块元素：左右margin设为auto（定宽和块两个条件同时满足）

3）不定宽块元素：1. 外部嵌套table，table设置左右margin为auto（table自适应内容宽度，相当于自动变成一个和内容长度相同的定宽块元素）；2. 改为内联元素（display:inline;）后设置父元素text-align:center（不增加无语义标签，但牺牲块元素一些特性）；3. 父元素float:left;position:relative;left:50%;子元素（需要居中的元素）position:relative;left:-50%;

14 垂直居中

1）父元素高度确定的单行文本：设置父元素height和line-height相同

2）父元素高度确定的多行文本/包括图片：1. 加入table（包括td），即引入vertical-align:middle;到父元素，table默认已经带有这一属性，td需要设置高度，否则会自适应；2. 父级块元素添加display:table-cell;vertical-aligh:middle;（兼容性差ie6、ie7不支持）

15 吊诡的float和position:absolute

会导致该元素display变成inline-block，然后可以设置宽度、高度、行高、顶底边距等。

递归次数与每次划分后得到的分区处理顺序无关。

对n个记录的线性表进行快速排序为减少算法递归深度，每次分区后先处理较短部分。

以上是题目中总结的知识点，第一条比较好理解，假设1，2，3，4四个数字，第一次划分得到（1），（2，3，4），先处理1 ，返回，处理（2，3，4）->（2）返回，（3，4）->（3）返回，（4）返回，和先处理大分区是相同的划分过程，（1，2，3，4）->（1），（2，3，4）->（1），（2），（3，4）->（1），（2），（3），（4）再逐一返回。由这个划分大致可以看出大小分区的处理先后顺序并不影响递归的次数。

递归深度可以理解为系统栈保存的深度（题目解析这么说的，摊手）。那同样是上面这个例子，两种处理方式就可以看出栈的深度不同，小分区，处理1时，栈中存一个元素（2，3，4），返回后再处理（2，3，4），同样（3，4）仅占用一个位置，这样栈的深度仅为1。第二种方式，处理（2，3，4）时，1入栈，->2入栈，处理（3，4）->3入栈->处理4，再依次返回，所以在处理4的时候栈的深度可以达到4。

<!DOCTYPE HTML>

<html>

<head></head>

<body></body>

</html>

2 head:

<head>

<title></title>

<meta>

<link>

<style></style>

<script></script>

</head>

3 语义化

1）容易被搜索引擎理解、收录（SEO）

2）屏幕阅读器读出内容

4 标签

1）<p></p>

2) <hx></hx>

3) <em></em> <strong></strong>

4) <span></span> (没有语义，只是作为单独的样式）

5) <q></q> <blockquote></blockquote>

6) <br /> (写法：xhtml1.0，空标签：<hr />, <img />,<input />）

7) &nbsp;

8) <hr />

9) <address></address>

10) <code></code> <pre></pre>

11) <ul><li></li></ul> <ol><li></li></ol>

12) <div></div> 作为一个容器，区分一个逻辑部分

13) <table summary=””>

<caption></caption>

<tbody>

<tr>

<th></th>

</tr>

<tr>

<td>

</td>

</tr>

</tbody>

</table>

（tbody 加载完毕显示全部，summary-语义）

14) <a href=”” title=”” target=”_blank”></a>

15) href=”mailto:yy@gmail.com?cc=&bcc=&subject=&body=”

16) <img src=”” title=”” alt=”” />

17) <form method=”” action=””></form>

19) <input type=”” name=”” />

20) <textarea cols=”” rows=””></textarea>

21) <select><option></option></select>

22) type=”submit” type=”reset”

23) <label for=””></label> （和对应input的id值相同）