文章目錄

• 01、HTML基礎
• • 1、行內元素有哪些？行內塊元素有哪些？塊級元素有哪些？ 空(void)元素有哪些？
  • 2、頁面導入樣式時，使用link和@import有什么區別？
  • 3、title與h1的區別、b與strong的區別、i與em的區別？
  • 4、img標簽的title和alt有什么區別？
  • 5、png、jpg、gif、webp這些圖片格式解釋一下，分別什么時候用？
• 02、CSS基礎
• • 01、介紹一下CSS的盒子模型
  • 02、line-height和heigh區別
  • 03、CSS選擇符有哪些？哪些屬性可以繼承？
  • 04、CSS優先級算法如何計算？
  • 05、用CSS畫一個三角形
  • 06、一個盒子不給寬度和高度如何水平垂直居中？
  • 07、display有哪些值？說明他們的作用。
  • 08、對BFC規范(塊級格式化上下文：block formatting context)的理解？
  • 09、清除浮動有哪些方式？
  • 10、在網頁中的應該使用奇數還是偶數的字體？為什么呢？
  • 11、position有哪些值？分別是根據什么定位的？
  • 12、寫一個左中右布局占滿屏幕，其中左、右倆塊固定寬200，中間自適應寬，要求先加載中間塊，請寫出結構及樣式。
  • 13、什么是CSS reset？
  • 14、css sprite是什么，有什么優缺點
  • 15、display: none;與visibility: hidden;的區別
  • 16、opacity和rgba區別
• 03、JavaScript基礎
• • 01、延遲加載JS有哪些方式？
  • 02、JS數據類型有哪些？
  • 03、JS數據類型考題
  • 04、null和undefined的區別
  • 05、兩等和三等有什么不同
  • 06、JS微任務和宏任務
  • 07、JS作用域考題
  • 08、JS對象考題
  • 09、JS作用域+this指向+原型考題
  • 10、JS判斷變量是不是數組，你能寫出哪些方法？
  • 11、slice是干嘛的、splice是否會改變原數組
  • 12、JS數組去重
  • 13、找出多維數組最大值
  • 14、給字符串新增方法實現功能
  • 15、找出字符串出現最多次數的字符以及次數
  • 16、new操作符具體做了什么
  • 17、閉包
  • 18、原型鏈
  • 19、JS繼承有哪些方式
  • 20、說一下call、apply、bind區別
  • 21、sort背后原理是什么？
  • 22、深拷貝和淺拷貝
  • 23、localstorage、sessionstorage、cookie的區別
• 04、H5/C3
• • 01、什么是語義化標簽
  • 02、::before和:after中雙冒號和單冒號有什么區別？解釋一下這2個偽元素的作用。
  • 03、如何關閉iOS鍵盤首字母自動大寫
  • 04、怎么讓Chrome支持小于12px的文字？
  • 05、rem和em的區別
  • 06、ios系統中元素被觸摸時產生的半透明灰色遮罩怎么去掉
  • 07、webkit表單輸入框placeholder的顏色值能改變嗎？
  • 08、禁止ios長按時不觸發系統的菜單，禁止ios&android長按時下載圖片
  • 09、禁止ios和android用戶選中文字
  • 10、自適應
  • 11、響應式
• 05、ES6
• • 1、var、let、const區別
  • 2、作用域考題
  • 3、將下列對象進行合并
  • 4、箭頭函數和普通函數有什么區別？
  • 5、Promise有幾種狀態
  • 6、find和filter的區別
  • 7、some和every的區別
• 06、webpack
• • 1、webpack插件
• 07、Git
• • 1、git常用命令
  • 2、解決沖突
  • 3、GitFlow
• 08、Vue
• • 01、Vue2.x生命周期有哪些？
  • 02、第一次進入組件或者頁面，會執行哪些生命周期？
  • 03、談談你對keep-alive的了解
  • 04、v-if和v-show區別
  • 05、v-if和v-for優先級
  • 06、ref是什么？
  • 07、nextTick是什么？
  • 08、路由導航守衛有哪些？
  • 09、Vue中如何做樣式穿透
  • 10、scoped原理
  • 11、Vuex是單向數據流還是雙向數據流？
  • 12、講一下MVVM
  • 13、雙向綁定原理
  • 14、什么是虛擬DOM
  • 15、diff算法
  • 16、Vue組件傳值
  • 17、介紹一下SPA以及SPA有什么缺點？
  • 18、Vue雙向綁定和單向綁定
  • 19、props和data優先級誰高？
  • 20、computed、methods、watch有什么區別？
  • 21、Vuex
• 09、微信小程序
• • 1、如何自定義頭部？
  • 2、如何自定義底部？
• 10、uni-app
• • 1、生命周期
  • 2、條件編譯
• 11、性能優化
• • 1、加載優化
  • 2、圖片優化
  • 3、渲染優化
  • 4、首屏優化
  • 5、vue優化
• 12、兼容性
• • 1、頁面樣式兼容
  • 2、框架兼容
• 13、網絡請求
• • 1、跨域面試題
  • 2、http和https
• 14、WEB安全
• • 1、XSS攻擊
  • 2、SQL注入
  • 3、接口安全
