基本功考察

1.關(guān)于Html

1卢鹦、html語(yǔ)義化標(biāo)簽的理解冀自、結(jié)構(gòu)化的理解；能否寫出簡(jiǎn)潔的html結(jié)構(gòu)驻呐；SEO優(yōu)化。

2即舌、h5中新增的屬性肥惭，如自定義屬性data务豺、類名className等；新增表單元素馆纳；拖拽Drag鲁驶。

3、h5中新增的API脆霎、修改的API睛蛛、廢棄的API稍作了解（離線存儲(chǔ)、audio、video）稳强。

2.關(guān)于CSS

1摹闽、CSS選擇器（三大特性）澜汤。

2、BFC機(jī)制徽诲。

3偷溺、盒模型。

4尉共、CSS模塊化開發(fā)（封裝）；SCSS和LESS的使用杠河。

5、屏幕適配以及頁(yè)面自適應(yīng)待诅。

6、CSS3中新增的選擇器测蹲。

7扣甲、CSS3中新增的屬性，transform示辈、trasition、animation等射富。

3.關(guān)于布局

1、標(biāo)準(zhǔn)文檔流（padding + margin + 負(fù)margin）+ 浮動(dòng)float + 定位 left + right + top + bottom卖漫。

2、百分比布局：px單位用%num代替突委，占父級(jí)元素的百分比。

3、flex彈性布局：主軸弛车、輔助軸的幾個(gè)屬性。

4、grid柵格布局：使用框架中的類名來(lái)替代，本質(zhì)上還是百分比布局泣特。

4.關(guān)于JS基礎(chǔ)

1状您、變量數(shù)據(jù)類型及檢測(cè)：基本 + 引用。

2、運(yùn)算符：算術(shù) + 條件 + 邏輯 + 位 + 短路膏孟、隱式轉(zhuǎn)換等眯分。

3、條件柒桑、循環(huán)弊决、異常處理if飘诗、switch(){case xxx:}、try、catch蹭秋、finally、throw。

4例朱、函數(shù)定義羔挡、調(diào)用方式（apply际跪、call、直接調(diào)用）；傳參：實(shí)參給形參賦值。

5益老、字符串辽狈、數(shù)組、對(duì)象常用API掰邢。

6、正則表達(dá)式合搅。

5.關(guān)于JS高級(jí)

1麻削、作用域、作用域鏈黄鳍、閉包输玷。

2吞加、原型、原型鏈、繼承。

3丈秩、函數(shù)上下文缀雳、this指向。

4、js的運(yùn)行機(jī)制、事件隊(duì)列和循環(huán)骤肛。

5纳本、Ajax原理、axios庫(kù)腋颠。

6繁成、同步、異步編程淑玫。

7朴艰、jQuery源碼學(xué)習(xí)。

6.關(guān)于瀏覽器

1混移、瀏覽器的構(gòu)成和運(yùn)行機(jī)制祠墅。

2、瀏覽器內(nèi)核歌径。

3毁嗦、瀏覽器交互：BOM和DOM相關(guān)webApi、監(jiān)聽事件回铛。

4狗准、瀏覽器緩存機(jī)制。

5茵肃、瀏覽器的渲染原理腔长。

6、瀏覽器的安全性：跨域和攻擊验残。

7.關(guān)于網(wǎng)絡(luò)協(xié)議

1捞附、HTTP協(xié)議。

2、cookie鸟召、session胆绊、token。

8.關(guān)于ES6語(yǔ)法

1欧募、字符串压状、數(shù)組、對(duì)象擴(kuò)展的api跟继。

2种冬、變量擴(kuò)展：let、const解構(gòu)賦值舔糖，塊級(jí)作用域娱两。

3、函數(shù)擴(kuò)展：箭頭函數(shù)默認(rèn)參數(shù)剩盒、rest參數(shù)。

4慨蛙、展開運(yùn)算符辽聊、模板字符串。

5期贫、set和map數(shù)據(jù)結(jié)構(gòu)跟匆。

6、迭代器和生成器函數(shù)next和yield的理解通砍。

7玛臂、proxy對(duì)象屬性代理器：屬性的讀取（get）和設(shè)置（set）相關(guān)操作封孙。

8迹冤、promise對(duì)象、異步編程的解決方案虎忌。

9泡徙、async + await：異步編程的終極方案promise + generator的語(yǔ)法糖。

10膜蠢、class語(yǔ)法堪藐、構(gòu)造函數(shù)的語(yǔ)法糖。

11挑围、模塊化編程export + import的導(dǎo)出和導(dǎo)入礁竞。

9.VUE基礎(chǔ)

1、基本指令杉辙。

2模捂、實(shí)例的屬性和方法。

3、實(shí)例的生命周期枫绅。

4泉孩、組件基礎(chǔ)：創(chuàng)建、注冊(cè)并淋、添加屬性方法寓搬、套用等。

5县耽、組件通信傳值句喷，父子、兄弟兔毙、跨級(jí)唾琼。

6、插槽slot等澎剥。

10.VUE高級(jí)

1锡溯、vue-router：搭建SPA

路由、組件的配置哑姚。
路由間的傳值祭饭。
路由跳轉(zhuǎn)。
路由的導(dǎo)航守衛(wèi)叙量。
記住在router.js和組件頁(yè)面中的使用方式倡蝙。
2、vuex：狀態(tài)管理绞佩、數(shù)據(jù)倉(cāng)庫(kù)store

實(shí)例化倉(cāng)庫(kù)的5大屬性的使用寺鸥。
state、getters品山、mutations胆建、actions、modules肘交。
輔助函數(shù)mapState等眼坏，倉(cāng)庫(kù)中計(jì)算屬性的映射、方便操作酸些。
記住在store.js和組件中使用方式宰译。
11.VUE深入、源碼閱讀

1魄懂、數(shù)據(jù)響應(yīng)式原理啼染。

2韧骗、virtual dom拣宏。

3织阳、diff 算法咳短。

4、nextTick等等蛛淋。

-----------------分割線--------------------

工程能力考察

1.項(xiàng)目能力

1咙好、vue-cli腳手架搭建和功能配置vue.config.js。

2褐荷、webpack的常用配置勾效。

3、項(xiàng)目構(gòu)建打包叛甫。

4层宫、熟悉各類框架的文檔。

5其监、UI框架：Bootstrap萌腿、MUI、Element-ui等抖苦。

6毁菱、常用的插件整理；整理一個(gè)自己插件庫(kù)锌历，封裝自己的方法庫(kù)贮庞、組件庫(kù)。

7辩涝、常用的工具熟練度贸伐。

8勘天、PC端和移動(dòng)端開發(fā)注意事項(xiàng)怔揩。

9、經(jīng)驗(yàn)總結(jié)：快速確定項(xiàng)目的技術(shù)選型脯丝。

10商膊、坑點(diǎn)總結(jié)：項(xiàng)目遇到坑坑坑！

11宠进、項(xiàng)目中的性能優(yōu)化記錄（都是細(xì)節(jié)點(diǎn)晕拆，多記錄）。

12材蹬、需求文檔的理解实幕，可以結(jié)合項(xiàng)目流程圖、UML圖堤器。

13昆庇、問(wèn)題解決能力：bug定位調(diào)試、查找文檔闸溃、尋求他人整吆。

14拱撵、記錄習(xí)慣養(yǎng)成。

2.模塊化表蝙、組件化開發(fā)能力

1拴测、項(xiàng)目分類；各類文件整理府蛇、分類集索。

2、各類功能封裝欲诺。

3抄谐、組件和功能模塊的抽離、解耦扰法、復(fù)用蛹含。

-----------------分割線--------------------

