前言
面試題是永遠(yuǎn)都準(zhǔn)備不完的９Α！＜跣Ｑ涡搿！
前端常見(jiàn)的一些問(wèn)題
1.前端性能優(yōu)化手段漆腌？
1. 盡可能使用雪碧圖
2. 使用字體圖標(biāo)代替圖片
3. 對(duì)HTML贼邓，css，js 文件進(jìn)行壓縮
4. 模塊按需加載
5. 資源懶加載與資源預(yù)加載
6. 避免使用層級(jí)較深的選擇器及減少DOM深度
2.單頁(yè)面應(yīng)用和多頁(yè)面應(yīng)用的區(qū)別及優(yōu)缺點(diǎn)闷尿？
單頁(yè)面的概念： 單頁(yè)面應(yīng)用(SPA)塑径，其實(shí)就是指只有一個(gè)主頁(yè)面的應(yīng)用，類似前端現(xiàn)在的三大框架填具，React.Vue,Angular 瀏覽器一開始要加載所有必須的html,js css统舀。所有的頁(yè)面內(nèi)容都包含在這個(gè)所謂的主頁(yè)面中。
單頁(yè)面的原理：利用js感知到URL的變化，通過(guò)這一點(diǎn)誉简，可以用js動(dòng)態(tài)的將當(dāng)前的頁(yè)面內(nèi)容清除掉碉就，然后將下一個(gè)頁(yè)面的內(nèi)容掛載到當(dāng)前的頁(yè)面上。頁(yè)面每次切換跳轉(zhuǎn)時(shí)闷串，并不需要做html文件的請(qǐng)求瓮钥，這樣就節(jié)約了很多http發(fā)送延遲，我們?cè)谇袚Q頁(yè)面的時(shí)候速度很快窿克。
單頁(yè)面的優(yōu)點(diǎn)：
1. 加載速度快骏庸，用戶體驗(yàn)好，內(nèi)容的改變不需要重新加載整個(gè)頁(yè)面年叮，基于這一點(diǎn)SPA對(duì)服務(wù)器壓力較小具被。
2. 前后端分離
3. 頁(yè)面視覺(jué)效果良好
單頁(yè)面的缺點(diǎn)：
1. 不利于SEO（搜索引擎優(yōu)化）
2. 頁(yè)面初次加載時(shí)比較慢
3. 頁(yè)面復(fù)雜度提高很多
多頁(yè)面的概念： 多頁(yè)面（MPA），就是指一個(gè)應(yīng)用中有多個(gè)頁(yè)面只损，頁(yè)面跳轉(zhuǎn)時(shí)是整個(gè)頁(yè)面都刷新一姿，每次都請(qǐng)求一個(gè)新的頁(yè)面。
多頁(yè)面的優(yōu)點(diǎn)：首屏加載時(shí)間快跃惫，SEO效果好
多頁(yè)面的缺點(diǎn)：頁(yè)面切換慢叮叹，每次切換頁(yè)面都需要選擇性的重新加載公共資源
3. var，let爆存，const的區(qū)別蛉顽？
var：var的作用域是函數(shù)作用域，在一個(gè)函數(shù)內(nèi)利用var聲明一個(gè)變量先较，則這個(gè)函數(shù)只在這個(gè)函數(shù)內(nèi)有效携冤，存在變量提升。
let ：作用域是塊級(jí)作用域 不存在變量提升闲勺，不允許重復(fù)定義曾棕。
const ：一般用來(lái)聲明常量，且聲明的常量是不允許被改變的菜循，聲明的時(shí)候就賦值翘地，不存在變量提升，不允許重復(fù)定義癌幕。
4. 箭頭函數(shù)和普通函數(shù)的區(qū)別衙耕？
箭頭函數(shù)：
1.?this指向：箭頭函數(shù)指向 定義時(shí)所在的作用域中的this指向
2. 箭頭函數(shù)作為匿名函數(shù)，是不能作為構(gòu)造函數(shù)的勺远，不能使用new
3. 箭頭函數(shù)不能換行
普通函數(shù)：
1.?this指向：誰(shuí)調(diào)用就指向誰(shuí)
5. 流式布局和響應(yīng)式布局?
流式布局： 使用非固定像素來(lái)定義網(wǎng)頁(yè)內(nèi)容臭杰，也就是百分比布局，通過(guò)盒子的寬度設(shè)置成百分比來(lái)根據(jù)屏幕的寬度來(lái)進(jìn) 行伸縮谚中，不受固定像素的限制，內(nèi)容向兩側(cè)填充。
響應(yīng)式布局： 利用CSS3 中的 Media Query(媒介查詢)宪塔，通過(guò)查詢 screen 的寬度來(lái)指定某個(gè)寬度區(qū)間的網(wǎng)頁(yè)布局磁奖。
6. css優(yōu)先級(jí)算法？
!important>內(nèi)聯(lián)>ID選擇器>class選擇器>元素選擇器>通配符選擇器>繼承>瀏覽器默認(rèn)屬性
7. null和undefined的區(qū)別某筐？
undefined：類型只有一個(gè)比搭，即undefined，當(dāng)聲明變量還未被初始化時(shí)就是undefined
null：類型也只有一個(gè)值南誊，即null身诺。null用來(lái)表示尚未存在的對(duì)象，常用來(lái)表示函數(shù)企圖返回一個(gè)不存在的對(duì)象
8.?http和https的區(qū)別抄囚？
https：是以安全為目標(biāo)的HTTP通道霉赡，簡(jiǎn)單講是HTTP的安全版本，通過(guò)SSL加密幔托。
http：超文本傳輸協(xié)議穴亏。是一個(gè)客服端和服務(wù)器端請(qǐng)求和應(yīng)答的標(biāo)準(zhǔn)（tcp）,使瀏覽器更加高效，使網(wǎng)絡(luò)傳輸減少重挑。
9. ajax的理解嗓化？
ajax的原理：原理：相當(dāng)于在用戶和服務(wù)器之間加一個(gè)中間層（ajax引擎),使用戶操作與服務(wù)器響應(yīng)異步化。
ajax的優(yōu)點(diǎn)：在不刷新整個(gè)頁(yè)面的前提下與服務(wù)器通信維護(hù)數(shù)據(jù)谬哀。不會(huì)導(dǎo)致頁(yè)面的重載可以把前端服務(wù)器的任務(wù)轉(zhuǎn)接到客服端來(lái)處理刺覆，減輕服務(wù)器負(fù)擔(dān)，節(jié)省寬帶史煎。
ajax的劣勢(shì)：不支持back谦屑。對(duì)搜索引擎的支持比較弱；不容易調(diào)試 怎么解決呢劲室？通過(guò)location.hash值來(lái)解決Ajax過(guò)程中導(dǎo)致的瀏覽器前進(jìn)后退按鍵失效伦仍，解決以前被人常遇到的重復(fù)加載的問(wèn)題。主要比較前后的hash值很洋，看其是否相等充蓝，在判斷是否觸發(fā)ajax喉磁。
10. Html5新增哪些新特性？移出了哪些元素 协怒？
H5新增特性：
1. 用于繪畫的canvas元素
2. 用于媒介回放的video和audio元素
3. 對(duì)本地離線存儲(chǔ)的更好的支持（本地存儲(chǔ)）
4.新增標(biāo)簽： header? ? footer? ?article? nav? ?section
5.新增表單控件：calender? date? time? ?email? ?url? search
移除的元素：basefont? ?big? ?center? font? s? strike? tt? u
11.移動(dòng)端點(diǎn)透問(wèn)題涝焙，如何解決？
問(wèn)題：點(diǎn)透問(wèn)題出現(xiàn)的原因就是移動(dòng)端click事件300ms延遲問(wèn)題仑撞，當(dāng)點(diǎn)擊上層元素時(shí)，先觸發(fā)touchstart事件隧哮，然后在300ms后會(huì)觸發(fā)click事件桶良，而此時(shí)上層元素已經(jīng)消失沮翔，所以下邊的元素會(huì)觸發(fā)click事件，這就是點(diǎn)透問(wèn)題疲牵。
解決方法：
1. 使用一個(gè)透明遮罩榆鼠，屏蔽所有事件，然后400ms（對(duì)于IOS來(lái)說(shuō)是個(gè)理想值）后自動(dòng)屏蔽缩焦。
2. touchstart換成touchend责静，因?yàn)橛|發(fā)touchend需要200ms所以可以把觸發(fā)時(shí)間這個(gè)原理問(wèn)題解決掉。
3. zepto最新版已經(jīng)修復(fù)了這個(gè)問(wèn)題题翻，或者使用fastclick等通用庫(kù)腰鬼。
4. 直接使用click姜挺，不考慮延遲彼硫。
5.下層避開click事件姐军，如a鏈接改為span等標(biāo)簽，使用js跳轉(zhuǎn)頁(yè)面贮折。
12. rem em px的區(qū)別？
px：像素(Pixel)变擒。絕對(duì)單位。像素 px 是相對(duì)于顯示器屏幕分辨率而言的寝志，是一個(gè)虛擬長(zhǎng)度單位娇斑，
em：是相對(duì)長(zhǎng)度單位毫缆，相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸乐导。如當(dāng)前對(duì)行內(nèi)文本的字體尺寸未被人為設(shè)置物臂， 則相對(duì)于瀏覽器的默認(rèn)字體尺寸。它會(huì)繼承父級(jí)元素的字體大小蛾狗，因此并不是一個(gè)固定的值淘太。
rem： 是 CSS3 新增的一個(gè)相對(duì)單位(root em规丽，根 em)赌莺，使用 rem 為元素設(shè)定字體大小時(shí)艘狭，仍然是相對(duì)大小， 但相對(duì)的只是 HTML 根元素遵倦。
13. http常見(jiàn)狀態(tài)碼梧躺？
405：客戶端請(qǐng)求的額方法被禁止
408：服務(wù)器等待客戶端發(fā)送的請(qǐng)求時(shí)間過(guò)長(zhǎng)傲绣，超時(shí)
200：服務(wù)器成功處理了請(qǐng)求
400：客戶端發(fā)送了一個(gè)錯(cuò)誤的請(qǐng)求
404：未找到資源
500：服務(wù)器內(nèi)部出現(xiàn)錯(cuò)誤
501：服務(wù)器遇到錯(cuò)誤，使其無(wú)法對(duì)請(qǐng)求提供服務(wù)
14.什么是同步塞琼，異步禁舷？
同步：由于js單線程牵咙，同步任務(wù)都在主線程上排隊(duì)執(zhí)行霜大，前面任務(wù)沒(méi)有執(zhí)行完成革答，后面的任務(wù)會(huì)一直等待残拐。
異步：不進(jìn)入主線程，進(jìn)入任務(wù)隊(duì)列囊卜，等待主線程任務(wù)執(zhí)行完成栅组，開始執(zhí)行枢析。最基本的異步操作SetTimemot和SetInterval,等待主線程任務(wù)執(zhí)行完醒叁，在開始執(zhí)行里面的函數(shù)把沼。
15. DOCTYPE的作用是什么？
<!DOCTYPE>位于文檔的最頂部租谈，它可以告訴瀏覽器按何種規(guī)范解析頁(yè)面垦垂。
16. 請(qǐng)描述一下cookies、sessionStorage和localStorage的區(qū)別间校？
sessionStorage：用于本地存儲(chǔ)一個(gè)會(huì)話（session）中的數(shù)據(jù)憔足，這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁(yè)面才能訪問(wèn)并且當(dāng)會(huì)話結(jié)束后數(shù)據(jù)也隨之銷毀滓彰。因此sessionStorage不是一種持久化的本地存儲(chǔ)州袒，僅僅是會(huì)話級(jí)別的存儲(chǔ)郎哭。
localStorage：用于持久化的本地存儲(chǔ)夸研，除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過(guò)期的悼沈。
Cookie：它的大小是受限的絮供，并且每次你請(qǐng)求一個(gè)新的頁(yè)面的時(shí)候Cookie都會(huì)被發(fā)送過(guò)去杯缺，這樣無(wú)形中浪費(fèi)了帶寬睡榆，另外cookie還需要指定作用域胀屿，不可以跨域調(diào)用。WebStorage擁有setItem亲铡、getItem奖蔓、removeItem吆鹤、clear等方法，不像cookie需要前端開發(fā)者自己封裝setCookie沾凄、getCookie撒蟀。但是Cookie也是不可以或缺的：Cookie的作用是與服務(wù)器進(jìn)行交互保屯，作為HTTP規(guī)范的一部分而存在涤垫，而WebStorage僅僅是為了在本地“存儲(chǔ)”數(shù)據(jù)而生雹姊。
17. 簡(jiǎn)述一下src與href的區(qū)別衡楞？
src用于替換當(dāng)前元素瘾境，href用于在當(dāng)前文檔和引用資源之間確立聯(lián)系迷守。
18. 一個(gè)頁(yè)面上有大量的圖片（大型電商網(wǎng)站）兑凿，加載很慢，你有哪些方法優(yōu)化這些圖片的加載咐鹤，給用戶更好的體驗(yàn)祈惶。
1. 圖片懶加載捧请，在頁(yè)面上的未可視區(qū)域可以添加一個(gè)滾動(dòng)條事件，判斷圖片位置與瀏覽器頂端的距離與頁(yè)面的距離活箕，如果前者小于后者讹蘑，優(yōu)先加載座慰。
2. 如果為幻燈片翠拣、相冊(cè)等误墓，可以使用圖片預(yù)加載技術(shù)谜慌，將當(dāng)前展示圖片的前一張和后一張優(yōu)先下載欣范。
3. 如果圖片為css圖片，可以使用CSSsprite妨蛹，SVGsprite蛙卤，Iconfont颤难、Base64等技術(shù)已维。
4. 如果圖片過(guò)大衣摩，可以使用特殊編碼的圖片，加載時(shí)會(huì)先加載一張壓縮的特別厲害的縮略圖占婉，以提高用戶體驗(yàn)甫恩。
5. 如果圖片展示區(qū)域小于圖片的真實(shí)大小磺箕，則因在服務(wù)器端根據(jù)業(yè)務(wù)需要先行進(jìn)行圖片壓縮松靡，圖片壓縮后大小與展示一致雕欺。
19. 談?wù)勔郧岸私嵌瘸霭l(fā)屠列，做好SEO需要考慮什么？
1. 了解搜索引擎如何抓取網(wǎng)頁(yè)和如何索引網(wǎng)頁(yè)夏志，以及如何對(duì)搜索結(jié)果進(jìn)行排序等盲镶。
2. Meta標(biāo)簽優(yōu)化：主要包括主題（Title)，網(wǎng)站描述(Description)浦旱，和關(guān)鍵詞（Keywords）九杂。還有一些其它的隱藏文字比如Author（作者）例隆，Category（目錄）镀层，Language（編碼語(yǔ)種）等。
3. 如何選取關(guān)鍵詞并在網(wǎng)頁(yè)中放置關(guān)鍵詞屋休，關(guān)鍵詞分析和選擇是SEO最重要的工作之一劫樟。首先要給網(wǎng)站確定主關(guān)鍵詞（一般在5個(gè)上下）织堂，然后針對(duì)這些關(guān)鍵詞進(jìn)行優(yōu)化易阳，包括關(guān)鍵詞密度（Density）闽烙，相關(guān)度（Relavancy）黑竞，突出性（Prominency）等等很魂。
4. 了解主要的搜索引擎，不同的搜索引擎對(duì)頁(yè)面的抓取和索引法挨、排序的規(guī)則都不一樣凡纳。
5. 按點(diǎn)擊付費(fèi)的搜索引擎里面也大有優(yōu)化和排名的學(xué)問(wèn)荐糜，你得學(xué)會(huì)用最少的廣告投入獲得最多的點(diǎn)擊暴氏。
6. 發(fā)外鏈答渔。
7. 合理的標(biāo)簽使用沼撕。
20. 有哪些方式可以對(duì)一個(gè)DOM設(shè)置它的CSS樣式？
1. 外部樣式表好芭，引入一個(gè)外部css文件舍败。
2. 內(nèi)部樣式表邻薯，將css代碼放在<head>標(biāo)簽內(nèi)部厕诡。
3. 內(nèi)聯(lián)樣式灵嫌，將css樣式直接定義在HTML元素內(nèi)部寿羞。
21. CSS中可以通過(guò)哪些屬性定義绪穆，使得一個(gè)DOM元素不顯示在瀏覽器可視范圍內(nèi)玖院？
1. display:none;（隱藏后不占位置）
2. visibility:hidden;（隱藏后依然占位置）
3. overflow:hidden;
4. 設(shè)置寬高為0
22. 行內(nèi)元素和塊級(jí)元素的具體區(qū)別是什么难菌？行內(nèi)元素的padding和margin可設(shè)置嗎郊酒？
塊級(jí)元素特性：總是獨(dú)占一行烫饼，表現(xiàn)為另起一行開始杠纵，而且其后的元素也必須另起一行顯示比藻；寬度(width)银亲、高度(height)务蝠、內(nèi)邊距(padding)和外邊距(margin)都可控制馏段；
行內(nèi)元素特性：和相鄰的行內(nèi)元素在同一行院喜；寬度(width)、高度(height)喷舀、內(nèi)邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變（也就是padding和margin的left和right是可以設(shè)置的）砍濒，就是里面文字或圖片的大小。
行內(nèi)塊級(jí)元素：<input> 硫麻、<img> 爸邢、<button> 、<texterea> 庶香、<label>
23. rgba()和opacity的透明效果有什么不同？
opacity作用于元素赶掖，以及元素內(nèi)的所有內(nèi)容的透明度感猛。
rgba()只作用于元素的顏色或其背景色。（設(shè)置rgba透明的元素的子元素不會(huì)繼承透明效果）
24. SASS奢赂、LESS是什么陪白？大家為什么要使用它們？
它們是CSS預(yù)處理器膳灶。它是CSS上的一種抽象層咱士。它們是一種特殊的語(yǔ)法/語(yǔ)言編譯成CSS。
例如Less是一種動(dòng)態(tài)樣式語(yǔ)言. 將CSS賦予了動(dòng)態(tài)語(yǔ)言的特性轧钓，如變量序厉，繼承，運(yùn)算毕箍， 函數(shù)弛房。LESS 既可以在客戶端上運(yùn)行 (支持IE 6+, Webkit, Firefox)，也可以在服務(wù)端運(yùn)行 (借助 Node.js)而柑。
為什么要使用它們文捶？
1. 結(jié)構(gòu)清晰荷逞，便于擴(kuò)展。
2. 可以方便地屏蔽瀏覽器私有語(yǔ)法差異粹排。這個(gè)不用多說(shuō)种远，封裝對(duì)瀏覽器語(yǔ)法差異的重復(fù)處理，減少無(wú)意義的機(jī)械勞動(dòng)顽耳。
3. 可以輕松實(shí)現(xiàn)多重繼承坠敷。
4. 完全兼容 CSS 代碼，可以方便地應(yīng)用到老項(xiàng)目中斧抱。LESS 只是在 CSS 語(yǔ)法上做了擴(kuò)展常拓，所以老的 CSS 代碼也可以與 LESS 代碼一同編譯。
25. CSS中l(wèi)ink和@import的區(qū)別是辉浦？
Link屬于html標(biāo)簽弄抬，而@import是CSS中提供的。
在頁(yè)面加載的時(shí)候宪郊，link會(huì)同時(shí)被加載掂恕，而@import引用的CSS會(huì)在頁(yè)面加載完成后才會(huì)加載引用的CSS。
@import只有在ie5以上才可以被識(shí)別弛槐，而link是html標(biāo)簽懊亡，不存在瀏覽器兼容性問(wèn)題。
Link引入樣式的權(quán)重大于@import的引用（@import是將引用的樣式導(dǎo)入到當(dāng)前的頁(yè)面中）
26. 為什么要初始化樣式乎串？
由于瀏覽器兼容的問(wèn)題店枣，不同的瀏覽器對(duì)標(biāo)簽的默認(rèn)樣式值不同，若不初始化會(huì)造成不同瀏覽器之間的顯示差異叹誉。初始化CSS會(huì)對(duì)搜索引擎優(yōu)化造成小影響鸯两。
27. HTML與XHTML有什么區(qū)別？
1. 所有的標(biāo)記都必須要有一個(gè)相應(yīng)的結(jié)束標(biāo)記
2. 所有標(biāo)簽的元素和屬性的名字都必須使用小寫
3. 所有的 XML 標(biāo)記都必須合理嵌套
4. 所有的屬性必須用引號(hào) "" 括起來(lái)
5. 把所有 < 和 & 特殊符號(hào)用編碼表示
6. 給所有屬性賦一個(gè)值
7. 不要在注釋內(nèi)容中使用 "--"
8. 圖片必須有說(shuō)明文字
28. 談?wù)勀銓?duì)web標(biāo)準(zhǔn)及w3c的理解與認(rèn)識(shí)长豁。
? ? ? ? 標(biāo)簽閉合钧唐，標(biāo)簽小寫，不亂嵌套匠襟，提高搜索機(jī)器人搜索幾率钝侠，使用外鏈css和js腳本，結(jié)構(gòu)行為表現(xiàn)的分離酸舍，頁(yè)面下載與加載速度更快帅韧，內(nèi)容能被更多的用戶和更廣泛的設(shè)備訪問(wèn)，更少的代碼和組件啃勉，容易維護(hù)忽舟，改版方便，不需要改變頁(yè)面內(nèi)容，提供打印版不需要復(fù)制頁(yè)面內(nèi)容萧诫，提高網(wǎng)站的易用性。
29. 行內(nèi)元素有哪些枝嘶，塊級(jí)元素有哪些帘饶，css的盒模型包括什么？
行內(nèi)元素：span input b u i s select
塊級(jí)元素：div p h1-h6 form ul
css盒模型：內(nèi)容content + 內(nèi)邊距padding + 邊框border + 外邊距 margin
30. 列出display的值群扶，說(shuō)明它們的作用及刻。position的值，relative和absolute的定位原點(diǎn)分別是竞阐？
display：
inline：按照行內(nèi)元素樣式顯示
block：按照塊級(jí)元素樣式顯示
inline-block：按照行內(nèi)塊級(jí)元素樣式顯示
none：隱藏元素
position：
static：靜態(tài)定位缴饭，默認(rèn)值，標(biāo)準(zhǔn)流中的元素都是靜態(tài)定位
relation：相對(duì)定位骆莹，相對(duì)于原來(lái)的位置移動(dòng)颗搂，依然占據(jù)著原來(lái)的位置
absolute：絕對(duì)定位，若元素沒(méi)有父元素幕垦，或者父元素沒(méi)有定位丢氢，則相對(duì)body定位，若父元素有定位（非static）先改，則相對(duì)父元素定位疚察，絕對(duì)定位的元素脫離標(biāo)準(zhǔn)流
fixed：固定定位，相對(duì)瀏覽器邊框定位仇奶，固定定位的元素也脫離標(biāo)準(zhǔn)流
31. 清除浮動(dòng)有哪些方法貌嫡？
1. 額外標(biāo)簽法（會(huì)增加標(biāo)簽，一般不用）：在浮動(dòng)的盒子之下再放一個(gè)標(biāo)簽该溯，在這個(gè)標(biāo)簽中使用clear:both岛抄，以此來(lái)清除浮動(dòng)。
2. 使用overflow:hidden屬性：找到浮動(dòng)盒子的父元素朗伶，給它添加overflow:hidden屬性弦撩，即可清除浮動(dòng)的影響。（一般也不用此方法清除浮動(dòng)论皆，因?yàn)橐绯龅脑貢?huì)被隱藏）
3. 使用偽元素清楚浮動(dòng)：
.clearfix:after{content:'';height:0;line-height:0;display: block;overflow: hidden;clear: both;}
Javascript方面：
1. 列舉你知道的強(qiáng)制類型轉(zhuǎn)換和隱式類型轉(zhuǎn)換益楼？
強(qiáng)制轉(zhuǎn)換：parseInt()、parseFloat()点晴、Number()感凤、String()、.toString()粒督、Boolean()
隱式轉(zhuǎn)換：加（例外：不能是算式中陪竿，而需要加在變量前）減乘除及取余，!!
2.split() 、join() 的區(qū)別?
前者是切割成數(shù)組的形式族跛，后者是將數(shù)組轉(zhuǎn)換成字符串闰挡。
3. 數(shù)組方法pop() push() unshift() shift()?
push()尾部添加、pop()尾部刪除礁哄、unshift()頭部添加长酗、shift()頭部刪除
4.call和apply的區(qū)別?
call：
語(yǔ)法：call(thisObj，Object1,Object2...)
定義：調(diào)用一個(gè)對(duì)象的一個(gè)方法桐绒，以另一個(gè)對(duì)象替換當(dāng)前對(duì)象夺脾。
說(shuō)明：call 方法可以用來(lái)代替另一個(gè)對(duì)象調(diào)用一個(gè)方法。call 方法可將一個(gè)函數(shù)的對(duì)象上下文從初始的上下文改變?yōu)橛?thisObj 指定的新對(duì)象茉继。如果沒(méi)有提供 thisObj 參數(shù)咧叭，那么 Global 對(duì)象被用作 thisObj。
apply：
語(yǔ)法：apply(thisObj烁竭，[argArray])
定義：應(yīng)用某一對(duì)象的一個(gè)方法菲茬，用另一個(gè)對(duì)象替換當(dāng)前對(duì)象。
說(shuō)明：如果 argArray 不是一個(gè)有效的數(shù)組或者不是 arguments 對(duì)象派撕，那么將導(dǎo)致一個(gè) TypeError生均。
如果沒(méi)有提供 argArray 和 thisObj 任何一個(gè)參數(shù)，那么 Global 對(duì)象將被用作 thisObj腥刹， 并且無(wú)法被傳遞任何參數(shù)马胧。
5.添加 刪除 替換 插入到某個(gè)節(jié)點(diǎn)的方法?
obj.appendChid()? 添加
obj.insertBefore()? 插入
obj.replaceChild()? 替換
obj.removeChild()? 刪除
6. javascript的本地對(duì)象，內(nèi)置對(duì)象和宿主對(duì)象分別是什么衔峰？
本地對(duì)象為array佩脊、obj、regexp 等可以new實(shí)例化
內(nèi)置對(duì)象為gload垫卤、Math 等不可以實(shí)例化的
宿主為瀏覽器自帶的document威彰、window 等
7.window.onload和document.ready的區(qū)別？
1. window.onload是在dom文檔樹加載完和所有文件加載完之后執(zhí)行一個(gè)函數(shù)document.ready原生中沒(méi)有這個(gè)方法穴肘，jquery中有$().ready(function)歇盼，在dom文檔樹加載完之后執(zhí)行一個(gè)函數(shù)（注意，這里面的文檔樹加載完不代表全部文件加載完）评抚。
2. $(document).ready要比window.onload先執(zhí)行豹缀。
3. window.onload只能出來(lái)一次，$(document).ready可以出現(xiàn)多次慨代。
8."=="和"==="的不同?
前者只比較值邢笙，會(huì)自動(dòng)轉(zhuǎn)換類型。
后者比較值和類型侍匙。
9.?javascript的同源策略氮惯？
一段腳本只能讀取來(lái)自于同一來(lái)源的窗口和文檔的屬性，這里的同一來(lái)源指的是主機(jī)名、協(xié)議和端口號(hào)的組合妇汗。
10.?JavaScript的數(shù)據(jù)類型都有哪些帘不？
基本數(shù)據(jù)類型：String、boolean杨箭、Number厌均、undefined、null
引用數(shù)據(jù)類型：Object(Array告唆、Date、RegExp晶密、Function)
11.?如何判斷某變量是否為數(shù)組數(shù)據(jù)類型擒悬？
方法一：判斷其是否具有“數(shù)組性質(zhì)”，如slice()方法稻艰《粒可自己給該變量定義slice方法，故有時(shí)會(huì)失效尊勿。
方法二：obj instanceof Array僧凤，在某些IE版本中不正確。
方法三：方法一二皆有漏洞元扔，在ECMA Script5中定義了新方法Array.isArray()躯保， 保證其兼容性。
12. 當(dāng)一個(gè)DOM節(jié)點(diǎn)被點(diǎn)擊時(shí)候澎语，我們希望能夠執(zhí)行一個(gè)函數(shù)途事，應(yīng)該怎么做？
直接在DOM里綁定事件：<div onclick='test()'></div>
在JS里通過(guò)onclick綁定：xxx.onclick=test()
通過(guò)事件添加進(jìn)行綁定：addEventListener(xxx,'click',test())
13.?Javascript的事件流模型都有什么擅羞？
“事件冒泡”：事件開始由最具體的元素接收尸变，然后逐級(jí)向上傳播。
“事件捕捉”：事件由最不具體的節(jié)點(diǎn)先接收减俏，然后逐級(jí)向下召烂，一直到最具體的。
“DOM事件流”：三個(gè)階段：事件捕捉娃承，目標(biāo)階段奏夫，事件冒泡。
14.?var numberArray=[3,6,2,4,1,5];
實(shí)現(xiàn)對(duì)該數(shù)組的倒排历筝，輸出[5,1,4,2,6,3]
numberArray.reverse();
實(shí)現(xiàn)對(duì)該數(shù)組的降序排列桶蛔，輸出[6,5,4,3,2,1]
numberArray.sort(function(a,b){returnb-a})
15. 閉包，閉包的作用漫谷？
閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)仔雷。閉包是將函數(shù)內(nèi)部和函數(shù)外部連接起來(lái)的橋梁。
作用 可以讀取函數(shù)內(nèi)部的變量 讓這些變量的值始終保持在內(nèi)存中。
缺點(diǎn) 1.閉包的缺點(diǎn)就是會(huì)增大內(nèi)存使用量碟婆，并且使用不當(dāng)容易造成內(nèi)存泄漏电抚。
2.如果不是因?yàn)槟承┨厥馊蝿?wù)而需要閉包，在沒(méi)有必要的情況下竖共，在其它函數(shù)中創(chuàng)建函數(shù)是不明智的蝙叛，因?yàn)殚]包對(duì)腳本性能具有負(fù)面影響，包括處理速度和內(nèi)存消耗公给。
16. 作用域借帘，作用域鏈？
作用域就是變量與函數(shù)的可訪問(wèn)范圍淌铐。作用域分為 全局作用域(所聲明的變量全局都可以訪問(wèn)),局部作用域(所聲明的變量只在其內(nèi)部可以訪問(wèn))肺然。
作用域鏈：當(dāng)我們?cè)谝粋€(gè)函數(shù)內(nèi)部訪問(wèn)當(dāng)前作用域內(nèi)不存在的變量時(shí)，就會(huì)逐層向外查找腿准，如果一直找不到就會(huì)報(bào)錯(cuò)际起。當(dāng)我們?cè)诰植孔饔糜蛑校{(diào)用外部變量時(shí)吐葱，就產(chǎn)生了作用域鏈街望。
17. 描述一次完整的http請(qǐng)求？
1.查詢NDS(域名解析),獲取域名對(duì)應(yīng)的IP地址
查詢?yōu)g覽器緩存
2.瀏覽器與服務(wù)器建立tcp鏈接（三次握手）弟跑。
第一次握手：客戶端發(fā)送一個(gè)請(qǐng)求連接灾前，服務(wù)器端只能確認(rèn)自己可以接受客戶端發(fā)送的報(bào)文段。
第二次握手： 服務(wù)端向客戶端發(fā)送一個(gè)鏈接孟辑，確認(rèn)客戶端收到自己發(fā)送的報(bào)文段豫柬。
第三次握手： 服務(wù)器端確認(rèn)客戶端收到了自己發(fā)送的報(bào)文段。
3.瀏覽器向服務(wù)器發(fā)送http請(qǐng)求(請(qǐng)求和傳輸數(shù)據(jù)）扑浸。
4.服務(wù)器接受到這個(gè)請(qǐng)求后烧给，根據(jù)路經(jīng)參數(shù)，經(jīng)過(guò)后端的一些處理生成html代碼返回給瀏覽器喝噪。
5.瀏覽器拿到完整的html頁(yè)面代碼開始解析和渲染础嫡，如果遇到外部的css或者js，圖片一樣的步驟酝惧。
6.瀏覽器根據(jù)拿到的資源對(duì)頁(yè)面進(jìn)行渲染榴鼎，把一個(gè)完整的頁(yè)面呈現(xiàn)出來(lái)。
18. 瀏覽器是如何渲染頁(yè)面的晚唇？
流程：解析html以及構(gòu)建dom樹 -> 構(gòu)建render樹 -> 布局render樹 -> 繪制render樹
1.構(gòu)建DOM樹： 渲染引擎解析HTML文檔巫财，首先將標(biāo)簽轉(zhuǎn)換成DOM樹中的DOM node(包括js生成的標(biāo)簽)生成內(nèi)容樹。
2.構(gòu)建渲染樹： 解析對(duì)應(yīng)的css樣式文件信息（包括js生成的樣式和外部的css）哩陕。
3.布局渲染樹：從根節(jié)點(diǎn)遞歸調(diào)用平项，計(jì)算每一個(gè)元素的大小赫舒，位置等。給出每個(gè)節(jié)點(diǎn)所在的屏幕的精準(zhǔn)位置闽瓢。
4.繪制渲染樹：遍歷渲染樹接癌，使用UI后端層來(lái)繪制每一個(gè)節(jié)點(diǎn)。
Vue.js? 方面：
1.Vue的核心思想：
組件化開發(fā)和數(shù)據(jù)驅(qū)動(dòng)扣讼。
2.什么是vuex?有什么作用缺猛？
vuex是vue的狀態(tài)管理工具。
作用：項(xiàng)目數(shù)據(jù)狀態(tài)的集中管理椭符，復(fù)雜組件的數(shù)據(jù)通信問(wèn)題荔燎。
3.Vuex的核心屬性：
State:存儲(chǔ)數(shù)據(jù)狀態(tài)的地方，但是不可以直接修改里面的數(shù)據(jù)销钝。
Mutations: mutations定義的方法動(dòng)態(tài)修改vuex的store中的狀態(tài)或數(shù)據(jù)有咨。
Actions:簡(jiǎn)單的說(shuō)就是異步操作數(shù)據(jù)，view層通過(guò)store.dispatch來(lái)分發(fā)action曙搬。
Getters:類似vue的計(jì)算屬性，主要用來(lái)過(guò)濾數(shù)據(jù)鸽嫂。
Modules:模塊化管理 ??項(xiàng)目特別復(fù)雜的時(shí)候纵装，可以讓每一個(gè)模塊擁有自己的state,mutation,action,getters，使得結(jié)構(gòu)非常清晰据某，方便管理橡娄。
4.vuex的工作流程？
在vue組件里面癣籽，通過(guò)dispatch來(lái)觸發(fā)actions提交修改數(shù)據(jù)的操作
然后再通過(guò)actions的commit來(lái)觸發(fā)mutations來(lái)修改數(shù)據(jù)
Mutations接收到commit的請(qǐng)求挽唉，就會(huì)自動(dòng)通過(guò)mutate來(lái)修改state里面的數(shù)據(jù)
最后由store觸發(fā)每一個(gè)調(diào)用它的組建的更新。
5.Vue的生命周期筷狼？
BeforeCreated(實(shí)例創(chuàng)建前)：此時(shí)的vue實(shí)例還沒(méi)有掛載元素$el,數(shù)據(jù)對(duì)象data也是undefined瓶籽。
Created(實(shí)例創(chuàng)建完成)：vue實(shí)例的數(shù)據(jù)對(duì)象data有了，但是$el還沒(méi)有埂材。
beforeMount(實(shí)例載入前)：vue的實(shí)例的$el和data都初始化了塑顺，但還是掛載在之前的虛擬DOM節(jié)點(diǎn)上，data.message還沒(méi)替換俏险。
Mounted(實(shí)力載入完成)：vue實(shí)例掛載完成严拒，data.message成功渲染。
beforeUpdate(實(shí)例更新前)：data發(fā)生變化前竖独。
Updated(實(shí)例更新前)：data發(fā)生變化后裤唠。
BeforeDestory(實(shí)例銷毀前)：在實(shí)例銷毀之前調(diào)用，實(shí)例仍然可用莹痢。
Destory(實(shí)例銷毀完成)：所有的監(jiān)聽事件會(huì)被消除种蘸，所有的子實(shí)例也會(huì)被銷毀墓赴。
6.vue常用的指令？
V-model ??v-html ??v-text ?v-for ?v-show ?v-if ?v-on
7.V-if和v-show的區(qū)別劈彪？
V-if是通過(guò)添加和刪除DOM節(jié)點(diǎn)來(lái)控制顯示隱藏竣蹦，v-show是通過(guò)操作css的display屬性來(lái)控制顯示隱藏；
V-if擁有更高的切換成本沧奴，v-show擁有更高的渲染成本痘括。
頻繁切換的時(shí)候使用v-show,不經(jīng)常切換就使用v-if.
8.V-for和v-if的優(yōu)先級(jí)？
當(dāng)它們處于同一節(jié)點(diǎn)滔吠，v-for的優(yōu)先級(jí)比v-if更高纲菌，這意味著v-if將分別重復(fù)運(yùn)行于每個(gè)v-for的循環(huán)中。
9.MVC ??MVP ??MVVM的區(qū)別疮绷？
MVC: MVC之間的數(shù)據(jù)通信都是單向的翰舌。View(視圖層)發(fā)送指令到controller(控制層)，完成業(yè)務(wù)邏輯后冬骚，要求Model(模型層)改變狀態(tài)椅贱，匠心的數(shù)據(jù)發(fā)送到(view)視圖層，用戶得到反饋只冻。
MVP:在MVP中庇麦，view和model之間沒(méi)有任何通信關(guān)系，所有的通信和業(yè)務(wù)邏輯都放在presenter層中喜德。View層發(fā)送指令到presenter層山橄，presenter層處理業(yè)務(wù)邏輯，要求model層改變狀態(tài)舍悯，完成狀態(tài)修改之后航棱，發(fā)送指令到presenter層，之后再通知view層做出改變萌衬。
MVVM: Model專門用來(lái)處理數(shù)據(jù)模型饮醇。View專門用來(lái)處理用戶視圖，ViewModel用來(lái)使view和model雙向綁定秕豫，view的任何變化都會(huì)通知ViewModel,而model的任何變化也會(huì)通知ViewModel驳阎，無(wú)論哪一項(xiàng)發(fā)生改變，都會(huì)使對(duì)應(yīng)的視圖/數(shù)據(jù)模型同時(shí)發(fā)生改變馁蒂。
11.什么是axios?
就是請(qǐng)求后臺(tái)資源的模塊呵晚，前臺(tái)通過(guò)它獲取后臺(tái)數(shù)據(jù)，類似ajax交互沫屡。
13.路由傳參的方法饵隙？路由傳參方法
1. 字符串拼接 ： 路由后面直接拼接要傳遞的參數(shù)，用this.$rote.params 接收沮脖。
2. path和query：path后面跟要跳轉(zhuǎn)的路由金矛，query后邊跟要傳遞參數(shù)的對(duì)象 用 this.$route.query 接收芯急。
3. name和params：name后面跟要跳轉(zhuǎn)路由的名稱，params后面跟傳遞參數(shù)的對(duì)象驶俊，用this.$route.params接收娶耍。
14.Vuex中actions和mutations的區(qū)別？
Mutations的更改是同步更改饼酿，用于用戶執(zhí)行直接數(shù)據(jù)更改榕酒，this.$store.commit(‘名’)觸發(fā)。
Actions的更改是異步操作故俐，用于需要與后端交互的數(shù)據(jù)更改,this.$store.dispath(“名”)觸發(fā)想鹰。
注意：
1)：定義actions方法創(chuàng)建一個(gè)更改函數(shù)時(shí)，這個(gè)函數(shù)必須攜帶一個(gè)context參數(shù)药版，用于觸發(fā)mutations方法辑舷，context.commit(‘修改函數(shù)名’ , ’異步請(qǐng)求值’)；
2)：mutations第一個(gè)參數(shù)必須傳入state槽片，第二個(gè)參數(shù)是新值何缓。
15.漸進(jìn)式框架的理解？
主張最少还栓，沒(méi)有多做職責(zé)之外的事 我的理解就是 用什么就引入什么碌廓，沒(méi)有硬性規(guī)定。
項(xiàng)目介紹1
項(xiàng)目介紹：
項(xiàng)目背景：
商品分類怎么實(shí)現(xiàn)的;
單選多選全選怎么實(shí)現(xiàn)的：
加入購(gòu)物車怎么實(shí)現(xiàn)的;
登錄注冊(cè)怎么實(shí)現(xiàn);
登錄流程：
? ? ? ? 當(dāng)我點(diǎn)擊登錄的時(shí)候蝙云，我先判斷我輸入的值是否符合規(guī)則氓皱，如果符合路召，就把參數(shù)拼接到接口上勃刨，然后請(qǐng)求，后臺(tái)會(huì)返回一個(gè)token值股淡，我把token放在本地存儲(chǔ)中身隐，在全局路由守衛(wèi)中，當(dāng)我要訪問(wèn)一個(gè)需要登錄才可以進(jìn)入的路由的時(shí)候唯灵，我就判斷本地存儲(chǔ)中有沒(méi)有這個(gè)token值贾铝，如果有，就進(jìn)入這個(gè)路由埠帕，如果沒(méi)有垢揩，就返回登錄頁(yè)面登錄。
Loading動(dòng)畫怎么實(shí)現(xiàn)：
? ? ? ? 用axios攔截器實(shí)現(xiàn)loading動(dòng)畫效果 首先新建一個(gè)loading組件敛瓷，里面寫一些動(dòng)畫效果叁巨，然后在vuex里面寫一個(gè)狀態(tài)來(lái)控制我的loading動(dòng)畫組件的顯示隱藏枯跑，然后在全局main.js中配置axios攔截器恼除，分別定義一個(gè)請(qǐng)求攔截器和響應(yīng)攔截器璃谨，在請(qǐng)求數(shù)據(jù)時(shí)執(zhí)行請(qǐng)求攔截器芽狗，改變我vuex里面定義的狀態(tài)，讓loading動(dòng)畫顯示庶橱，反之贮勃，數(shù)據(jù)請(qǐng)求到之后，隱藏loading動(dòng)畫即可苏章。
圖片懶加載怎么實(shí)現(xiàn)：
? ? ? ? 我們先不給<img>設(shè)置src寂嘉，把圖片真正的URL放在另一個(gè)屬性data-src中，在需要的時(shí)候也就是圖片進(jìn)入可視區(qū)域的之前布近，將URL取出放到src中垫释。
移動(dòng)端的性能優(yōu)化：
? ? ? ? ?首屏加載和按需加載，懶加載 資源預(yù)加載 圖片壓縮處理撑瞧，使用base64內(nèi)嵌圖片 合理緩存dom對(duì)象 使用touchstart代替click（click 300毫秒的延遲） 利用transform:translateZ(0)棵譬，開啟硬件GUP加速 不濫用web字體，不濫用float（布局計(jì)算消耗性能）预伺，減少font-size聲明 使用viewport固定屏幕渲染订咸，加速頁(yè)面渲染內(nèi)容 盡量使用事件代理，避免直接事件綁定酬诀。
項(xiàng)目介紹2
項(xiàng)目介紹：
項(xiàng)目背景：
后臺(tái)權(quán)限管理是怎么實(shí)現(xiàn)的：
? ? ? ?定義兩張路由表脏嚷，一張是靜態(tài)路由表（無(wú)需權(quán)限的使用），另一張是權(quán)限路由表（和后臺(tái)返回的權(quán)限進(jìn)行匹配使用）瞒御。用戶登錄父叙，判斷登錄是否成功，登錄成功后判斷是否獲取用戶權(quán)限列表肴裙，獲取到后趾唱，將權(quán)限數(shù)據(jù)存儲(chǔ)到Vuex中。用Vuex中的權(quán)限數(shù)據(jù)和定義好的需要訪問(wèn)權(quán)限的路由表進(jìn)行比對(duì)蜻懦。比對(duì)完后生成當(dāng)前賬戶對(duì)應(yīng)的權(quán)限路由表甜癞。通過(guò)addRouters方法動(dòng)態(tài)添加路由規(guī)則，生成可訪問(wèn)的側(cè)邊欄菜單宛乃。
跨域問(wèn)題悠咱，怎么解決的：
jsonp跨域原理：?jsonp是請(qǐng)求之后 后臺(tái)會(huì)封裝好的一段json，并且把數(shù)據(jù)放在一個(gè)callback回調(diào)函數(shù)中征炼，并返回一個(gè)js文件析既，動(dòng)態(tài)的引入這個(gè)文件，調(diào)用這個(gè)callback回調(diào)函數(shù)谆奥，進(jìn)行數(shù)據(jù)訪問(wèn)眼坏。
反向代理跨域：客戶端發(fā)送請(qǐng)求時(shí)不直接到服務(wù)器而是先到代理的中間層在這里將localhost：8080的這個(gè)域名裝換為www.njc.com，再將請(qǐng)求發(fā)送到服務(wù)器這樣在服務(wù)器端收到的請(qǐng)求就是使用的www.njc.com域名同理雄右，當(dāng)服務(wù)器返回?cái)?shù)據(jù)的時(shí)候空骚，也是先到代理的中間層將www.njc.com轉(zhuǎn)換成localhos：8080纺讲；這樣在客戶端也是在相同域名下訪問(wèn)的了。