• 15、其他
• • 1、token
  • 2、SEO

---

01、HTML基礎

1、行內元素有哪些？行內塊元素有哪些？塊級元素有哪些？ 空(void)元素有哪些？

元素分類

行內元素：a標簽、span標簽、b標簽、i標簽、em標簽等
行內塊元素：img標簽、input標簽、button標簽、select標簽等
塊級元素：div標簽、p標簽、li標簽、ol標簽、ul標簽、h標簽等
空元素：input標簽、img標簽、hr標簽等

---

元素之間的轉換

屬性轉換特性

display: inline;	把某元素轉換成了行內元素	不獨占一行的，并且不能設置寬高
display: inline-block;	把某元素轉換成了行內塊元素	不獨占一行的，可以設置寬高
display: block;	把某元素轉換成了塊元素	獨占一行，并且可以設置寬高

---

2、頁面導入樣式時，使用link和@import有什么區別？

1、link先有，后有@import，link的兼容性比@import好
2、加載順序差別，瀏覽器先加載link標簽，后加載@import

---

3、title與h1的區別、b與strong的區別、i與em的區別？

title與h1的區別

定義
title：概括了網站信息，可以告訴搜索引擎或者用戶關于這個網站的內容主題是什么
h1：文章主題內容，告訴蜘蛛我們的網站內容最主要是什么
區別
title他是顯示在網頁標題上、h1是顯示在網頁內容上
title比h1添加的重要 (title > h1 ) ==》對于seo的了解
場景
網站的logo都是用h1標簽包裹的

---

b與strong的區別

定義
b：實體標簽，用來給文字加粗的。
strong：邏輯標簽，用來加強字符語氣的。
區別
b標簽只有加粗的樣式，沒有實際含義。
strong表示標簽內字符比較重要，用以強調。
題外話
為了符合css3的規范，b盡量少用該用strong就行了。

---

i與em的區別

定義
i:實體標簽，用來做文字傾斜的。
em：是邏輯標簽，用來強調文字內容的
區別
i只是一個傾斜標簽，沒有實際含義。
em表示標簽內字符重要，用以強調的。
場景
i更多的用在字體圖標，em術語上（醫藥，生物）。

---

4、img標簽的title和alt有什么區別？

區別一

title ： 鼠標移入到圖片顯示的值
alt ： 圖片無法加載時顯示的值

---

區別二

在seo的層面上，蜘蛛抓取不到圖片的內容，所以前端在寫img標簽的時候為了增加seo效果要加入alt屬性來描述這張圖是什么內容或者關鍵詞。

---

5、png、jpg、gif、webp這些圖片格式解釋一下，分別什么時候用？

png: 無損壓縮，尺寸體積要比jpg/jpeg的大，適合做小圖標。
jpg: 采用壓縮算法，有一點失真，比png體積要小，適合做中大圖片。
gif: 一般是做動圖的。
webp: 同時支持有損或者無損壓縮，相同質量的圖片，webp具有更小的體積。兼容性不是特別好。

---

02、CSS基礎

01、介紹一下CSS的盒子模型

CSS的盒子模型有哪些

標準盒子模型、IE盒子模型

---

CSS的盒子模型區別

標準盒子模型：margin、border、padding、content
IE盒子模型 ：margin、content（ border + padding + content ）

---

通過CSS如何轉換盒子模型

box-sizing: content-box; // 標準盒子模型
box-sizing: border-box; // IE盒子模型

---

02、line-height和heigh區別

line-height是每一行文字的高，如果文字換行則整個盒子高度會增大（行數*行高）。
height是一個死值，就是這個盒子的高度。

---

03、CSS選擇符有哪些？哪些屬性可以繼承？

CSS選擇符

通配（*）
id選擇器（#）
類選擇器（.）
標簽選擇器（div、p、h1…）
相鄰選擇器(+)
后代選擇器(ul li)
子元素選擇器（ > ）
屬性選擇器(a[href])

---

CSS屬性哪些可以繼承

文字系列：font-size、color、line-height、text-align…
不可繼承屬性：border、padding、margin…

---

04、CSS優先級算法如何計算？

優先級比較

!important > 內聯樣式 > id > class > 標簽 > 通配

---

CSS權重計算

等級選擇器權重值

第一	內聯樣式（style）	1000
第二	id選擇器	100
第三	類選擇器	10
第四	標簽&偽元素選擇器	1
第五	通配、>、+	0

---

05、用CSS畫一個三角形

// 用邊框畫、border // 這是一個向上的三角形 b {width: 0;height: 0;border-left:100px solid transparent;border-right:100px solid transparent;border-top:100px solid transparent;border-bottom:100px solid #ff0000; }

---

06、一個盒子不給寬度和高度如何水平垂直居中？

方式一