內(nèi)功考察

1.面向?qū)ο蟮木幊趟枷?/h3>

1、類的抽象塞颁。

2浦箱、對(duì)象的封裝、繼承祠锣。

3酷窥、為了更好的去管理數(shù)據(jù)、分類數(shù)據(jù)伴网，實(shí)現(xiàn)高內(nèi)聚蓬推、低耦合。

2.設(shè)計(jì)模式

設(shè)計(jì)模式感覺也是將面向?qū)ο笏枷朐俣瘸橄蟪涩F(xiàn)實(shí)中某些特定模式澡腾。

3.數(shù)據(jù)結(jié)構(gòu)和算法

1沸伏、學(xué)習(xí)常用的排序搜索算法、順序表动分、鏈表毅糟、棧、隊(duì)列澜公、樹姆另、堆等。

2坟乾、考驗(yàn)?zāi)愕某橄笏季S和數(shù)學(xué)功底迹辐。

3、將現(xiàn)實(shí)需求抽象成計(jì)算機(jī)代碼的思維能力甚侣。

-----------------分割線--------------------

附加技能考察

1.學(xué)習(xí)能力

1明吩、持續(xù)學(xué)習(xí)的態(tài)度——博客、筆記記錄渺绒。

2贺喝、技術(shù)論壇活躍度高菱鸥、問(wèn)答多。

3躏鱼、GitHub開源項(xiàng)目參與氮采。

2.了解一門后端語(yǔ)言

1、python染苛、node.js鹊漠、php等。

2茶行、數(shù)據(jù)庫(kù)mysql躯概、redis、mongodb畔师；sql的操作語(yǔ)句娶靡、mongodb的操作語(yǔ)句、redis的操作語(yǔ)句看锉。

3姿锭、node + express搭建本地服務(wù)等。

4伯铣、python + django + request + scrapy呻此。

3.系統(tǒng)編程

1、Linux命令行操作腔寡、系統(tǒng)文件管理焚鲜。

2、多任務(wù)放前、多線程忿磅、多進(jìn)程、協(xié)程犀斋、并發(fā)贝乎、并行情连、串行叽粹、同步、異步等概念的理解却舀。

-----------------分割線--------------------

Vue雙向綁定的原理：

利用Object.defineProperty() 劫持各個(gè)屬性的setter／getter虫几，只要數(shù)據(jù)有變化，就觸發(fā)它的監(jiān)聽

<body>
    <div id="app">
        <input type="text" id="txt">
        <p id="show"></p>
    </div>
</body>
<script type="text/javascript">
        var obj = {}
        Object.defineProperty(obj, 'txt', {
            get: function () {
                return obj
            },
            set: function (newValue) {
                document.getElementById('txt').value = newValue
                document.getElementById('show').innerHTML = newValue
            }
        })
        document.addEventListener('keyup', function (e) {
            obj.txt = e.target.value
        })
</script>

Promise 挽拔？

e.g
function test2(resolve,reject){
    var timeOut = Math.random() * 2;
    console.log('set timeout to:' + timeOut + 'seconds.')
        setTimeout(function(){
            if(timeOut < 1){
                console.log('call resolve()...');
                resolve('200 OK');
            }else{
                console.log('call reject()...');
                reject('timeout in' + timeOut + 'seconds.')
            }
        },timeOut * 1000);
};
test2()  
//輸出call reject()...辆脸，test2()函數(shù)只關(guān)心自身的邏輯，并不關(guān)心具體的resolve()和reject()將如何處理結(jié)果

###  Promise最大的好處是在異步執(zhí)行的流程中螃诅，把執(zhí)行代碼和處理結(jié)果的代碼清晰地分離了：
![promise.png](https://upload-images.jianshu.io/upload_images/7785764-bb52aedfae912853.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

地址欄url敲回車啡氢，會(huì)發(fā)生什么事情状囱？

域名解析 -->

發(fā)起TCP的3次握手 -->

建立TCP連接后發(fā)起http請(qǐng)求 -->

服務(wù)器響應(yīng)http請(qǐng)求，瀏覽器得到html代碼 -->

瀏覽器解析html代碼倘是，并請(qǐng)求html代碼中的資源（如js亭枷、css、圖片等） -->

瀏覽器對(duì)頁(yè)面進(jìn)行渲染呈現(xiàn)給用戶

更多：https://www.cnblogs.com/wupeixuan/p/8747918.html

跨域問(wèn)題如何解決

同源策略：只要協(xié)議搀崭、域名叨粘、端口有任何一個(gè)不同，都被當(dāng)作是不同的域
js跨域是指通過(guò)js在不同的域之間進(jìn)行數(shù)據(jù)傳輸或通信
···

1. 通過(guò)jsonp跨域
   jsonp在頁(yè)面上引入不同域上的js腳本文件實(shí)現(xiàn)請(qǐng)求不同域上的數(shù)據(jù)
   (1) 通過(guò)script標(biāo)簽引入一個(gè)js文件
   (2) js文件載入成功后會(huì)執(zhí)行我們?cè)趗rl參數(shù)中指定的函數(shù)瘤睹，并且會(huì)把我們需要的json數(shù)據(jù)作為參數(shù)傳入
   注：需要服務(wù)器端的頁(yè)面進(jìn)行相應(yīng)的配合
2. 通過(guò)修改document.domain來(lái)跨子域
3. 使用window.name來(lái)進(jìn)行跨域
   window對(duì)象有個(gè)name屬性升敲，該屬性有個(gè)特征：即在一個(gè)窗口(window)的生命周期內(nèi),窗口載入的所有的頁(yè)面都是共享一個(gè)window.name的，每個(gè)頁(yè)面對(duì)window.name都有讀寫的權(quán)限轰传，window.name是持久存在一個(gè)窗口載入過(guò)的所有頁(yè)面中的驴党，并不會(huì)因新頁(yè)面的載入而進(jìn)行重置
   ···

v-if 和 v-show 的區(qū)別？

v-if 在切換時(shí)元素及它的數(shù)據(jù)綁定 / 組件被銷毀并重建获茬。如果元素是 <template> 鼻弧，將提出它的內(nèi)容作為條件塊。

v-show 切換元素的 display CSS 屬性锦茁。

javascript面向?qū)ο螅╫pp）

1攘轩、計(jì)算機(jī)語(yǔ)言分為：面向?qū)ο蟆⒚嫦蜻^(guò)程码俩、面向機(jī)器
2度帮、面向過(guò)程：注重解決一個(gè)問(wèn)題的過(guò)程 步驟（例如c語(yǔ)言）
面向?qū)ο螅鹤⒅啬膫€(gè)對(duì)象解決問(wèn)題，類實(shí)例對(duì)象（例如js稿存、java笨篷、c++）
3、但js與面向?qū)ο骿ava相比瓣履，不能夠?qū)崿F(xiàn)函數(shù)的重載（因?yàn)楹瘮?shù)名是指向函數(shù)地址的指針率翅，重名會(huì)導(dǎo)致改變了函數(shù)的指向）
4、面向?qū)ο蟮娜筇匦裕悍庋b袖迎、繼承冕臭、多態(tài)

js實(shí)現(xiàn)封裝：

function Person(name,age){
    this.name = name;
    var age = age;
}
var p = new Person('韓娜',18)
console.log(p.name,p.age)  //韓娜 undefined

使用原型添加函數(shù)節(jié)省內(nèi)存，但這種方式不能去訪問(wèn)類的私有變量和方法燕锥。

function Person(name,age){
  this.name=name;
  var age=age;
}
Person.prototype.fun = function(){
    console.log(this.name)
    console.log(this.age)
}
var p = new Person('韓娜',18)
p.fun()

