老張前端: 2022年必刷前端面試題，前端高頻面試題，前端面試題

第一章 面試題基礎篇

1.1 HTML面試題

1.1.1 行內(nèi)元素有哪些？塊級元素有哪些？ 空(void)元素有哪些？

行內(nèi)元素：span、img、input... 塊級元素：div、footer、header、section、p、h1...h6... 空元素：br、hr...元素之間的轉換問題： display: inline; 把某元素轉換成了行內(nèi)元素 ===>不獨占一行的，并且不能設置寬高 display: inline-block; 把某元素轉換成了行內(nèi)塊元素 ===>不獨占一行的，可以設置寬高 display: block; 把某元素轉換成了塊元素 ===>獨占一行，并且可以設置寬高

1.1.2 頁面導入樣式時，使用link和@import有什么區(qū)別？

區(qū)別一：link先有，后有@import（兼容性link比@import兼容）； 區(qū)別二：加載順序差別，瀏覽器先加載的標簽link，后加載@import

1.1.3 title與h1的區(qū)別、b與strong的區(qū)別、i與em的區(qū)別？

title與h1的區(qū)別：定義：title：概括了網(wǎng)站信息，可以告訴搜索引擎或者用戶關于這個網(wǎng)站的內(nèi)容主題是什么h1：文章主題內(nèi)容，告訴蜘蛛我們的網(wǎng)站內(nèi)容最主要是什么 區(qū)別：title他是顯示在網(wǎng)頁標題上、h1是顯示在網(wǎng)頁內(nèi)容上title比h1添加的重要 (title > h1 ) ==》對于seo的了解 場景：網(wǎng)站的logo都是用h1標簽包裹的 b與strong的區(qū)別：定義：b：實體標簽，用來給文字加粗的。strong：邏輯標簽，用來加強字符語氣的。 區(qū)別：b標簽只有加粗的樣式，沒有實際含義。strong表示標簽內(nèi)字符比較重要，用以強調的。 題外話：為了符合css3的規(guī)范，b盡量少用該用strong就行了。 i與em的區(qū)別：定義：i:實體標簽，用來做文字傾斜的。em：是邏輯標簽，用來強調文字內(nèi)容的 區(qū)別：i只是一個傾斜標簽，沒有實際含義。em表示標簽內(nèi)字符重要，用以強調的。 場景：i更多的用在字體圖標，em術語上（醫(yī)藥，生物）。

1.1.4 img標簽的title和alt有什么區(qū)別？

區(qū)別一：title ： 鼠標移入到圖片顯示的值alt ： 圖片無法加載時顯示的值 區(qū)別二：在seo的層面上，蜘蛛抓取不到圖片的內(nèi)容，所以前端在寫img標簽的時候為了增加seo效果要加入alt屬性來描述這張圖是什么內(nèi)容或者關鍵詞。

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

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

1.2 CSS面試題

1.2.1 介紹一下CSS的盒子模型

CSS的盒子模型有哪些：標準盒子模型、IE盒子模型 CSS的盒子模型區(qū)別：標準盒子模型：margin、border、padding、contentIE盒子模型 ：margin、content（ border + padding + content ） 通過CSS如何轉換盒子模型：box-sizing: content-box; /*標準盒子模型*/box-sizing: border-box; /*IE盒子模型*/

1.2.2 line-height和heigh區(qū)別【大廠】

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

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

CSS選擇符：通配（*）id選擇器（#）類選擇器（.）標簽選擇器（div、p、h1...）相鄰選擇器(+)后代選擇器(ul li)子元素選擇器（ > ）屬性選擇器(a[href])CSS屬性哪些可以繼承：文字系列：font-size、color、line-height、text-align... ***不可繼承屬性：border、padding、margin...

1.2.4 CSS優(yōu)先級算法如何計算？

優(yōu)先級比較：!important > 內(nèi)聯(lián)樣式 > id > class > 標簽 > 通配 CSS權重計算： 第一：內(nèi)聯(lián)樣式（style） 權重值:1000 第二：id選擇器 權重值:100 第三：類選擇器 權重值:10 第四：標簽&偽元素選擇器 權重值:1 第五：通配、>、+ 權重值:0

1.2.5 用CSS畫一個三角形

