前端Tips:

判斷變量是不是數(shù)組：

(注意跨frame實(shí)例化對(duì)象不共享原型)

var a=[];
a.constructor===Array;
a instanceof Array ===true;

關(guān)于instanceof：

用法：(object instanceof constructor)
用來(lái)檢驗(yàn)constructor.prototype是否存在于參數(shù)object的原型鏈上胸哥。
關(guān)于new(var obj=new Xxx())：
1.創(chuàng)建一個(gè)新對(duì)象
2.將這個(gè)新對(duì)象的proto指向構(gòu)造函數(shù)的prototype(即將新創(chuàng)建對(duì)象的隱式原型指向構(gòu)造函數(shù)的顯示原型)针史。
3.將構(gòu)造函數(shù)的this指向這個(gè)新創(chuàng)建的對(duì)象(即將this指向這個(gè)新對(duì)象)豆赏。
4.無(wú)返回值或非對(duì)象返回則返回這個(gè)對(duì)象竞膳，否則返回這個(gè)返回的新對(duì)象文虏。

避免XSS：

(可以理解為一種js注入坑填，既然是注入就需要對(duì)輸入進(jìn)行規(guī)范)
XSS方式：a.注入出現(xiàn)在URL中裆泳，然后又隨服務(wù)器返回到瀏覽器b.這個(gè)注入會(huì)存儲(chǔ)在服務(wù)端戏蔑。
1.避免使用eval蹋凝，new Function方法可接受字符串形式的js代碼。
2.cookie的httpOnly可以阻止js讀取cookie总棵。
3.注意innerHTML,document.write方法鳍寂。
4.對(duì)用戶輸入的數(shù)據(jù)進(jìn)行HTML Entity編碼。

瀏覽器渲染原理

(不同瀏覽器大同小異)：
1.一般以8K單位接受請(qǐng)求的內(nèi)容情龄，并解析其中的HTML構(gòu)建DOM Tree(display:none的元素不會(huì)渲染)迄汛。CSS構(gòu)建CSS Rule Tree。
2.DOM骤视，CSS合并生成Render Tree鞍爱。根據(jù)CSS2標(biāo)準(zhǔn)，tree中每個(gè)節(jié)點(diǎn)都成為box尚胞，具有width硬霍，height，margin笼裳，padding等屬性唯卖。
3.瀏覽器根據(jù)Render Tree可以知道網(wǎng)頁(yè)中的節(jié)點(diǎn)粱玲，各節(jié)點(diǎn)的關(guān)系或樣式或位置。最后通過(guò)顯卡繪制出來(lái)拜轨。

回流(reflow)和重繪(repaint)：

回流：Render Tree中一些元素尺寸布局等發(fā)生改變抽减，頁(yè)面需要重新構(gòu)建，頁(yè)面需要執(zhí)行reflow操作橄碾。
重繪：Render Tree中一些元素外觀一類的屬性發(fā)生改變卵沉，不會(huì)影響布局，這會(huì)觸發(fā)repaint法牲。

減少reflow：

Dom Tree的每個(gè)節(jié)點(diǎn)都有reflow方法史汗，一個(gè)節(jié)點(diǎn)的reflow可能觸發(fā)其他節(jié)點(diǎn)的reflow，reflow不可避免拒垃，難以預(yù)測(cè)停撞。
1.將多次的樣式操作合并到一次操作，可以新建一個(gè)類選擇器悼瓮，將這些樣式添加進(jìn)來(lái)戈毒。
2.display:none不在Tree中，修改屬性不會(huì)觸發(fā)回流横堡，可以先隱藏再操作埋市，再顯示。
3.DocumentFragment緩存操作命贴，這個(gè)還沒(méi)聽(tīng)過(guò)道宅。
4.position設(shè)置為absolute或fixed。這樣改變CSS會(huì)大大減少reflow套么。
5.不要使用table布局培己。
6.避免不必要的復(fù)雜CSS選擇器，尤其是后代選擇器胚泌！

box-sizing：

設(shè)置盒子模型為標(biāo)準(zhǔn)模式或者IE模式。屬性有三個(gè)：
1.content-box：默認(rèn)值肃弟，border和padding不計(jì)算到width玷室。
2.padding-box：padding算入width。
3.border-box：border和padding都會(huì)算入width笤受。
4.另外標(biāo)準(zhǔn)模式下穷缤，背景其實(shí)是包括邊框的，可以使用background-clip來(lái)設(shè)置箩兽。
5.同理background-origin也可以設(shè)置背景圖片的位置津肛。

取消冒泡：

event.cancleBubble=true;這種相當(dāng)于全局取消事件冒泡。

入口函數(shù)：