js實(shí)現(xiàn)繼承：

(a) 對(duì)象冒充【this.子類變量名 = 父類】

function Stu(name, age){ 
    this.name = name; 
    this.age = age; 
    this.show = function(){ 
      window.alert(this.name + " " + this.age); 
    } 
  } 
  function MidStu(name, age) { 
    this.stu = Stu; 
    // 通過(guò)對(duì)象冒充來(lái)實(shí)現(xiàn)繼承的
    // 對(duì)象冒充的意思就是獲取那個(gè)類的所有成員辜贵，因?yàn)閖s是誰(shuí)調(diào)用那個(gè)成員就是誰(shuí)的，這樣MidStu就有了Stu的成員了
    this.stu(name, age); 
    this.payFee = function(){ 
      window.alert("繳費(fèi)" + money * 0.8); 
    } 
  } 
  function Pupil(name, age) { 
    this.stu = Stu; 
    // 通過(guò)對(duì)象冒充來(lái)實(shí)現(xiàn)繼承的
    this.stu(name, age); 
    this.payFee = function(){ 
      window.alert("繳費(fèi)" + money * 0.5); 
    } 
  } 

  var midStu = new MidStu("zs", 13); 
  midStu.show(); 
  var pupil = new Pupil("ls", 10); 
  pupil.show(); 

(b) 通過(guò)call或者apply實(shí)現(xiàn)（在子類中調(diào)用：【 父類.call( this,參數(shù) ) 】 ）

//1. 把子類中共有的屬性和方法抽取出归形，定義一個(gè)父類Stu 
  function Stu(name,age){ 
    // window.alert("確實(shí)被調(diào)用."); 
    this.name=name; 
    this.age=age; 
    this.show=function(){ 
      window.alert(this.name+"年齡是="+this.age); 
    } 
  } 
  //2.通過(guò)對(duì)象冒充來(lái)繼承父類的屬性的方法 
  function MidStu(name,age){ 
    //這里這樣理解: 通過(guò)call修改了Stu構(gòu)造函數(shù)的this指向, 
    //讓它指向了調(diào)用者本身. 
    Stu.call(this,name,age); 
    //如果用apply實(shí)現(xiàn)托慨，則可以 
    //Stu.apply(this,[name,age]); //說(shuō)明傳入的參數(shù)是 數(shù)組方式 
    //可以寫MidStu自己的方法. 
    this.pay=function(fee){ 
      window.alert("你的學(xué)費(fèi)是"+fee*0.8); 
    } 
  } 
  function Pupil(name,age){ 
    Stu.call(this,name,age);//當(dāng)我們創(chuàng)建Pupil對(duì)象實(shí)例,Stu的構(gòu)造函數(shù)會(huì)被執(zhí)行,當(dāng)執(zhí)行后，我們Pupil對(duì)象就獲取從 Stu封裝的屬性和方法 
    //可以寫Pupil自己的方法. 
    this.pay=function(fee){ 
      window.alert("你的學(xué)費(fèi)是"+fee*0.5); 
    } 
  } 
  //測(cè)試 
  var midstu=new MidStu("zs",15); 
  var pupil=new Pupil("ls",12); 
  midstu.show(); 
  midstu.pay(100); 
  pupil.show(); 
  pupil.pay(100); 

(c) 原型prototype上添加屬性方法實(shí)現(xiàn)【 子類.prototype = new 父類() 】
缺點(diǎn)：繼承父類的引用類型暇榴，實(shí)例中有一個(gè)修改厚棵，會(huì)影響其他實(shí)例

實(shí)例見上述封裝的第二個(gè)例子

js實(shí)現(xiàn)多態(tài)：

// Master類
  function Master(name){ 
    this.nam=name; 
    //方法[給動(dòng)物喂食物]
  } 
  //原型法添加成員函數(shù)
  Master.prototype.feed=function (animal,food){ 
    window.alert("給"+animal.name+" 喂"+ food.name); 
  } 
  function Food(name){ 
    this.name=name; 
  } 
  //魚類
  function Fish(name){ 
    this.food=Food; 
    this.food(name); 
  } 
  //骨頭
  function Bone(name){ 
    this.food=Food; 
    this.food(name); 
  } 
  function Peach(name){ 
    this.food=Food; 
    this.food(name); 
  } 
  //動(dòng)物類
  function Animal(name){ 
    this.name=name; 
  } 
  //貓貓
  function Cat(name){ 
    this.animal=Animal; 
    this.animal(name); 
  } 
  //狗狗
  function Dog(name){ 
    this.animal=Animal; 
    this.animal(name); 
  } 
  //猴子
  function Monkey(name){ 
    this.animal=Animal; 
    this.animal(name); 
  } 
  var cat=new Cat("貓"); 
  var fish=new Fish("魚"); 
  
  var dog=new Dog("狗"); 
  var bone=new Bone("骨頭"); 
  
  var monkey=new Monkey("猴"); 
  var peach=new Peach("桃"); 
  
  //創(chuàng)建一個(gè)主人
  var master=new Master("zs"); 
  master.feed(dog,bone); 
  master.feed(cat,fish); 
  master.feed(monkey,peach); 

ES6內(nèi)容：

let／const／箭頭函數(shù)／迭代器（解構(gòu)蕉世、剩余|擴(kuò)展運(yùn)算符、生成器婆硬、for of循環(huán)）／數(shù)據(jù)結(jié)構(gòu)（Map／Set）

1讨彼、iterator迭代器：

普通對(duì)象默認(rèn)是沒(méi)有iterator接口的（可以自己創(chuàng)建iterator接口讓普通對(duì)象也可以迭代），默認(rèn)具有iterator接口的數(shù)據(jù)結(jié)構(gòu)有以下幾個(gè)：
Array柿祈、 Map哈误、 Set、 String躏嚎、 TypedArray（類數(shù)組）蜜自、 函數(shù)的 arguments 對(duì)象、 NodeList 對(duì)象

image.png

2卢佣、剩余|擴(kuò)展運(yùn)算符：（...）

a）擴(kuò)展

   //demo 1  傳遞數(shù)據(jù)代替多個(gè)字符串的形式
   function  test(a,b,c){
        console.log(a);
        console.log(b);
        console.log(c);
    }

    var arr = [1, 2, 3];
    test(...arr);
   
    //demo2 將一個(gè)數(shù)組插入到另一個(gè)數(shù)據(jù)中
    var arr1 = [1, 2, 3,4];
    var arr2 = [...arr1, 4, 5, 6];
    console.log(arr2);

    //demo3  字符串轉(zhuǎn)數(shù)據(jù)
    var str='loycoder';
    var arr3= [...str];
    console.log(arr3);

b）剩余

    //demo4  當(dāng)函數(shù)參數(shù)個(gè)數(shù)不確定時(shí)重荠，用 rest運(yùn)算符
    function rest01(...arr) {
        for (let item of arr) {
            console.log(item);
        }
    }
    rest01(1, 3, 5);

    //demo5 當(dāng)函數(shù)參數(shù)個(gè)數(shù)不確定時(shí)的第二種情況
    function rest02(item, ...arr) {
        console.log(item);
        console.log(arr);
    }
    rest02(1, 2, 34);

    //demo6 rest運(yùn)算符配合 解構(gòu)使用：
    var [a,...temp]=[1, 2, 4];
    console.log(a);
    console.log(temp);

3、生成器：

4虚茶、for of循環(huán)：

數(shù)組怎么去重戈鲁？ES6有專門數(shù)組去重的api，你了解過(guò)嗎嘹叫？

方法1:

   var arr = [5,6,8,8,6,8,6];