用邊框畫（border）,例如： {width: 0;height: 0;border-left:100px solid transparent;border-right:100px solid transparent;border-top:100px solid transparent;border-bottom:100px solid #ccc; }

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

方式一：

<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%); }

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

none 隱藏元素 block 把某某元素轉換成塊元素 inline 把某某元素轉換成內(nèi)聯(lián)元素 inline-block 把某某元素轉換成行內(nèi)塊元素

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

BFC就是頁面上一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。1. 了解BFC ： 塊級格式化上下文。 2. BFC的原則：如果一個元素具有BFC，那么內(nèi)部元素再怎么弄，都不會影響到外面的元素。 3. 如何觸發(fā)BFC：float的值非noneoverflow的值非visibledisplay的值為：inline-block、table-cell...position的值為:absoute、fixed 4. BFC布局規(guī)則：1. 內(nèi)部的塊會在垂直方向上一個接一個的放置2. 垂直方向上的距離里由margin決定，在同一個BFC里的兩個相鄰塊會重疊（大的 margin值決定）3. 每個塊的左外邊框緊貼父級的左邊框4. 開啟了BFC的塊和浮動元素不會重疊會挨著浮動元素顯示5. BFC是一個獨立的容器，BFC里面的子元素跟外面的子元素互不影響6. 計算BFC高度的時候，浮動子元素也參與運算

1.2.9 清除浮動有哪些方式？

1. 觸發(fā)BFC 2. 多創(chuàng)建一個盒子，添加樣式：clear: both; 3. after方式ul:after{content: '';display: block;clear: both;}

1.2.10 在網(wǎng)頁中的應該使用奇數(shù)還是偶數(shù)的字體？為什么呢？

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

1.2.11 position有哪些值？分別是根據(jù)什么定位的？

static [默認] 沒有定位 fixed 固定定位，相對于瀏覽器窗口進行定位。 relative 相對于自身定位，不脫離文檔流。 absolute 相對于第一個有relative的父元素，脫離文檔流。relative和absolute區(qū)別 1. relative不脫離文檔流 、absolute脫離文檔流 2. relative相對于自身 、 absolute相對于第一個有relative的父元素 3. relative如果有l(wèi)eft、right、top、bottom ==》left、topabsolute如果有l(wèi)eft、right、top、bottom ==》left、right、top、bottom

1.2.12 圣杯布局和雙飛翼布局

圣杯布局和雙飛翼布局

1.2.13 什么是CSS reset？

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

1.2.14 css sprite是什么,有什么優(yōu)缺點

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

1.2.15 display: none;與visibility: hidden;的區(qū)別

1. 占用位置的區(qū)別 display: none; 是不占用位置的 visibility: hidden; 雖然隱藏了，但是占用位置2. 重繪和回流的問題visibility: hidden; 、 display: none; 產(chǎn)生重繪 display: none; 還會產(chǎn)生一次回流產(chǎn)生回流一定會造成重繪，但是重繪不一定會造成回流。產(chǎn)生回流的情況：改變元素的位置(left、top...)、顯示隱藏元素.... 產(chǎn)生重繪的情況：樣式改變、換皮膚

1.2.16 opacity 和 rgba區(qū)別

共同性：實現(xiàn)透明效果1. opacity 取值范圍0到1之間，0表示完全透明，1表示不透明 2. rgba R表示紅色，G表示綠色，B表示藍色，取值可以在正整數(shù)或者百分數(shù)。A表示透明度取值0到1之間區(qū)別：繼承的區(qū)別 opacity會繼承父元素的opacity屬性，而RGBA設置的元素的后代元素不會繼承不透明屬性。

1.3 JavaScript基礎面試題

1.3.1 延遲加載JS有哪些方式？

延遲加載：async、defer例如：<script defer type="text/javascript" src='script.js'></script>defer : 等html全部解析完成，才會執(zhí)行js代碼，順次執(zhí)行js腳本。 async : async是和html解析同步的（一起的），不是順次執(zhí)行js腳本（誰先加載完誰先執(zhí)行）。

1.3.2 JS數(shù)據(jù)類型有哪些？

基本類型：string、number、boolean、undefined、null、symbol、bigint 引用類型：objectNaN是一個數(shù)值類型，但是不是一個具體的數(shù)字。

1.3.3 JS數(shù)據(jù)類型考題

