㈠ Web前端面試之css高頻面試題
今天小編要跟大家分享的文章是關於web前端面試之css高頻面試題。想要參加web前端面試的小夥伴們來和小編一起看一看吧，希望本篇文章能夠對大家有所幫助。
1.什麼是BFC機制
BFC(BlockFormattingContext)，塊級格式化上下文，是一個獨立的渲染區域，讓處於BFC內部的元素與外部的元素相互隔離，使內外元素的定位不會相互影響。
·___シ⑻跫(以下任意一條)
§_loat的值不為none
§_verflow的值不為visible
§_isplay的值為table-cell、tabble-caption和inline-block之一
§_osition的值不為static或則releative中的任何一個
在IE下,Layout,可通過zoom:1_シ
·___FC布局與普通文檔流布局區別:
BFC布局規則:
1._浮動的元素會被父級計算高度(父級元素觸發了BFC)
2._非浮動元素不會覆蓋浮動元素的位置(非浮動元素觸發了BFC)
3._margin不會傳遞給父級(父級觸發BFC)
4._屬於同一個BFC的兩個相鄰元素上下margin會重疊
5._普通文檔流布局:浮動的元素是不會被父級計算高度
6._非浮動元素會覆蓋浮動元素的位置
7._margin會傳遞給父級元素
8._兩個相鄰元素上下的margin會重疊
·___⒅械撓τ
§_柚_argin重疊
§_梢園《亍宄誆扛《(清除浮動的原理是兩個div都位於同一個BFC區域之中)
§_允視α嚼覆季
§_梢宰柚乖乇桓《馗哺
2.CSS3中新增的選擇器以及屬性
這里只是列出來,具體的使用,請查看我的關於css3新增選擇器與屬性文章
·___糶匝≡衿
td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}
屬性選擇器
含義描述
E[att^="val"]
屬性att的值以"val"開頭的元素
E[att$="val"]
屬性att的值以"val"結尾的元素
E[att*="val"]
屬性att的值包含"val"字元串的元素
·___峁刮崩嘌≡衿
td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}
選擇器
含義描述
E:root
匹配文檔的根元素，對於HTML文檔，就是HTML元素
E:nth-child(n)
匹配其父元素的第n個子元素，第一個編號為1
E:nth-last-child(n)
匹配其父元素的倒數第n個子元素，第一個編號為1
E:nth-of-type(n)
與:nth-child()作用類似，但是僅匹配使用同種標簽的元素
E:nth-last-of-type(n)
與:nth-last-child()作用類似，但是僅匹配使用同種標簽的元素
E:last-child
匹配父元素的最後一個子元素，等同於:nth-last-child(1)
E:first-of-type
匹配父元素下使用同種標簽的第一個子元素，等同於:nth-of-type(1)
E:last-of-type
匹配父元素下使用同種標簽的最後一個子元素，等同於:nth-last-of-type(1)
E:only-child
匹配父元素下僅有的一個子元素，等同於:first-child:last-child或:nth-child(1):nth-last-child(1)
E:only-of-type
匹配父元素下使用同種標簽的唯一一個子元素，等同於:first-of-type:last-of-type或:nth-of-type(1):nth-last-of-type(1)
E:empty
匹配一個不包含任何子元素的元素，注意，文本節點也被看作子元素
·___ss3新增屬性
td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}
屬性
含義描述
兼容
transition
設置過渡效果
transform
變換效果(移動、縮放、轉動、拉長或拉伸)
animation
動畫效果
box-shadow
陰影效果
FF3.5,Safari4,Chrome3
text-shadow
文本陰影
FF3.5,Opera10,Safari4,Chrome3
border-colors
為邊框設置多種顏色
FF3+
boder-image
圖片邊框
FF3.5,Safari4,Chrome3
text-overflow
文本截斷
IE6+,Safari4,Chrome3,Opera10
word-wrap
自動換行
IE6+,FF3.5,Safari4,Chrome3
border-radius
圓角邊框
FF3+,Safari4,Chrome3
opacity
不透明度
all
box-sizing
控制盒模型的組成模式
FF3+,Opera10,Safari4,Chrome3
outline
外邊框
FF3+,safari4,chrome3,opera10
background-size
不指定背景圖片的尺寸
safari4,chrome3,opera10
background-origin
指定背景圖片從哪裡開始顯示
safari4,chrome3,FF3+
background-clip
指定背景圖片從什麼位置開始裁切
safari4,chrome3
rgba
基於r,g,b三個顏色通道來設置顏色值,通過a來設置透明度
safari4,chrome3,FF3,opera10
3.居中布局
·___驕又
1._行內元素:_ext-align:center
2._塊級元素:_argin:0auto
3._絕對定位和移動:_bsolute+transform
4._絕對定位和負邊距:_bsolute+margin
5._flex布局:_lex+
justify-content:center
·___怪本又
1._子元素為單行文本:_ine-height:height
2._absolute+transform
3._flex+align-items:center
4._table:_isplay:table-cell;vertical-align:
middle
5._利用position和top和負margin
·___醬怪本又_HAPE*MERGEFORMAT
1.已知元素寬高:絕對定位+margin:auto:
_div{
___idth:200px;
___eight:200px;
___ackground:
green;
___osition:absolute;
___eft:0;
___op:0;
___ottom:0;
___ight:0;
___argin:
auto;
_
2.已知元素寬高:_遠ㄎ+負margin
_div{
___idth:200px;
___eight:200px;
___ackground:
green;
___osition:absolute;
___eft:0;
___op:0;
___ottom:0;
___ight:0;
___argin:
auto;
_
3.absolute+transform
_div{
__width:200px;
__height:200px;
__background:
green;
__position:absolute;
__left:50%;_/*定位父級的50%*/
__top:50%;
__transform:translate(-50%,-50%);/*自己的50%*/
_}
4.flex+justify-content
+align-items
.box{
_height:600px;
_display:flex;
_justify-content:center;//子元素水平居中
_align-items:center;__//子元素垂直居中
__/*aa只要三句話就可以實現不定寬高水平垂直居中。*/
__
.box>div{
__ackground:
green;
__idth:200px;
__eight:200px;
_
4.清除浮動有哪些方法,各有什麼優缺點
·___褂_lear屬性的空元素
在浮動元素後使用一個空元素如
㈡ Web前端面試題匯總之JavaScript篇
今天小編要跟大家分享的文章是關於web前端面試題匯總之JavaScript篇。正在從事web前端學習和准備找工作的小夥伴們來和小編一起看一看吧，希望本篇文章能夠對大家有所幫助。
1，介紹js的基本數據類型。
Undefined、Null、Boolean、Number、String
2，介紹js有哪些內置對象?
Object是JavaScript中所有對象的父對象
數據封裝類對象：Object、Array、Boolean、Number和String
其他對象：Function、Arguments、Math、Date、RegExp、Error
3，說幾條寫JavaScript的基本規范?，
1.不要在同一行聲明多個變數。
2.請使用===/!==來比較true/false或者數值
3.使用對象字面量替代newArray這種形式
4.不要使用全局函數。
5.Switch語句必須帶有default分支
6.函數不應該有時候有返回值，有時候沒有返回值。
7.For循環必須使用大括弧
8.If語句必須使用大括弧
9.for-in循環中的變數應該使用var關鍵字明確限定作用域，從而避免作用域污染。
4，JavaScript原型，原型鏈?有什麼特點?
每個對象都會在其內部初始化一個屬性，就是prototype(原型)，當我們訪問一個對象的屬性時，
如果這個對象內部不存在這個屬性，那麼他就會去prototype里找這個屬性，這個prototype又會有自己的prototype，
於是就這樣一直找下去，也就是我們平時所說的原型鏈的概念。
關系：instance.constructor.prototype=instance.__proto__
特點：
JavaScript對象是通過引用來傳遞的，我們創建的每個新對象實體中並沒有一份屬於自己的原型副本。當我們修改原型時，與之相關的對象也會繼承這一改變。
當我們需要一個屬性的時，Javascript引擎會先看當前對象中是否有這個屬性，如果沒有的話，
就會查找他的Prototype對象是否有這個屬性，如此遞推下去，一直檢索到Object內建對象。
functionFunc(){}
Func.prototype.name="Sean";
Func.prototype.getInfo=function(){returnthis.name;}
varperson=newFunc();
//現在可以參考
varperson=Object.create(oldObject);
console.log(person.getInfo());
//它擁有了Func的屬性和方法//"Sean"console.log(Func.prototype);
//Func{name="Sean",getInfo=function()}復制代碼
5，JavaScript有幾種類型的值?，你能畫一下他們的內存圖嗎?
棧：原始數據類型(Undefined，Null，Boolean，Number、String)
堆：引用數據類型(對象、數組和函數)
兩種類型的區別是：存儲位置不同;
原始數據類型直接存儲在棧(stack)中的簡單數據段，占據空間小、大小固定，屬於被頻繁使用數據，所以放入棧中存儲;
引用數據類型存儲在堆(heap)中的對象,占據空間大、大小不固定,如果存儲在棧中，將會影響程序運行的性能;引用數據類型在棧中存儲了指針，該指針指向堆中該實體的起始地址。當解釋器尋找引用值時，會首先檢索其
在棧中的地址，取得地址後從堆中獲得實體
6，Javascript如何實現繼承?
1、構造繼承
2、原型繼承
3、實例繼承
4、拷貝繼承
原型prototype機制或apply和call方法去實現較簡單，建議使用構造函數與原型混合方式。
functionParent(){this.name='wang'}functionChild(){this.age=28;}
Child.prototype=newParent();//繼承了Parent，通過原型vardemo=newChild();
alert(demo.age);alert(demo.name);//得到被繼承的屬性復制代碼
7，Javascript作用鏈域?
作用域鏈的作用是保證執行環境里有權訪問的變數和函數是有序的，作用域鏈的變數只能向上訪問，變數訪問到window對象即被終止，作用域鏈向下訪問變數是不被允許的。
8，談談This對象的理解。
this總是指向函數的直接調用者(而非間接調用者);
如果有new關鍵字，this指向new出來的那個對象;
在事件中，this指向觸發這個事件的對象，特殊的是，IE中的attachEvent中的this總是指向全局對象Window;
this就是指的是當前對象
9，null，undefined的區別?
null表示一個對象被定義了，值為「空值」;
undefined表示不存在這個值。
typeofundefined//"undefined"
undefined:是一個表示"無"的原始值或者說表示"缺少值"，就是此處應該有一個值，但是還沒有定義。當嘗試讀取時會返回
undefined;
例如變數被聲明了，但沒有賦值時，就等於undefined
typeofnull//"object"
null:是一個對象(空對象,沒有任何屬性和方法);
例如作為函數的參數，表示該函數的參數不是對象;
注意：
在驗證null時，一定要使用===，因為==無法分別null和undefined
undefined表示"缺少值"，就是此處應該有一個值，但是還沒有定義。典型用法是：
(1)變數被聲明了，但沒有賦值時，就等於undefined。
(2)調用函數時，應該提供的參數沒有提供，該參數等於undefined。
(3)對象沒有賦值的屬性，該屬性的值為undefined。
(4)函數沒有返回值時，默認返回undefined。
null表示"沒有對象"，即該處不應該有值。典型用法是：
(1)作為函數的參數，表示該函數的參數不是對象。
(2)作為對象原型鏈的終點。
10，["1","2","3"].map(parseInt)答案是多少?
[1,NaN,NaN]因為parseInt需要兩個參數(val,radix)，
其中radix表示解析時用的基數。
map傳了3個(element,index,array)，對應的radix不合法導致解析失敗。
以上就是小編今天為大家分享的關於web前端面試題匯總之JavaScript篇的文章，希望本篇文章能夠對正在從事web前端工作的小夥伴們有所幫助，想要了解更多web前端知識記得關注北大青鳥web培訓官網，最後祝願小夥伴們工作順利，成為一名優秀的web前端工程師。
㈢ 前端面試題整理
JavaScript：
1.介紹一下isNaN函數？
如果參數不是數字類型的話isNaN返回true（函數名稱：isnan函數功能：判斷數組的元素是否是NaN。）
2.javascript都支持哪些布爾型的操作？
&&,||和！（&&邏輯與，||邏輯或，！邏輯非）
3.「1″+2+4在javascript中得到什麼？
因為「1」是String類型，所以所有的操作數都是String,結果為124
4.2+5+」8″得到的結果是什麼？
因為2和5是數字類型，8是字元串，所以得到的結果是78
5.javascript有幾種loop（循環）方法？
for,while,do-while，for...in語句用於遍歷數組或者對象的屬性（對數組或者對象的屬性進行循環操作）。
6.javascript如何創建一個新的對象？
varobj=newObject()或者varobj={}
7.如何為一個對象屬性賦值？
obj["age"]=17或者obj.age=17
8.如何為一個數組添加一個值？
arr[arr.length]=value;
9.javascript基本數據類型/javascript中的typeof返回哪些數據類型
Number類型、Boolean類型、Object類型、String類型、Null、Undefined類型/
10.例舉3種強制類型轉換和2種隱式類型轉換?
強制（parseInt,parseFloat,number）隱式（==_===）
11.數組方法pop()push()unshift()shift()
Push()尾部添加pop()尾部刪除Unshift()頭部添加shift()頭部刪除
12.閉包是什麼，有什麼特性，對頁面有什麼影響
閉包就是能夠讀取其他函數內部變數的函數。
13.添加刪除替換插入到某個接點的方法
obj.appendChild()obj.innersetBefore()obj.replaceChild()obj.removeChild()
14.javascript的本地對象，內置對象和宿主對象
本地對象為arrayobjregexp等可以new實例化
內置對象為gloadMath等不可以實例化的
宿主為瀏覽器自帶的document,window等
15.介紹一下eval()函數
eval()函數可計算某個字元串，並執行其中的的JavaScript代碼。
16.介紹一下JSON
JSON：JavaScript對象表示法（JavaScriptObjectNotation）。
JSON是存儲和交換文本信息的語法。類似XML。
JSON比XML更小、更快，更易解析。
17.jQueryUI與jquery的主要區別是：
(1)jQuery是一個js庫，主要提供的功能是選擇器，屬性修改和事件綁定等等。
(2)jQueryUI則是在jQuery的基礎上，利用jQuery的擴展性，設計的插件。提供了一些常用的界面元素，諸如對話框、拖動行為、改變大小行為等等。
(3)jQuery本身注重於後台，沒有漂亮的界面，而jQueryUI則補充了前者的不足，他提供了華麗的展示界面，使人更容易接受。既有強大的後台，又有華麗的前台。
html+css:
1.對WEB標准以及W3C的理解與認識:
標簽閉合、標簽小寫、不亂嵌套、提高搜索機器人搜索幾率、使用外鏈css和js腳本、結構行為表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更廣泛的設備所訪問、更少的代碼和組件，容易維護、改版方便，不需要變動頁面內容、提供列印版本而不需要復制內容、提高網站易用性；
2.xhtml和html有什麼區別:
HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言
最主要的不同：
XHTML元素必須被正確地嵌套。
XHTML元素必須被關閉。
標簽名必須用小寫字母。
XHTML文檔必須擁有根元素。
3.行內元素有哪些?塊級元素有哪些?CSS的盒模型?
塊級元素：divph1h2h3h4formul
行內元素:abbrispaninputselect
Css盒模型:內容，border,margin，padding
4.前端頁面有哪三層構成，分別是什麼?作用是什麼?
結構層Html表示層CSS行為層js
5.寫出幾種IE6BUG的解決方法:
雙邊距BUGfloat引起的使用display
3像素問題使用float引起的使用dislpay:inline-3px
超鏈接hover點擊後失效使用正確的書寫順序linkvisitedhoveractive
Iez-index問題給父級添加position:relative
Png透明使用js代碼改
Min-height最小高度！Important解決』
select在ie6下遮蓋使用iframe嵌套
為什麼沒有辦法定義1px左右的寬度容器（IE6默認的行高造成的，使用over:hidden,zoom:0.08line-height:1px）
6.解釋csssprites，如何使用。
Css精靈把一堆小的圖片整合到一張大的圖片上，減輕伺服器對圖片的請求數量
7.你如何對網站的文件和資源進行優化?期待的解決方案包括：
文件合並
文件最小化/文件壓縮
使用CDN託管
緩存的使用
8.清除浮動的幾種方式，各自的優缺點：
使用空標簽清除浮動clear:both（理論上能清楚任何標簽，，，增加無意義的標簽）
使用overflow:auto（空標簽元素清除浮動而不得不增加無意代碼的弊端,,使用zoom:1用於兼容IE）
是用afert偽元素清除浮動(用於非IE瀏覽器)
9.瀏覽器內核
1、Trident內核：IE最先開發或使用的，也稱IE內核，360瀏覽器使用的也是IE內核；
2、Webkit內核：谷歌chrome瀏覽器最先開發或使用，也叫谷歌內核，楓樹瀏覽器、太陽花使用的也是谷歌內核；
3、Gecko內核：Netscape6開始採用的內核，後來的MozillaFireFox(火狐瀏覽器)也採用了該內核，K-Meleon瀏覽器也是使用這種內核；
4、Presto內核：目前只有Opera瀏覽器採用該內核
㈣ Web前端面試的常見面試題匯總
今天小編要跟大家分享的文章是關於參加Web前端面試的常見面試題匯總。准備參加Web前端面試的小夥伴們來和小編一起看一看吧，希望本篇文章能夠對大家有所幫助。1.漸進增強與優雅降級
漸進增強
並不是一種技術，而是一種設計思想。各個瀏覽器的渲染能力各不相同，要做一個每個人都能看到的網頁、感受到的體驗都一致的網站幾乎不可能。但還是得網站的可訪問性，保證用戶在任何環境下都能正常訪問網頁得核心內容或能使用基本功能(避免網頁打不開、排版錯誤等)，並為他們提供當前條件下最好的體驗，這就是漸進增強得核心思想。
優雅降級也是一種設計思想，為了保證在高版本瀏覽器中提供最好的體驗，碰到低版本瀏覽器再降級進行兼容處理，使其能正常瀏覽。
這兩種思想的區別在於：
1.漸進增強是向上兼容，優雅降級是向下兼容;
2.漸進增強是從簡單到復雜，優雅降級是從復雜到簡單;
3.漸進增強關注的是內容(保證核心內容)，優雅降級關注的是瀏覽體驗(為了兼容低版本瀏覽器)
2.DOCTYPE
作用
DTD(DocumentTypeDefinition，文檔類型定義)是一系列的語法規則，用來定義XML或(X)HTML
的文檔類型。瀏覽器會使用它來判斷文檔類型，決定何種協議來解析，以及切換瀏覽模式。
DOCTYPE是用來聲明文檔類型和DTD
規范的，一個主要的用途便是文件的合法性驗證。如果文檔代碼不合法，那麼瀏覽器解析時便會出現一些差錯。
HTML5的文檔類型聲明：
HTML4.01Strict(HTML4.01嚴格模式)的DTD包含所有HTML
元素和屬性，但不包括展示性的和棄用的元素(如font)，它的文檔類型聲明：
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
標准模式與怪異模式
怪異模式(Quirks
Mode)用於模擬舊瀏覽器的行為。早期的網站並不會遵循完整的規范，隨著瀏覽器支持越來越多的規范，在那些舊的瀏覽器中開發的頁面在顯示時會被破壞。為了向後兼容，瀏覽器發明了怪異模式，一行錯誤或無效的
DOCTYPE都會觸發怪異模式。
瀏覽器使用文件開頭的DOCTYPE來決定用怪異模式處理或標准模式處理。DOCTYPE
可以確保不同瀏覽器以相同的方式解析文檔，以及執行相同的渲染模式。
怪異模式與標准模式的主要區別：
1.怪異模式的寬度和高度會包含padding和border。標准模式不包含，標准模式下可以通過設置box-sizing:
border-box將標准盒模型轉化成怪異模式下的盒模型。
2.怪異模式下，當內容超出容器高度時，會將容器拉伸，而不是溢出。
3.怪異模式下，在表格中的字體樣式(如font-size)不會繼承。
4.怪異模式下顏色值必須使用十六進制標記法。
3.語義化
HTML5
中的語義化就是讓元素、屬性或屬性值有含義，更准確地標記特定類型的內容。對元素語義化的目的是為了讓元素的語義和呈現分離，元素只負責文檔內容的結構與含義，而CSS
樣式控制內容的呈現，像元素，沒有語義但卻能將字體變粗，這類元素違背了語義化的目的，將會被廢棄。
優點
·使得HTML文檔結構清晰、布局合理、主體突出、可讀性更強。
·有利於SEO，搜索引擎根據標簽來確定上下文和各個關鍵字的權重。
·方便其他設備解析，如盲人閱讀器根據語義渲染網頁。
·有利於開發和維護，語義化更具可讀性，代碼更好維護，與CSS3關系更和諧。
語義化標簽
·
·footer內容的頁腳，通常包含該章節作者、版權數據或者與文檔相關的鏈接等信息;
·article
文檔、頁面、應用或網站中的獨立結構，是可獨立分配的、可復用的結構，如在發布中，它可能是論壇帖子、雜志或新聞文章、博客、用戶提交的評論、互動式組件，或者其他獨立的內容項目;
·nav描述一個含有多個超鏈接的區域，該區域包含跳轉到其他頁面或頁面內部其他部分的鏈接列表;
·section表示文檔中的一個區域(或節)，比如，內容中的一個專題組;
·main定義文檔的主要內容，該內容在文檔中應當是獨一無二的，不包含任何在文檔中重復的內容，比如側邊欄，導航欄鏈接，版權信息，網站
logo，搜索框(搜索框作為文檔的主要內容);
·aside
表示一個和其餘頁面內容幾乎無關的部分，被認為是獨立於該內容的一部分且可以被單獨的拆分出來而不會影響整體。通常表現為側邊欄或嵌入內容。
4.超鏈接偽類
:link、:visited、:active和:hover的聲明順序是怎樣的?
:link表示未訪問的鏈接狀態;
:visited表示已訪問狀態;:active表示激活狀態(滑鼠按下);:hover表示懸停狀態。
推薦順序是LVHA，即:link:visited:hover:active。理由如下：
·當滑鼠懸停在未訪問的鏈接上時，:link和:hover都會命中，如果:hover在:link
之前聲明，那麼(:hover)就會被覆蓋;
·當滑鼠懸停在已訪問的連接上時，:visited和:hover都會命中，如果:hover在:visited
之前聲明，那麼(:hover)就會被覆蓋;
·當滑鼠單擊鏈接時，:active和:hover都會命中，我們大多是想讓:hover只在懸停時展示樣式，按下滑鼠時使用:active
樣式，因此:active在:hover之後聲明;
·綜上，:hover應在:link和:visited之後，在:active之前，因此active在最後。而:link和
:visited兩者的順序無所謂，互不影響。
5.CSS常見的長度單位
CSS中除了px長度單位之外，還有下面幾個長度單位：
·pc六分之一英寸，1pc=12pt=1/6*1in=16px;
·pt一磅，72分之一英寸。1pt=1/12_1pc=1/72_1in≈1.33px;
·in一英寸，1in=2.54cm=96px;
·ex在含有「X」字母的字體中，它是該字體的小寫字母的高度。對於很多字體來說，1ex≈0.5em;
·em1em等於父級元素的字體大小，2em就是父級元素字體大小的二倍;
·rem當用在根元素()的font-size上面時，它代表了它的初始值;
·ch代表元素所用字體font中「0」這一字形的寬度;
·vh1vh相當於視口高度的1%，100vh就是視口的高度;
·vw1vw相當於視口寬度的1%，100vw就是視口的寬度;
·vmax視口高度vw和寬度vh兩者中的最小值
·vmin視口高度vw和寬度vh兩種中的最大值;
·%相對於父級元素的大小來確定;
參考：CSS
CSSpercentage[2]
6.事件對象
冒泡與捕獲
事件冒泡與捕獲是事件處理的兩種機制，主要描述當在一個元素上有兩個相同類型的事件處理器被激活會發生什麼。
在點擊子元素時，瀏覽器運行了兩種不同的階段：捕獲階段和冒泡階段。捕獲階段的行為：
·瀏覽器檢查元素的最外層祖先，是否在捕獲階段中注冊了一個onclick事件處理程序，如果是，則運行它;
·
然後，它移動到中單擊元素的下一個祖先元素，並執行相同的操作，然後是單擊元素再下一個祖先元素，依此類推，直到到達實際點擊的元素;
而冒泡與捕獲恰恰相反：
·瀏覽器檢查實際點擊的元素是否在冒泡階段中注冊了一個onclick事件處理程序，如果是，則運行它;
·然後它移動到下一個直接的祖先元素，並做同樣的事情，然後是下一個，等等，直到它到達元素;
而現代瀏覽器在默認情況下，所有事件處理程序都在冒泡階段進行注冊。因此上面代碼在點擊子元素時會先執行子元素綁定的事件，然後向上冒泡，觸發父元素綁定的事件。
addEventListener函數的第三個參數是個布爾值。含義：
·當布爾值是false時(這也是默認值)，表示向上冒泡觸發事件;
·當布爾值是true時，表示向下捕獲觸發事件;
不能冒泡的事件
有些事件是不會冒泡的。比如：
·blur元素失去焦點時觸發，focusout事件也是失去焦點時觸發，但可以冒泡;
·focus元素獲取焦點時觸發;
·mouseenter滑鼠移動到元素上時會觸發該事件，與之對應的是mouseover事件，但會冒泡;
·mouseleave滑鼠離開元素時觸發，與之對應的是mouseout，但會冒泡;
事件冒泡可以讓我們利用事件委託，尤其是處理大量子元素時，如果給每個子元素都綁定事件，這是不優雅的，可以將事件綁定到父元素上，並讓子節點上發生的事件冒泡到父節點上，利用
e.target屬性可以獲取到當前觸發事件的子元素。
事件對象中的方法
·stopPropagation()阻止事件冒泡，當設置後，點擊該元素時父元素綁定的事件就不會再觸發;
·preventDefault()阻止默認事件的發生;
·stopImmediatePropagation()它用來阻止監聽同一事件的其他事件監聽器被調用以及阻止事件冒泡，比如給同一個div
元素綁定多個click事件(使用addEventListener方法可以注冊多個)，當在第二個事件函數中調用
stopImmediatePropagation方法時，點擊div元素時，後面注冊的click將不會被觸發，而且還會阻止事件冒泡;
比如下面的例子，給p綁定多個click事件，在第二個事件函數中調用stopImmediatePropagation，第三個click
事件就不會觸發，因為也阻止了冒泡，因此父元素的click事件也不會觸發。
paragraph
㈤ web前端經典面試題
為大家帶來一些web前端的面試題，希望可以幫助到大家啊。
1.css3有哪些新特性?
選擇器、圓角、動畫、多重背景、背景的寬度高度flex布局響應式布局邊框陰影文本陰影
2.響應式布局怎麼理解的，響應式布局是通過什麼實現?
根據不同的屏幕載入不同的css樣式
1).移動端適配
2).一套代碼適配pc端移動端多個
3.js創建對象有哪幾種方式?
1).自面量
2).newObject
3).構造函數
4.es6有哪些新特性?
1).letconst
2).模板字元串
3).方法的簡寫屬性的簡寫
4).三點運算符
5).解構賦值
6).箭頭函數
7).setmap
8).class類
9).模塊化
5.箭頭函數和普通的方法有什麼區別?
1).箭頭函數省略了function
2).箭頭函數裡面的this指向上下文(可以改變this指向)
6.gulp可以干什麼
gulp自動化構建工具。
壓縮代碼合並代碼壓縮圖片自動處理前綴創建web服務處理sass
7.清除浮動有哪些方法。
1).浮動元素的父元素overflow:hiddenoverflow:auto
2).浮動元素的最後面加一個空div給他clear:both
3).after偽類清除浮動
.clearfix:after{
content:"";
dislpay:block;
height:0px;
clear:both;
}
4)、給父元素設置高度。
8.行內元素塊元素的區別?
1)塊元素默認獨佔一行，行內元素默認情況不獨佔一行，行內元素的的寬度就是內容的寬度
2)默認情況塊元素可以設置寬度高度默認情況行內元素不可以設置寬度高度
3)默認可以margin上下左右，行內默認只能margin左右不能上下。
9.網站載入速度優化?
1).圖片不失真盡量小
2).多個背景圖片合並
3).代碼壓縮代碼合並
4).js寫到頁面最底部
5).懶載入
6).不要有冗餘代碼
7).伺服器帶寬款一些
8).伺服器固態硬碟
9).開啟緩存
10.以前寫代碼什麼情況會成出現亂碼怎麼解決?
解決亂碼文件保存的編碼和設置的編碼必須保持一致
11.以前如何測試調試移動端頁面
1).首先在瀏覽器自帶的調試工具模擬器裡面調試
2).真機的內置瀏覽器調試
3).真機上面的UC裡面調試
4).真機上的微信裡面調試。
㈥ 你遇到的前端面試題都有什麼
大家好，我是王我。
隨著春節的結束，各個行業也普遍開始了上班的節奏， 不過本人17號才上班。為什麼？因為長得帥的都上班比較晚。 當然，每到新年結束，又迎來了一批招聘者與面試者，我來說說作為一年工作經驗應該知道的面試題。
HTML篇
1.doctype是什麼？有哪些類型？
2.input有哪些新類型？簡要說明其8用法。
3.HTML5有哪些新特性，移除了哪些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分HTML和HTML5？
4.bootstrap響應式的原理是什麼？
5.多移動終端頁面適配是如何實現的？
CSS篇
1.如何實現兩列布局，左邊自適應，右邊固定寬度？
2.用CSS畫一個三角形
3.CSS實現字體大寫
4.display有哪些常用的屬性值？分別是什麼意思？
5.position為absolute，relative，fixed的定點位置
6.用三種方法清除浮動
7.請介紹一下margin塌陷問題
js篇
1.什麼是事件冒泡和捕獲？如何阻止事件冒泡？(分別用原生和jquery實現)
2.js創建對象，至少使用三種方法
3.簡述一下事件穿透以及解決辦法
4.用三種方式判斷變數類型是否是數組
5.如何實現對象的拷貝？
6.什麼是閉包？閉包的優缺點。
7.簡述一下ajax請求的過程。
8.簡述一下new一個人構造函數的人過程。
9.為什麼會有跨域？是怎麼解決跨域問題的？簡述一下原理。
10.js原始數據類型有哪些？
11.學一個函數，判斷一個變數是否是字元串
12.typeof有哪些結果？
13.剪頭函數和普通函數有什麼區別？
14.請用三種方法實現數組去重
15.href和src有什麼區別？
jquery篇
1.attr()和prop()有什麼區別？
2.on和bind有什麼區別？js動態添加的dom元素是通過on還是bind？
3.touch和click有什麼區別？
4.window.onload和jquery的ready有什麼區別？
vue篇
1.簡述一下vue的生命周期及其特點
2.vue雙向綁定的原理是什麼？
3.vue的特點有哪些？和jquery有什麼區別？
4.父子組件之間傳遞數據的方法
5.子組件如何共享數據？
6.一般有什麼工具進行數據交互？
7.webpack的原理是什麼？
8.簡述一下$nextTick的用法
瀏覽器篇
1.cookie、sessionStorage、localStorage的區別是什麼？
2.有用過瀏覽器緩存嗎？簡述一下基本的緩存機制
網路篇
1.http和https之間的區別
2.從伺服器的安全考慮，是使用get請求還是post請求？
3.URL請求的過程有哪些？
項目經驗篇
1.項目中遇到的最大挑戰以及解決辦法
2.常見的網頁優化有哪些？
作為一個面試一年以內工作經驗的前端程序員來說，以上的問題能夠倒答如流月薪6k應該不成問題啦。這些面試題也是我在很多面試中感覺經常被問到的題目。
希望大家年後找工作能夠順順利利， 千萬不要跟我一樣哦，只有帥氣就一無所有了。
大家好，我是王我，中國最帥的前端程序員。
前幾次都是各種培訓公司，各種忽悠就不提了，說說後面4次面試的經歷。
第一次是面一個小公司，不過他們好像沒有厲害的前端，來面我的是個後端，一來沒有問我關於js的知識，直接問我以前做過什麼，有沒有經驗，我本人不會吹牛，簡歷也沒怎麼包裝，就是自己把自學的知識和做的幾個小demo弄在上面，也用github掛在頁面上了，不過他根本不點開看，也不問，問我會不會vue，我當時對框架還不了解，他就說他們需要能直接上手開始寫的，所以我第一個就直接掛了。
第二次面試是一個國企，這個問了很多問題，都很基礎，js數據類型，數組操作，事件，大概就是高程的前面幾章看看就差不多都能答到，然後因為他們主要用jq，所以問了很多jq的操作，關於節點的，動畫的，我看鋒利的jq大概看了3遍，也練過多次，所以我答的很熟。然後問了些布局方面的，bootstrap我了解過，又看過css3，所以這方面也沒啥問題，最後在現場做了個題目，主要就是布局然後通過ajax呈現數據。後面聽介紹我面試的說面試官比較滿意，說我jq很熟，一面就過了。可惜後面電話面試不知怎麼回事可能表現的不夠自信，雖然沒問技術，但是我沒啥自信，把沒項目經驗什麼的也不知怎麼就一五一十交代了，估計因為這個掛掉了。
第三次沒問問題，直接就是一套題開做，我在那做了一個多小時。題目就是按照要求一步一步做一個頁面出來，我也搞忘了我當時卡在哪個地方了，坐在那得時候就是做不出來，沒有設計圖，要根據他的描述自己找個設計圖然後做，我第一次遇到這個有點懵，雖然當時沒做出來，不過回來我自己花了幾個小時把它做了。所以這個也是涼了。
第四個問的比較多，數據類型，數組操作，跨域，ajax，閉包，原型鏈，繼承，深拷貝，淺拷貝，模塊amd cmd，基本都是問的js。然後問了html5的新特性 css3 的新特性，遇到過什麼瀏覽器的兼容性問題，怎麼解決的，以後想往什麼方面發展。這個時候我已經會點vue了，照著做了個小demo，不過後來知道公司用的angularjs，面試官也沒看我做的，問也沒問。。以前聽網上說要帶上自己的項目去面試感覺沒起多大效果。
最後總結下如果面的比較初級的崗位，應該主要問js，原型鏈，繼承，閉包，深淺拷貝，ajax，跨域，然後js的基礎知識，對了還有apply和call也問了，html5的新特性了解下就行。主要就是看你js掌握的程度，如果稍微要求高一點的，暫時還沒面過，等以後面過在來回答
1. cookie session 的用途和區別，以及有效期
1、cookie數據存放在客戶的瀏覽器上，session數據放在伺服器上。
2、cookie不是很安全，別人可以分析存放在本地的COOKIE並進行COOKIE欺騙
考慮到安全應當使用session。
3、session會在一定時間內保存在伺服器上。當訪問增多，會比較佔用你伺服器的性能
考慮到減輕伺服器性能方面，應當使用COOKIE。
4、單個cookie保存的數據不能超過4K，很多瀏覽器都限制一個站點最多保存20個cookie。
2. vue的數據綁定原理，mvvm與mvc的區別
MVVM：
m:model數據模型層 v:view視圖層 vm:ViewModel
vue中採用的是mvvm模式，這是從mvc衍生過來的
MVVM讓視圖與viewmodel直接的關系特別的緊密，就是為了解決mvc反饋不及時的問題
圖片說明一下：
說到MVVM就要說一下雙向綁定和數據劫持的原理，
MVC：
m:model數據模型層 v:view視圖層 c:controller控制器
原理： c層需要控制model層的數據在view層進行顯示
MVC兩種方式，圖片說明：
總結：
mvvm與mvc最大的區別：
MVVM實現了view與model的自動同步，也就是model屬性改變的時候， 我們不需要再自己手動操作dom元素去改變view的顯示，而是改變屬性後該屬性對應的view層會自動改變。
不懂得可以復制鏈接查看：
https://www.pianshen.com/article/3716256399/
3. storage 的區別 sessionStorage localStorage
localStorage 的生命周期是永久性的。假若使用localStorage存儲數據，即使關閉瀏覽器，也不會讓數據消失，除非主動的去刪除數據，使用的方法如上所示。localStorage有length屬性
sessionStorage 的生命周期是在瀏覽器關閉前。也就是說，在整個瀏覽器未關閉前，其數據一直都是存在的。sessionStorage也有length屬性，其基本的判斷和使用方法和localStorage的使用是一致的
有一個文本框 通過v-bind綁定了value屬性 值為myname 是我們在vue實例中定義的屬性
傳統我們獲取文本框值方法 可能通過getElementById找到文本框 然後獲取其value屬性
但是vue中直接通過v-bind綁定了value屬性 所以不需要像之前那樣獲取值
所以在後面的按鈕中獲取name值 直接獲取vue實例對象data裡面的myname屬性即可
【數據為尊 ----數據映射到瀏覽器 如果數據v-model後修改（肯定input）然後到數據在有數據映射到瀏覽器頁面 ----映射關系統稱】
緩存路由組件
使用的是vue的一個組件，參考vue的官方文檔
使用這個東西可以保證我們在切換組件的時候，原來顯示的組件不被銷毀
-----【保障組件的數據不會被切換路由而銷毀數據】
Home是對應的組件對象的名字，不是路由的名字
6.多維數組拍平
數組拍平也稱數組扁平化，就是將數組裡面的數組打開，最後合並為一個數組
一紅六種方法吧……
了解的請看： https://www.cnblogs.com/guan-shan/p/10165737.html
7.跨域的原因 解決方案
跨域是指一個域下的文檔或腳本試圖去請求另一個域下的資源，這里跨域是廣義的。
這樣就可以說同源策略----協議---埠---域名
原生的src和href可以解決跨域
代理可以解決
請求頭也可以攜帶瀏覽器提示的也可以解決
一般都是後端解決跨域問題
【別的需要了解看下方鏈接】
https://blog.csdn.net/qq_41604383/article/details/100770100
8.uniApp兼容問題§ 如果你使用cli創建項目（即項目根目錄是package.json），不管用什麼ide，即便是用HBuilderX，切記cli項目的編譯器是在項目下的，HBuilderX不管怎麼升級都不會影響編譯器版本。你需要手動npm update來升級編譯器。以及如果你想要安裝less、scss等預編譯器，也需要自己npm安裝在項目下，而不是在HBuilderX的插件管理里安裝。
§ 如果你使用離線打包，請注意HBuilderX升級後，真機運行基座和雲打包對應引擎跟隨HBuilderX升級，而你的sdk需要手動升級。sdk的版本升級一般滯後HBuilderX正式版升級一兩天。
§ 如果你使用自定義基座，之前製作的自定義基座是不會跟隨HBuilderX升級的，升級HBuilderX後你應該重新製作新版自定義基座。
§ 如果你使用wgt升級，新版HBuilderX編譯的wgt，運行到之前的runtime上，一定要先測試好，看有沒有兼容性問題。如果有問題，就不要wgt升級，整包升級。
§ 考慮到向下兼容，uni-app編譯器在升級為新的自定義組件模式後，同時保留了對老編譯模式的向下兼容。
在HBuilderX alpha版中，App端一定會使用新編譯器，不理會manifest配置。
在HBuilderX 正式版中，新創建的項目會使用新編譯器，老項目不會強制使用，而是開發者自己在manifest里配置開啟。
§ 如果你使用其他ide開發uni-app，會經常因為拼錯單詞而運行失敗，因為經過webpack編譯一道，很多錯誤反應的不夠直觀，排錯時間很長，不如從開始就依賴有良好提示的HBuilderX，避免敲錯單詞。
§ 雲打包的引擎版本說明
HBuilderX Alpha，只有1套雲打包機，不管你的HBuilderX alpha版本多少，對應的打包機一定是最新的alpha版的客戶端引擎。
HBuilderX正式版，有2套打包機，一個是最新正式版，一個是次新正式版。
中間的緊急更新版本沒有獨立打包機。
舉個例子：
HBuilderX 有1.8.0、1.8.1、1.8.2、1.9.0、1.9.1這幾個正式版。
那麼當前可用的打包機有1.9.1和1.8.2這2台。（即每個大版本的最後一個版本）
除了這2個HBuilderX版本外，其他版本的雲打包都指向最新的1.9.1版對應的打包機。（即只保留2個大版本的雲打包機）
【詳情請看】
https://ask.dcloud.net.cn/article/35845
一、HTML
HTML書寫規范
H5新增標簽
HTML渲染過程
二、CSS
css盒子模型概念
css彈性布局概念
三、JavaScript
事件模型
DOM2級事件模型
閉包
原型鏈
四、移動Web開發
常見的布局方案
移動端前端常見的觸摸相關事件touch、tap、swipe等整理
移動端前端手勢事件
移動端頁面渲染優化
GPU渲染
GPU核心渲染過程
五、調試
常用的調試工具
Chrome控制台調試js使用
移動端測試
六、HTTP網路知識
常見的HTTP狀態碼
不同請求類型的區別
WEB緩存方案
——————————
牛客網（www.nowcoder.com）
- 專業IT筆試面試備考平台
- 最全C++JAVA前端等互聯網技術求職題庫
- 全面提升IT編程能力
- 程序員交友聖地
分享了一些Web前端的面試題，限時一小時，你看看自己能夠答出多少道！
放心，這些面試題都是一些非常基礎的知識，只要你在平時認真聽課、學習了，那麼這些面試題肯定不會難道你。
建議：雖然沒有人監督你，但還是希望你不要去尋找答案，脫離網路，拿起紙筆，你試一下自己究竟能夠答出個什麼水平！有沒有真本領？答案盡在這些面試題里！那麼，你准備好了嗎？OK！計時開始！
一、HTML常見題目01、Doctype作用？嚴格模式與混雜模式如何區分？它們有何意義？
02、HTML5為什麼只需要寫？
03、行內元素有哪些？塊級元素有哪些？空(void)元素有那些？
04、頁面導入樣式時，使用link和@import有什麼區別？
05、介紹一下你對瀏覽器內核的理解？
06、常見的瀏覽器內核有哪些？
07、html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？
08、如何區分HTML和HTML5？
09、簡述一下你對HTML語義化的理解？
10、HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？
二、CSS類的題目01、介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什麼不同的？
02、CSS選擇符有哪些？哪些屬性可以繼承？
03、CSS優先順序演算法如何計算？
04、CSS3新增偽類有那些？
05、如何居中p？如何居中一個浮動元素？如何讓絕對定位的p居中？
06、display有哪些值？說明他們的作用。
07、position的值relative和absolute定位原點是？
08、CSS3有哪些新特性？
09、請解釋一下CSS3的Flexbox(彈性盒布局模型),以及適用場景？
10、用純CSS創建一個三角形的原理是什麼？
三、Java類的題目
01、介紹Java的基本數據類型。
02、說說寫Java的基本規范？
03、Java原型，原型鏈？有什麼特點？
04、Java有幾種類型的值？(堆：原始數據類型和棧：引用數據類型)，你能畫一下他們的內存圖嗎？
05、Java如何實現繼承？
06、Java創建對象的幾種方式？
07、Java作用鏈域？
08、談談This對象的理解。
09、eval是做什麼的？
10、什麼是window對象？什麼是document對象？
OK，一小時到了，這個時間可不算短了，那麼這些面試題你答出了幾道呢？你寫的答案正確了嗎？現在你可以去翻看答案了。
如果你答出了絕大多數的或者是全部的題，並且答案也正確了，那麼恭喜你……
你這時心裡是不是有點小竊喜，認為自己有能力拿高薪了？雖然我也很想這么告訴你，但事實上這只能表明你的基礎扎實，畢竟這只是一些非常基礎的面試題。騷年~繼續努力吧！
如果你只答出了小部分或者答出了大部分題但答案不正確，那麼我只想說：「騷年，你的水平還差的遠呢。」連這么基礎的題你都打不出來，還想拿高薪？回去再練一段時間吧！
扎實的基礎是你拿高薪的重要武器，如果你連基礎都不扎實，那麼想要攻克「高薪」這個厚實的堡壘，那隻是痴人說夢罷了。
1.前端框架類問題，問你會不會用vue react啊
2.語言類，問你一些JavaScript語言的問題
3.項目經驗，讓你講講做過的項目，遇到的問題和解決之道
㈦ WEB前端面試題
第二章 面試題基礎篇
2.1 HTML面試題
面試題：行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
面試題：頁面導入樣式時，使用link和@import有什麼區別？
面試題：title與h1的區別、b與strong的區別、i與em的區別？
面試題：img標簽的title和alt有什麼區別？
面試題：png、jpg、gif 這些圖片格式解釋一下，分別什麼時候用？
2.2 CSS面試題
面試題：css背景紋路
面試題：介紹一下CSS的盒子模型
面試題：CSS選擇符有哪些？哪些屬性可以繼承？
面試題：CSS優先順序演算法如何計算？
面試題：用CSS畫一個三角形
面試題：一個盒子不給寬度和高度如何水平垂直居中？
面試題：display有哪些值？說明他們的作用。
面試題：對BFC規范(塊級格式化上下文：block formatting context)的理解？
面試題：清除浮動有哪些方式？
面試題：在網頁中的應該使用奇數還是偶數的字體？為什麼呢？
面試題：寫一個左中右布局占滿屏幕，其中左、右倆塊固定寬200，中間自適應寬，要求先載入中間塊，請寫出結構及樣式。
面試題：什麼是CSS reset？
面試題：css sprite是什麼,有什麼優缺點
面試題：display: none;與visibility: hidden;的區別
面試題：position有哪些值?有什麼作用? 【特別多公司問】
面試題：line-height和height有什麼區別？
面試題：opacity 和 rgba區別
2.3 JavaScript基礎面試題
面試題：延遲載入JS有哪些方式？
面試題：JS數據類型有哪些？
面試題：null和undefined的區別
面試題：JS數據類型考題
面試題：==和===有什麼不同
面試題：JS微任務和宏任務
面試題：JS作用域考題
面試題：JS對象考題
面試題：JS作用域+this指向+原型 考題
面試題：JS判斷變數是不是數組，你能寫出哪些方法？
面試題：slice是幹嘛的、splice是否會改變原數組
面試題：JS數組去重
面試題：找出多維數組最大值
面試題：給字元串新增方法實現功能
面試題：找出字元串出現最多次數的字元以及次數
2.4 真正移動端 —— H5/C3面試題
面試題：什麼是語義化標簽
面試題：::before 和 :after中雙冒號和單冒號 有什麼區別？解釋一下這2個偽元素的作用。
面試題：如何關閉iOS鍵盤首字母自動大寫
面試題：怎麼讓Chrome支持小於12px 的文字？
面試題：rem和em有什麼樣區別
面試題：ios系統中元素被觸摸時產生的半透明灰色遮罩怎麼去掉
面試題：webkit表單輸入框placeholder的顏色值能改變嗎？
面試題：禁止ios 長按時不觸發系統的菜單，禁止ios&android長按時下載圖片
面試題：禁止ios和android用戶選中文字
面試題：自適應 [淘寶無線適配]
面試題：響應式
第三章 面試題進階篇
3.1 JavaScript進階面試題
面試題：new操作符具體做了什麼
面試題：閉包 【必須會】
面試題：原型鏈 【必須會】
面試題： JS繼承有哪些方式
面試題：說一下call、apply、bind區別
面試題：sort背後原理是什麼？
面試題：深拷貝和淺拷貝
面試題：localstorage、sessionstorage、cookie的區別
3.2 ES6面試題
面試題：var、let、const區別
面試題：作用域考題
面試題：將下列對象進行合並
面試題：箭頭函數和普通函數有什麼區別？
面試題：Promise有幾種狀態
面試題：find和filter的區別 【大廠】
面試題：some和every的區別 【大廠】
3.3 webpack面試題
面試題：webpack插件
3.4 Git面試題
面試題：git常用命令
面試題：解決沖突
面試題：GitFlow
第四章 面試題框架篇
4.1 區分初中高級的 —— Vue面試題
面試題：Vue2.x 生命周期有哪些？
1.系統自帶八個
2.當一旦進入到某個組件會執行哪些生命周期
3.$el和$data在哪個階段有
4.如果使用keep-alive會多倆個生命周期
5.如果加入keep-alive第一次進入組件會執行哪些生命周期
6.如果加入keep-alive第二次或者第N進入該組件會執行哪些生命周期
面試題：談談你對keep-alive的了解
面試題：v-if和v-show區別
面試題：v-if和v-for優先順序 2.x
面試題：ref是什麼？
面試題：nextTick是什麼？
面試題：Vue中如何做樣式穿透
面試題：scoped原理
面試題：Vuex是單向數據流還是雙向數據流？
面試題：講一下MVVM
面試題：雙向綁定原理
面試題：什麼是虛擬DOM
面試題：key是干什麼？
面試題：diff演算法
面試題：Vue組件傳值
面試題：props和data優先順序誰高？
面試題：computed、methods、watch有什麼區別？
面試題：Vuex
面試題：Vue路由
面試題：Vue項目打包後出現空白頁
4.2 微信小程序面試題
面試題：如何自定義頭部？
面試題：如何自定義底部？
4.3 uni-app面試題
面試題：生命周期
面試題：條件編譯
第五章 面試題性能優化篇
㈧ 一份超全的Web前端工程師面試題!收藏~
今天小編為大家准備了一份超全的Web前端工程師面試題,准備換工作參加Web前端工程師面試的小夥伴們快來和小編一起看一看這些題目吧，希望能夠對你的面試有所幫助!
一、HTML
§Doctype作用?嚴格模式與混雜模式如何區分?它們有何意義?
§HTML5為什麼只需要寫?
§行內元素有哪些?塊級元素有哪些?空(void)元素有那些?
§頁面導入樣式時，使用link和@import有什麼區別?
§介紹一下你對瀏覽器內核的理解?
§常見的瀏覽器內核有哪些?
§html5有哪些新特性、移除了那些元素?如何處理HTML5新標簽的瀏覽器兼容問題?如何區分HTML和HTML5?
§簡述一下你對HTML語義化的理解?
§HTML5的離線儲存怎麼使用，工作原理能不能解釋一下?
§瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的呢?
§請描述一下cookies，sessionStorage和localStorage的區別?
§iframe有那些缺點?
§Label的作用是什麼?是怎麼用的?(加for或包裹)
§HTML5的form如何關閉自動完成功能?
§如何實現瀏覽器內多個標簽頁之間的通信?(阿里)
§webSocket如何兼容低瀏覽器?(阿里)
§頁面可見性(PageVisibility)API可以有哪些用途?
§如何在頁面上實現一個圓形的可點擊區域?
§實現不使用border畫出1px高的線，在不同瀏覽器的Quirksmode和CSSCompat模式下都能保持同一效果。
§網頁驗證碼是幹嘛的，是為了解決什麼安全問題?
§tite與h1的區別、b與strong的區別、i與em的區別?
二、CSS
§介紹一下標準的CSS的盒子模型?與低版本IE的盒子模型有什麼不同的?
§CSS選擇符有哪些?哪些屬性可以繼承?
§CSS優先順序演算法如何計算?
§CSS3新增偽類有那些?
§如何居中div?如何居中一個浮動元素?如何讓絕對定位的div居中?
§display有哪些值?說明他們的作用。
§position的值relative和absolute定位原點是?
§CSS3有哪些新特性?
§請解釋一下CSS3的Flexbox(彈性盒布局模型),以及適用場景?
§用純CSS創建一個三角形的原理是什麼?
§一個滿屏品字布局如何設計?
§常見兼容性問題?
§li與li之間有看不見的空白間隔是什麼原因引起的?有什麼解決辦法?
§經常遇到的瀏覽器的兼容性有哪些?原因，解決方法是什麼，常用hack的技巧?
§為什麼要初始化CSS樣式。
§absolute的containingblock計算方式跟正常流有什麼不同?
§CSS里的visibility屬性有個collapse屬性值是幹嘛用的?在不同瀏覽器下以後什麼區別?
§position跟display、margincollapse、overflow、float這些特性相互疊加後會怎麼樣?
§對BFC規范(塊級格式化上下文：blockformattingcontext)的理解?
§CSS權重優先順序是如何計算的?
§請解釋一下為什麼會出現浮動和什麼時候需要清除浮動?清除浮動的方式
§移動端的布局用過媒體查詢嗎?
§使用CSS預處理器嗎?喜歡那個?
§CSS優化、提高性能的方法有哪些?
§瀏覽器是怎樣解析CSS選擇器的?
§在網頁中的應該使用奇數還是偶數的字體?為什麼呢?
§margin和padding分別適合什麼場景使用?
§抽離樣式模塊怎麼寫，說出思路，有無實踐經驗?[阿里航旅的面試題]
§元素豎向的百分比設定是相對於容器的高度嗎?
§全屏滾動的原理是什麼?用到了CSS的那些屬性?
§什麼是響應式設計?響應式設計的基本原理是什麼?如何兼容低版本的IE?
§視差滾動效果，如何給每頁做不同的動畫?(回到頂部，向下滑動要再次出現，和只出現一次分別怎麼做?)
§::before和:after中雙冒號和單冒號有什麼區別?解釋一下這2個偽元素的作用。
§如何修改chrome記住密碼後自動填充表單的黃色背景?
§你對line-height是如何理解的?
§設置元素浮動後，該元素的display值是多少?(自動變成display:block)
§怎麼讓Chrome支持小於12px的文字?
§讓頁面里的字體變清晰，變細用CSS怎麼做?(-webkit-font-smoothing:antialiased;)
§font-style屬性可以讓它賦值為「oblique」oblique是什麼意思?
§position:fixed;在android下無效怎麼處理?
§如果需要手動寫動畫，你認為最小時間間隔是多久，為什麼?(阿里)
§display:inline-block什麼時候會顯示間隙?(攜程)
§overflow:scroll時不能平滑滾動的問題怎麼處理?
§有一個高度自適應的div，裡面有兩個div，一個高度100px，希望另一個填滿剩下的高度。
§png、jpg、gif這些圖片格式解釋一下，分別什麼時候用。有沒有了解過webp?
§什麼是Cookie隔離?(或者說：請求資源的時候不要讓它帶cookie怎麼做)
§style標簽寫在body後與body前有什麼區別?
三、JavaScript
§介紹JavaScript的基本數據類型。
§說說寫JavaScript的基本規范?
§JavaScript原型，原型鏈?有什麼特點?
§JavaScript有幾種類型的值?(堆：原始數據類型和棧：引用數據類型)，你能畫一下他們的內存圖嗎?
§Javascript如何實現繼承?
§Javascript創建對象的幾種方式?
§Javascript作用鏈域?
§談談This對象的理解。
§eval是做什麼的?
§什麼是window對象?什麼是document對象?
§null，undefined的區別?
§寫一個通用的事件偵聽器函數(機試題)。
§[「1」,「2」,「3」].map(parseInt)答案是多少?
§關於事件，IE與火狐的事件機制有什麼區別?如何阻止冒泡?
§什麼是閉包(closure)，為什麼要用它?
§javascript代碼中的」usestrict」;是什麼意思?使用它區別是什麼?
§如何判斷一個對象是否屬於某個類?
§new操作符具體幹了什麼呢?
§用原生JavaScript的實現過什麼功能嗎?
§Javascript中，有一個函數，執行時對象查找時，永遠不會去查找原型，這個函數是?
§對JSON的了解?
§[].forEach.call($$("*"),function(a){a.style.outline="1pxsolid
#"+(~~(Math.random()*(1<<24))).toString(16)})能解釋一下這段代碼的意思嗎?
§js延遲載入的方式有哪些?
§Ajax是什麼?如何創建一個Ajax?
§同步和非同步的區別?
§如何解決跨域問題?
§頁面編碼和被請求的資源編碼如果不一致如何處理?
§模塊化開發怎麼做?
§AMD(Moles/Asynchronous-Definition)、CMD(CommonMole
Definition)規范區別?
§requireJS的核心原理是什麼?(如何動態載入的?如何避免多次載入的?如何緩存的?)
§讓你自己設計實現一個requireJS，你會怎麼做?
§談一談你對ECMAScript6的了解?
§ECMAScript6怎麼寫class么，為什麼會出現class這種東西?
§非同步載入的方式有哪些?
§documen.write和innerHTML的區別?
§DOM操作——怎樣添加、移除、移動、復制、創建和查找節點?
§.call()和.apply()的含義和區別?
§數組和對象有哪些原生方法，列舉一下?
§JS怎麼實現一個類。怎麼實例化這個類
§JavaScript中的作用域與變數聲明提升?
§如何編寫高性能的Javascript?
§那些操作會造成內存泄漏?
§JQuery的源碼看過嗎?能不能簡單概況一下它的實現原理?
§jQuery.fn的init方法返回的this指的是什麼對象?為什麼要返回this?
§jquery中如何將數組轉化為json字元串，然後再轉化回來?
§jQuery的屬性拷貝(extend)的實現原理是什麼，如何實現深拷貝?
§jquery.extend與jquery.fn.extend的區別?
§jQuery的隊列是如何實現的?隊列可以用在哪些地方?
§談一下Jquery中的bind(),live(),delegate(),on()的區別?
§JQuery一個對象可以同時綁定多個事件，這是如何實現的?
§是否知道自定義事件。jQuery里的fire函數是什麼意思，什麼時候用?
§jQuery是通過哪個方法和Sizzle選擇器結合的?(jQuery.fn.find()進入Sizzle)
§針對jQuery性能的優化方法?
§Jquery與jQueryUI有啥區別?
§JQuery的源碼看過嗎?能不能簡單說一下它的實現原理?
§jquery中如何將數組轉化為json字元串，然後再轉化回來?
§jQuery和Zepto的區別?各自的使用場景?
§針對jQuery的優化方法?
§Zepto的點透問題如何解決?
§jQueryUI如何自定義組件?
§需求：實現一個頁面操作不會整頁刷新的網站，並且能在瀏覽器前進、後退時正確響應。給出你的技術實現方案?
§如何判斷當前腳本運行在瀏覽器還是node環境中?(阿里)
§移動端最小觸控區域是多大?
§jQuery的slideUp動畫，如果目標元素是被外部事件驅動,當滑鼠快速地連續觸發外部元素事件,
動畫會滯後的反復執行，該如何處理呢?
§把Script標簽放在頁面的最底部的body封閉之前和封閉之後有什麼區別?瀏覽器會如何解析它們?
§移動端的點擊事件的有延遲，時間是多久，為什麼會有?怎麼解決這個延時?(click有300ms
延遲,為了實現safari的雙擊事件的設計，瀏覽器要知道你是不是要雙擊操作。)
§知道各種JS框架(Angular,Backbone,Ember,React,Meteor,Knockout)么?
能講出他們各自的優點和缺點么?
§Underscore對哪些JS原生對象進行了擴展以及提供了哪些好用的函數方法?
§解釋JavaScript中的作用域與變數聲明提升?
§那些操作會造成內存泄漏?
§JQuery一個對象可以同時綁定多個事件，這是如何實現的?
§Node.js的適用場景?
§(如果會用node)知道route,middleware,cluster,nodemon,pm2,server-side
rendering么?
§解釋一下Backbone的MVC實現方式?
§什麼是「前端路由」?什麼時候適合使用「前端路由」?「前端路由」有哪些優點和缺點?
§知道什麼是webkit么?知道怎麼用瀏覽器的各種工具來調試和debug代碼么?
§如何測試前端代碼么?知道BDD,TDD,UnitTest么?知道怎麼測試你的前端工程么(mocha,sinon,jasmin,
qUnit..)?
§前端templating(Mustache,underscore,handlebars)是幹嘛的,怎麼用?
§簡述一下Handlebars的基本用法?
§簡述一下Handlerbars的對模板的基本處理流程，如何編譯的?如何緩存的?
§用js實現千位分隔符?(來源：前端農民工，提示：正則+replace)
§檢測瀏覽器版本版本有哪些方式?
§我們給一個dom同時綁定兩個點擊事件，一個用捕獲，一個用冒泡，你來說下會執行幾次事件，然後會先執行冒泡還是捕獲。
四、其他問題
§原來公司工作流程是怎麼樣的，如何與其他人協作的?如何誇部門合作的?
§你遇到過比較難的技術問題是?你是如何解決的?
§設計模式知道什麼是singleton,factory,strategy,decrator么?
§常使用的庫有哪些?常用的前端開發工具?開發過什麼應用或組件?
§頁面重構怎麼操作?
§列舉IE與其他瀏覽器不一樣的特性?
§99%的網站都需要被重構是那本書上寫的?
§什麼叫優雅降級和漸進增強?
§是否了解公鑰加密和私鑰加密。
§WEB應用從伺服器主動推送Data到客戶端有那些方式?
§對Node的優點和缺點提出了自己的看法?
§你有用過哪些前端性能優化的方法?
§http狀態碼有那些?分別代表是什麼意思?
§一個頁面從輸入URL到頁面載入顯示完成，這個過程中都發生了什麼?(流程說的越詳細越好)
§部分地區用戶反應網站很卡，請問有哪些可能性的原因，以及解決方法?
§從打開app到刷新出內容，整個過程中都發生了什麼，如果感覺慢，怎麼定位問題，怎麼解決?
§除了前端以外還了解什麼其它技術么?你最最厲害的技能是什麼?
§你用的得心應手用的熟練地編輯器&開發環境是什麼樣子?
§對前端界面工程師這個職位是怎麼樣理解的?它的前景會怎麼樣?
§你怎麼看待WebApp、hybridApp、NativeApp?
§你移動端前端開發的理解?(和Web前端開發的主要區別是什麼?)
§你對加班的看法?
§平時如何管理你的項目?
§說說最近最流行的一些東西吧?常去哪些網站?
§如何設計突發大規模並發架構?
§說說最近最流行的一些東西吧?常去哪些網站?
§是否了解開源的工具bower、npm、yeoman、grunt、gulp，一個npm的包里的package.json
具備的必要的欄位都有哪些?(名稱、版本號，依賴)
§每個模塊的代碼結構都應該比較簡單，且每個模塊之間的關系也應該非常清晰，隨著功能和迭代次數越來越多，你會如何去保持這個狀態的?
§Git知道branch,diff,merge么?
§如何設計突發大規模並發架構?
§當團隊人手不足，把功能代碼寫完已經需要加班的情況下，你會做前端代碼的測試嗎?
§說說最近最流行的一些東西吧?平時常去哪些網站?
§知道什麼是SEO並且怎麼優化么?知道各種metadata的含義么?
§移動端(AndroidIOS)怎麼做好用戶體驗?
§簡單描述一下你做過的移動APP項目研發流程?
§你在現在的團隊處於什麼樣的角色，起到了什麼明顯的作用?
§你認為怎樣才是全端工程師(FullStackdeveloper)?
§介紹一個你最得意的作品吧?
§你有自己的技術博客嗎，用了哪些技術?
§對前端安全有什麼看法?
§是否了解Web注入攻擊，說下原理，最常見的兩種攻擊(XSS和CSRF)了解到什麼程度?
§項目中遇到國哪些印象深刻的技術難題，具體是什麼問題，怎麼解決?。
§最近在學什麼東西?
§你的優點是什麼?缺點是什麼?
§如何管理前端團隊?
§最近在學什麼?能談談你未來3，5年給自己的規劃嗎?
§
以上就是小編今天為大家分享的關於web前端工程師面試題的文章，希望本篇文章能夠對正准備學習編程技術的小夥伴們有所幫助。想要了解更多web前端相關知識記得關注北大青鳥web前端培訓官網哦!最後希望小夥伴們能夠好好准備這些問題的答案，在面試中取得好成績，成為一名優秀的web前端工程師!
§
㈨ web前端面試十大總結，不了解一下嗎
在互聯網時代，瀏覽器幾乎主宰著一切，而前端開發人員決定著瀏覽器的內容展現形式和信息的提供，是不可或缺的一部分。前端開發實際上具有很明顯的時代特徵，它在很大程度上決定著大眾的信息攝入，以及用戶讀取信息的有效方式。那麼今天小編為大家總結了一些web前端的面試題，希望對大家有幫助哦！
一：字體高亮函數
題目：請你完成highlight函數，可以把模版字元串中的插入內容替換掉，並且插入文檔以後顯示紅色。例如：
constyourName='ScriptOJ'
constmyName='Jerry'
document.body.innerHTML=highlight`Hello,${yourName}.Iam
${myName}.`
上面例子的頁面顯示如下：
0_1498033735172_upload-2abd65b1-1e98-46ba-b46f-df4188a036a5
請你完成highlight函數的編寫。
答案：
css:
.highlight{
color:red;
}
js:
//考察的是Taggedtemplateliterals的使用
//
#/en-US/docs/Web/JavaScript/Reference/Template_literals
consthighlight=(strings,...args)=>{
returnstrings.rece((str,cur,i)=>{
return`${str}${cur}${args[i]?`class="highlight">${args[i]}`:''}`
},'')
}
二：數組去重
題目：編寫一個函數unique(arr)，返回一個去除數組內重復的元素的數組。例如：
unique([0,1,2,2,3,3,4])//=>[0,1,2,3,4]
unique([0,1,Ƈ',Ƈ',2])//=>[0,1,Ƈ',2]
答案：
constunique=(arr)=>[...newSet(arr)]
三：解析字串
題目：完成一個extractStr函數，可以把一個字元串中所有的:到.的子串解析出來並且存放到一個數組當中，例如：
extractStr('Mynameis:Jerry.Myageis:12.')//=>['Jerry',']
注意，:和.之間不包含:和.。也即是說，如果::abc..，則返回['abc']。
(本題來源：《JavaScriptCookbook》)
答案：·
constextractStr=(str)=>{
constret=str.match(/:([^:.])*?./g)||[]
returnret.map((subStr)=>subStr.replace(/[:.]/g,''))
}
四：spacify題目：
請你給字元串都添加上原型方法spacify，可以讓一個字元串的每個字母都多出一個空格的間隔："ScriptOJ".spacify()//=>
"ScriptO
J"(本題來源：#/interview-questions)答案：String.prototype.spacify
=function(){
returnthis.split('').join('')
}
五：safeGet
題目：有時候我們需要訪問一個對象較深的層次，但是如果這個對象某個屬性不存在的話就會報錯，例如：
vardata={a:{b:{c:'ScriptOJ'}}}
data.a.b.c//=>scriptoj
data.a.b.c.d//=>報錯，代碼停止執行
console.log('ScriptOJ')//=>不會被執行
請你完成一個safeGet函數，可以安全的獲取無限多層次的數據，一旦數據不存在不會報錯，會返回undefined，例如：
vardata={a:{b:{c:'ScriptOJ'}}}
safeGet(data,'a.b.c')//=>scriptoj
safeGet(data,'a.b.c.d')//=>返回undefined
safeGet(data,'a.b.c.d.e.f.g')//=>返回undefined
console.log('ScriptOJ')//=>列印ScriptOJ
答案：
constsafeGet=(o,path)=>{
try{
returnpath.split('.').rece((o,k)=>o[k],o)
}catch(e){
returnvoid666
}
}
六：判斷兩個矩形是否重疊
題目：用一個對象的數據來表示一個矩形的位置和大小：
{
x:100,
y:100,
width:150,
height:250
}
它表示一個寬為150高為250的矩形在頁面上的(100,100)的位置。
請你完成一個函數isOverlap可以接受兩個矩形作為參數，判斷這兩個矩形在頁面上是否重疊。例如：
constrect1={x:100,y:100,width:100,height:100}
constrect2={x:150,y:150,width:100,height:100}
isOverlap(rect1,rect2)//=>true
答案：
//原理：#/find-two-rectangles-overlap/
constisOverlap=(rect1,rect2)=>{
constl1={x:rect1.x,y:rect1.y}
constr1={x:rect1.x+rect1.width,y:rect1.y+rect1.height}
constl2={x:rect2.x,y:rect2.y}
constr2={x:rect2.x+rect2.width,y:rect2.y+rect2.height}
if(
l1.x>r2.x||
l2.x>r1.x||
l1.y>r2.y||
l2.y>r1.y
)returnfalse
returntrue
}
七：按下標插入
題目：現在有一個數組存放字元串數據：
['item1','item2','item3','item4','item5']
有另外一個數組存放一組對象：
[
{content:'section1',index:0},
{content:'section2',index:2}
]
它每個對象表示的是會往原來的數組的index坐標插入content數據(index不會重復)：
01234
item1itme2item3item4item5
^^
||
section1section2
最後結果是：['section1','item1','item2','section2','item3','item4',
'item5']
請你完成injectSections函數，可以達到上述的功能：
injectSections(
['item1','item2','item3','item4','item5'],
[
{content:'section1',index:0},
{content:'section2',index:2}
]
)//=>['section1','item1','item2','section2','item3','item4',
'item5']
答案：
constinjectSections=(items,sections)=>{
/*需要插入坐標對應數據存放到map裡面*/
constsectionsMap=newMap(sections.map(({index,content})=>[index,
content]))
/*新建一個數組，然後往裡面push原來數組的數據*/
returnitems.rece((ret,item,index)=>{
/*push的時候先檢查map裡面有沒有，有的話先pushmap裡面的數據*/
if(sectionsMap.has(index))ret.push(sectionsMap.get(index))
/*再push原來的數據*/
ret.push(item)
returnret
},[])
}
八：數組拍平(二)
題目：編寫一個JavaScriptgenerator函數，接受一個僅包含數字的多維數組
，返回一個迭代器，可以遍歷得到它拍平以後的結果。例如：
constnumbers=flatten2([1,[[2],3,4],5])
numbers.next().value//=>1
numbers.next().value//=>2
numbers.next().value//=>3
numbers.next().value//=>4
numbers.next().value//=>5
答案：
function*flatten2(arr){
for(leti=0;i
constitem=arr[i]
/*yield*的使用可以大大簡化程序編寫*/
Array.isArray(item)?yield*flatten2(item):yielditem;
}
}
/*用flatten2來完成flatten也是很方便的*/
//constflatten=(arr)=>[...flatten2(arr)]
九：判斷兩個Set是否相同
題目：完成isSameSet函數，它接受了兩個Set對象作為參數，請你返回true/false來表明這兩個set
的內容是否完全一致，例如：
consta={}
constb=1
constc='ScriptOJ'
constset1=newSet([a,b,c])
constset2=newSet([a,c,b])
isSameSet(set1,set2)//=>true
答案：
//codefrom#/js-example.html
/*這道題不能簡單地使用sort，使用sort並不靠譜。因為Set裡面的內容可能有很多種類
*字元串、對象、數字，不同類型之間是不可對比的，所以排序結果並不會一致
*
*最好的方式是按照數學上集合相等的定義：
*A=B當且僅當A是B的子集並且B是A的子集。
*
*這種判斷方式還可以用在對象、map等其他數據類型的判斷當中。
*/
constisSameSet=(s1,s2)=>{
/*獲取一個集合所有的值，判斷另外一個集合是否全部包含該這些值*/
constisSame=(a,b)=>{
constvalues=[...a]
for(letvalofvalues){
/*及時跳出循環，可以降低演算法復雜度*/
if(!b.has(val))returnfalse
}
returntrue
}
/*a包含b，b包含a，那麼兩個集合相同*/
returnisSame(s1,s2)&&isSame(s2,s1)
}
/*By陳小俊*/
//constisSameSet=(set1,set2)=>
//[...set1].every((o)=>set2.has(o))&&
//[...set2].every((o)=>set1.has(o))
十：記憶化斐波那契函數(Memoization)
題目：斐波那契數列指的是類似於以下的數列：
1,1,2,3,5,8,13,....
也就是，第n個數由數列的前兩個相加而來：f(n)=f(n-1)+f(n-2)
請你完成fibonacci函數，接受n作為參數，可以獲取數列中第n個數，例如：
fibonacci(1)//=>1
fibonacci(2)//=>1
fibonacci(3)//=>2
...
測試程序會從按順序依次獲取斐波那契數列中的數，請注意程序不要超時，也不要添加額外的全局變數。
本題來源：《JavaScript語言精髓》
答案：
constfibonacci=((memo=[0,1])=>{
constfib=(n)=>{
letresult=memo[n]
if(typeofresult!=="number"){
result=fib(n-1)+fib(n-2)
memo[n]=result
}
returnresult
}
returnfib
})()
最後就是反應能力，臨場出現意外什麼的了，這就看你自己了，萬一自己一不留神說錯話了，大神給你指出來，請記得謝謝一定要謙虛！在這里小編也希望每一位web培訓班畢業的學員都能順利找到稱心的工作！
免責聲明：內容和圖片源自網路，版權歸原作者所有，如有侵犯您的原創版權請告知，我們將盡快刪除相關內容
在互聯網時代，瀏覽器幾乎主宰著一切，而前端開發人員決定著瀏覽器的內容展現形式和信息的提供，是不可或缺的一部分。前端開發實際上具有很明顯的時代特徵，它在很大程度上決定著大眾的信息攝入，以及用戶讀取信息的有效方式。那麼今天小編為大家總結了一些web前端的面試題，希望對大家有幫助哦！
一：字體高亮函數
題目：請你完成highlight函數，可以把模版字元串中的插入內容替換掉，並且插入文檔以後顯示紅色。例如：
constyourName='ScriptOJ'
constmyName='Jerry'
document.body.innerHTML=highlight`Hello,${yourName}.Iam
${myName}.`
上面例子的頁面顯示如下：
0_1498033735172_upload-2abd65b1-1e98-46ba-b46f-df4188a036a5
請你完成highlight函數的編寫。
答案：
css:
.highlight{
color:red;
}
js:
//考察的是Taggedtemplateliterals的使用
//
#/en-US/docs/Web/JavaScript/Reference/Template_literals
consthighlight=(strings,...args)=>{
returnstrings.rece((str,cur,i)=>{
return`${str}${cur}${args[i]?`class="highlight">${args[i]}`:''}`
},'')
}
二：數組去重
題目：編寫一個函數unique(arr)，返回一個去除數組內重復的元素的數組。例如：
unique([0,1,2,2,3,3,4])//=>[0,1,2,3,4]
unique([0,1,Ƈ',Ƈ',2])//=>[0,1,Ƈ',2]
答案：
constunique=(arr)=>[...newSet(arr)]
三：解析字串
題目：完成一個extractStr函數，可以把一個字元串中所有的:到.的子串解析出來並且存放到一個數組當中，例如：
extractStr('Mynameis:Jerry.Myageis:12.')//=>['Jerry',']
注意，:和.之間不包含:和.。也即是說，如果::abc..，則返回['abc']。
(本題來源：《JavaScriptCookbook》)
答案：·
constextractStr=(str)=>{
constret=str.match(/:([^:.])*?./g)||[]
returnret.map((subStr)=>subStr.replace(/[:.]/g,''))
}
四：spacify題目：
請你給字元串都添加上原型方法spacify，可以讓一個字元串的每個字母
㈩ 阿里巴巴web前端開發面試題
第一部分：用CSS實現布局
讓我們一起來做一個頁面
首先，我們需要一個布局。
請使用CSS控制3個div，實現如下圖的布局。
第二部分：用javascript優化布局
由於我們的用戶群喜歡放大看頁面
於是我們給上一題的布局做一次優化。
當滑鼠略過某個區塊的時候，該區塊會放大25%，
並且其他的區塊仍然固定不動。
提示：
也許，我們其他的布局也會用到這個放大的效果哦。
可以使用任何開源代碼，包括曾經你自己寫的。
關鍵字：
javascript、封裝、復用
第三部分：處理緊急情況
好了，我們的頁面完成了。
於是我們將頁面發布上網。
突然，晴天霹靂，頁面無法訪問了，這時候，你會怎麼做？
第一題個人實現：
___
______body,_iv{margin:0;padding:0;}
______.fl{float:_eft;_isplay:_nline;}
______.bc_C{background-color:#CCC;}
______.h120{height:120px;}
______.h250{height:250px;}
______.w120{width:120px;}
______.w220{width:220px;}
______.t130{top:130px;}
______.pa{position:_bsolute;}
______.mr10{margin-right:10px;}
______.mb10{margin-bottom:10px;}
___
___
______