　　var set = new Set(arr);  
　　console.log(Array.from(set)) 
    //Set()它類似于數(shù)組(偽數(shù)組)婆殿，但是成員的值都是唯一的，沒(méi)有重復(fù)的值罩扇。
    //Array.from()將一個(gè)類數(shù)組對(duì)象或者可遍歷對(duì)象轉(zhuǎn)換成一個(gè)真正的數(shù)組婆芦。可用于字符串轉(zhuǎn)成數(shù)組Array.from('foo');// ['f','f','o']
    //Array.from() 方法從一個(gè)類似數(shù)組或可迭代的對(duì)象(包括 Array喂饥，Map消约，Set，String员帮，TypedArray或粮，arguments 對(duì)象等等) 中創(chuàng)建一個(gè)新的數(shù)組實(shí)例
    // IE不支持
    // https://www.imooc.com/article/262703 

方法2:

function unique(arr) {
    //定義常量 res,值為一個(gè)Map對(duì)象實(shí)例
    const res = new Map();
    
    //返回arr數(shù)組過(guò)濾后的結(jié)果，結(jié)果為一個(gè)數(shù)組
    //過(guò)濾條件是捞高，如果res中沒(méi)有某個(gè)鍵氯材，就設(shè)置這個(gè)鍵的值為1
    return arr.filter((a) => !res.has(a) && res.set(a, 1))
}

方法3:

arr.filter(function (element, index, self) {
    return self.indexOf(element) === index;
});

方法4:（算法）

function unique(arr){
    var temp = [];
    var len = arr.length;
    for(var i = 0; i < len; i++){
        if(temp.indexOf(arr[i]) === -1) temp.push(arr[i]);
    }    
    return temp;
}

居中問(wèn)題：

https://mp.weixin.qq.com/s/UxY7VWqMMOjvgE6L_dlixA

inline 和block的區(qū)別？

塊級(jí)元素：會(huì)占領(lǐng)頁(yè)面的一行棠枉，其后多個(gè)block元素自動(dòng)換行浓体、 可以設(shè)置width泡挺，height辈讶，設(shè)置了width后同樣也占領(lǐng)一行、同樣也可以設(shè)置   margin與padding屬性娄猫。
行級(jí)元素：與其他元素在同一行上贱除，高度生闲，行高以及底邊距不可改變，高度就是內(nèi)容文字或者圖片的寬度月幌，不可以改變碍讯。

position了解過(guò)么？一般都怎么用扯躺？

    relative：  相對(duì)于本身位置進(jìn)行偏移
    absolute：
    fixed
    static

瀏覽器兼容監(jiān)聽事件捉兴？

var x = document.getElementById("myBtn");
if (x.addEventListener) 
{
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) 
{
    x.attachEvent("onclick", myFunction);
}

什么是webSocket？

WebSocket使得客戶端和服務(wù)器之間的數(shù)據(jù)交換變得更加簡(jiǎn)單录语，允許服務(wù)端主動(dòng)向客戶端推送數(shù)據(jù)倍啥。在WebSocket API中，瀏覽器和服務(wù)器只需要完成一次握手澎埠，兩者之間就直接可以創(chuàng)建持久性的連接虽缕，并進(jìn)行雙向數(shù)據(jù)傳輸。
允許服務(wù)端主動(dòng)向客戶端推送數(shù)據(jù)

絕對(duì)定位和相對(duì)定位蒲稳？

你知道什么是跨域問(wèn)題嗎氮趋？怎么解決？

link 與 @import 的區(qū)別江耀？

1剩胁、作用上：@import 引入樣式表
                    link 加載css文件，定義RSS祥国、rel連接等屬性
2摧冀、加載順序：@import 引入的 CSS 將在頁(yè)面加載完畢后被加載
                        link 加載頁(yè)面時(shí)被同時(shí)加載
3、可控性：@import 引入的樣式不可以用js操控
                     link 引入的樣式可以用js操控
4系宫、兼容性：@import 只可在 IE5+ 才能識(shí)別索昂；
                     link標(biāo)簽作為 HTML 元素，不存在兼容性問(wèn)題

防抖與節(jié)流扩借？

1椒惨、防抖：多次觸發(fā)事件之后，事件執(zhí)行函數(shù)只執(zhí)行一次潮罪，并且是在觸發(fā)操作結(jié)束時(shí)執(zhí)行的

原理：對(duì)執(zhí)行函數(shù)進(jìn)行延時(shí)操作康谆。如果設(shè)定的延時(shí)到來(lái)之前，再次觸發(fā)事件嫉到，則清楚上一次延時(shí)的定時(shí)器沃暗，重新開始定時(shí)。
不使用：圖片懶加載（lazyload）時(shí)何恶，需要通過(guò)滾動(dòng)位置孽锥，實(shí)時(shí)顯示圖片時(shí)，如果使用防抖函數(shù)，懶加載（lazyload）函數(shù)將會(huì)不斷被延時(shí)惜辑，

e.g.: 以 onscroll 方法為例

        window.onscroll = function(){
           let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
           console.log('滾動(dòng)位置：' + scrollTop); 
        }

防抖操作：（解決上面的eg）

        let timer;
        window.onscroll = function(){
            // let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            // console.log('滾動(dòng)位置：' + scrollTop); 
            // 滾動(dòng)的防抖操作
            if (timer) {
                clearTimeout(timer)
            }
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            timer = setTimeout(function(){
                console.log('滾動(dòng)位置：'+ scrollTop);
                timer = undefined;
            },200)
        }

防抖函數(shù)的封裝：

        function debounce(fn,wait){
                let  timeout = 0;
                return function(...args){
                        if(timeout){
                                clearTimeout(timeout)
                        }
                        timeout = setTImeout(() => {
                                fn.apply(this,args)
                        },wait)
                }
        }

引用封裝的防抖函數(shù)：

 window.onscroll = debounce(function(){
        let  scrollTop = document.body.scrollTop  || document.documentElement.scrollTop;
        console.log("滾動(dòng)條位置："+ scrollTop)
        //返回頂部等操作
})

2唬涧、節(jié)流：觸發(fā)執(zhí)行函數(shù)后，短時(shí)間間隔不能連續(xù)調(diào)用盛撑，只有上一次函數(shù)執(zhí)行后碎节，過(guò)了規(guī)定的時(shí)間間隔，才能進(jìn)行下一次的函數(shù)調(diào)用抵卫。

原理：對(duì)處理函數(shù)進(jìn)行延時(shí)操作狮荔，若設(shè)定的延時(shí)到來(lái)之前，再次觸發(fā)事件介粘，則清除上一次的延時(shí)操作定時(shí)器轴合，重新定時(shí)。

        let startTime = Date.now();
        let time = 5000;    //間隔時(shí)間碗短，控制隔多長(zhǎng)時(shí)間執(zhí)行一次函數(shù)
        let timer;
        window.onscroll = function  throttle(){
              let currentTime = Date.now();
              if(currentTime - startTime >= time){
                    let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
                    console.log("滾動(dòng)條位置："+ scrollTop)
                    startTime = currentTime;
              }else{
                    clearTimeout(timer);
                    timer = setTimeout(function(){
                            throttle();
                    },100)
              }
        }

JS優(yōu)化受葛？

1、事件委托偎谁，父類代替多個(gè)子類執(zhí)行事件总滩，只執(zhí)行一次
2、函數(shù)防抖巡雨，節(jié)省Dom操作闰渔，防抖函數(shù)的封裝使用

HTMl優(yōu)化?

1* 、HTML標(biāo)簽有始終铐望。 減少瀏覽器的判斷時(shí)間

