初中級(jí)前端面試題

轉(zhuǎn)載地址:https://juejin.cn/post/6844903950500495373#comment

從前端學(xué)習(xí)到找一份合適的工作，大大小小的面試必不可少，所以我對(duì)初級(jí)前端面試題進(jìn)行了初步整理，也方便自己查閱，也希望對(duì)小伙伴們有所幫助！

HTML

HTML語(yǔ)義化

HTML語(yǔ)義化就是讓頁(yè)面內(nèi)容結(jié)構(gòu)化，它有如下優(yōu)點(diǎn)

1、易于用戶閱讀，樣式丟失的時(shí)候能讓頁(yè)面呈現(xiàn)清晰的結(jié)構(gòu)。 2、有利于SEO，搜索引擎根據(jù)標(biāo)簽來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重。 3、方便其他設(shè)備解析，如盲人閱讀器根據(jù)語(yǔ)義渲染網(wǎng)頁(yè) 4、有利于開(kāi)發(fā)和維護(hù)，語(yǔ)義化更具可讀性，代碼更好維護(hù)，與CSS3關(guān)系更和諧 復(fù)制代碼

如：

<header>代表頭部 <nav>代表超鏈接區(qū)域 <main>定義文檔主要內(nèi)容 <article>可以表示文章、博客等內(nèi)容 <aside>通常表示側(cè)邊欄或嵌入內(nèi)容 <footer>代表尾部 復(fù)制代碼

HTML5新標(biāo)簽

有<header>、<footer>、<aside>、<nav>、<video>、<audio>、<canvas>等... 復(fù)制代碼

CSS

盒子模型

盒模型分為標(biāo)準(zhǔn)盒模型和怪異盒模型(IE模型)

box-sizing：content-box //標(biāo)準(zhǔn)盒模型 box-sizing：border-box //怪異盒模型 復(fù)制代碼

標(biāo)準(zhǔn)盒模型：元素的寬度等于style里的width+padding+border寬度

如下代碼，整個(gè)寬高還是120px

div{box-sizing: content-box;margin: 10px;width: 100px;height: 100px;padding: 10px; } 復(fù)制代碼

怪異盒模型：元素寬度等于style里的width寬度

如下代碼，整個(gè)寬高還是100px

div{box-sizing: border-box;margin: 10px;width: 100px;height: 100px;padding: 10px; } 復(fù)制代碼

注意：如果你在設(shè)計(jì)頁(yè)面中，發(fā)現(xiàn)內(nèi)容區(qū)被撐爆了，那么就先檢查一下border-sizing是什么，最好在引用reset.css的時(shí)候，就對(duì)border-sizing進(jìn)行統(tǒng)一設(shè)置，方便管理

rem與em的區(qū)別

rem是根據(jù)根的font-size變化，而em是根據(jù)父級(jí)的font-size變化

rem：相對(duì)于根元素html的font-size，假如html為font-size：12px，那么，在其當(dāng)中的div設(shè)置為font-size：2rem,就是當(dāng)中的div為24px

em：相對(duì)于父元素計(jì)算，假如某個(gè)p元素為font-size:12px,在它內(nèi)部有個(gè)span標(biāo)簽，設(shè)置font-size：2em,那么，這時(shí)候的span字體大小為：12*2=24px

CSS選擇器

css常用選擇器

通配符：* ID選擇器：#ID 類選擇器：.class 元素選擇器：p、a 等 后代選擇器：p span、div a 等 偽類選擇器：a:hover 等 屬性選擇器：input[type="text"] 等 復(fù)制代碼

css選擇器權(quán)重

!important -> 行內(nèi)樣式 -> #id -> .class -> 元素和偽元素 -> * -> 繼承 -> 默認(rèn)

CSS新特性

transition：過(guò)渡 transform：旋轉(zhuǎn)、縮放、移動(dòng)或者傾斜 animation：動(dòng)畫(huà) gradient：漸變 shadow：陰影 border-radius：圓角 復(fù)制代碼

行內(nèi)元素和塊級(jí)元素

行內(nèi)元素（display: inline）

寬度和高度是由內(nèi)容決定，與其他元素共占一行的元素，我們將其叫行內(nèi)元素，例如：<span> 、 <i> 、 <a>等

塊級(jí)元素（display: block)

默認(rèn)寬度由父容器決定，默認(rèn)高度由內(nèi)容決定，獨(dú)占一行并且可以設(shè)置寬高的元素，我們將其叫做塊級(jí)元素，例如：<p> 、<div> 、<ul>等

在平時(shí)，我們經(jīng)常使用CSS的display: inline-block，使它們擁有更多的狀態(tài)

絕對(duì)定位和相對(duì)定位的區(qū)別

position: absolute
絕對(duì)定位：是相對(duì)于元素最近的已定位的祖先元素

position: relative
相對(duì)定位：相對(duì)定位是相對(duì)于元素在文檔中的初始位置

Flex布局

juejin.im/post/684490…

BFC

什么是BFC?

BFC格式化上下文，它是一個(gè)獨(dú)立的渲染區(qū)域，讓處于 BFC 內(nèi)部的元素和外部的元素相互隔離，使內(nèi)外元素的定位不會(huì)相互影響

如何產(chǎn)生BFC?

display: inline-block

position: absolute/fixed

BFC作用

BFC最大的一個(gè)作用就是：在頁(yè)面上有一個(gè)獨(dú)立隔離容器，容器內(nèi)的元素和容器外的元素布局不會(huì)相互影響

解決上外邊距重疊;重疊的兩個(gè)box都開(kāi)啟bfc; 解決浮動(dòng)引起高度塌陷;容器盒子開(kāi)啟bfc 解決文字環(huán)繞圖片;左邊圖片div,右邊文字容器p,將p容器開(kāi)啟bfc 復(fù)制代碼

水平垂直居中

Flex布局

display: flex //設(shè)置Flex模式 flex-direction: column //決定元素是橫排還是豎著排 flex-wrap: wrap //決定元素?fù)Q行格式 justify-content: space-between //同一排下對(duì)齊方式，空格如何隔開(kāi)各個(gè)元素 align-items: center //同一排下元素如何對(duì)齊 align-content: space-between //多行對(duì)齊方式 復(fù)制代碼

水平居中

行內(nèi)元素：display: inline-block; 塊級(jí)元素：margin: 0 auto; Flex: display: flex; justify-content: center 復(fù)制代碼

垂直居中

行高 = 元素高：line-height: height flex: display: flex; align-item: center 復(fù)制代碼

less,sass,styus三者的區(qū)別

變量

Sass聲明變量必須是『$』開(kāi)頭，后面緊跟變量名和變量值，而且變量名和變量值需要使用冒號(hào)：分隔開(kāi)。

Less 聲明變量用『@』開(kāi)頭，其余等同 Sass。

Stylus 中聲明變量沒(méi)有任何限定，結(jié)尾的分號(hào)可有可無(wú)，但變量名和變量值之間必須要有『等號(hào)』。

作用域

Sass：三者最差，不存在全局變量的概念

Less：最近的一次更新的變量有效，并且會(huì)作用于全部的引用！

Stylus：Sass 的處理方式和 Stylus 相同，變量值輸出時(shí)根據(jù)之前最近的一次定義計(jì)算，每次引用最近的定義有效；

嵌套

三種 css 預(yù)編譯器的「選擇器嵌套」在使用上來(lái)說(shuō)沒(méi)有任何區(qū)別，甚至連引用父級(jí)選擇器的標(biāo)記 & 也相同

繼承

Sass和Stylus的繼承非常像，能把一個(gè)選擇器的所有樣式繼承到另一個(gè)選擇器上。使用『@extend』開(kāi)始，后面接被繼承的選擇器。Stylus 的繼承方式來(lái)自 Sass，兩者如出一轍。 Less 則又「獨(dú)樹(shù)一幟」地用偽類來(lái)描述繼承關(guān)系；

導(dǎo)入@Import

Sass 中只能在使用 url() 表達(dá)式引入時(shí)進(jìn)行變量插值

$device: mobile; @import url(styles.#{$device}.css); 復(fù)制代碼

Less 中可以在字符串中進(jìn)行插值

@device: mobile; @import "styles.@{device}.css"; 復(fù)制代碼

Stylus 中在這里插值不管用，但是可以利用其字符串拼接的功能實(shí)現(xiàn)

device = "mobile" @import "styles." + device + ".css" 復(fù)制代碼

總結(jié)

Sass和Less語(yǔ)法嚴(yán)謹(jǐn)、Stylus相對(duì)自由。因?yàn)長(zhǎng)ess長(zhǎng)得更像 css，所以它可能學(xué)習(xí)起來(lái)更容易。

Sass 和 Compass、Stylus 和 Nib 都是好基友。

Sass 和 Stylus 都具有類語(yǔ)言的邏輯方式處理：條件、循環(huán)等，而 Less 需要通過(guò)When等關(guān)鍵詞模擬這些功能，這方面 Less 比不上 Sass 和 Stylus

Less 在豐富性以及特色上都不及 Sass 和 Stylus，若不是因?yàn)?Bootstrap 引入了 Less，可能它不會(huì)像現(xiàn)在這樣被廣泛應(yīng)用（個(gè)人愚見(jiàn)）

link與@import區(qū)別與選擇

<style type="text/css">@import url(CSS文件路徑地址); </style> <link href="CSSurl路徑" rel="stylesheet" type="text/css" / 復(fù)制代碼

link功能較多，可以定義 RSS，定義 Rel 等作用，而@import只能用于加載 css；

當(dāng)解析到link時(shí)，頁(yè)面會(huì)同步加載所引的 css，而@import所引用的 css 會(huì)等到頁(yè)面加載完才被加載；

@import需要 IE5 以上才能使用；

link可以使用 js 動(dòng)態(tài)引入，@import不行

多行元素的文本省略號(hào)

overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical 復(fù)制代碼

JavaScript

JS的幾條基本規(guī)范