window.onload=function(){...}和$(document).ready(function(){...})
1.js中需要等待圖片等所有元素加載完畢才會(huì)執(zhí)行汗贫，jq中則是等待DOM結(jié)構(gòu)繪制完成即可執(zhí)行身坐。
2.js這方法只能執(zhí)行一個(gè)秸脱，jq編寫(xiě)多個(gè)入口函數(shù)，多個(gè)都會(huì)執(zhí)行部蛇。
3.如果需要等待所有元素加載完畢則使用$(window).load(function(){...}),這個(gè)相當(dāng)于js中的window.onload摊唇。
4.一些問(wèn)題：jq3版本js入口函數(shù)總是會(huì)先執(zhí)行。jq2版本是正常順序涯鲁，3版本好像在網(wǎng)頁(yè)資源很少的時(shí)候js的入口函數(shù)就會(huì)先執(zhí)行巷查。
5.jq可簡(jiǎn)寫(xiě)為$(function(){...})。

promise：

首先會(huì)執(zhí)行Promise里的方法抹腿，方法里會(huì)有一個(gè)resolve和result岛请，相當(dāng)于兩個(gè)指針，執(zhí)行到一個(gè)就會(huì)觸發(fā)相應(yīng)的then或者是catch警绩，then里是一個(gè)函數(shù)髓需，接受的參數(shù)通過(guò)resolve傳入。

onmouseover:移動(dòng)到子元素也會(huì)繼續(xù)觸發(fā)over房蝉。
onmouseenter:子元素不會(huì)影響僚匆。

require.js

介紹：實(shí)現(xiàn)異步加載，簡(jiǎn)化很多js文件之間的依賴搭幻，加載咧擂，引入的表示方式。

邊框陰影

邊框陰影也可以設(shè)置透明度檀蹋，這樣看起來(lái)會(huì)很美觀松申，而且還會(huì)解決沒(méi)透明度會(huì)出現(xiàn)陰影和背景色一樣的情況。

 box-shadow: -1px 0 2px rgb(000, 000, 000, 0.2),
      0 0 0 rgb(000, 000, 000, 0.2),
      1px 0 2px rgb(000, 000, 000, 0.2), 
      0 2px 4px rgb(000, 000, 000, 0.2);

JS性能的優(yōu)化：

1.避免全局查找俯逾，全局查找需要設(shè)計(jì)作用域鏈上的查找贸桶。
2.避免使用with一句，with會(huì)創(chuàng)建自己的作用域桌肴，會(huì)增加執(zhí)行代碼的作用域鏈的長(zhǎng)度皇筛，with語(yǔ)句中的代碼的執(zhí)行時(shí)間肯定會(huì)比外面的代碼的執(zhí)行時(shí)間長(zhǎng)。

function test(){
  with(document.body){
  alert(tagName);
  innerHtml="Hello";
  }
}
function test(){
  var body=document.body;
  alert(body.tagName);
  body.innerHtml="Hello";
  }
}

3.幾個(gè)算法復(fù)雜度的例子：
O(1):var value=10;arr[1];
O(log n):二分查找坠七，總的執(zhí)行時(shí)間和值得數(shù)量有關(guān)水醋，但并不一定要獲得的每個(gè)值。
O(n):遍歷一個(gè)數(shù)組中的元素彪置。
O(n^2):每個(gè)值至少需要獲取n次拄踪，例如插入排序。
思路：可以將多次使用的一個(gè)復(fù)雜度高點(diǎn)的變量設(shè)為局部變量拳魁。
4.優(yōu)化循環(huán)：
減值迭代：
優(yōu)化循環(huán)體：
簡(jiǎn)化終止條件：因?yàn)槊看窝h(huán)都會(huì)計(jì)算終止條件惶桐，然后和他比較。
使用后測(cè)試循環(huán)（do-while）：

5.展開(kāi)循環(huán)：循環(huán)次數(shù)不多可以展開(kāi)，減少了終止條件的判斷姚糊。
思路：Duff裝置贿衍，將所有循環(huán)按每八個(gè)一起執(zhí)行。

var iterations = Math.floor(values.length/8);
var leftover = values.length&8;//處理多余的幾個(gè)元素
var i=0;
/*用來(lái)處理多出來(lái)的幾個(gè)元素*/
if(leftover>0){
  do{
  process(values[i++]);
  }while(--leftover>0);
}
/*余下數(shù)量為8的倍數(shù)叛拷，不用擔(dān)心下標(biāo)越界*/
do{
  process(values[i++]);
  //...以下省略其余7個(gè)循環(huán)體
}while(--iterations>0);

6.避免雙重解釋:Function(),eval();
7.原生方法快點(diǎn)舌厨，switch語(yǔ)句快點(diǎn)，位運(yùn)算符快點(diǎn)忿薇，var語(yǔ)句可以合并裙椭，迭代可以arr[i++]，只用一條語(yǔ)句創(chuàng)建數(shù)組或?qū)ο蟆?/p>