2* 冈涧、把script標(biāo)簽移到HTML文件末尾，因?yàn)镴S會(huì)阻塞后面的頁(yè)面的顯示正蛙。

3* 督弓、減少iframe的使用，因?yàn)閕frame會(huì)增加一條http請(qǐng)求乒验，阻止頁(yè)面加載愚隧，即使內(nèi)容為空，加載也需要時(shí)間

4锻全、id和class狂塘，在能看明白的基礎(chǔ)上，簡(jiǎn)化命名鳄厌，在含有關(guān)鍵字的連接詞中連接符號(hào)用'-'荞胡，不要用'_'

5、保持統(tǒng)一大小寫了嚎，統(tǒng)一大小寫有利于瀏覽器緩存泪漂，雖然瀏覽器不區(qū)分大小寫，但是w3c標(biāo)準(zhǔn)為小寫

6、清除空格窖梁，雖然空格有助于我們查看代碼赘风，但是每個(gè)空格相當(dāng)于一個(gè)字符夹囚，空格越多纵刘，頁(yè)面體積越大，像google荸哟、baidu等搜索引擎的首頁(yè)去掉了所有可以去掉的空格假哎、回車等字符，這樣可以加快web頁(yè)面的傳輸鞍历《婺ǎ可以借助于DW軟件進(jìn)行批量刪除 html內(nèi)標(biāo)簽之間空格，sublime text中ctrl+a劣砍，然后長(zhǎng)按shift+tab全部左對(duì)齊惧蛹，清除行開頭的空格

7* 、減少不必要的嵌套刑枝，盡量扁平化香嗓，因?yàn)楫?dāng)瀏覽器編譯器遇到一個(gè)標(biāo)簽時(shí)就開始尋找它的結(jié)束標(biāo)簽，直到它匹配上才能顯示它的內(nèi)容装畅，所以當(dāng)嵌套很多時(shí)打開頁(yè)面就會(huì)特別慢靠娱。

8、減少注釋掠兄，因?yàn)檫^(guò)多注釋不光占用空間像云，如果里面有大量關(guān)鍵詞會(huì)影響搜索引擎的搜索

9** 、使用css+div代替table布局蚂夕，去掉格式化控制標(biāo)簽如：strong迅诬，b，i等婿牍，使用css控制

10*百框、代碼要結(jié)構(gòu)化、語(yǔ)義化

11* 牍汹、css和javascript盡量全部分離到單獨(dú)的文件中

12* 铐维、除去無(wú)用的標(biāo)簽和空標(biāo)簽，空格慎菲，注釋

13嫁蛇、盡量少使用廢棄的標(biāo)簽，如b露该、i等睬棚，盡管高版本瀏覽器是向后兼容的

操作字符串和數(shù)組的常用的方法？

js里面的this的指向？

本地存儲(chǔ)和webSocket了解過(guò)嗎抑党？

js創(chuàng)建對(duì)象有幾種方式包警？

冒泡和捕獲機(jī)制是什么？

    // 冒泡
     getEle("imgId").addEventListener('click',function(){
         alert('你點(diǎn)擊了內(nèi)部')
     },false)
     getEle("mDiv").addEventListener('click',function(){
         alert('你點(diǎn)擊了外部')
     },false)
    // 捕獲
     getEle('imgId').addEventListener('click',function(){
         alert('我是內(nèi)部')
     },true)
     getEle('mDiv').addEventListener('click',function(){
         alert('我是外部')
     },true)

vue的偵聽器底靠？

method和計(jì)算屬性的區(qū)別害晦？什么時(shí)候用計(jì)算屬性？

事件的修飾符你知道幾個(gè)暑中？比如click.stop是什么壹瘟？

在一個(gè)頁(yè)面，你知道為什么通常把css寫在上面鳄逾，把js腳本寫在下面嗎稻轨？

一個(gè)click事件，經(jīng)歷了哪幾個(gè)過(guò)程

a:link是超級(jí)鏈接的初始狀態(tài)
a:hover是把鼠標(biāo)放上去時(shí)懸停的狀況
a:active 是鼠標(biāo)點(diǎn)擊時(shí)
a:visited是訪問(wèn)過(guò)后的情況
-
onmousedown／onmousemove／onmouseup
onmouseout／onmouseover

我們經(jīng)常遇到雕凹，比如在知乎復(fù)制一段文字殴俱，就會(huì)附著一些作者的信息之類的，如果是你枚抵，你怎么實(shí)現(xiàn)线欲？你知道怎么操作剪貼板嗎？

var和let的區(qū)別俄精？

用過(guò)腳手架嗎询筏？

生命周期？

SASS與LASS包括什么竖慧？

      結(jié)構(gòu)化CSS

      變量

      嵌套樣式表

      Minxins & 函數(shù)

    繼承

js 異步加載的方式

渲染引擎遇到 script 標(biāo)簽會(huì)停下來(lái)嫌套，等到執(zhí)行完腳本，繼續(xù)向下渲染

defer 是“渲染完再執(zhí)行”圾旨，async 是“下載完就執(zhí)行”踱讨，defer 如果有多個(gè)腳本，會(huì)按照在頁(yè)面中出現(xiàn)的順序加載砍的，多個(gè)async 腳本不能保證加載順序

加載 es6模塊的時(shí)候設(shè)置 type=module痹筛，異步加載不會(huì)造成阻塞瀏覽器，頁(yè)面渲染完再執(zhí)行廓鞠，可以同時(shí)加上async屬性帚稠，異步執(zhí)行腳本（利用頂層的this等于undefined這個(gè)語(yǔ)法點(diǎn)，可以偵測(cè)當(dāng)前代碼是否在 ES6 模塊之中）

JS如何實(shí)現(xiàn)類床佳，繼承滋早？　　　　　
JS有哪些數(shù)據(jù)類型？　　　　　　
Null和Undefined的區(qū)別砌们？　　　　　　
判斷時(shí)if是false的值杆麸？　　
isNaN（）的作用搁进？　　　　　　
JS對(duì)象中的Array對(duì)象和String對(duì)象的各種方法　　　　　　
this關(guān)鍵字在不同環(huán)境下的指向JS的作用域　　　　　　
setTimeout和setInterval　
了解CSS3或HTML5嗎，都用過(guò)哪些
排序Ｎ敉贰饼问！
1、盒裝模型揭斧，以及在不同標(biāo)準(zhǔn)下的表現(xiàn)莱革。（問(wèn)到什么程度？比如最近會(huì)問(wèn)何時(shí)margin會(huì)重疊）
2未蝌、基本CSS的知識(shí)自行了解清楚（優(yōu)先級(jí)驮吱、選擇器茧妒、偽類萧吠、浮動(dòng)元素、HACK等）
3桐筏、原型與實(shí)現(xiàn)繼承（特別重要Ｖ叫汀！我手下面80%應(yīng)屆生不熟悉原型梅忌，也許學(xué)校沒(méi)實(shí)際應(yīng)用過(guò)狰腌，但是不知道原型基本可以槍斃了）

原型： http://www.reibang.com/writer#/notebooks/16238368/notes/30930178/preview

閉包： http://www.reibang.com/writer#/notebooks/16238368/notes/41663536