1、不要在同一行聲明多個(gè)變量 2、請(qǐng)使用===/！==來(lái)比較true/false或者數(shù)值 3、使用對(duì)象字面量替代new Array這種形式 4、不要使用全局變量 5、Switch語(yǔ)句必須帶有default分支 6、函數(shù)不應(yīng)該有時(shí)候有返回值，有時(shí)候沒(méi)有返回值 7、For循環(huán)必須使用大括號(hào) 8、IF語(yǔ)句必須使用大括號(hào) 9、for-in循環(huán)中的變量 應(yīng)該使用var關(guān)鍵字明確限定作用域，從而避免作用域污染

復(fù)制代碼

JS引用方法

行內(nèi)引入

<body><input type="button" οnclick="alert('行內(nèi)引入')" value="按鈕"/><button οnclick="alert(123)">點(diǎn)擊我</button> </body> 復(fù)制代碼

內(nèi)部引入

<script>window.onload = function() {alert("js 內(nèi)部引入！");} </script> 復(fù)制代碼

外部引入

<body><div></div>

<script type=“text/javascript” src="./js/index.js"></script>
</body>
復(fù)制代碼

注意

1，不推薦寫(xiě)行內(nèi)或者HTML中插入<script>,因?yàn)闉g覽器解析順序緣故，如果解析到死循環(huán)之類的JS代碼，會(huì)卡住頁(yè)面 2，建議在onload事件之后，即等HTML、CSS渲染完畢再執(zhí)行代碼 復(fù)制代碼

JS的基本數(shù)據(jù)類型

Undefined、Null、Boolean、Number、String、新增:Symbol

數(shù)組操作

在 JavaScript 中，用得較多的之一無(wú)疑是數(shù)組操作，這里過(guò)一遍數(shù)組的一些用法

map: 遍歷數(shù)組，返回回調(diào)返回值組成的新數(shù)組 forEach: 無(wú)法break，可以用try/catch中throw new Error來(lái)停止 filter: 過(guò)濾 some: 有一項(xiàng)返回true，則整體為true every: 有一項(xiàng)返回false，則整體為false join: 通過(guò)指定連接符生成字符串 push / pop: 末尾推入和彈出，改變?cè)瓟?shù)組， 返回推入/彈出項(xiàng)【有誤】 unshift / shift: 頭部推入和彈出，改變?cè)瓟?shù)組，返回操作項(xiàng)【有誤】 sort(fn) / reverse: 排序與反轉(zhuǎn)，改變?cè)瓟?shù)組 concat: 連接數(shù)組，不影響原數(shù)組， 淺拷貝 slice(start, end): 返回截?cái)嗪蟮男聰?shù)組，不改變?cè)瓟?shù)組 splice(start, number, value...): 返回刪除元素組成的數(shù)組，value 為插入項(xiàng)，改變?cè)瓟?shù)組 indexOf / lastIndexOf(value, fromIndex): 查找數(shù)組項(xiàng)，返回對(duì)應(yīng)的下標(biāo) reduce / reduceRight(fn(prev, cur)， defaultPrev): 兩兩執(zhí)行，prev 為上次化簡(jiǎn)函數(shù)的return值，cur 為當(dāng)前值(從第二項(xiàng)開(kāi)始) 復(fù)制代碼

JS有哪些內(nèi)置對(duì)象

Object是JavaScript中所有對(duì)象的父對(duì)象

數(shù)據(jù)封裝對(duì)象：Object、Array、Boolean、Number和String
其他對(duì)象：Function、Arguments、Math、Date、RegExp、Error
復(fù)制代碼

get請(qǐng)求傳參長(zhǎng)度的誤區(qū)

誤區(qū)：我們經(jīng)常說(shuō)get請(qǐng)求參數(shù)的大小存在限制，而post請(qǐng)求的參數(shù)大小是無(wú)限制的

實(shí)際上HTTP 協(xié)議從未規(guī)定 GET/POST 的請(qǐng)求長(zhǎng)度限制是多少。對(duì)get請(qǐng)求參數(shù)的限制是來(lái)源與瀏覽器或web服務(wù)器，瀏覽器或web服務(wù)器限制了url的長(zhǎng)度。為了明確這個(gè)概念，我們必須再次強(qiáng)調(diào)下面幾點(diǎn):

1、HTTP 協(xié)議 未規(guī)定 GET 和POST的長(zhǎng)度限制

2、GET的最大長(zhǎng)度顯示是因?yàn)?瀏覽器和 web服務(wù)器限制了 URI的長(zhǎng)度

3、不同的瀏覽器和WEB服務(wù)器，限制的最大長(zhǎng)度不一樣

4、要支持IE，則最大長(zhǎng)度為2083byte，若只支持Chrome，則最大長(zhǎng)度 8182byte

補(bǔ)充get和post請(qǐng)求在緩存方面的區(qū)別

• get請(qǐng)求類似于查找的過(guò)程，用戶獲取數(shù)據(jù)，可以不用每次都與數(shù)據(jù)庫(kù)連接，所以可以使用緩存。

• post不同，post做的一般是修改和刪除的工作，所以必須與數(shù)據(jù)庫(kù)交互，所以不能使用緩存。因此get請(qǐng)求適合于請(qǐng)求緩存。

閉包

什么是閉包？

函數(shù)A 里面包含了 函數(shù)B，而 函數(shù)B 里面使用了 函數(shù)A 的變量，那么 函數(shù)B 被稱為閉包。

又或者：閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)

function A() {var a = 1;function B() {console.log(a);}return B(); } 復(fù)制代碼

閉包的特征

• 函數(shù)內(nèi)再嵌套函數(shù)
• 內(nèi)部函數(shù)可以引用外層的參數(shù)和變量
• 參數(shù)和變量不會(huì)被垃圾回收制回收

對(duì)閉包的理解

使用閉包主要是為了設(shè)計(jì)私有的方法和變量。閉包的優(yōu)點(diǎn)是可以避免全局變量的污染，缺點(diǎn)是閉包會(huì)常駐內(nèi)存，會(huì)增大內(nèi)存使用量，使用不當(dāng)很容易造成內(nèi)存泄露。在js中，函數(shù)即閉包，只有函數(shù)才會(huì)產(chǎn)生作用域的概念

閉包 的最大用處有兩個(gè)，一個(gè)是可以讀取函數(shù)內(nèi)部的變量，另一個(gè)就是讓這些變量始終保持在內(nèi)存中

閉包的另一個(gè)用處，是封裝對(duì)象的私有屬性和私有方法

閉包的好處

能夠?qū)崿F(xiàn)封裝和緩存等

閉包的壞處

就是消耗內(nèi)存、不正當(dāng)使用會(huì)造成內(nèi)存溢出的問(wèn)題

使用閉包的注意點(diǎn)

由于閉包會(huì)使得函數(shù)中的變量都被保存在內(nèi)存中，內(nèi)存消耗很大，所以不能濫用閉包，否則會(huì)造成網(wǎng)頁(yè)的性能問(wèn)題，在IE中可能導(dǎo)致內(nèi)存泄露

解決方法是：在退出函數(shù)之前，將不使用的局部變量全部刪除

閉包的經(jīng)典問(wèn)題

for(var i = 0; i < 3; i++) {setTimeout(function() {console.log(i);}, 1000); } 復(fù)制代碼

這段代碼輸出

答案：3個(gè)3 解析：首先，for 循環(huán)是同步代碼，先執(zhí)行三遍 for，i 變成了 3；然后，再執(zhí)行異步代碼 setTimeout，這時(shí)候輸出的 i，只能是 3 個(gè) 3 了 復(fù)制代碼

有什么辦法依次輸出0 1 2

第一種方法

使用let

for(let i = 0; i < 3; i++) {setTimeout(function() {console.log(i);}, 1000); } 復(fù)制代碼

在這里，每個(gè) let 和代碼塊結(jié)合起來(lái)形成塊級(jí)作用域，當(dāng) setTimeout() 打印時(shí)，會(huì)尋找最近的塊級(jí)作用域中的 i，所以依次打印出 0 1 2

如果這樣不明白，我們可以執(zhí)行下邊這段代碼

for(let i = 0; i < 3; i++) {console.log("定時(shí)器外部：" + i);setTimeout(function() {console.log(i);}, 1000); } 復(fù)制代碼

此時(shí)瀏覽器依次輸出的是：

定時(shí)器外部：0 定時(shí)器外部：1 定時(shí)器外部：2 0 1 2 復(fù)制代碼

即代碼還是先執(zhí)行 for 循環(huán)，但是當(dāng) for 結(jié)束執(zhí)行到了 setTimeout 的時(shí)候，它會(huì)做個(gè)標(biāo)記，這樣到了 console.log(i) 中，i 就能找到這個(gè)塊中最近的變量定義

第二種方法

使用立即執(zhí)行函數(shù)解決閉包的問(wèn)題

for(let i = 0; i < 3; i++) {(function(i){setTimeout(function() {console.log(i);}, 1000);})(i) } 復(fù)制代碼

JS作用域及作用域鏈

作用域

在JavaScript中，作用域分為 全局作用域 和 函數(shù)作用域

全局作用域

代碼在程序的任何地方都能被訪問(wèn)，window 對(duì)象的內(nèi)置屬性都擁有全局作用域

函數(shù)作用域

在固定的代碼片段才能被訪問(wèn)

例子：

作用域有上下級(jí)關(guān)系，上下級(jí)關(guān)系的確定就看函數(shù)是在哪個(gè)作用域下創(chuàng)建的。如上，fn作用域下創(chuàng)建了bar函數(shù)，那么“fn作用域”就是“bar作用域”的上級(jí)。

作用域最大的用處就是隔離變量，不同作用域下同名變量不會(huì)有沖突。

變量取值：到創(chuàng)建 這個(gè)變量 的函數(shù)的作用域中取值

作用域鏈

一般情況下，變量取值到 創(chuàng)建 這個(gè)變量 的函數(shù)的作用域中取值。

但是如果在當(dāng)前作用域中沒(méi)有查到值，就會(huì)向上級(jí)作用域去查，直到查到全局作用域，這么一個(gè)查找過(guò)程形成的鏈條就叫做作用域鏈

原型和原型鏈

原型和原型鏈的概念