考題一：

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

1.3.4 null和undefined的區(qū)別

1. 作者在設計js的都是先設計的null（為什么設計了null：最初設計js的時候借鑒了java的語言） 2. null會被隱式轉換成0，很不容易發(fā)現(xiàn)錯誤。 3. 先有null后有undefined，出來undefined是為了填補之前的坑。具體區(qū)別：JavaScript的最初版本是這樣區(qū)分的：null是一個表示"無"的對象（空對象指針），轉為數(shù)值時為0；undefined是一個表示"無"的原始值，轉為數(shù)值時為NaN。

1.3.5 == 和 === 有什么不同？

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

1.3.6 JS微任務和宏任務

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

1.3.7 JS作用域考題

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

面試的時候怎么看：

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

考題一：

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

考題二：

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

考題三：

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

1.3.8 JS對象考題

JS對象注意點：

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

考題一：

[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

1.3.9 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 new Foo().getName();//3

考題二：

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

考題三：

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

考題四：

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

1.3.10 JS判斷變量是不是數(shù)組，你能寫出哪些方法？

方式一：isArray

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

方式二：instanceof 【可寫,可不寫】

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

方式三：原型prototype

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

方式四：isPrototypeOf()

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

方式五：constructor

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

1.3.11 slice是干嘛的、splice是否會改變原數(shù)組

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

1.3.12 JS數(shù)組去重

方式一：new set

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

方式二：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) );

方式三：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) );

1.3.13 找出多維數(shù)組最大值

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] ]));

1.3.14 給字符串新增方法實現(xiàn)功能

給字符串對象定義一個addPrefix函數(shù)，當傳入一個字符串str時，它會返回新的帶有指定前綴的字符串，例如：

console.log( ‘world’.addPrefix(‘hello’) ) 控制臺會輸出helloworld

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

1.3.15找出字符串出現(xiàn)最多次數(shù)的字符以及次數(shù)

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 ); //統(tǒng)計出來最大值 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('出現(xiàn)的次數(shù)是'+max);} }

1.3.16new操作符具體做了什么

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

1.3.17 閉包

1. 閉包是什么閉包是一個函數(shù)加上到創(chuàng)建函數(shù)的作用域的連接，閉包“關閉”了函數(shù)的自由變量。 2. 閉包可以解決什么問題【閉包的優(yōu)點】2.1 內(nèi)部函數(shù)可以訪問到外部函數(shù)的局部變量2.2 閉包可以解決的問題var lis = document.getElementsByTagName('li');for(var i=0;i<lis.length;i++){(function(i){lis[i].onclick = function(){alert(i);}})(i)} 3. 閉包的缺點3.1 變量會駐留在內(nèi)存中，造成內(nèi)存損耗問題。解決：把閉包的函數(shù)設置為null3.2 內(nèi)存泄漏【ie】 ==> 可說可不說，如果說一定要提到ie

1.3.18原型鏈

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

1.3.19 JS繼承有哪些方式

方式一：ES6

class Parent{constructor(){this.age = 18;} }class Child extends Parent{constructor(){super();this.name = '張三';} } let o1 = new Child(); console.log( o1,o1.name,o1.age );

方式二：原型鏈繼承

function Parent(){this.age = 20; } function Child(){this.name = '張三' } Child.prototype = new Parent(); let o2 = new Child(); console.log( o2,o2.name,o2.age );

方式三：借用構造函數(shù)繼承

function Parent(){this.age = 22; } function Child(){this.name = '張三'Parent.call(this); } let o3 = new Child(); console.log( o3,o3.name,o3.age );

方式四：組合式繼承

function Parent(){this.age = 100; } function Child(){Parent.call(this);this.name = '張三' } Child.prototype = new Parent(); let o4 = new Child(); console.log( o4,o4.name,o4.age );

1.3.20 說一下call、apply、bind區(qū)別

共同點：功能一致

可以改變this指向語法： 函數(shù).call()、函數(shù).apply()、函數(shù).bind()

區(qū)別：

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

場景：

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

1.3.21 sort背后原理是什么？