<div class='container'><div class='main'>main</div> </div> .container{display: flex;justify-content: center;align-items: center;width: 300px;height: 300px;border:5px solid #ccc; }.main{background: red; }

---

方式二

<div class='container'><div class='main'>main</div> </div> .container{position: relative;width: 300px;height: 300px;border:5px solid #ccc; }.main{position: absolute;left:50%;top:50%;background: red;transform: translate(-50%,-50%); }

---

07、display有哪些值？說明他們的作用。

none: 隱藏元素
block: 把某元素轉換成塊元素
inline: 把某元素轉換成行內元素
inline-block: 把某元素轉換成行內塊元素

---

08、對BFC規范(塊級格式化上下文：block formatting context)的理解？

BFC就是頁面上一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。
1、了解BFC ： 塊級格式化上下文。
2、BFC的原則：如果一個元素具有BFC，那么內部元素再怎么弄，都不會影響到外面的元素。
3、 如何觸發BFC：
float的值非none
overflow的值非visible
display的值為：inline-block、table-cell…
position的值為:absoute、fixed

---

09、清除浮動有哪些方式？

1、觸發BFC
2、多創建一個盒子，添加樣式：clear: both;
3、after方式
ul:after { content: ''; display: block; clear: both; }

---

10、在網頁中的應該使用奇數還是偶數的字體？為什么呢？

偶數 : 讓文字在瀏覽器上表現更好看。
另外說明：ui給前端一般設計圖都是偶數的，這樣不管是布局也好，轉換px也好，方便一點。

---

11、position有哪些值？分別是根據什么定位的？

值

static: [默認] 沒有定位
fixed: 固定定位，相對于瀏覽器窗口進行定位。
relative: 相對于自身定位，不脫離文檔流。
absolute: 相對于第一個有relative的父元素，脫離文檔流。

---

relative和absolute區別

1、relative不脫離文檔流 、absolute脫離文檔流
2、relative相對于自身 、 absolute相對于第一個有relative的父元素
3、relative如果有left、right、top、bottom -> left、top
absolute如果有left、right、top、bottom -> left、right、top、bottom

---

12、寫一個左中右布局占滿屏幕，其中左、右倆塊固定寬200，中間自適應寬，要求先加載中間塊，請寫出結構及樣式。

雙飛翼

<div class='container'><div class='c'><div class='main'>中</div></div><div class='l'>左</div><div class='r'>右</div> </div>

---

* {margin: 0;padding: 0; }body {width: 100vw;height: 100vh; }.container>div {float: left; }.l {margin-left: -100%;width: 200px;height: 100vh;background: red; }.c {width: 100%;height: 100vh;background: pink; }.r {margin-left: -200px;width: 200px;height: 100vh;background: blue; }.main {padding: 0 200px; }

---

圣杯布局

// 待補充

---

13、什么是CSS reset？

reset.css是一個css文件，用來重置css樣式的。
normalize.css為了增強跨瀏覽器渲染的一致性，一個CSS 重置樣式庫。

---

14、css sprite是什么，有什么優缺點

1、是什么
把多個小圖標合并成一張大圖片。
2、優缺點
優點：減少了http請求的次數，提升了性能。
缺點：維護比較差（例如圖片位置進行修改或者內容寬高修改）

---

15、display: none;與visibility: hidden;的區別

占用位置的區別

display: none;不占用位置
visibility: hidden;雖然隱藏了，但是占用位置

---

重繪和回流的問題

visibility: hidden;和display: none;都產生重繪
display: none;還會產生一次回流
產生回流一定會造成重繪，但是重繪不一定會造成回流。
產生回流的情況：改變元素的位置(left、top…)、顯示隱藏元素…
產生重繪的情況：樣式改變、換皮膚

---

16、opacity和rgba區別

實現透明效果

1、opacity: 取值范圍0到1之間，0表示完全透明，1表示不透明
2、rgba: r表示紅色，g表示綠色，b表示藍色，取值可以在正整數或者百分數；a表示透明度取值0到1之間

---

繼承的區別

opacity會繼承父元素的opacity屬性，而rgba設置的元素的后代元素不會繼承不透明屬性。

---

03、JavaScript基礎

01、延遲加載JS有哪些方式？

延遲加載：async、defer
<script defer type="text/javascript" src='script.js'></script>
<script async type="text/javascript" src='script.js'></script>
defer : 等html全部解析完成，才會執行js代碼，順次執行js腳本。
async : async是和html解析同步的（一起的），不是順次執行js腳本（誰先加載完誰先執行）。
也就是說當有多個js文件時，在執行完html后defer會根據js文件順序執行，而async是先加載完先執行

---

02、JS數據類型有哪些？

JavaScript共有8種數據類型。
7種基本數據類型：Null、Undefined、Boolean、Number、String、Symbol（ES6新增，表示獨一無二的值）和BigInt（ES10新增）。
1種引用數據類型：Object。Object里面包含Object、Array、Function、Date、RegExp等。
總結：JavaScript不支持任何創建自定義類型的機制，而所有值最終都將是上述8種數據類型之一。
NaN是一個數值類型，但不是一個具體的數字。

---

03、JS數據類型考題

考題一

console.log(true + 1); // 2 console.log('name' + true); // nametrue console.log(undefined + 1); // NaN console.log(typeof undefined); // undefined

---

考題二

console.log(typeof(NaN)); // number console.log(typeof(null)); // object

---

04、null和undefined的區別

歷史遺留

1、作者在設計js的都是先設計的null，為什么設計了null：最初設計js的時候借鑒了java語言。
2、null會被隱式轉換成0，很不容易發現錯誤。
3、先有null后有undefined，出來undefined是為了填補之前的坑。

---

具體區別

JavaScript的最初版本的null是一個表示"無"的對象（空對象指針），轉為數值時值為0；undefined是一個表示"無"的原始值，轉為數值時為NaN。

---

其他解釋
null

null 表示一個"無"的對象，轉為數值為 0；
作為函數的參數，表示該函數的參數不是對象；
作為對象原型鏈的終點；

console.log(Number(null)); // 0 console.log(5 + null); // 5 console.log(JSON.stringify(null)); // 'null' 字符串類型 console.log(JSON.parse(null)); // null 基本類型

---

undefined

變量被聲明了，但是沒有賦值，就等于 undefined；
調用函數時，應該提供的參數沒有提供，該參數等于 undefined；
對象沒有賦值屬性，該屬性的值為 undefined；
函數沒有返回值時，默認返回 undefined；

console.log(Number(undefined)); // NaN console.log(5 + undefined); // NaN console.log(JSON.stringify(undefined)); // undefined console.log(JSON.parse(undefined)); // 報錯

---

05、兩等和三等有什么不同

==: 比較的是值
string == number || boolean || number …都會隱式轉換
通過valueOf轉換（valueOf() 方法通常由 JavaScript 在后臺自動調用，并不顯式地出現在代碼中）
===: 除了比較值，還比較類型

---

06、JS微任務和宏任務

1、js是單線程的語言。
2、js代碼執行流程：同步執行完 =》事件循環
同步的任務都執行完了，才會執行事件循環的內容
進入事件循環：請求、定時器、事件…
3、事件循環中包含微任務和宏任務
微任務：promise.then…
宏任務：setTimeout…
要執行宏任務的前提是清空了所有的微任務
流程：同步 =》事件循環【微任務和宏任務】=》微任務 =》宏任務 =》微任務…

---

07、JS作用域考題

介紹

1、除了函數外，js是沒有塊級作用域。
2、作用域鏈：內部可以訪問外部的變量，但是外部不能訪問內部的變量。
注意：如果內部有，優先查找到內部，如果內部沒有就查找外部的。
3、注意聲明變量是用var還是沒有寫（window.）
4、注意：js有變量提升的機制【變量懸掛聲明】
5、優先級：聲明變量 > 聲明普通函數 > 參數 > 變量提升

應用
1、本層作用域有沒有此變量【注意變量提升】
2、注意：js除了函數外沒有塊級作用域
3、普通聲明函數是不看寫函數的時候順序

---

考題一

function c() {var b = 1;function a() {console.log(b); // undefinedvar b = 2;console.log(b); // 2}a();console.log(b); // 1 } c();

---

考題二

var name = 'a'; (function() {if(typeof name == 'undefined') {var name = 'b';console.log('111' + name); // 111b} else {console.log('222' + name);} })();

---

考題三

function fun(a) {var a = 10;function a() {}console.log(a); // 10 } fun(100);

---

08、JS對象考題

JS對象注意點

1、對象是通過new操作符構建出來的，所以對象之間不相等(除了引用外)；
2、對象注意：引用類型(共同一個地址)；
3、對象的key都是字符串類型；
4、對象如何找屬性|方法；
查找規則：先在對象本身找 ===> 構造函數中找 ===> 對象原型中找 ===> 構造函數原型中找 ===> 對象上一層原型查找

---

考題一

console.log([1, 2, 3] === [1, 2, 3]); // false

---

考題二

var obj1 = { a:'hellow' }; var obj2 = obj1; obj2.a = 'world'; console.log(obj1); // {a: world} (function(){console.log(a); // undefinedvar a = 1; })();

---

考題三

var a = {}; var b = { key:'a' }; var c = { key:'c' };a[b] = '123'; a[c] = '456';console.log(a[b]); // 456 // a[b] || a[c] ==> a['[object Object]']

---

09、JS作用域+this指向+原型考題

考題一

function Foo() {getName = function() { console.log(1); } // 注意是全局的window.return this; }Foo.getName = function() { console.log(2); } Foo.prototype.getName = function() { console.log(3) } var getName = function() { console.log(4); } function getName() { console.log(5); }Foo.getName(); // 2 getName(); // 4 Foo().getName(); // 1 getName(); // 1 因為重新執行了Foo() new Foo().getName(); // 3

---

考題二

var o = {a: 10,b: {a: 2,fn: function() {console.log(this.a); // 2console.log(this); // {a: 2, fn: ?}}} } o.b.fn();

---

考題三

window.name = 'ByteDance'; function A() {this.name = 123; } A.prototype.getA = function() {console.log(this); // this代表window對象return this.name + 1; } let a = new A(); let funcA = a.getA; console.log(funcA()); // ByteDance1

---

考題四

var length = 10; function fn() {return this.length + 1; } var obj = {length: 5,test1: function() {return fn();} } obj.test2 = fn; console.log(obj.test1()); // 11 console.log(fn() === obj.test2()); // false console.log(obj.test1() == obj.test2()); // false

---

10、JS判斷變量是不是數組，你能寫出哪些方法？

1、isArray

var arr = [1, 2, 3]; console.log(Array.isArray(arr)); // true

---

2、prototype

var arr = [1, 2, 3]; console.log(Object.prototype.toString.call(arr).indexOf('Array') !== -1); // true

---

3、isPrototypeOf

var arr = [1, 2, 3]; console.log(Array.prototype.isPrototypeOf(arr)); // true

---

4、constructor

var arr = [1, 2, 3]; console.log(arr.constructor.toString().indexOf('Array') !== -1); // true

---

5、instanceof

var arr = [1, 2, 3]; console.log(arr instanceof Array); // true

---

11、slice是干嘛的、splice是否會改變原數組

1、slice用來截取
參數可以寫slice(3)、slice(1, 3)、slice(-3)
返回的是一個新的數組
2、splice有插入、刪除和替換功能
返回：刪除的元素
該方法會改變原數組

---

12、JS數組去重

1、new set

var arr1 = [1, 2, 3, 2, 4, 1]; function unique(arr) {return [...new Set(arr)]; } console.log(unique(arr1));

---

2、indexOf

var arr2 = [1, 2, 3, 2, 4, 1]; function unique(arr) {var brr = [];for(var i = 0; i < arr.length; i++) {if(brr.indexOf(arr[i]) == -1) brr.push(arr[i]);}return brr; } console.log(unique(arr2));

---

3、sort

var arr3 = [1, 2, 3, 2, 4, 1]; function unique(arr) {arr = arr.sort();var brr = [];for(var i = 0; i < arr.length; i++) {if(arr[i] !== arr[i - 1]) brr.push(arr[i]);}return brr; } console.log(unique(arr3));

---

13、找出多維數組最大值

function fnArr(arr){var newArr = [];arr.forEach((item, index) => { newArr.push(Math.max(...item)); });return newArr; } console.log(fnArr([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]));

---

14、給字符串新增方法實現功能

給字符串對象定義一個addPrefix函數，當傳入一個字符串str時，它會返回新的帶有指定前綴的字符串，
例如：console.log( 'world'.addPrefix('hello')); 控制臺會輸出helloworld

---

String.prototype.addPrefix = function(str) {return str + this; } console.log('world'.addPrefix('hello')); // helloworld

---

15、找出字符串出現最多次數的字符以及次數

方式一

function statistics(string) {string = string.replace(/\s+/g, '');var dictionaries = {},max = null,count = 0;for (var i = 0; i < string.length; i++) {if (dictionaries[string[i]] === undefined) {dictionaries[string[i]] = 1;} else {dictionaries[string[i]] += 1;}}for (var key in dictionaries) {if (dictionaries[key] > count) {max = key;count = dictionaries[key];}}return { dictionaries, max, count }; };console.log(statistics('I miss you')); // {dictionaries: {…}, max: "s", count: 2} // dictionaries: { I: 1, i: 1, m: 1, o: 1, s: 2, u: 1, y: 1 } // max: "s" // count: 2

---

方式二

var str = 'aaabbbbbccddddddddddx'; var obj = {}; for(var i = 0; i < str.length; i++) {var char = str.charAt(i);if(obj[char]) {obj[char]++;} else {obj[char] = 1;} } console.log(obj); // 統計出來最大值 var max = 0; for(var key in obj) {if(max < obj[key]) max = obj[key]; } // 拿最大值去對比 for(var key in obj) {if(obj[key] == max) {console.log('最多的字符是' + key);console.log('出現的次數是' + max);} }

---

16、new操作符具體做了什么

1、創建了一個空的對象
2、將空對象的原型，指向于構造函數的原型
3、將空對象作為構造函數的上下文（改變this指向）
4、對構造函數有返回值的處理判斷

---

function Fun(age,name) {this.age = age;this.name = name; } function create(fn, ...args) {// 1. 創建了一個空的對象var obj = {}; // var obj = Object.create({})// 2. 將空對象的原型，指向于構造函數的原型Object.setPrototypeOf(obj, fn.prototype);// 3. 將空對象作為構造函數的上下文（改變this指向）var result = fn.apply(obj,args);// 4. 對構造函數有返回值的處理判斷return result instanceof Object ? result : obj; } console.log(create(Fun, 18, '張三'));

---

17、閉包

1、閉包是什么
閉包是一個函數加上到創建函數的作用域的連接，閉包“關閉”了函數的自由變量。
2、閉包可以解決什么問題【閉包的優點】
2.1、內部函數可以訪問到外部函數的局部變量
2.2、閉包可以解決的問題

var lis = document.getElementsByTagName('li'); for(var i = 0; i < lis.length; i++) {(function(i) {lis[i].onclick = function() {console.log(i);}})(i); }

3、閉包的缺點
3.1、變量會駐留在內存中，造成內存損耗問題。
解決：把閉包的函數設置為null
3.2、內存泄漏【ie】 ==> 可說可不說，如果說一定要提到ie

---

18、原型鏈

1、原型可以解決什么問題
對象共享屬性和共享方法
2、誰有原型
函數擁有：prototype
對象擁有：proto
3、對象查找屬性或者方法的順序
先在對象本身查找 --> 構造函數中查找 --> 對象的原型 --> 構造函數的原型中 --> 當前原型的原型中查找
4、原型鏈
4.1、是什么？：就是把原型串聯起來
4.2、原型鏈的最頂端是null

19、JS繼承有哪些方式

1、構造函數繼承

這種方式只能繼承父類構造函數中的屬性和方法，對于原型對象上的方法無法繼承。
構造函數繼承是利用call或者apply方法，將父類構造函數的this綁定到子類構造函數的this上即可。

---

2、原型實例繼承

這是比較常用的一種實現繼承的方式。
1、將student的prototype對象指向parentClass的一個實例。
此操作完全刪除了student.prototype對象原本的內容，然后賦予給它一個新的值。
student.prototype = new parentClass();
2、任何一個構造函數都有一個prototype對象，這個prototype對象都有一個constructor屬性指向自身的構造函數。
2.1、因為第上面代碼對prototype對象進行了重新賦值，所以prototype對象的constructor屬性也發生了改變，變成指向parentClass，所以必須手動將student.prototype.constructor指回student。
2.2、如果沒有(student.prototype.construct = student)這行代碼，則student.prototype.constructor==parentClass和example.constructor==parentClass的結果返回false。
2.3、這里比較好理解，因為example是student的實例化對象，它的constructor屬性默認繼承自parentClass.prototype，而parentClass.prototype的constructor屬性繼承自parentClass.prototype，最后找到parentClass.prototype.constructor指向parentClass。顯然如果沒有這句話，將會導致繼承鏈的錯亂。
注意：在編程時，如果對prototype對象進行重新賦值后，記得手動獎prototype的constructor屬性智慧原來的構造函數。
student.prototype.construct = student;

---

3、原型直接繼承

原型直接繼承是通過直接將子類構造函數的原型對象，直接賦值為父類構造函數的原型對象，從而達到繼承的目的。
student.prototype = parentClass.prototype;
student.prototype.constructor = student;

---

4、class繼承

---

20、說一下call、apply、bind區別

共同點

都可以改變this指向

---

語法

函數.call()、函數.apply()、函數.bind()

---

區別
1、call、apply會立即執行。bind不會立即執行，因為bind返回的是一個函數需要加入()執行。
2、參數不同：apply第二個參數是數組。call和bind有多個參數需要挨個寫。

---

場景

var arr1 = [1, 2, 4, 5, 7, 3, 321]; console.log(Math.max.apply(null, arr1));// ------------------------------------ var btn = document.getElementById('btn'); var h1s = document.getElementById('h1s'); btn.onclick = function() {console.log(this.id); }.bind(h1s);

---

21、sort背后原理是什么？

V8引擎sort函數只給出了兩種排序InsertionSort和QuickSort，數量小于10的數組使用InsertionSort，比10大的數組則使用QuickSort。
之前的版本是：插入排序和快排，現在是冒泡
原理實現-710行代碼開始

---

22、深拷貝和淺拷貝

定義
1、淺拷貝只是增加了一個指針指向已存在的內存地址。
2、深拷貝是增加了一個指針并且申請了一個新的內存，使這個增加的指針指向這個新的內存。

---

淺拷貝

只復制引用，而未復制真正的值。

var arr1 = ['a', 'b', 'c', 'd']; var arr2 = arr1; var obj1 = { a: 1, b: 2 }; var obj2 = Object.assign(obj1);

---

深拷貝

是復制真正的值 （不同引用）

var obj3 = { a: 1, b: 2 }; var obj4 = JSON.parse(JSON.stringify( obj3 ));// 遞歸的形式 function copyObj(obj) {if(Array.isArray(obj)) {var newObj = [];} else {var newObj = {};}for( var key in obj ) {if( typeof obj[key] == 'object' ) {newObj[key] = copyObj(obj[key]);} else {newObj[key] = obj[key];}}return newObj; } console.log(copyObj(obj5));

---

23、localstorage、sessionstorage、cookie的區別

公共點

在客戶端存放數據

---

區別

1、數據存放有效期
sessionStorage: 僅在當前瀏覽器窗口關閉之前有效。【關閉瀏覽器就沒了】
localStorage: 始終有效，窗口或者瀏覽器關閉也一直保存，所以叫持久化存儲。
cookie: 只在設置的cookie過期時間之前有效，即使窗口或者瀏覽器關閉也有效。
2、localStorage、sessionStorage不可以設置過期時間
cookie 有過期時間，可以設置過期（把時間調整到之前的時間，就過期了）
3、存儲大小的限制
cookie存儲量不能超過4k
localStorage、sessionStorage不能超過5M
根據不同的瀏覽器存儲的大小是不同的。

---

04、H5/C3

01、什么是語義化標簽

1、易讀性和維護性更好。
2、seo成分會更好，蜘蛛抓取更好。
3、IE8不兼容HTML5標簽的解決辦法：可以通過html5shiv.js去處理。

---

02、::before和:after中雙冒號和單冒號有什么區別？解釋一下這2個偽元素的作用。

1、區別
:是偽類、::偽元素 ===》是為了做區分
2、是什么？作用
元素before之前 、 元素after之后
作用：清除浮動、樣式布局上也有作用

---

03、如何關閉iOS鍵盤首字母自動大寫

<input type="text" autocapitalize='off' />

---

04、怎么讓Chrome支持小于12px的文字？

Chrome默認字體大小是：16px
每個瀏覽器默認字體大小可能都不一樣

---

div {font-size: 10px; }div span {display: inline-block;-webkit-transform: scale(1.6); }

---

05、rem和em的區別

相對于font-size
em針對于父元素的font-size
rem針對于根(html)元素的font-size

---

06、ios系統中元素被觸摸時產生的半透明灰色遮罩怎么去掉

a, button, input, textarea {-webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

---

07、webkit表單輸入框placeholder的顏色值能改變嗎？

input::-webkit-input-placeholder {color: red; }

---

08、禁止ios長按時不觸發系統的菜單，禁止ios&android長按時下載圖片

html, body {touch-callout: none;-webkit-touch-callout: none;user-select: none;-webkit-user-select: none; }

---

09、禁止ios和android用戶選中文字

html, body {user-select: none;-webkit-user-select: none; }

---

10、自適應

淘寶無限適配【移動端】：淘寶無限適配 + 布局單位使用rem

---

11、響應式

1、是什么？

一個URL可以響應多端

---

2、語法結構

@media only screen and (max-width: 1000px) {ul li:last-child {display: none;} }

only : 可以排除不支持媒體查詢的瀏覽器
screen ： 設備類型
max-width | max-height
min-width | min-height

---

3、響應式圖片【性能優化】

<picture><source srcset="1.jpg" media='(min-width: 1000px)'><source srcset="2.jpg" media='(min-width: 700px)'><img srcset="3.jpg"> </picture>

---

布局方案
一、什么情況下采用響應式布局

數據不是特別多，用戶量不是特別大，純展示類的項目適合響應式布局
例如：公司的官網、專題頁面
特別追求性能的項目，不太適合響應式，因為如果添加了很多的響應式就會造成加載速度變慢。

---

二、pc+移動端應該做什么樣的布局方案

注意：訪問量還可以或者比較大，類似于淘寶網。
pc是一套，會加入一點點響應式。
移動端是一套，會使用自適應的布局方式。

---

三、pc的設計圖

ui：1980
筆記本電腦：1280
ui圖的寬度和電腦的寬度不對應該怎么辦？
1、把ui圖進行等比縮放，縮放成和電腦一樣的尺寸
2、換1980的電腦

---

四、移動端的設計圖

寬度：750
因為750設計圖/2就是375，正好是iphone6的尺寸，我們要把iphone6的尺寸做為基準點。

---

05、ES6

1、var、let、const區別

var、let、const共同點是可以聲明變量

---

區別一

var具有變量提升的機制
let和const沒有變量提升的機制

---

區別二

var可以在同一作用域多次聲明同一個變量
let和const不可以在同一作用域多次聲明同一個變量

---

區別三

var、let聲明變量
const聲明常量
var和let聲明的變量可以再次賦值，但是const不可以再次賦值。

---

區別四

var聲明的變量沒有自身作用域
let和const聲明的變量有自身的作用域

---

1、var聲明的變量會掛載在window上，而let和const聲明的變量不會。
2、var聲明變量存在變量提升，let和const不存在變量提升。
3、let和const聲明形成塊作用域。
4、同一作用域下var可以聲明同名變量，而let和const不可以。
5、var或let聲明的變量可以再次賦值，而const聲明的是常量，不可以再次賦值。

---

2、作用域考題

考題一

console.log(str); // undefined var str = '你好';console.log(num); // 報錯 let num = 10;

---

考題二

function demo() {var n = 2;if(true) {var n = 1;}console.log(n); // 1 } demo();function demo() {let n = 2;if(true) {let n = 1;}console.log( n ); // 2 } demo();

---

考題三

const obj = { a: 1 }; obj.a = 11111; console.log(obj); // {a: 11111}const arr = ['a', 'b', 'c']; arr[0]= 'aaaaa'; console.log(arr); // ['aaaaa', 'b', 'c']

---

3、將下列對象進行合并

方式一

const a = { a: 1, b: 4 }; const b = { b: 2, c: 3 };let obj = Object.assign(a, b); console.log(obj); // {a: 1, b: 2, c: 3}

---

方式二

const a = { a: 1, b: 4 }; const b = { b: 2, c: 3 };let obj = { ...a, ...b }; console.log(obj); // {a: 1, b: 2, c: 3}

---

方式三

function extend(target, source) {for(var key in source) {target[key] = source[key];}return target; }let a = { a: 1, b: 4 },b = { b: 2, c: 3 };console.log(extend(a, b)); // {a: 1, b: 2, c: 3}

---

4、箭頭函數和普通函數有什么區別？

1、箭頭函數的this在定義時確定，且不能用call、apply、bind修改，this會指向外層第一個普通函數的this
2、箭頭函數不能用new關鍵字執行，也就是不能當作構造函數
3、箭頭函數沒有prototype原型
4、箭頭函數沒有arguments對象

---

5、Promise有幾種狀態

Promise有三種狀態
pending（進行中）
fulfilled（已成功）
rejected（已失敗）

---

6、find和filter的區別

1、返回的內容不同
filter：返回是新數組
find：返回具體的內容
2、截斷不同
find：匹配到第一個即返回
filter：返回整體，返回所有匹配成功的值

---

7、some和every的區別

some：如果有一項匹配則返回true
every：全部匹配才會返回true

---

06、webpack

1、webpack插件

---

07、Git

1、git常用命令

2、解決沖突

3、GitFlow

---

08、Vue

01、Vue2.x生命周期有哪些？

生命周期名稱描述

beforeCreate	創建前	組件實例被創建之初，組件的屬性生效之前。
created	創建后	組件實例已經完全創建，屬性也綁定，但真實DOM還沒有生成，$el還不可用。
beforeMount	載入前	在掛載開始之前被調用，相關的render函數首次被調用。
mounted	載入后	el被新創建的vm.$el替換，并掛載到實例上去之后調用該鉤子。
beforeUpdate	更新前	組件數據更新之前調用，發生在虛擬DOM打補丁之前。
update	更新后	組件數據更新之后。
beforeDestory	銷毀前	實例銷毀前調用，實例仍然可用。
destoryed	銷毀后	實例銷毀之后調用，Vue實例指示的所有東西都會解綁，所有事件監聽器和所有子實例都會被移除。

---

beforeCreate() {console.log('beforeCreate'); }

---

created() {console.log('created'); }

---

beforeMount() {console.log('beforeMount'); }

---

mounted() {console.log('mounted'); }

---

beforeUpdate() {console.log('beforUpdate'); }

---

updated() {console.log('updated'); }

---

beforeDestroy() {console.log('beforeDestroy'); }

---

destroyed() {console.log('destroyed'); }

---

02、第一次進入組件或者頁面，會執行哪些生命周期？

beforeCreate、created、beforeMount、mounted

---

03、談談你對keep-alive的了解

概念

keep-alive是Vue的內置組件，當它包裹動態組件時，會緩存不活動的組件實例，而不是銷毀。

---

作用

組件在切換過程中將狀態保留到內存中，防止重復渲染DOM，減少加載時間及性能消耗，提高用戶體驗性。

---

原理

在created函數調用時將需要緩存的VNode節點保存在this.cache中；在render執行時，如果VNode的name符合緩存條件，則會從this.cache中取出之前緩存的VNode實例進行渲染。

---

04、v-if和v-show區別

定義

v-if指令是通過銷毀和重建DOM來使元素顯示或隱藏。
v-show指令是通過修改元素的display屬性讓其顯示或隱藏。

---

應用場景

v-if適用于不需要頻繁切換條件的場景。
v-show適用于需要頻繁切換條件的場景。

---

05、v-if和v-for優先級

v-for的優先級高于v-if，連用的話每個循環出來的元素都添加了v-if，會造成性能問題，影響渲染速度，所以不建議連用。

---

06、ref是什么？

ref被用來給元素或子組件注冊引用信息。引用信息將會注冊在父組件的$refs對象上。如果在普通的DOM元素上使用，引用指向的就是DOM元素；如果用在子組件上，引用就指向組件實例。

---

07、nextTick是什么？

異步方法，異步渲染最后一步，與JavaScript事件循環聯系緊密。主要使用了宏任務微任務定義了一個異步方法，多次調用$nextTickt會將方法存入隊列，通過異步方法清空當前隊列。

---

08、路由導航守衛有哪些？

全局

beforeEach beforeResolve afterEach

---

路由獨享

beforeEnter

---

組件內

beforeRouteEnter beforeRouteUpdate beforeRouteLeave

---

09、Vue中如何做樣式穿透

sass和less：/deep/
通用使用：:v-deep

---

10、scoped原理

1、作用：讓樣式在本組件中生效，不影響其他組件。
2、原理：給節點新增自定義屬性，然后css根據屬性選擇器添加樣式。

---

11、Vuex是單向數據流還是雙向數據流？

---

12、講一下MVVM

MVVM是Model-View-ViewModel的縮寫，也就是把MVC中的controller演變成ViewModel。
1、Model表示數據模型層，也就是vue中的data。
2、View表示視圖層，也就是UI組件。
3、ViewModel是View和Model層的橋梁，數據綁定到viewModel層并自動渲染到頁面中，視圖變化會通知viewModel層更新數據。

---

13、雙向綁定原理

14、什么是虛擬DOM

15、diff算法

16、Vue組件傳值

17、介紹一下SPA以及SPA有什么缺點？

18、Vue雙向綁定和單向綁定

19、props和data優先級誰高？

20、computed、methods、watch有什么區別？

21、Vuex

---

09、微信小程序

1、如何自定義頭部？

2、如何自定義底部？

---

10、uni-app

1、生命周期

2、條件編譯

---

11、性能優化

1、加載優化

2、圖片優化

3、渲染優化

4、首屏優化

5、vue優化

---

12、兼容性

1、頁面樣式兼容

2、框架兼容

13、網絡請求

1、跨域面試題

2、http和https

14、WEB安全

1、XSS攻擊

2、SQL注入

3、接口安全

15、其他

1、token

2、SEO

總結

以上是生活随笔為你收集整理的Web-big、html、css、JavaScript、vue、webpack、git、微信小程序、uni-app、性能优化、兼容性、网络请求、web安全、其他的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。