每個(gè)對(duì)象都會(huì)在其內(nèi)部初始化一個(gè)屬性，就是prototype(原型)，當(dāng)我們?cè)L問(wèn)一個(gè)對(duì)象的屬性時(shí)，如果這個(gè)對(duì)象內(nèi)部不存在這個(gè)屬性，那么他就會(huì)去prototype里找這個(gè)屬性，這個(gè)prototype又會(huì)有自己的prototype，于是就這樣一直找下去

原型和原型鏈的關(guān)系

instance.constructor.prototype = instance.__proto__ 復(fù)制代碼

原型和原型鏈的特點(diǎn)

JavaScript對(duì)象是通過(guò)引用來(lái)傳遞的，我們創(chuàng)建的每個(gè)新對(duì)象實(shí)體中并沒(méi)有一份屬于自己的原型副本。當(dāng)我們修改原型時(shí)，與之相關(guān)的對(duì)象也會(huì)繼承這一改變

當(dāng)我們需要一個(gè)屬性的時(shí)，Javascript引擎會(huì)先看當(dāng)前對(duì)象中是否有這個(gè)屬性， 如果沒(méi)有的

就會(huì)查找他的Prototype對(duì)象是否有這個(gè)屬性，如此遞推下去，一直檢索到 Object 內(nèi)建對(duì)象

組件化和模塊化

組件化

為什么要組件化開(kāi)發(fā)

有時(shí)候頁(yè)面代碼量太大，邏輯太多或者同一個(gè)功能組件在許多頁(yè)面均有使用，維護(hù)起來(lái)相當(dāng)復(fù)雜，這個(gè)時(shí)候，就需要組件化開(kāi)發(fā)來(lái)進(jìn)行功能拆分、組件封裝，已達(dá)到組件通用性，增強(qiáng)代碼可讀性，維護(hù)成本也能大大降低

組件化開(kāi)發(fā)的優(yōu)點(diǎn)

很大程度上降低系統(tǒng)各個(gè)功能的耦合性，并且提高了功能內(nèi)部的聚合性。這對(duì)前端工程化及降低代碼的維護(hù)來(lái)說(shuō)，是有很大的好處的，耦合性的降低，提高了系統(tǒng)的伸展性，降低了開(kāi)發(fā)的復(fù)雜度，提升開(kāi)發(fā)效率，降低開(kāi)發(fā)成本

組件化開(kāi)發(fā)的原則

• 專一

• 可配置性

• 標(biāo)準(zhǔn)性

• 復(fù)用性

• 可維護(hù)性

模塊化

為什么要模塊化

早期的javascript版本沒(méi)有塊級(jí)作用域、沒(méi)有類、沒(méi)有包、也沒(méi)有模塊，這樣會(huì)帶來(lái)一些問(wèn)題，如復(fù)用、依賴、沖突、代碼組織混亂等，隨著前端的膨脹，模塊化顯得非常迫切

模塊化的好處

• 避免變量污染，命名沖突

• 提高代碼復(fù)用率

• 提高了可維護(hù)性

• 方便依賴關(guān)系管理

模塊化的幾種方法

• 函數(shù)封裝

var myModule = {var1: 1, var2: 2,fn1: <span><span>function</span></span>(){},fn2: <span><span>function</span></span>(){}

}
復(fù)制代碼

總結(jié)：這樣避免了變量污染，只要保證模塊名唯一即可，同時(shí)同一模塊內(nèi)的成員也有了關(guān)系

缺陷：外部可以睡意修改內(nèi)部成員，這樣就會(huì)產(chǎn)生意外的安全問(wèn)題
復(fù)制代碼