4、作用域牧氮、聲明提前（特別喜歡拿這個(gè)做文章琼腔，分開出三道，第一道不會(huì)教你踱葛，剩下兩道埋坑考察當(dāng)場(chǎng)學(xué)習(xí)能力）
5丹莲、基本插件如JQ等的使用和部分代碼分析或?qū)崿F(xiàn)
6、原生JS的使用（創(chuàng)建尸诽、插入DOM甥材，不同瀏覽器事件）
7、跨域?qū)崿F(xiàn)
8性含、如何改善頁(yè)面性能
9洲赵、事件代理
11、正則
12商蕴、布局叠萍，浮動(dòng)布局，自適應(yīng)布局绪商，自適應(yīng)左右分欄的實(shí)現(xiàn)（純CSS）
1苛谷、AMD CMD 模塊化JS
2、同步部宿、異步抄腔、回調(diào)瓢湃、promise實(shí)現(xiàn)
3、各種算法赫蛇、數(shù)組去重等
4绵患、前端開發(fā)框架、編譯悟耘、打包（選擇一家方案使用了解）
5落蝙、CSS3、HTML5常用方法

HTML新的api

history.pushState 和 history.replaceState暂幼，就是通過(guò)這個(gè)接口做到無(wú)刷新改變頁(yè)面URL的

this筏勒、call、apply旺嬉、callee 孰知應(yīng)用

1）this

        function a(){
            console.log(this)
        }
        a();    //window

        var name = 'window-name';
        var obj = {
            name: 'obj-name',
            a:function(){
                console.log(this.name);
            },
            b:{
                name: 'b-name',
                a:function(){
                    console.log(this.name);
                }
            }
        }
        obj.a();    //obj-name
        obj.b.a();  //b-name
        var winA = obj.b.a;
        winA();     //window-name

2）call()

函數(shù).call(對(duì)象) ---> 函數(shù)中的this指的是對(duì)象
函數(shù)1.call(函數(shù)2) ---> 函數(shù)1執(zhí)行

        function foo(){
            console.log(this.x)
        }
        var fooObj = {x:1}
        foo();  //undefined
        foo.call(fooObj);   //1

        var a = {
            user:"追夢(mèng)子",
            fn:function(){
                console.log(this.user); //追夢(mèng)子
            }
        }
        var b = a.fn;
        b();    //undefined
        b.call(a);  //‘追夢(mèng)子’

        function fun1(){
            console.log(1)
        }
        function fun2(){
            console.log(2)
        }
        fun1.call(fun2)//1
        fun2.call(fun1)//2

帶參數(shù)的：第一個(gè)參數(shù)是對(duì)象管行，后面的都是參數(shù)

        function fooParams(a,b,c){
            console.log(this.x + a + b + c)
        }
        var fooParamsObj = {x:1}
        fooParams.call(fooParamsObj,2,3,4)

        var obj1 = {
            num : 20,
            fn : function(n){
                console.log(this.num+n);
            }
        };
        var obj2 = {
            num : 15,
            fn : function(n){
                console.log(this.num-n);
            }
        };
        obj1.fn.call(obj2,10);//25

3）apply()

        function foo1(){
            console.log(this.x)
        }
        var foo1Obj = {x:1}
        foo1()  //undefined
        foo1.apply(foo1Obj) //1

帶參數(shù)的： 第一個(gè)參數(shù)是對(duì)象，第二個(gè)參數(shù)是數(shù)組邪媳，數(shù)組里全是參數(shù)

        function fooParams1(a,b,c){
            console.log(this.x + a + b + c)
        }
        var fooParamsObj1 = {x:1}
        fooParams1.apply(fooParamsObj1,[2,3,4])

4）call()和apply()的區(qū)別：參數(shù)

• call()在第一個(gè)參數(shù)之后的 后續(xù)所有參數(shù)就是傳入該函數(shù)的值捐顷。
• apply() 只有兩個(gè)參數(shù)，第一個(gè)是對(duì)象雨效，第二個(gè)是數(shù)組迅涮，這個(gè)數(shù)組就是該函數(shù)的參數(shù)。
• call和apply兩個(gè)特殊情況就是：當(dāng)這個(gè)obj參數(shù)為null或者undefined的時(shí)候徽龟，this會(huì)指向window叮姑。
• bind() 參數(shù)與call()相同

5）bind()

        function bindFoo(){
            console.log(this.x)
        }
        var bindFooObj = {x:1}
        bindFoo.bind(bindFooObj)    //沒(méi)有打印,因?yàn)閎ind不會(huì)自動(dòng)調(diào)用
        var newBindFoo = bindFoo.bind(bindFooObj)
        console.log(newBindFoo)     //打印出函數(shù)bindFoo
        newBindFoo()    //結(jié)果是 1 因?yàn)槭謩?dòng)執(zhí)行了函數(shù)，this指向還是bindFooObj据悔。

        var a = {
            user: 'hanna',
            fn: function(){
                console.log(this.user);
            }
        }
        var b = a.fn;
        b();    //undefined
        b.bind(a);  //不執(zhí)行
        b.bind(a)() //hanna

6）總結(jié)

• call和apply都是改變上下文中的this并立即執(zhí)行這個(gè)函數(shù)传透。
• bind方法可以讓對(duì)應(yīng)的函數(shù)想什么時(shí)候調(diào)就什么時(shí)候調(diào)用，并且可以將參數(shù)在執(zhí)行的時(shí)候添加

遍歷

for...in（支持對(duì)象屠尊、數(shù)組）

var arr = [1,2,3,4,5,6]
for(let i  in  arr){
    console.log(i)            //索引  0旷祸，1，2讼昆，3托享，4，5
    console.log(arr[i])       //數(shù)組 1浸赫，2闰围，3，4既峡，5羡榴，6
}

var obj = {a:1,b:2,c:3}
for(let key in obj){
    console.log(key)          //對(duì)象的key   a，b运敢，c
    console.log(obj[key])     //對(duì)象的value   1校仑，2忠售，3
}
Object.keys(obj)              //對(duì)象的key   a，b迄沫，c  
Object.values(obj)            //對(duì)象的value   1稻扬，2，3

for...of（不支持普通對(duì)象）

var newArr = [2,4,6,8,10]
for(let i of newArr){
    console.log(i)            //數(shù)組本身2羊瘩，4泰佳，6，8，10
}

forEach （使用break不能中斷循環(huán)，使用return也不能返回到外層函數(shù)）

重繪與回流及相關(guān)性能

##重繪(redraw或repaint)：

* 當(dāng)盒子的位置局劲、大小以及其他屬性，例如顏色黔宛、字體大小等都確定下來(lái)之后，瀏覽器便把這些原色都按照各自的特性繪制一遍侧戴，將內(nèi)容呈現(xiàn)在頁(yè)面上宁昭。重繪是指一個(gè)元素外觀的改變所觸發(fā)的瀏覽器行為跌宛，瀏覽器會(huì)根據(jù)元素的新屬性重新繪制酗宋，使元素呈現(xiàn)新的外觀。
* 觸發(fā)重繪的條件：改變?cè)赝庥^屬性疆拘。如：color蜕猫，background-color等。
* 注意：table及其內(nèi)部元素可能需要多次計(jì)算才能確定好其在渲染樹中節(jié)點(diǎn)的屬性值哎迄，比同等元素要多花兩倍時(shí)間回右，這就是我們盡量避免使用table布局頁(yè)面的原因之一。

##重排(重構(gòu)/回流/reflow)：

* 當(dāng)渲染樹中的一部分(或全部)因?yàn)樵氐囊?guī)模尺寸漱挚，布局翔烁，隱藏等改變而需要重新構(gòu)建, 這就稱為回流(reflow)。每個(gè)頁(yè)面至少需要一次回流旨涝，就是在頁(yè)面第一次加載的時(shí)候蹬屹。
* 觸發(fā)重排的條件：任何頁(yè)面布局和幾何屬性的改變都會(huì)觸發(fā)重排，比如：

　  1白华、頁(yè)面渲染初始化慨默；(無(wú)法避免)

　　2、添加或刪除可見的DOM元素弧腥；