V8 引擎 sort 函數(shù)只給出了兩種排序 InsertionSort 和 QuickSort，數(shù)量小于10的數(shù)組使用 InsertionSort，比10大的數(shù)組則使用 QuickSort。之前的版本是：插入排序和快排，現(xiàn)在是冒泡原理實現(xiàn)鏈接：https://github.com/v8/v8/blob/ad82a40509c5b5b4680d4299c8f08d6c6d31af3c/src/js/array.js***710行代碼開始***

1.3.22 深拷貝和淺拷貝

共同點：復制1. 淺拷貝：只復制引用，而未復制真正的值。 var arr1 = ['a','b','c','d']; var arr2 = arr1;var obj1 = {a:1,b:2} var obj2 = Object.assign(obj1);2. 深拷貝：是復制真正的值 （不同引用） 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) );

1.3.23 localStorage、sessionStorage、cookie的區(qū)別

公共點：在客戶端存放數(shù)據(jù) 區(qū)別： 1. 數(shù)據(jù)存放有效期sessionStorage : 僅在當前瀏覽器窗口關閉之前有效。【關閉瀏覽器就沒了】localStorage : 始終有效，窗口或者瀏覽器關閉也一直保存，所以叫持久化存儲。cookie : 只在設置的cookie過期時間之前有效，即使窗口或者瀏覽器關閉也有效。 2. localStorage、sessionStorage不可以設置過期時間cookie 有過期時間，可以設置過期（把時間調整到之前的時間，就過期了） 3. 存儲大小的限制cookie存儲量不能超過4klocalStorage、sessionStorage不能超過5M****根據(jù)不同的瀏覽器存儲的大小是不同的。

1.4 H5/C3面試題

1.4.1 什么是語義化標簽

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

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

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

1.4.3 如何關閉IOS鍵盤首字母自動大寫

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

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

Chrome默認字體大小是：16px **每個瀏覽器默認字體大小可能都不一樣<style type="text/css"> div{font-size:10px; } div span{display: inline-block;-webkit-transform:scale(1.6); } </style>

1.4.5 rem和em區(qū)別

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

1.4.6 ios系統(tǒng)中元素被觸摸時產(chǎn)生的半透明灰色遮罩怎么去掉

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

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

<style type="text/css">input::-webkit-input-placeholder{color:red;} </style>

1.4.8 禁止ios長按時觸發(fā)系統(tǒng)的菜單，禁止ios&android長按時下載圖片

禁止ios 長按時觸發(fā)系統(tǒng)的菜單，禁止ios&android長按時下載圖片 html,body{touch-callout: none;-webkit-touch-callout: none;user-select:none;-webkit-user-select:none; }

1.4.9 禁止ios和android用戶選中文字

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

1.4.10 自適應

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

1.4.11響應式

1. 是什么？一個URL可以響應多端 2. 語法結構@media only screen and (max-width: 1000px){ul li:last-child{display: none;}}only : 可以排除不支持媒體查詢的瀏覽器screen ： 設備類型max-width | max-heightmin-width | min-height 3. 響應式圖片【性能優(yōu)化】<picture><source srcset="1.jpg" media='(min-width:1000px)'><source srcset="2.jpg" media='(min-width:700px)'><img srcset="3.jpg"></picture>

布局方案

一、什么情況下采用響應式布局數(shù)據(jù)不是特別多，用戶量不是特別大，純展示類的項目適合響應式布局例如：公司的官網(wǎng)、專題頁面特別追求性能的項目，不太適合響應式，因為如果添加了很多的響應式就會造成加載速度變慢。二、pc + 移動端應該做什么樣的布局方案注意：訪問量還可以或者比較大，類似于淘寶網(wǎng)。pc是一套，會加入一點點響應式。移動端是一套，會使用自適應的布局方式。三、pc的設計圖ui：1980筆記本電腦：1280ui圖的寬度和電腦的寬度不對應該怎么辦？1. 把ui圖進行等比縮放，縮放成和電腦一樣的尺寸2. 換1980的電腦四、移動端的設計圖寬度：750因為750設計圖/2就是375，正好是iphone6的尺寸，我們要把iphone6的尺寸做為基準點。

第二章 面試題進階篇

2.1 ES6面試題

2.1.1 var、let、const區(qū)別