• 立即執(zhí)行函數(shù)表達(dá)式(IIFE)
• var myModule = (function(){var var1 = 1;var var2 = 2; <span>function</span> <span><span>fn1</span></span>(){} <span>function</span> <span><span>fn2</span></span>(){}

  return {
  fn1: fn1,
  fn2: fn2
  };
  })();
  復(fù)制代碼

  總結(jié)：這樣在模塊外部無(wú)法修改我們沒(méi)有暴露出來(lái)的變量、函數(shù)

  缺點(diǎn)：功能相對(duì)較弱，封裝過(guò)程增加了工作量，仍會(huì)導(dǎo)致命名空間污染可能、閉包是有成本的
  復(fù)制代碼

  圖片的預(yù)加載和懶加載

  • 預(yù)加載：提前加載圖片，當(dāng)用戶需要查看時(shí)可直接從本地緩存中渲染
  • 懶加載：懶加載的主要目的是作為服務(wù)器前端的優(yōu)化，減少請(qǐng)求數(shù)或延遲請(qǐng)求數(shù)

  兩種技術(shù)的本質(zhì)：兩者的行為是相反的，一個(gè)是提前加載，一個(gè)是遲緩甚至不加載。預(yù)加載則會(huì)增加服務(wù)器前端壓力，懶加載對(duì)服務(wù)器有一定的緩解壓力作用。

  mouseover和mouseenter的區(qū)別

  mouseover：當(dāng)鼠標(biāo)移入元素或其子元素都會(huì)觸發(fā)事件，所以有一個(gè)重復(fù)觸發(fā)，冒泡的過(guò)程。對(duì)應(yīng)的移除事件是mouseout

  mouseenter：當(dāng)鼠標(biāo)移除元素本身（不包含元素的子元素）會(huì)觸發(fā)事件，也就是不會(huì)冒泡，對(duì)應(yīng)的移除事件是mouseleave

  解決異步回調(diào)地獄

  promise、generator、async/await

  對(duì)This對(duì)象的理解

  this總是指向函數(shù)的直接調(diào)用者（而非間接調(diào)用者）

  如果有new關(guān)鍵字，this指向new出來(lái)的那個(gè)對(duì)象

  在事件中，this指向觸發(fā)這個(gè)事件的對(duì)象，特殊的是，IE中的attachEvent中的this總是指向全局對(duì)象Window

  Vue

  vue生命周期

  什么是Vue生命周期？

  Vue 實(shí)例從創(chuàng)建到銷毀的過(guò)程，就是生命周期。也就是從開(kāi)始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過(guò)程，我們稱這是 Vue 的生命周期

  Vue生命周期的作用是什么？

  它的生命周期中有多個(gè)事件鉤子，讓我們?cè)诳刂普麄€(gè)Vue實(shí)例的過(guò)程時(shí)更容易形成好的邏輯

  Vue生命周期總共有幾個(gè)階段？

  它可以總共分為8個(gè)階段：創(chuàng)建前/后, 載入前/后,更新前/后,銷毀前/銷毀后

  第一次頁(yè)面加載會(huì)觸發(fā)哪幾個(gè)鉤子？

  第一次頁(yè)面加載時(shí)會(huì)觸發(fā) beforeCreate, created, beforeMount, mounted 這幾個(gè)鉤子

  DOM渲染在哪個(gè)周期中就已經(jīng)完成？

  DOM 渲染在 mounted 中就已經(jīng)完成了

  每個(gè)生命周期適合哪些場(chǎng)景？

  生命周期鉤子的一些使用方法：

  beforecreate : 可以在這加個(gè)loading事件，在加載實(shí)例時(shí)觸發(fā)

  created : 初始化完成時(shí)的事件寫(xiě)在這里，如在這結(jié)束loading事件，異步請(qǐng)求也適宜在這里調(diào)用

  mounted : 掛載元素，獲取到DOM節(jié)點(diǎn)

  updated : 如果對(duì)數(shù)據(jù)統(tǒng)一處理，在這里寫(xiě)上相應(yīng)函數(shù)

  beforeDestroy : 可以做一個(gè)確認(rèn)停止事件的確認(rèn)框

  nextTick : 更新數(shù)據(jù)后立即操作dom

  v-show與v-if區(qū)別

  v-show是css切換，v-if是完整的銷毀和重新創(chuàng)建

  使用 頻繁切換時(shí)用v-show，運(yùn)行時(shí)較少改變時(shí)用v-if

  v-if=‘false’ v-if是條件渲染，當(dāng)false的時(shí)候不會(huì)渲染

  開(kāi)發(fā)中常用的指令有哪些

  v-model :一般用在表達(dá)輸入，很輕松的實(shí)現(xiàn)表單控件和數(shù)據(jù)的雙向綁定

  v-html: 更新元素的 innerHTML

  v-show 與 v-if: 條件渲染, 注意二者區(qū)別

  使用了v-if的時(shí)候，如果值為false，那么頁(yè)面將不會(huì)有這個(gè)html標(biāo)簽生成 v-show則是不管值為true還是false，html元素都會(huì)存在，只是CSS中的display顯示或隱藏 復(fù)制代碼

  v-on : click: 可以簡(jiǎn)寫(xiě)為@click,@綁定一個(gè)事件。如果事件觸發(fā)了，就可以指定事件的處理函數(shù) v-for:基于源數(shù)據(jù)多次渲染元素或模板塊 v-bind: 當(dāng)表達(dá)式的值改變時(shí)，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于 DOM

  語(yǔ)法：v-bind:title="msg" 簡(jiǎn)寫(xiě)：:title="msg" 復(fù)制代碼

  綁定class的數(shù)組用法

  對(duì)象方法 v-bind:class="{'orange': isRipe, 'green': isNotRipe}"

  數(shù)組方法 v-bind:class="[class1, class2]"

  行內(nèi) v-bind:style="{color: color, fontSize: fontSize+'px' }"

  組件之間的傳值通信

  父組件給子組件傳值

  使用props，父組件可以使用props向子組件傳遞數(shù)據(jù)

  父組件vue模板father.vue

  <template><child :msg="message"></child> </template>

  <script>
  import child from ‘./child.vue’;
  export default {
  components: {
  child
  },
  data () {
  return {
  message: ‘father message’;
  }
  }
  }
  </script>
  復(fù)制代碼

  子組件vue模板child.vue:

  <template><div>{{msg}}</div> </template><script> export default {props: {msg: {type: String,required: true}} } </script> 復(fù)制代碼

  子組件向父組件通信

  父組件向子組件傳遞事件方法，子組件通過(guò)$emit觸發(fā)事件，回調(diào)給父組件

  父組件vue模板father.vue:

  <template><child @msgFunc="func"></child> </template>

  <script>
  import child from ‘./child.vue’;
  export default {
  components: {
  child
  },
  methods: {
  func (msg) {
  console.log(msg);
  }
  }
  }
  </script>
  復(fù)制代碼

  子組件vue模板child.vue:

  <template><button @click="handleClick">點(diǎn)我</button> </template><script> export default {props: {msg: {type: String,required: true}},methods () {handleClick () {//........this.$emit('msgFunc');}} } </script> 復(fù)制代碼

  非父子，兄弟組件之間通信

  可以通過(guò)實(shí)例一個(gè)vue實(shí)例Bus作為媒介，要相互通信的兄弟組件之中，都引入Bus，然后通過(guò)分別調(diào)用Bus事件觸發(fā)和監(jiān)聽(tīng)來(lái)實(shí)現(xiàn)通信和參數(shù)傳遞

  Bus.js可以是這樣:

  import Vue from 'vue' export default new Vue() 復(fù)制代碼

  在需要通信的組件都引入Bus.js:

  <template><button @click="toBus">子組件傳給兄弟組件</button> </template>

  <script>
  import Bus from ‘…/common/js/bus.js’
  export default{
  methods: {
  toBus () {
  Bus.$emit(‘on’, ‘來(lái)自兄弟組件’)
  }
  }
  }
  </script>
  復(fù)制代碼

  另一個(gè)組件也import Bus.js 在鉤子函數(shù)中監(jiān)聽(tīng)on事件

  import Bus from '../common/js/bus.js' export default {data() {return {message: ''}},mounted() {Bus.$on('on', (msg) => {this.message = msg})}} 復(fù)制代碼

  路由跳轉(zhuǎn)方式

  1，<router-link to='home'> router-link標(biāo)簽會(huì)渲染為<a>標(biāo)簽，咋填template中的跳轉(zhuǎn)都是這種；2，另一種是編程是導(dǎo)航 也就是通過(guò)js跳轉(zhuǎn) 比如 router.push('/home') 復(fù)制代碼

  MVVM

  M - Model，Model 代表數(shù)據(jù)模型，也可以在 Model 中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯V - View，View 代表 UI 組件，它負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化為 UI 展現(xiàn)出來(lái)VM - ViewModel，ViewModel 監(jiān)聽(tīng)模型數(shù)據(jù)的改變和控制視圖行為、處理用戶交互，簡(jiǎn)單理解就是一個(gè)同步 View 和 Model 的對(duì)象，連接 Model 和 View 復(fù)制代碼

  computed和watch有什么區(qū)別?

  computed:

  1. computed是計(jì)算屬性,也就是計(jì)算值,它更多用于計(jì)算值的場(chǎng)景 2. computed具有緩存性,computed的值在getter執(zhí)行后是會(huì)緩存的，只有在它依賴的屬性值改變之后，下一次獲取computed的值時(shí)才會(huì)重新調(diào)用對(duì)應(yīng)的getter來(lái)計(jì)算 3. computed適用于計(jì)算比較消耗性能的計(jì)算場(chǎng)景 復(fù)制代碼

  watch:

  1. 更多的是「觀察」的作用,類似于某些數(shù)據(jù)的監(jiān)聽(tīng)回調(diào),用于觀察props $emit或者本組件的值,當(dāng)數(shù)據(jù)變化時(shí)來(lái)執(zhí)行回調(diào)進(jìn)行后續(xù)操作 2. 無(wú)緩存性，頁(yè)面重新渲染時(shí)值不變化也會(huì)執(zhí)行 復(fù)制代碼

  小結(jié):

  1. 當(dāng)我們要進(jìn)行數(shù)值計(jì)算,而且依賴于其他數(shù)據(jù)，那么把這個(gè)數(shù)據(jù)設(shè)計(jì)為computed 2. 如果你需要在某個(gè)數(shù)據(jù)變化時(shí)做一些事情，使用watch來(lái)觀察這個(gè)數(shù)據(jù)變化 復(fù)制代碼

  key

  key是為Vue中的vnode標(biāo)記的唯一id，通過(guò)這個(gè)key，我們的diff操作可以 更準(zhǔn)確、更快速

  準(zhǔn)確:
  如果不加key,那么vue會(huì)選擇復(fù)用節(jié)點(diǎn)(Vue的就地更新策略),導(dǎo)致之前節(jié)點(diǎn)的狀態(tài)被保留下來(lái)，會(huì)產(chǎn)生一系列的bug

  快速:
  key的唯一性可以被Map數(shù)據(jù)結(jié)構(gòu)充分利用

  組件中的data為什么是函數(shù)？

  為什么組件中的data必須是一個(gè)函數(shù)，然后return一個(gè)對(duì)象，而new Vue實(shí)例里，data可以直接是一個(gè)對(duì)象？

  // data data() {return {message: "子組件",childName:this.name} }

  // new Vue
  new Vue({
  el: ‘#app’,
  router,
  template: ‘<App/>’,
  components: {App}
  })
  復(fù)制代碼

  因?yàn)榻M件是用來(lái)復(fù)用的，JS里對(duì)象是引用關(guān)系，這樣作用域沒(méi)有隔離，而new Vue的實(shí)例，是不會(huì)被復(fù)用的，因此不存在引用對(duì)象問(wèn)題

  Class 與 Style 如何動(dòng)態(tài)綁定？

  Class 可以通過(guò)對(duì)象語(yǔ)法和數(shù)組語(yǔ)法進(jìn)行動(dòng)態(tài)綁定：

  對(duì)象語(yǔ)法

  <div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

  data: {
  isActive: true,
  hasError: false
  }
  復(fù)制代碼

  數(shù)組語(yǔ)法

  <div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>data: {activeClass: 'active',errorClass: 'text-danger' } 復(fù)制代碼

  Style 也可以通過(guò)對(duì)象語(yǔ)法和數(shù)組語(yǔ)法進(jìn)行動(dòng)態(tài)綁定：

  對(duì)象語(yǔ)法

  <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

  data: {
  activeColor: ‘red’,
  fontSize: 30
  }
  復(fù)制代碼

  數(shù)組語(yǔ)法

  <div v-bind:style="[styleColor, styleSize]"></div>data: {styleColor: {color: 'red'},styleSize:{fontSize:'23px'} } 復(fù)制代碼

  vue的單項(xiàng)數(shù)據(jù)流

  所有的 prop 都使得其父子 prop 之間形成了一個(gè)單向下行綁定：父級(jí) prop 的更新會(huì)向下流動(dòng)到子組件中，但是反過(guò)來(lái)則不行。這樣會(huì)防止從子組件意外改變父級(jí)組件的狀態(tài)，從而導(dǎo)致你的應(yīng)用的數(shù)據(jù)流向難以理解

  額外的，每次父級(jí)組件發(fā)生更新時(shí)，子組件中所有的 prop 都將會(huì)刷新為最新的值。這意味著你不應(yīng)該在一個(gè)子組件內(nèi)部改變 prop。如果你這樣做了，Vue 會(huì)在瀏覽器的控制臺(tái)中發(fā)出警告。子組件想修改時(shí)，只能通過(guò) $emit 派發(fā)一個(gè)自定義事件，父組件接收到后，由父組件修改

  有兩種常見(jiàn)的試圖改變一個(gè) prop 的情形 :

  這個(gè) prop 用來(lái)傳遞一個(gè)初始值；這個(gè)子組件接下來(lái)希望將其作為一個(gè)本地的 prop 數(shù)據(jù)來(lái)使用

  在這種情況下，最好定義一個(gè)本地的 data 屬性并將這個(gè) prop 用作其初始值：

  props: ['initialCounter'], data: function () {return {counter: this.initialCounter} } 復(fù)制代碼

  這個(gè) prop 以一種原始的值傳入且需要進(jìn)行轉(zhuǎn)換

  在這種情況下，最好使用這個(gè) prop 的值來(lái)定義一個(gè)計(jì)算屬性

  props: ['size'], computed: {normalizedSize: function () {return this.size.trim().toLowerCase()} } 復(fù)制代碼

  keep-alive

  keep-alive 是 Vue 內(nèi)置的一個(gè)組件，可以使被包含的組件保留狀態(tài)，避免重新渲染 ，其有以下特性：

  • 一般結(jié)合路由和動(dòng)態(tài)組件一起使用，用于緩存組件；
  • 提供 include 和 exclude 屬性，兩者都支持字符串或正則表達(dá)式， include 表示只有名稱匹配的組件會(huì)被緩存，exclude 表示任何名稱匹配的組件都不會(huì)被緩存 ，其中 exclude 的優(yōu)先級(jí)比 include 高；
  • 對(duì)應(yīng)兩個(gè)鉤子函數(shù) activated 和 deactivated ，當(dāng)組件被激活時(shí)，觸發(fā)鉤子函數(shù) activated，當(dāng)組件被移除時(shí)，觸發(fā)鉤子函數(shù) deactivated。

  v-model 的原理

  vue 項(xiàng)目中主要使用 v-model 指令在表單 input、textarea、select 等元素上創(chuàng)建雙向數(shù)據(jù)綁定，我們知道 v-model 本質(zhì)上不過(guò)是語(yǔ)法糖，v-model 在內(nèi)部為不同的輸入元素使用不同的屬性并拋出不同的事件：

  • text 和 textarea 元素使用 value 屬性和 input 事件；
  • checkbox 和 radio 使用 checked 屬性和 change 事件；
  • select 字段將 value 作為 prop 并將 change 作為事件;

  以 input 表單元素為例：

  <input v-model='something'> 復(fù)制代碼

  相當(dāng)于

  <input v-bind:value="something" v-on:input="something = $event.target.value"> 復(fù)制代碼

  如果在自定義組件中，v-model 默認(rèn)會(huì)利用名為 value 的 prop 和名為 input 的事件，如下所示：

  父組件： <ModelChild v-model="message"></ModelChild>

  子組件：
  <div>{{value}}</div>

  props:{
  value: String
  },
  methods: {
  test1(){
  this.$emit(‘input’, ‘小紅’)
  },
  },
  復(fù)制代碼

  nextTick()

  在下次DOM更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后，立即使用的這個(gè)回調(diào)函數(shù)，獲取更新后的DOM

  // 修改數(shù)據(jù) vm.msg = 'Hello' // DOM 還未更新 Vue.nextTick(function () {// DOM 更新 }) 復(fù)制代碼

  vue插槽

  個(gè)人覺(jué)得這篇文章寫(xiě)的還可以：www.cnblogs.com/chinabin199…

  單個(gè)插槽

  當(dāng)子組件模板只有一個(gè)沒(méi)有屬性的插槽時(shí)， 父組件傳入的整個(gè)內(nèi)容片段將插入到插槽所在的 DOM 位置， 并替換掉插槽標(biāo)簽本身 復(fù)制代碼

  命名插槽

  solt元素可以用一個(gè)特殊的特性name來(lái)進(jìn)一步配置如何分發(fā)內(nèi)容。 多個(gè)插槽可以有不同的名字。 這樣可以將父組件模板中 slot 位置， 和子組件 slot 元素產(chǎn)生關(guān)聯(lián)，便于插槽內(nèi)容對(duì)應(yīng)傳遞 復(fù)制代碼

  作用域插槽

  可以訪問(wèn)組件內(nèi)部數(shù)據(jù)的可復(fù)用插槽(reusable slot) 在父級(jí)中，具有特殊特性 slot-scope 的<template> 元素必須存在， 表示它是作用域插槽的模板。slot-scope 的值將被用作一個(gè)臨時(shí)變量名， 此變量接收從子組件傳遞過(guò)來(lái)的 prop 對(duì)象 復(fù)制代碼

  vue-router有哪幾種導(dǎo)航鉤子

  第一種：是全局導(dǎo)航鉤子：router.beforeEach(to,from,next)，作用：跳轉(zhuǎn)前進(jìn)行判斷攔截

  第二種：組件內(nèi)的鉤子

  第三種：單獨(dú)路由獨(dú)享組件

  vuex

  vuex是什么？

  vuex 就是一個(gè)倉(cāng)庫(kù)，倉(cāng)庫(kù)里放了很多對(duì)象。其中 state 就是數(shù)據(jù)源存放地，對(duì)應(yīng)于一般 vue 對(duì)象里面的 data

  state 里面存放的數(shù)據(jù)是響應(yīng)式的，vue 組件從 store 讀取數(shù)據(jù)，若是 store 中的數(shù)據(jù)發(fā)生改變，依賴這相數(shù)據(jù)的組件也會(huì)發(fā)生更新

  它通過(guò) mapState 把全局的 state 和 getters 映射到當(dāng)前組件的 computed 計(jì)算屬性
  復(fù)制代碼

  Vuex有5種屬性: 分別是 state、getter、mutation、action、module;

  state
  Vuex 使用單一狀態(tài)樹(shù),即每個(gè)應(yīng)用將僅僅包含一個(gè)store 實(shí)例，但單一狀態(tài)樹(shù)和模塊化并不沖突。存放的數(shù)據(jù)狀態(tài)，不可以直接修改里面的數(shù)據(jù)

  mutations
  mutations定義的方法動(dòng)態(tài)修改Vuex 的 store 中的狀態(tài)或數(shù)據(jù)

  getters
  類似vue的計(jì)算屬性，主要用來(lái)過(guò)濾一些數(shù)據(jù)

  action
  actions可以理解為通過(guò)將mutations里面處里數(shù)據(jù)的方法變成可異步的處理數(shù)據(jù)的方法，簡(jiǎn)單的說(shuō)就是異步操作數(shù)據(jù)。view 層通過(guò) store.dispath 來(lái)分發(fā) action

  總結(jié)
  vuex 一般用于中大型 web 單頁(yè)應(yīng)用中對(duì)應(yīng)用的狀態(tài)進(jìn)行管理，對(duì)于一些組件間關(guān)系較為簡(jiǎn)單的小型應(yīng)用，使用 vuex 的必要性不是很大，因?yàn)橥耆梢杂媒M件 prop 屬性或者事件來(lái)完成父子組件之間的通信，vuex 更多地用于解決跨組件通信以及作為數(shù)據(jù)中心集中式存儲(chǔ)數(shù)據(jù)

  你有對(duì) Vue 項(xiàng)目進(jìn)行哪些優(yōu)化？

  代碼層面的優(yōu)化

  v-if 和 v-show 區(qū)分使用場(chǎng)景 computed 和 watch 區(qū)分使用場(chǎng)景 v-for 遍歷必須為 item 添加 key，且避免同時(shí)使用 v-if 長(zhǎng)列表性能優(yōu)化 事件的銷毀 圖片資源懶加載 路由懶加載 第三方插件的按需引入 優(yōu)化無(wú)限列表性能 服務(wù)端渲染 SSR or 預(yù)渲染 復(fù)制代碼

  Webpack 層面的優(yōu)化

  Webpack 對(duì)圖片進(jìn)行壓縮 減少 ES6 轉(zhuǎn)為 ES5 的冗余代碼 提取公共代碼 模板預(yù)編譯 提取組件的 CSS 優(yōu)化 SourceMap 構(gòu)建結(jié)果輸出分析 Vue 項(xiàng)目的編譯優(yōu)化 復(fù)制代碼

  基礎(chǔ)的 Web 技術(shù)的優(yōu)化

  開(kāi)啟 gzip 壓縮 瀏覽器緩存 CDN 的使用 使用 Chrome Performance 查找性能瓶頸 復(fù)制代碼

  ES6

  var、let、const之間的區(qū)別

  var聲明變量可以重復(fù)聲明，而let不可以重復(fù)聲明

  var是不受限于塊級(jí)的，而let是受限于塊級(jí)

  var會(huì)與window相映射（會(huì)掛一個(gè)屬性），而let不與window相映射

  var可以在聲明的上面訪問(wèn)變量，而let有暫存死區(qū)，在聲明的上面訪問(wèn)變量會(huì)報(bào)錯(cuò)

  const聲明之后必須賦值，否則會(huì)報(bào)錯(cuò)

  const定義不可變的量，改變了就會(huì)報(bào)錯(cuò)

  const和let一樣不會(huì)與window相映射、支持塊級(jí)作用域、在聲明的上面訪問(wèn)變量會(huì)報(bào)錯(cuò)

  解構(gòu)賦值

  數(shù)組解構(gòu)

  let [a, b, c] = [1, 2, 3] //a=1, b=2, c=3 let [d, [e], f] = [1, [2], 3] //嵌套數(shù)組解構(gòu) d=1, e=2, f=3 let [g, ...h] = [1, 2, 3] //數(shù)組拆分 g=1, h=[2, 3] let [i,,j] = [1, 2, 3] //不連續(xù)解構(gòu) i=1, j=3 let [k,l] = [1, 2, 3] //不完全解構(gòu) k=1, l=2 復(fù)制代碼

  對(duì)象解構(gòu)

  let {a, b} = {a: 'aaaa', b: 'bbbb'} //a='aaaa' b='bbbb' let obj = {d: 'aaaa', e: {f: 'bbbb'}} let {d, e:{f}} = obj //嵌套解構(gòu) d='aaaa' f='bbbb' let g; (g = {g: 'aaaa'}) //以聲明變量解構(gòu) g='aaaa' let [h, i, j, k] = 'nice' //字符串解構(gòu) h='n' i='i' j='c' k='e' 復(fù)制代碼

  函數(shù)參數(shù)的定義

  一般我們?cè)诙x函數(shù)的時(shí)候，如果函數(shù)有多個(gè)參數(shù)時(shí)，在es5語(yǔ)法中函數(shù)調(diào)用時(shí)參數(shù)必須一一對(duì)應(yīng)，否則就會(huì)出現(xiàn)賦值錯(cuò)誤的情況，來(lái)看一個(gè)例子：

  function personInfo(name, age, address, gender) {console.log(name, age, address, gender) } personInfo('william', 18, 'changsha', 'man') 復(fù)制代碼

  上面這個(gè)例子在對(duì)用戶信息的時(shí)候需要傳遞四個(gè)參數(shù)，且需要一一對(duì)應(yīng)，這樣就會(huì)極易出現(xiàn)參數(shù)順序傳錯(cuò)的情況，從而導(dǎo)致bug，接下來(lái)來(lái)看es6解構(gòu)賦值是怎么解決這個(gè)問(wèn)題的：

  function personInfo({name, age, address, gender}) {console.log(name, age, address, gender) } personInfo({gender: 'man', address: 'changsha', name: 'william', age: 18}) 復(fù)制代碼

  這么寫(xiě)我們只知道要傳聲明參數(shù)就行來(lái)，不需要知道參數(shù)的順序也沒(méi)關(guān)系

  交換變量的值

  在es5中我們需要交換兩個(gè)變量的值需要借助臨時(shí)變量的幫助，來(lái)看一個(gè)例子：

  var a=1, b=2, c c = a a = b b = c console.log(a, b) 復(fù)制代碼

  來(lái)看es6怎么實(shí)現(xiàn)：

  let a=1, b=2; [b, a] = [a, b] console.log(a, b) 復(fù)制代碼

  是不是比es5的寫(xiě)法更加方便呢

  函數(shù)默認(rèn)參數(shù)

  在日常開(kāi)發(fā)中，經(jīng)常會(huì)有這種情況：函數(shù)的參數(shù)需要默認(rèn)值，如果沒(méi)有默認(rèn)值在使用的時(shí)候就會(huì)報(bào)錯(cuò)，來(lái)看es5中是怎么做的：

  function saveInfo(name, age, address, gender) {name = name || 'william'age = age || 18address = address || 'changsha'gender = gender || 'man'console.log(name, age, address, gender) } saveInfo() 復(fù)制代碼

  在函數(shù)離 main先對(duì)參數(shù)做一個(gè)默認(rèn)值賦值，然后再使用避免使用的過(guò)程中報(bào)錯(cuò)，再來(lái)看es6中的使用的方法：

  function saveInfo({name= 'william', age= 18, address= 'changsha', gender= 'man'} = {}) {console.log(name, age, address, gender) } saveInfo() 復(fù)制代碼

  在函數(shù)定義的時(shí)候就定義了默認(rèn)參數(shù)，這樣就免了后面給參數(shù)賦值默認(rèn)值的過(guò)程，是不是看起來(lái)簡(jiǎn)單多了

  forEach、for in、for of三者區(qū)別

  forEach更多的用來(lái)遍歷數(shù)

  for in 一般常用來(lái)遍歷對(duì)象或json

  for of數(shù)組對(duì)象都可以遍歷，遍歷對(duì)象需要通過(guò)和Object.keys()

  for in循環(huán)出的是key，for of循環(huán)出的是value

  使用箭頭函數(shù)應(yīng)注意什么？

  1、用了箭頭函數(shù)，this就不是指向window，而是父級(jí)（指向是可變的）
  2、不能夠使用arguments對(duì)象
  3、不能用作構(gòu)造函數(shù)，這就是說(shuō)不能夠使用new命令，否則會(huì)拋出一個(gè)錯(cuò)誤
  4、不可以使用yield命令，因此箭頭函數(shù)不能用作 Generator 函數(shù)

  Set、Map的區(qū)別

  應(yīng)用場(chǎng)景Set用于數(shù)據(jù)重組，Map用于數(shù)據(jù)儲(chǔ)存

  Set：
  1，成員不能重復(fù)
  2，只有鍵值沒(méi)有鍵名，類似數(shù)組
  3，可以遍歷，方法有add, delete,has

  Map:
  1，本質(zhì)上是健值對(duì)的集合，類似集合
  2，可以遍歷，可以跟各種數(shù)據(jù)格式轉(zhuǎn)換

  promise對(duì)象的用法,手寫(xiě)一個(gè)promise

  promise是一個(gè)構(gòu)造函數(shù)，下面是一個(gè)簡(jiǎn)單實(shí)例

  var promise = new Promise((resolve,reject) => {if (操作成功) {resolve(value)} else {reject(error)} }) promise.then(function (value) {// success },function (value) {// failure })

  復(fù)制代碼

  Ajax

  如何創(chuàng)建一個(gè)ajax

  (1)創(chuàng)建XMLHttpRequest對(duì)象,也就是創(chuàng)建一個(gè)異步調(diào)用對(duì)象
  (2)創(chuàng)建一個(gè)新的HTTP請(qǐng)求,并指定該HTTP請(qǐng)求的方法、URL及驗(yàn)證信息
  (3)設(shè)置響應(yīng)HTTP請(qǐng)求狀態(tài)變化的函數(shù)
  (4)發(fā)送HTTP請(qǐng)求
  (5)獲取異步調(diào)用返回的數(shù)據(jù)
  (6)使用JavaScript和DOM實(shí)現(xiàn)局部刷新

  同步和異步的區(qū)別

  同步：
  瀏覽器訪問(wèn)服務(wù)器請(qǐng)求，用戶看得到頁(yè)面刷新，重新發(fā)請(qǐng)求,等請(qǐng)求完，頁(yè)面刷新，新內(nèi)容出現(xiàn)，用戶看到新內(nèi)容,進(jìn)行下一步操作

  異步：
  瀏覽器訪問(wèn)服務(wù)器請(qǐng)求，用戶正常操作，瀏覽器后端進(jìn)行請(qǐng)求。等請(qǐng)求完，頁(yè)面不刷新，新內(nèi)容也會(huì)出現(xiàn)，用戶看到新內(nèi)容

  ajax的優(yōu)點(diǎn)和缺點(diǎn)

  ajax的優(yōu)點(diǎn)

  1、無(wú)刷新更新數(shù)據(jù)（在不刷新整個(gè)頁(yè)面的情況下維持與服務(wù)器通信）
  2、異步與服務(wù)器通信（使用異步的方式與服務(wù)器通信，不打斷用戶的操作）
  3、前端和后端負(fù)載均衡（將一些后端的工作交給前端，減少服務(wù)器與寬度的負(fù)擔(dān)）
  4、界面和應(yīng)用相分離（ajax將界面和應(yīng)用分離也就是數(shù)據(jù)與呈現(xiàn)相分離）

  ajax的缺點(diǎn)

  1、ajax不支持瀏覽器back按鈕
  2、安全問(wèn)題 Aajax暴露了與服務(wù)器交互的細(xì)節(jié)
  3、對(duì)搜索引擎的支持比較弱
  4、破壞了Back與History后退按鈕的正常行為等瀏覽器機(jī)制

  get和post的區(qū)別

  1、get和post在HTTP中都代表著請(qǐng)求數(shù)據(jù)，其中g(shù)et請(qǐng)求相對(duì)來(lái)說(shuō)更簡(jiǎn)單、快速，效率高些 2、get相對(duì)post安全性低
  3、get有緩存，post沒(méi)有
  4、get體積小，post可以無(wú)限大
  5、get的url參數(shù)可見(jiàn)，post不可見(jiàn)
  6、get只接受ASCII字符的參數(shù)數(shù)據(jù)類型，post沒(méi)有限制
  7、get請(qǐng)求參數(shù)會(huì)保留歷史記錄，post中參數(shù)不會(huì)保留
  8、get會(huì)被瀏覽器主動(dòng)catch，post不會(huì)，需要手動(dòng)設(shè)置
  9、get在瀏覽器回退時(shí)無(wú)害，post會(huì)再次提交請(qǐng)求

  什么時(shí)候使用post？

  post一般用于修改服務(wù)器上的資源，對(duì)所發(fā)送的信息沒(méi)有限制。比如

  1、無(wú)法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫(kù)）
  2、向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒(méi)有數(shù)據(jù)量限制）
  3、發(fā)送包含未知字符的用戶輸入時(shí)，POST 比 GET 更穩(wěn)定也更可靠

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

  跨域的概念：協(xié)議、域名、端口都相同才同域，否則都是跨域

  解決跨域問(wèn)題：

  1、使用JSONP（json+padding）把數(shù)據(jù)內(nèi)填充起來(lái)
  2、CORS方式（跨域資源共享），在后端上配置可跨域
  3、服務(wù)器代理，通過(guò)服務(wù)器的文件能訪問(wèn)第三方資源

  什么是Ajax和JSON，它們的優(yōu)點(diǎn)和缺點(diǎn)

  Ajax：

  Ajax是異步JavaScript和XML，用于在Web頁(yè)面中實(shí)現(xiàn)異步數(shù)據(jù)交互

  Ajax優(yōu)點(diǎn)：

  異步請(qǐng)求響應(yīng)快，用戶體驗(yàn)好；頁(yè)面無(wú)刷新、數(shù)據(jù)局部更新；按需取數(shù)據(jù)，減少了冗余請(qǐng)求和服務(wù)器的負(fù)擔(dān)；

  Ajax缺點(diǎn)：

  異步回調(diào)問(wèn)題、this指向問(wèn)題、路由跳轉(zhuǎn)back問(wèn)題；對(duì)搜索引擎的支持比較弱，對(duì)于一些手機(jī)還不是很好的支持

  JSON：

  是一種輕量級(jí)的數(shù)據(jù)交換格式，看著像對(duì)象，本質(zhì)是字符串

  JSON優(yōu)點(diǎn)：

  輕量級(jí)、易于人的閱讀和編寫(xiě)，便于js解析，支持復(fù)合數(shù)據(jù)類型

  JSON缺點(diǎn)：

  沒(méi)有XML格式這么推廣的深入人心和使用廣泛, 沒(méi)有XML那么通用性

  Github

  git常用的命令

  從遠(yuǎn)程庫(kù)克隆到本地：git clone 網(wǎng)站上的倉(cāng)庫(kù)地址

  新增文件的命令：git add .

  提交文件的命令：git commit –m或者git commit –a

  查看工作區(qū)狀況：git status –s

  拉取合并遠(yuǎn)程分支的操作：git fetch/git merge或者git pull

  查看提交記錄命令：git reflog

  webpack

  webpack打包原理

  webpack只是一個(gè)打包模塊的機(jī)制，只是把依賴的模塊轉(zhuǎn)化成可以代表這些包的靜態(tài)文件。webpack就是識(shí)別你的 入口文件。識(shí)別你的模塊依賴，來(lái)打包你的代碼。至于你的代碼使用的是commonjs還是amd或者es6的import。webpack都會(huì)對(duì)其進(jìn)行分析。來(lái)獲取代碼的依賴。webpack做的就是分析代碼。轉(zhuǎn)換代碼，編譯代碼，輸出代碼。webpack本身是一個(gè)node的模塊，所以webpack.config.js是以commonjs形式書(shū)寫(xiě)的(node中的模塊化是commonjs規(guī)范的)

  模塊熱更新

  模塊熱更新是webpack的一個(gè)功能，他可以使代碼修改過(guò)后不用刷新就可以更新，是高級(jí)版的自動(dòng)刷新瀏覽器

  devServer中通過(guò)hot屬性可以控制模塊的熱替換

  通過(guò)配置文件

  const webpack = require('webpack'); const path = require('path'); let env = process.env.NODE_ENV == "development" ? "development" : "production"; const config = {mode: env,devServer: {hot:true} }plugins: [new webpack.HotModuleReplacementPlugin(), //熱加載插件], module.exports = config; 復(fù)制代碼

  通過(guò)命令行

  "scripts": {"test": "echo \"Error: no test specified\" && exit 1","start": "NODE_ENV=development webpack-dev-server --config webpack.develop.config.js --hot",}, 復(fù)制代碼

  如何提高webpack構(gòu)建速度

  1、通過(guò)externals配置來(lái)提取常用庫(kù)

  2、利用DllPlugin和DllReferencePlugin預(yù)編譯資源模塊 通過(guò)DllPlugin來(lái)對(duì)那些我們引用但是絕對(duì)不會(huì)修改的npm包來(lái)進(jìn)行預(yù)編譯，再通過(guò)DllReferencePlugin將預(yù)編譯的模塊加載進(jìn)來(lái)

  3、使用Happypack 實(shí)現(xiàn)多線程加速編譯

  要注意的第一點(diǎn)是，它對(duì)file-loader和url-loader支持不好，所以這兩個(gè)loader就不需要換成happypack了，其他loader可以類似地?fù)Q一下

  4、使用Tree-shaking和Scope Hoisting來(lái)剔除多余代碼 5、使用fast-sass-loader代替sass-loader 6、babel-loader開(kāi)啟緩存

  babel-loader在執(zhí)行的時(shí)候，可能會(huì)產(chǎn)生一些運(yùn)行期間重復(fù)的公共文件，造成代碼體積大冗余，同時(shí)也會(huì)減慢編譯效率 可以加上cacheDirectory參數(shù)或使用 transform-runtime 插件試試

  // webpack.config.js use: [{loader: 'babel-loader',options: {cacheDirectory: true }] // .bablerc {"presets": ["env","react"],"plugins": ["transform-runtime"] } 復(fù)制代碼

  不需要打包編譯的插件庫(kù)換成全局"script"標(biāo)簽引入的方式

  比如jQuery插件，react, react-dom等，代碼量是很多的，打包起來(lái)可能會(huì)很耗時(shí) 可以直接用標(biāo)簽引入，然后在webpack配置里使用 expose-loader 或 externals 或 ProvidePlugin 提供給模塊內(nèi)部使用相應(yīng)的變量

  // @1 use: [{loader: 'expose-loader',options: '$'}, {loader: 'expose-loader',options: 'jQuery'}] // @2 externals: {jquery: 'jQuery'}, // @3new webpack.ProvidePlugin({$: 'jquery',jQuery: 'jquery','window.jQuery': 'jquery'}), 復(fù)制代碼

  8、優(yōu)化構(gòu)建時(shí)的搜索路徑

  在webpack打包時(shí)，會(huì)有各種各樣的路徑要去查詢搜索，我們可以加上一些配置，讓它搜索地更快 比如說(shuō)，方便改成絕對(duì)路徑的模塊路徑就改一下，以純模塊名來(lái)引入的可以加上一些目錄路徑 還可以善于用下resolve alias別名 這個(gè)字段來(lái)配置 還有exclude等的配置，避免多余查找的文件，比如使用babel別忘了剔除不需要遍歷的

  webpack的優(yōu)點(diǎn)

  專注于處理模塊化的項(xiàng)目，能做到開(kāi)箱即用，一步到位

  可通過(guò)plugin擴(kuò)展，完整好用又不失靈活

  使用場(chǎng)景不局限于web開(kāi)發(fā)

  社區(qū)龐大活躍，經(jīng)常引入緊跟時(shí)代發(fā)展的新特性，能為大多數(shù)場(chǎng)景找到已有的開(kāi)源擴(kuò)展

  良好的開(kāi)發(fā)體驗(yàn)

  webpack的缺點(diǎn)

  webpack的缺點(diǎn)是只能用于采用模塊化開(kāi)發(fā)的項(xiàng)目

  微信小程序

  文件主要目錄及文件作用

  - component —————————————————— 組件文件夾- navBar —— 底部組件- navBar.js —— 底部組件的 JS 代碼- navBar.json —— 底部組件的配置文件- navBar.wxml —— 底部組件的 HTML 代碼- navBar.wxss —— 底部組件的 CSS 代碼 - pages ————————————————————— 頁(yè)面文件夾- index —— 首頁(yè)- index.js —— 首頁(yè)的 JS 代碼- index.json —— 首頁(yè)的配置文件- index.wxml —— 首頁(yè)的 HTML 代碼- index.wxss —— 首頁(yè)的 CSS 代碼 - public ————————————————————— 圖片文件夾 - utils —————————————————————— 工具文件夾- api.js —— 控制 API 的文件- md5.js —— 工具 - MD5 加密文件- timestamp.js —— 工具 - 時(shí)間戳文件 - app.json ——————————————————— 設(shè)置全局的基礎(chǔ)數(shù)據(jù)等 - app.wxss ——————————————————— 公共樣式，可通過(guò) import 導(dǎo)入更多 - project.config.json ———————— 項(xiàng)目配置文件 復(fù)制代碼

  微信小程序生命周期

  onLoad()：頁(yè)面加載時(shí)觸發(fā)。 onShow()：頁(yè)面顯示/切入前臺(tái)時(shí)觸發(fā)。 onReady()：頁(yè)面初次渲染完成時(shí)觸發(fā)。 onHide()：頁(yè)面隱藏/切入后臺(tái)時(shí)觸發(fā)。 onUnload()：頁(yè)面卸載時(shí)觸發(fā)。 復(fù)制代碼

  如何封裝數(shù)據(jù)請(qǐng)求

  1，封裝接口

  項(xiàng)目/utils/api.js

  // 將請(qǐng)求進(jìn)行 Promise 封裝 const fetch = ({url, data}) => {

  // 打印接口請(qǐng)求的信息
  console.log(【step 1】API 接口：<span>${url}</span>);
  console.log("【step 2】data 傳參：");
  console.log(data);

  // 返回 Promise
  return new Promise((resolve, reject) => {
  wx.request({
  url: getApp().globalData.api + url,
  data: data,
  success: res => {

  // 成功時(shí)的處理 <span>if</span> (res.data.code == 0) {console.log(<span>"【step 3】請(qǐng)求成功："</span>);console.log(res.data);<span>return</span> resolve(res.data);} <span>else</span> {wx.showModal({title: <span>'請(qǐng)求失敗'</span>,content: res.data.message,showCancel: <span>false</span>});}},fail: err =&gt; {// 失敗時(shí)的處理console.log(err);<span>return</span> reject(err);} })

  })

  }

  /**

  • code 換取 openId
  • @data {
  • jsCode - wx.login() 返回的 code
  • }
    */
    export const wxLogin = data => {
    return fetch({
    url: “tbcUser/getWechatOpenId”,
    data: data
    })
    }
    復(fù)制代碼

    2，調(diào)用接口

  項(xiàng)目/pages/login/login.js

  import {wxLogin, } from '../../utils/api.js' 復(fù)制代碼

  3，使用接口

  項(xiàng)目/pages/login/login.js

  wxLogin({jsCode: this.data.code }).then(res => {console.log("【step 4】返回成功處理：");console.log(res.data);},err => {console.log("【step 4】返回失敗處理：");console.log(err);} ) 復(fù)制代碼

  頁(yè)面數(shù)據(jù)傳遞

  通過(guò) url 攜帶參數(shù)，在 onLoad() 中通過(guò) options 獲取 url 上的參數(shù)：

  <navigator url="../index/index?userId={{userId}}"></navigator>

  <!-- 這兩段是分別在 HTML 和 JS 中的代碼 -->

  onLoad: function(options) {
  console.log(options.userId);
  }
  復(fù)制代碼

  通過(guò) Storage 來(lái)傳遞參數(shù)：

  wx.setStorageSync('userId', 'jsliang'); wx.getStorageSync('userId'); 復(fù)制代碼

  WXML傳遞數(shù)據(jù)到 JS

  login.wxml

  <text bindtap="clickText" data-labelId="{{userId}}">點(diǎn)擊傳遞數(shù)據(jù)到 JS</text> 復(fù)制代碼

  login.js

  clickText(e) {console.log(e.currentTarget.labelid) } 復(fù)制代碼

  組件調(diào)用傳參

  組件接收數(shù)據(jù)：component-tag-name

  Component({properties: {// 這里定義了innerText屬性，屬性值可以在組件使用時(shí)指定innerText: {type: String,value: 'default value',}} }) 復(fù)制代碼

  使用組件的頁(yè)面定義 json

  {"usingComponents": {"component-tag-name": "../component/component"} } 復(fù)制代碼

  使用組件的頁(yè)面 HTML 代碼

  <view><!-- 以下是對(duì)一個(gè)自定義組件的引用 --><component-tag-name inner-text="Some text"></component-tag-name> </view> 復(fù)制代碼

  通過(guò)接口調(diào)用傳遞參數(shù)

  加載性能優(yōu)化方法

  1、通過(guò) this.$preload() 預(yù)加載用戶可能點(diǎn)擊的第二個(gè)頁(yè)面

  2、組件化頁(yè)面，出現(xiàn)兩次以上的部分都進(jìn)行封裝成組件

  3、提取共用的 CSS 樣式

  4、優(yōu)化圖片：TinyPNG

  微信小程序與原生APP、Vue、H5差異

  微信小程序優(yōu)勢(shì)

  1、無(wú)需下載
  2、打開(kāi)速度較快
  3、開(kāi)發(fā)成本低于原生APP

  微信小程序劣勢(shì)

  1、限制多。頁(yè)面大小不能超過(guò) 1M，不能打開(kāi)超過(guò) 5 個(gè)層級(jí)的頁(yè)面
  2、樣式單一。小程序內(nèi)部組件已經(jīng)成宿，樣式不可以修改
  3、推廣面窄。跑不出微信，還不能跑入朋友圈

  微信小程序 VS 原生APP
  微信小程序有著低開(kāi)發(fā)成本、低獲客成本、無(wú)需下載的優(yōu)勢(shì)

  微信小程序 VS H5
  1、依賴環(huán)境不同。一個(gè)能在多種手機(jī)瀏覽器運(yùn)行。一個(gè)只能在微信中的非完整的瀏覽器
  2、開(kāi)發(fā)成本不同。一個(gè)可能在各種瀏覽器出問(wèn)題。一個(gè)只能在微信中運(yùn)行

  微信小程序 VS Vue
  微信小程序看似就是閹割版的 Vue

  微信小程序原理

  本質(zhì)上就是一個(gè)單頁(yè)面應(yīng)用，所有的頁(yè)面渲染和事件處理，都在一個(gè)頁(yè)面中進(jìn)行

  架構(gòu)為數(shù)據(jù)驅(qū)動(dòng)的模式，UI 和數(shù)據(jù)分離，所有頁(yè)面的更新，都需要通過(guò)對(duì)數(shù)據(jù)的更改來(lái)實(shí)現(xiàn)

  微信小程序分為兩個(gè)部分：webview 和 appService。其中 webview 主要用來(lái)展示 UI，appServer 用來(lái)處理業(yè)務(wù)邏輯、數(shù)據(jù)及接口調(diào)用。它們?cè)趦蓚€(gè)進(jìn)程中進(jìn)行，通過(guò)系統(tǒng)層 JSBridge 實(shí)現(xiàn)通信，實(shí)現(xiàn) UI 的渲染、事件的處理

  wxml與標(biāo)準(zhǔn)的html的異同

  wxml基于xml設(shè)計(jì)，標(biāo)簽只能在微信小程序中使用，不能使用html的標(biāo)簽

  網(wǎng)絡(luò)協(xié)議

  網(wǎng)絡(luò)分層

  目前網(wǎng)絡(luò)分層可分為兩種：OSI 模型和 TCP/IP 模型

  OSI模型
  應(yīng)用層（Application）
  表示層（Presentation）
  會(huì)話層（Session）
  傳輸層（Transport）
  網(wǎng)絡(luò)層（Network）
  數(shù)據(jù)鏈路層（Data Link）
  物理層（Physical）

  TCP/IP模型
  應(yīng)用層（Application）
  傳輸層（Host-to-Host Transport）
  互聯(lián)網(wǎng)層（Internet）
  網(wǎng)絡(luò)接口層（Network Interface）

  HTTP/HTTPS

  1、https協(xié)議需要到ca申請(qǐng)證書(shū)，一般免費(fèi)證書(shū)較少，因而需要一定費(fèi)用
  2、http是超文本傳輸協(xié)議，信息是明文傳輸，https則是具有安全性的ssl加密傳輸協(xié)議
  3、http和https使用的是完全不同的連接方式，用的端口也不一樣，前者是80，后者是443
  4、http的連接很簡(jiǎn)單，是無(wú)狀態(tài)的；HTTPS協(xié)議是由SSL+HTTP協(xié)議構(gòu)建的可進(jìn)行加密傳輸、身份認(rèn)證的網(wǎng)絡(luò)協(xié)議，比http協(xié)議安全。

  HTTP狀態(tài)碼

  區(qū)分狀態(tài)碼
  1××開(kāi)頭 - 信息提示
  2××開(kāi)頭 - 請(qǐng)求成功
  3××開(kāi)頭 - 請(qǐng)求被重定向
  4××開(kāi)頭 - 請(qǐng)求錯(cuò)誤
  5××開(kāi)頭 - 服務(wù)器錯(cuò)誤

  常見(jiàn)狀態(tài)碼
  200 - 請(qǐng)求成功，Ajax 接受到信息了
  400 - 服務(wù)器不理解請(qǐng)求
  403 - 服務(wù)器拒絕請(qǐng)求
  404 - 請(qǐng)求頁(yè)面錯(cuò)誤
  500 - 服務(wù)器內(nèi)部錯(cuò)誤，無(wú)法完成請(qǐng)求

  性能優(yōu)化

  HTML優(yōu)化

  1、避免 HTML 中書(shū)寫(xiě) CSS 代碼，因?yàn)檫@樣難以維護(hù)。 2、使用 Viewport 加速頁(yè)面的渲染。 3、使用語(yǔ)義化標(biāo)簽，減少 CSS 代碼，增加可讀性和 SEO。 4、減少標(biāo)簽的使用，DOM 解析是一個(gè)大量遍歷的過(guò)程，減少不必要的標(biāo)簽，能降低遍歷的次數(shù)。 5、避免 src、href 等的值為空，因?yàn)榧磿r(shí)它們?yōu)榭?#xff0c;瀏覽器也會(huì)發(fā)起 HTTP 請(qǐng)求。 6、減少 DNS 查詢的次數(shù) 復(fù)制代碼

  CSS優(yōu)化

  1、優(yōu)化選擇器路徑：使用 .c {} 而不是 .a .b .c {}。 2、選擇器合并：共同的屬性內(nèi)容提起出來(lái)，壓縮空間和資源開(kāi)銷。 3、精準(zhǔn)樣式：使用 padding-left: 10px 而不是 padding: 0 0 0 10px。 4、雪碧圖：將小的圖標(biāo)合并到一張圖中，這樣所有的圖片只需要請(qǐng)求一次。 5、避免通配符：.a .b * {} 這樣的選擇器，根據(jù)從右到左的解析順序在解析過(guò)程中遇到通配符 * {} 6、會(huì)遍歷整個(gè) DOM，性能大大損耗。 7、少用 float：float 在渲染時(shí)計(jì)算量比較大，可以使用 flex 布局。 8、為 0 值去單位：增加兼容性。 9、壓縮文件大小，減少資源下載負(fù)擔(dān)。 復(fù)制代碼

  JavaScript優(yōu)化

  1、盡可能把 <script> 標(biāo)簽放在 body 之后，避免 JS 的執(zhí)行卡住 DOM 的渲染，最大程度保證頁(yè)面盡快地展示出來(lái) 2、盡可能合并 JS 代碼：提取公共方法，進(jìn)行面向?qū)ο笤O(shè)計(jì)等…… 3、CSS 能做的事情，盡量不用 JS 來(lái)做，畢竟 JS 的解析執(zhí)行比較粗暴，而 CSS 效率更高。 4、盡可能逐條操作 DOM，并預(yù)定好 CSs 樣式，從而減少 reflow 或者 repaint 的次數(shù)。 5、盡可能少地創(chuàng)建 DOM，而是在 HTML 和 CSS 中使用 display: none 來(lái)隱藏，按需顯示。 6、壓縮文件大小，減少資源下載負(fù)擔(dān)。 復(fù)制代碼

  面試常見(jiàn)的其他問(wèn)題

  常問(wèn)

  1、自我介紹
  2、你的項(xiàng)目中技術(shù)難點(diǎn)是什么？遇到了什么問(wèn)題？你是怎么解決的？
  3、你認(rèn)為哪個(gè)項(xiàng)目做得最好？
  4、平時(shí)是如何學(xué)習(xí)前端開(kāi)發(fā)的？
  5、你最有成就感的一件事
  6、你是怎么學(xué)習(xí)前端的

  人事面

  1、面試完你還有什么問(wèn)題要問(wèn)的嗎
  2、你有什么愛(ài)好?
  3、你最大的優(yōu)點(diǎn)和缺點(diǎn)是什么?
  4、你為什么會(huì)選擇這個(gè)行業(yè)，職位?
  5、你覺(jué)得你適合從事這個(gè)崗位嗎?
  6、你有什么職業(yè)規(guī)劃?
  7、你對(duì)工資有什么要求?
  8、如何看待前端開(kāi)發(fā)？
  9、未來(lái)三到五年的規(guī)劃是怎樣的？

  其他

  談?wù)勀銓?duì)重構(gòu)的理解？

  網(wǎng)絡(luò)重構(gòu)：在不改變外部行為的前提下，簡(jiǎn)化結(jié)構(gòu)、添加可讀性，而在網(wǎng)站前端保持一致的行為。也就是說(shuō)是在不改變UI的情況下，對(duì)網(wǎng)站進(jìn)行優(yōu)化， 在擴(kuò)展的同時(shí)保持一致的UI

  對(duì)于傳統(tǒng)的網(wǎng)站來(lái)說(shuō)重構(gòu)通常是：

  • 表格(table)布局改為DIV+CSS
  • 使網(wǎng)站前端兼容于現(xiàn)代瀏覽器(針對(duì)于不合規(guī)范的CSS、如對(duì)IE6有效的)
  • 對(duì)于移動(dòng)平臺(tái)的優(yōu)化
  • 針對(duì)于SEO進(jìn)行優(yōu)化

  什么樣的前端代碼是好的？

  高復(fù)用低耦合，這樣文件小，好維護(hù)，而且好擴(kuò)展

  對(duì)前端工程師這個(gè)職位是怎么樣理解的？它的前景會(huì)怎么樣？

  前端是最貼近用戶的程序員，比后端、數(shù)據(jù)庫(kù)、產(chǎn)品經(jīng)理、運(yùn)營(yíng)、安全都近

  • 實(shí)現(xiàn)界面交互
  • 提升用戶體驗(yàn)
  • 有了Node.js，前端可以實(shí)現(xiàn)服務(wù)端的一些事情

  前端是最貼近用戶的程序員，前端的能力就是能讓產(chǎn)品從 90分進(jìn)化到 100 分，甚至更好，

  與團(tuán)隊(duì)成員，UI設(shè)計(jì)，產(chǎn)品經(jīng)理的溝通；

  做好的頁(yè)面結(jié)構(gòu)，頁(yè)面重構(gòu)和用戶體驗(yàn)；

  你覺(jué)得前端工程的價(jià)值體現(xiàn)在哪？

  1、為簡(jiǎn)化用戶使用提供技術(shù)支持（交互部分）
  2、為多個(gè)瀏覽器兼容性提供支持
  3、為提高用戶瀏覽速度（瀏覽器性能）提供支持
  4、為跨平臺(tái)或者其他基于webkit或其他渲染引擎的應(yīng)用提供支持
  5、為展示數(shù)據(jù)提供支持（數(shù)據(jù)接口）

  平時(shí)如何管理你的項(xiàng)目？

  • 先期團(tuán)隊(duì)必須確定好全局樣式（globe.css），編碼模式(utf-8) 等；

  • 編寫(xiě)習(xí)慣必須一致（例如都是采用繼承式的寫(xiě)法，單樣式都寫(xiě)成一行）；

  • 標(biāo)注樣式編寫(xiě)人，各模塊都及時(shí)標(biāo)注（標(biāo)注關(guān)鍵樣式調(diào)用的地方）；

  • 頁(yè)面進(jìn)行標(biāo)注（例如 頁(yè)面 模塊 開(kāi)始和結(jié)束）；

  • CSS跟HTML 分文件夾并行存放，命名都得統(tǒng)一（例如style.css）；

  • JS 分文件夾存放 命名以該JS功能為準(zhǔn)的英文翻譯。

  • 圖片采用整合的 images.png png8 格式文件使用 - 盡量整合在一起使用方便將來(lái)的管理

  移動(dòng)端（Android IOS）怎么做好用戶體驗(yàn)?

  清晰的視覺(jué)縱線、
  信息的分組、極致的減法、
  利用選擇代替輸入、
  標(biāo)簽及文字的排布方式、
  依靠明文確認(rèn)密碼、
  合理的鍵盤(pán)利用

總結(jié)

以上是生活随笔為你收集整理的初中级前端面试题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。