　　3厦取、元素位置的改變，或者使用動(dòng)畫管搪；

　　4虾攻、元素尺寸的改變——大小铡买，外邊距，邊框霎箍；

　　5寻狂、瀏覽器窗口尺寸的變化（resize事件發(fā)生時(shí)）；

　　6朋沮、填充內(nèi)容的改變蛇券，比如文本的改變或圖片大小改變而引起的計(jì)算值寬度和高度的改變；

　　7樊拓、讀取某些元素屬性：（offsetLeft/Top/Height/Width,　clientTop/Left/Width/Height,　scrollTop/Left/Width/Height,　width/height,　getComputedStyle(),　currentStyle(IE)　)

##重繪和重排的關(guān)系：

       重排必定會(huì)引發(fā)重繪纠亚，但重繪不一定會(huì)引發(fā)重排。

##重繪重排的代價(jià)：

        耗時(shí)筋夏，導(dǎo)致瀏覽器卡慢蒂胞。

##優(yōu)化：

1、瀏覽器自己的優(yōu)化：瀏覽器會(huì)維護(hù)1個(gè)隊(duì)列条篷，把所有會(huì)引起回流骗随、重繪的操作放入這個(gè)隊(duì)列，等隊(duì)列中的操作到了一定的數(shù)量或者到了一定的時(shí)間間隔赴叹，瀏覽器就會(huì)flush隊(duì)列鸿染，進(jìn)行一個(gè)批處理。這樣就會(huì)讓多次的回流乞巧、重繪變成一次回流重繪涨椒。

2、我們要注意的優(yōu)化：我們要減少重繪和重排就是要減少對(duì)渲染樹的操作绽媒，則我們可以合并多次的DOM和樣式的修改蚕冬。并減少對(duì)style樣式的請(qǐng)求。

（1）直接改變?cè)氐腸lassName

（2）display：none是辕；先設(shè)置元素為display：none囤热；然后進(jìn)行頁(yè)面布局等操作；設(shè)置完成后將元素設(shè)置為display：block获三；這樣的話就只引發(fā)兩次重繪和重排旁蔼；

（3）不要經(jīng)常訪問(wèn)瀏覽器的flush隊(duì)列屬性；如果一定要訪問(wèn)石窑，可以利用緩存牌芋。將訪問(wèn)的值存儲(chǔ)起來(lái)，接下來(lái)使用就不會(huì)再引發(fā)回流松逊；

（4）使用cloneNode(true or false) 和 replaceChild 技術(shù)躺屁，引發(fā)一次回流和重繪；

（5）將需要多次重排的元素经宏，position屬性設(shè)為absolute或fixed犀暑，元素脫離了文檔流驯击，它的變化不會(huì)影響到其他元素；

（6）如果需要?jiǎng)?chuàng)建多個(gè)DOM節(jié)點(diǎn)耐亏，可以使用DocumentFragment創(chuàng)建完后一次性的加入document徊都；

（7）盡量不要使用table布局。

代碼：

var fragment = document.createDocumentFragment();
var li = document.createElement('li');
li.innerHTML = 'apple';
fragment.appendChild(li);
 
var li = document.createElement('li');
li.innerHTML = 'watermelon';
fragment.appendChild(li);
 
document.getElementById('fruit').appendChild(fragment);

7广辰、webkit內(nèi)核特有的一些API
8暇矫、MVC/JS面向?qū)ο笏枷?br> dom的操作，刪除择吊，移動(dòng)李根，復(fù)制，插入几睛，前插后插房轿，指定插一類。
事件的處理所森，兼容性寫法囱持，參數(shù)作用，撲獲冒泡焕济，委派代理纷妆。
ie下的一些兼容性問(wèn)題，js的吼蚁，舉例凭需。
動(dòng)畫方面，加速度肝匆，重力模擬實(shí)現(xiàn)。
正則顺献，基本的用法和相關(guān)函數(shù)作用考查旗国。
閉包，原型鏈注整，作用域能曾，變量引用，類繼承方法肿轨。
內(nèi)存泄露的原因和場(chǎng)景寿冕。
h5里一些新增api的了解。
性能優(yōu)化和重構(gòu)知識(shí)椒袍。

判斷兩個(gè)對(duì)象是否相等：

方法1：JSON.stringfy()

var obj = {a:'a'},
    obj1 = {b:'b'},
    obj2 = {a:'a'};
console.log(JSON.stringify(obj) == JSON.stringify(obj1));      //false
console.log(JSON.stringify(obj) == JSON.stringify(obj2));      //true

方法2：Object.getOwnPropertyNames()
先比較兩個(gè)對(duì)象的getOwnPropertyNames長(zhǎng)度驼唱，如果長(zhǎng)度相等

var obj = {a:'a'},
    obj1 = {b:'b'};
var props = Object.getOwnPropertyNames(obj)
var props1 = Object.getOwnPropertyNames(obj1)
if(props.length != props1.length){
    console.log('不相等')
}
for(let i=0;i<props.length;i++){
      var  propName = props[i];
      if( obj[propName]  !=  obj1[propName] ){
            console.log('不相等')
      }else{
            console.log('相等')
      }
}

判斷是否為數(shù)組：

方法1：使用 instanceof（）【不能跨頁(yè)面判斷】

var  arr = ['hanna','lsb','fff','xxx']
var  obj = {'name':'hanna'}
console.log( arr instanceof Array )  //true
console.log( obj instanceof Array )  //false

方法2：使用 constructor【不能跨頁(yè)面判斷】

var  arr = ['hanna','lsb','fff','xxx']
var  obj = {'name':'hanna'}
console.log( arr.constructor  === Array )  //true
console.log( obj.constructor === Array )  //false

方法3：使用 Array.isArray（）【兼容問(wèn)題】

var  arr = ['hanna','lsb','fff','xxx']
var  obj = {'name':'hanna'}
Array.isArray( arr )  //true
Array.isArray( obj )  //false

方法4：使用 Object.prototype.toString.call（）

var  arr = ['hanna','lsb','fff','xxx']
var  obj = {'name':'hanna'}
Object.prototype.toString.call( arr )  //true
Object.prototype.toString.call( obj )  //false

兼容的封裝方法：使用isArray和Object.prototype.toString.call()

function  isArrayFun(arr){
    if(typeof Array.isArray  == 'function'){
            return  Array.isArray(arr)
    }else{
            return  Object.prototype.toString.call(arr)  === '[object Array]'
    }
}

附加：
Array.prototype.slice.call() 將具有l(wèi)ength屬性的對(duì)象(key值為數(shù)字)轉(zhuǎn)成數(shù)組

1、有l(wèi)ength屬性：
var  obj  =  { 0:'hello',1:'word',length:2 };
console.log(Array.prototype.slice.call(obj,0))    // ['hello','word']


2驹暑、沒(méi)有l(wèi)ength屬性：
var obj = {0:'hello',1:'world'};//沒(méi)有l(wèi)ength屬性
console.log(Array.prototype.slice.call(obj,0));//[]

數(shù)組等操作方法：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

https://www.jb51.net/article/83607.htm

數(shù)組與字符串互轉(zhuǎn)：

1玫恳、數(shù)組轉(zhuǎn)字符串
var strArr = ['a','b','c']
console.log(strArr.join('')) //abc
2辨赐、字符串轉(zhuǎn)數(shù)組
var str = 'abc'
console.log( [...str] )

js引擎注釋：// ， /* */ （ html的注釋也可以 ）

else代碼塊總是與離自己最近的那個(gè)if語(yǔ)句配對(duì)