var、let、const 共同點都是可以聲明變量的區(qū)別一：var 具有變量提升的機制let和const沒有變量提升的機制區(qū)別二：var 可以多次聲明同一個變量let和const不可以多次聲明同一個變量區(qū)別三：var、let聲明變量的const聲明常量var和let聲明的變量可以再次賦值，但是const不可以再次賦值了。區(qū)別四：var聲明的變量沒有自身作用域let和const聲明的變量有自身的作用域

2.1.2 作用域考題

考題一：let和const沒有變量提升性

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 )const arr = ['a','b','c']; arr[0]= 'aaaaa'; console.log( arr );

2.1.3 將下列對象進行合并

方式一：Object.assign

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

方式二：…

let obj2 = {...a,...b}; console.log( obj2 );

方式三：自己封裝方法

function extend( target, source ){for(var key in source){target[key] = source[key];}return target; } console.log( extend(a,b) );

2.1.4 箭頭函數(shù)和普通函數(shù)有什么區(qū)別？

1. this指向的問題箭頭函數(shù)中的this只在箭頭函數(shù)定義時就決定的，而且不可修改的（call、apply、bind）****箭頭函數(shù)的this指向定義時候、外層第一個普通函數(shù)的this 2. 箭頭函數(shù)不能new（不能當作構造函數(shù)） 3. 箭頭函數(shù)prototype 4. 箭頭函數(shù)arguments

2.1.5 Promise有幾種狀態(tài)

有三種狀態(tài)： pending（進行中） fulfilled（已成功） rejected（已失敗）

2.1.6 find和filter的區(qū)別

區(qū)別一：返回的內(nèi)容不同filter 返回是新數(shù)組find 返回具體的內(nèi)容 區(qū)別二：find ：匹配到第一個即返回filter ： 返回整體（沒一個匹配到的都返回）

2.1.7 some和every的區(qū)別

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

2.2 webpack面試題

2.2.1 webpack插件

2.3 Git面試題

2.3.1 git常用命令

2.3.2 解決沖突

2.3.3GitFlow

第三章 面試題框架篇

3.1 Vue面試題

3.1.1 Vue2.x 生命周期

1. 有哪些生命周期 系統(tǒng)自帶：beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestroydestroyed2. 一旦進入到頁面或者組件，會執(zhí)行哪些生命周期，順序。beforeCreatecreatedbeforeMountmounted3. 在哪個階段有$el，在哪個階段有$databeforeCreate 啥也沒有created 有data沒有elbeforeMount 有data沒有elmounted 都有4. 如果加入了keep-alive會多倆個生命周期activated、deactivated5. 如果加入了keep-alive，第一次進入組件會執(zhí)行哪些生命？beforeCreatecreatedbeforeMountmountedactivated6. 如果加入了keep-alive，第二次或者第N次進入組件會執(zhí)行哪些生命周期？ 只執(zhí)行一個生命周期：activated

3.1.2 談談你對keep-alive的了解

1. 是什么 vue系統(tǒng)自帶的一個組件，功能：是來緩存組件的。===》提升性能 2. 使用場景 就是來緩存組件，提升項目的性能。具體實現(xiàn)比如：首頁進入到詳情頁，如果用戶在首頁每次點擊都是相同的，那么詳情頁就沒必要請求N次了，直接緩存起來就可以了，當然如果點擊的不是同一個，那么就直接請求。

3.1.3 v-if和v-show區(qū)別

1. 展示形式不同 v-if是 創(chuàng)建一個dom節(jié)點 v-show 是display:none 、 block2. 使用場景不同 初次加載v-if要比v-show好，頁面不會做加載盒子 頻繁切換v-show要比v-if好，創(chuàng)建和刪除的開銷太大了，顯示和隱藏開銷較小

3.1.4 v-if和v-for優(yōu)先級

v-for的優(yōu)先級要比v-if高 ***是在源碼中體現(xiàn)的：function genElement

3.1.5 ref是什么？

來獲取dom的

3.1.6 nextTick是什么?

獲取更新后的dom內(nèi)容

3.1.7 scoped原理

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

3.1.8 Vue中如何做樣式穿透

stylus樣式穿透使用：>>> sass和less使用：/deep/ 通用使用： :v-deep

3.1.9 Vue組件傳值