case代碼塊之中沒(méi)有break語(yǔ)句京办，導(dǎo)致不會(huì)跳出switch結(jié)構(gòu)掀序，而會(huì)一直執(zhí)行下去。
switch語(yǔ)句后面的表達(dá)式惭婿，與case語(yǔ)句后面的表示式比較運(yùn)行結(jié)果時(shí)不恭，采用的是嚴(yán)格相等運(yùn)算符（===），而不是相等運(yùn)算符（==）财饥，這意味著比較時(shí)不會(huì)發(fā)生類型轉(zhuǎn)換县袱。

for ( ; ; ){
console.log('Hello World');
}
上面代碼省略了for語(yǔ)句表達(dá)式的三個(gè)部分，結(jié)果就導(dǎo)致了一個(gè)無(wú)限循環(huán)佑力。

不管條件是否為真式散，do...while循環(huán)至少運(yùn)行一次，這是這種結(jié)構(gòu)最大的特點(diǎn)打颤。另外暴拄，while語(yǔ)句后面的分號(hào)注意不要省略。

break 和 continue

var i = 0;
while (i < 100){
I++;
if (i % 2 === 0) continue;
console.log('i 當(dāng)前為：' + i);
}
上面代碼只有在i為奇數(shù)時(shí)编饺，才會(huì)輸出i的值乖篷。如果i為偶數(shù)，則直接進(jìn)入下一輪循環(huán)透且。
如果存在多重循環(huán)撕蔼，不帶參數(shù)的break語(yǔ)句和continue語(yǔ)句都只針對(duì)最內(nèi)層循環(huán)。
var i = 0;

while(i < 100) {
console.log('i 當(dāng)前為：' + i);
I++;
if (i === 10) break;
}
上面代碼只會(huì)執(zhí)行10次循環(huán)秽誊，一旦i等于10鲸沮，就會(huì)跳出循環(huán)。

for循環(huán)也可以使用break語(yǔ)句跳出循環(huán)锅论。

六種數(shù)據(jù)類型讼溺，Number／String／Boolean／null／undefined／Object
ES6加了第七種數(shù)據(jù)類型，Symbol類型
Symbol的目的就是為了實(shí)現(xiàn)一個(gè)唯一不重復(fù)不可變的值最易，任何一個(gè)Symbol都是唯一的怒坯，不會(huì)和其他任何Symbol相等。
如：我們給一個(gè)DOM節(jié)點(diǎn)做動(dòng)畫藻懒，那么我們需要判斷動(dòng)畫是否正在執(zhí)行剔猿。
這個(gè)時(shí)候一般的做法是給DOM節(jié)點(diǎn)加上一個(gè)屬性（或者classname之類的）做一個(gè)標(biāo)記
d.isMoving = true; //正在執(zhí)行動(dòng)畫，這樣做很容易產(chǎn)生沖突嬉荆，萬(wàn)一你用了一個(gè)三方動(dòng)畫庫(kù)归敬，人家也是用 isMoving 來(lái)進(jìn)行標(biāo)記，或者萬(wàn)一DOM規(guī)范以后添加了一個(gè) isMoving 接口。
用Symbol解決：var isMoving = Symbol("is moving");
d [ isMoving ] = true;

// 錯(cuò)誤的寫法
if (v) {
// ...
}
// ReferenceError: v is not defined

// 正確的寫法
if (typeof v === "undefined") {
// ...
}

雙等時(shí)弄慰，更偏向轉(zhuǎn)化成Number

typeof null ------> "object"
typeof undefined ------> "undefined"
undefined == null ------> true
Number(undefined) ------> NaN
instanceof 運(yùn)算符可以區(qū)分?jǐn)?shù)組和對(duì)象

屏幕快照 2018-08-20 上午11.11.32.png

空數(shù)組（[]）和空對(duì)象（{}）對(duì)應(yīng)的布爾值第美，都是true
空字符串，是false陆爽，轉(zhuǎn)為0

Math.pow(x,y) ------> x 的 y 次冪什往。

element-ui upload使用經(jīng)驗(yàn)總結(jié)：
https://blog.csdn.net/zfangls/article/details/79280418
上傳二進(jìn)制文件時(shí)，文件上傳慌闭，文件名就不能夠上傳别威；文件名能上傳，文件就不能上傳驴剔。
解決：使用時(shí)間戳作為文件名上傳即可.：

----------------------分割線---------------------------

push()省古，pop()頂部
堆：
棧：后進(jìn)先出
隊(duì)列：
charles 如何抓取 https的請(qǐng)求
抓包
狀態(tài)碼
打開URl后，一直到頁(yè)面渲染出來(lái)丧失，經(jīng)經(jīng)歷的過(guò)程：
https://blog.csdn.net/jiao_0509/article/details/82491299
js單線程原理：
@全體成員 js是單線程的豺妓，如果要等待輸入，會(huì)造成頁(yè)面卡死,所以把哪些需要等待的任務(wù)(有回調(diào)函數(shù)的)布讹，放入任務(wù)隊(duì)列琳拭， 不需要等待的任務(wù)就進(jìn)入執(zhí)行棧執(zhí)行,當(dāng)執(zhí)行棧執(zhí)行完成后，就去任務(wù)隊(duì)列里面找
然后就推入執(zhí)行棧中執(zhí)行,js不停的重復(fù)上面的動(dòng)作

數(shù)據(jù)結(jié)構(gòu)描验，
https /http 區(qū)別白嘁，
寫排序（數(shù)據(jù)結(jié)構(gòu)），
post get 請(qǐng)求的深度區(qū)別膘流，
https://www.cnblogs.com/mangoWeb/p/3517801.html

面試匯總Ｐ趺濉！呼股！
http://mp.weixin.qq.com/s?__biz=MzI5ODM4NjQ5Mg==&mid=2247483846&idx=1&sn=cea4309794a3b16a3418630bb5e762e0&chksm=eca7d495dbd05d8332b5ddb9c07a3ce6595c92dabb32a3fd14b36a33900ddcfb2f9376438d6c&mpshare=1&scene=23&srcid=#rd 

http://mp.weixin.qq.com/s?__biz=MzUxODI3Mjc5MQ==&mid=2247484104&idx=1&sn=45a03b93f4fdd14751af29055a1fb7b0&chksm=f98a20b0cefda9a6f895a2266e513f90d55add0da79ca13206130c4fd39a2c2b7669d4b692bf&mpshare=1&scene=23&srcid=0227k9tosdc8jAnESbdkmP5n#rd 

https://mp.weixin.qq.com/s?__biz=MzIzNTU2ODM4Mw==&mid=2247487807&idx=1&sn=aaed585b91ddf49da34312fe1e718ecd&chksm=e8e47cafdf93f5b9394cff17b26ff7806bd03edbfc41596bf5c93c61a08ace6f4164fc118aff&mpshare=1&scene=23&srcid=%23rd

https://github.com/Advanced-Frontend/Daily-Interview-Question

https://www.cnblogs.com/autismtune/p/5210116.html

提高算法(樂(lè)扣)：https://leetcode-cn.com/problems/two-sum/solution/ 

時(shí)間：格林威治時(shí)間與2018-02-28轉(zhuǎn)換
https://blog.csdn.net/Dream_xun/article/details/83177926 


https://blog.csdn.net/venus_j?t=1

重要的：：http://www.runoob.com/w3cnote/front-end-interview-a-few-important-points-of-knowledge.html

DOM機(jī)制
DOM事件模型：捕獲和冒泡
(DOM2)
DOM時(shí)間流：
捕獲的流程：
Event對(duì)象的應(yīng)用：
注冊(cè)事件：
響應(yīng)事件：
401事件：
自定義事件（８恰）：
數(shù)組去重
深度克隆
原型