1. 父組件-->子組件：1.1. 父組件：<user-detail :myName="name" />export default {components: {UserDetail}......} 1.2. 在子組件中使用props（可以是數(shù)組也可以是對象）接收即可。可以傳多個屬性。export default {props: ['myName']}2. 子組件-->父組件：2.1. 子組件<button @click="changeParentName">改變父組件的name</button>export default {methods: {//子組件的事件changeParentName: function() {this.$emit('handleChange', 'Jack')}}}2.2. 父組件<child @handleChange="changeName"></child>methods: {changeName(name) { this.name = name}}3. 兄弟組件之間：bus.js

3.1.9 computed、methods、watch有什么區(qū)別？

1. computed vs methods區(qū)別computed是有緩存的methods沒有緩存2. computed vs watch區(qū)別watch是監(jiān)聽，數(shù)據(jù)或者路由發(fā)生了改變才可以響應（執(zhí)行）computed計算某一個屬性的改變，如果某一個值改變了，計算屬性會監(jiān)聽到進行返回watch是當前監(jiān)聽到數(shù)據(jù)改變了，才會執(zhí)行內(nèi)部代碼

3.1.10 props和data優(yōu)先級誰高？

props ===> methods ===> data ===> computed ===>watch

3.1.11 Vuex有哪些屬性？

state、getters、mutations、actions、modulesstate 類似于組件中data，存放數(shù)據(jù) getters 類型于組件中computed mutations 類似于組件中methods actions 提交mutations的 modules 把以上4個屬性再細分，讓倉庫更好管理

3.1.12 Vuex是單向數(shù)據(jù)流還是雙向數(shù)據(jù)流？

Vuex是單向數(shù)據(jù)流

3.1.13 Vuex中的mutaitons和actions區(qū)別

mutaitons : 都是同步事物 actions : 可以包含任意異步操作***在調試中就看出來

3.1.14 Vuex如何做持久化存儲

Vuex本身不是持久化存儲1. 使用localStorage自己寫 2. 使用vuex-persist插件

3.1.14 Vue設置代理

vue.config.js

module.exports = {publicPath:'./',devServer: {proxy: 'http://localhost:3000'} }

3.1.15Vue項目打包上線

1. 自測==>修改路由模式 2. 代理不生效，使用ENV 3. 修改路徑

3.1.16Vue路由模式

路由模式有倆種：history、hash 區(qū)別：1. 表現(xiàn)形態(tài)不同history:http://localhost:8080/abouthash:http://localhost:8080/#/about2. 跳轉請求history : http://localhost:8080/id ===>發(fā)送請求hash : 不會發(fā)送請求3. 打包后前端自測要使用hash，如果使用history會出現(xiàn)空白頁

3.1.17 介紹一下SPA以及SPA有什么缺點

SPA是什么？單頁面應用 缺點：1. SEO優(yōu)化不好2. 性能不是特別好

3.1.18 Vue路徑傳值

1. 顯式http://localhost:8080/about?a=11.1 傳：this.$router.push({path:'/about',query:{a:1}})1.2 接：this.$route.query.a2. 隱式http://localhost:8080/about2.1 傳：this.$router.push({name:'About',params:{a:1}})2.2 接：this.$route.params.a

3.1.19 路由導航守衛(wèi)有哪些

全局、路由獨享、組件內(nèi)1. 全局beforeEach、beforeResolve、afterEach 2. 路由獨享beforeEnter 3. 組件內(nèi)beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave使用場景：判斷是否登錄，如果登錄就next否則就跳轉到登錄頁面

3.1.20 Vue動態(tài)路由

場景：詳情頁(文章、商品) router.js配置：{path: "/list",name: "List",children:[{path:"/list/:id",name:'Details',component: () =>import("../views/Details.vue"),}],component: () =>import("../views/List.vue"),},

3.1.21 雙向綁定原理

通過Object.defineProperty劫持數(shù)據(jù)發(fā)生的改變，如果數(shù)據(jù)發(fā)生改變了（在set中進行賦值的），觸發(fā)update方法進行更新節(jié)點內(nèi)容（{{ str }}），從而實現(xiàn)了數(shù)據(jù)雙向綁定的原理。

3.1.22 什么是虛擬DOM

3.1.23 diff算法

功能：提升性能

虛擬dom ===》其實就是數(shù)據(jù)（ 把dom數(shù)據(jù)化 ）

主流：snabbdom、virtual-dom

snabbdom：https://www.npmjs.com/package/snabbdom

3.1.23.1 搭建環(huán)境

npm init -y

cnpm install webpack@5 webpack-cli@3 webpack-dev-server@3 -S

cnpm install snabbdom -S

新建webpack.config.js

配置webpack.config.js

3.1.23.2 虛擬節(jié)點 和 真實節(jié)點

虛擬節(jié)點：

{children: undefineddata: {}elm: h1key: undefinedsel: "h1"text: "你好h1" }

真實節(jié)點：

<h2>你好</h2>

3.1.23.3 新老節(jié)點替換的規(guī)則

? 1、如果新老節(jié)點不是同一個節(jié)點名稱，那么就暴力刪除舊的節(jié)點，創(chuàng)建插入新的節(jié)點。

? 2、只能同級比較，不能跨層比較。如果跨層那么就暴力刪除舊的節(jié)點，創(chuàng)建插入新的節(jié)點。

? 3、如果是相同節(jié)點，又分為很多情況

3.1 新節(jié)點有沒有children如果新的節(jié)點沒有children，那就證明新節(jié)點是文本，那直接把舊的替換成新的文本3.2 新節(jié)點有children新的有children，舊的也有children ===》就是diff算法的核心了【3.3】新的有children，舊的沒有 ===》創(chuàng)建元素添加（把舊的內(nèi)容刪除清空掉，增加新的）3.3 diff算法的核心（最復雜的情況）3.3.1 舊前 和 新前匹配：舊前的指針++ 、 新前的指針++3.3.2 舊后 和 新后匹配：舊后的指針-- 、 新后的指針--3.3.3 舊前 和 新后匹配：舊前的指針++ 、 新后的指針--3.3.4 舊后 和 新前匹配：舊后的指針-- 、 新前的指針++3.3.5 以上都不滿足條件 ===》查找新的指針++，新的添加到頁面上并且新在舊的種有，要給舊的復制成undefined3.3.6 創(chuàng)建或者刪除

注意：如果要提升性能，一定要加入key，key是唯一標示，在更改前后，確認是不是同一個節(jié)點。

3.1.24 講一下MVVM

web1.0時代
? 文件全在一起，也就是前端和后端的代碼全在一起
? 問題：
? 1、前端和后端都是一個人開發(fā)。（技術沒有側重點或者責任不夠細分）
? 2、項目不好維護。
? 3、html、css、js頁面的靜態(tài)內(nèi)容沒有，后端是沒辦法工作的（沒辦法套數(shù)據(jù)）。
? mvc…都是后端先出的

web2.0時代
? ajax出現(xiàn)了，就可以：前端和后端數(shù)據(jù)分離了。
? 解決問題：后端不用等前端頁面弄完沒，后端做后端的事情（寫接口）、前端布局、特效、發(fā)送請求。
? 問題： html、css、js都在一個頁面中，單個頁面可能內(nèi)容也是比較多的（也會出現(xiàn)不好維護的情況）。

出現(xiàn)前端的框架了MVC、MVVM
? 解決問題：可以把一個“特別大”頁面，進行拆分（組件化），單個組件進行維護

3.1.25 什么是MVVM

Model-View-的簡寫

view : 視圖【dom==》在頁面中展示的內(nèi)容】

model：模型【數(shù)據(jù)層：vue中的data數(shù)據(jù)】

viewModel：視圖模型層【就是vue源碼】

3.2 微信小程序面試題

3.2.1 如何自定義頭部？

3.2.2 如何自定義底部？

3.3 uni-app面試題

3.3.1生命周期

3.3.2 條件編譯

第四章 面試題性能優(yōu)化篇

4.1 加載優(yōu)化

4.2 圖片優(yōu)化

4.3 渲染優(yōu)化

4.4 首屏優(yōu)化

4.5 vue優(yōu)化

第五章 面試題兼容篇

5.1 頁面樣式兼容

5.2 框架兼容

第六章 面試題網(wǎng)絡請求篇

6.1 跨域面試題

6.2 http和https

第七章 WEB安全篇

7.1 XSS攻擊

7.2 SQL注入

7.3 接口安全

第八章 其他類面試題

8.1 token

8.2 SEO

總結

以上是生活随笔為你收集整理的2022年必刷前端高频面试题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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