前端面試題總結

tinysun1234 發布于2019-08-02 13:57 / 1706人閱讀

摘要：還有天，年便過去了，回頭看看，這段時間自己有出去面試過，也遇到了很多面試題，以下是我的一些總結，這篇關于面試的文章，我也會不定時的更新。然而，如果前一個定時器尚未執行，其實就是將其替換為一個新的定時器。

還有7天，2018年便過去了，回頭看看，這段時間自己有出去面試過，也遇到了很多面試題，以下是我的一些總結，這篇關于面試的文章，我也會不定時的更新。

HTML

1.說一下你對HTML語義化的理解？

語義化就是根據內容的結構化（內容語義化），選擇合適的標簽（代碼語義化）便于開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。

2.瀏覽器的內核，你知道的有哪些？

Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等。
Presto內核：Opera7及以上。      [Opera內核原為：Presto，現為：Blink;]
Webkit內核：Safari,Chrome等。   [ Chrome的：Blink（WebKit的分支）]

3.說一說對HTML5的離線儲存的理解

離線緩存是Html5新特性之一，簡單理解就是第一次加載后將數據緩存，在沒有清除緩存前提下，下一次沒有網絡也
可以加載，用在靜態數據的網頁或游戲比較好用。當然，Html5新的特性都不是所有瀏覽器都能支持的，離線緩存也
一樣。反正IE9（包括）及IE9以下的瀏覽器目前是不支持的。如果用在移動端，應該都能支持。檢測是否支持離線
緩存也是比較簡單的。

詳細的使用請參考：
https://www.cnblogs.com/wuzhiquan/p/4844258.html

4.請描述一下 cookies，sessionStorage 和 localStorage 的區別

儲存大小：
cookie數據大小不能超過4k。
sessionStorage和localStorage也有大小的限制，但是比cookie大，可以達到5M或更大

有期時間：

localStorage：存儲持久數據，瀏覽器關閉后數據不丟失除非主動刪除數據；
sessionStorage：數據在當前瀏覽器窗口關閉后自動刪除。
cookie：設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉，可以設置其過期時間

存儲位置：
localStorage和sessionStorage都保存在客戶端，不與服務器進行交互通信。
cookie數據始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和服務器間來回傳遞。

5.請描述一個網頁從開始請求道最終顯示的完整過程？

一個網頁從請求到最終顯示的完整過程一般可以分為如下7個步驟：
（1）在瀏覽器中輸入網址；
（2）發送至DNS服務器并獲得域名對應的WEB服務器IP地址；
（3）與WEB服務器建立TCP連接；
（4）瀏覽器向WEB服務器的IP地址發送相應的HTTP請求；
（5）WEB服務器響應請求并返回指定URL的數據，或錯誤信息，如果設定重定向，則重定向到新的URL地址；
（6）瀏覽器下載數據后解析HTML源文件，解析的過程中實現對頁面的排版，解析完成后在瀏覽器中顯示基礎頁面；
（7）分析頁面中的超鏈接并顯示在當前頁面，重復以上過程直至無超鏈接需要發送，完成全部數據顯示。

6.webSocket 如何兼容低瀏覽器？

Adobe Flash Socket
ActiveX HTMLFile（IE）
基于 multipart 編碼發送 XHR
基于長輪詢的 XHR

CSS

1.怎樣讓一個div垂直居中

第一：定位之后根據div的寬高計算margin;
第二:flex布局
第三:transform: translate(-50%, -50%) （定位之后）;

2.css定義的權重

!important > 行間樣式 > id > class|屬性|偽類 > 標簽|偽元素 > 通配符

3.清除浮動的方法有哪些

第一：給父元素高度；
第二：讓父元素一起浮動起來
第三：clear:both;
第四：定義偽類:after

4.使用css實現一個持續的動畫效果

animation:mymove 5s infinite;
@keyframes mymove {
from {top:0px;}
to {top:200px;}
}

5.右邊寬度固定，左邊自適應

第一:display:flex布局；
第二：浮動；
第三：右邊定位，左邊給一個往右的padding；

6.對于css的hack理解

可見該文章:https://www.cnblogs.com/mumble/p/4576489.html

7.隱藏一個元素的方法有哪些

visibility: hidden; 這個屬性只是簡單的隱藏某個元素，但是元素占用的空間任然存在
opacity: 0; CSS3屬性，設置0可以使一個元素完全透明
position: absolute; 設置一個很大的 left 負值定位，使元素定位在可見區域之外
display: none; 元素會變得不可見，并且不會再占用文檔的空間。
transform: scale(0); 將一個元素設置為縮放無限小，元素將不可見，元素原來所在的位置將被保留
 HTML5屬性,效果和display:none;相同，但這個屬性用于記錄一個元素的狀態
height: 0; 將元素高度設為 0 ，并消除邊框
filter: blur(0); CSS3屬性，將一個元素的模糊度設置為0，從而使這個元素“消失”在頁面中

1.對于數組的操作方法有哪些

pop() 刪除一個數組中的最后的一個元素；
shift() 刪除數組的第一個元素；
unshift() 方法可向數組的開頭添加一個或更多元素，并返回新的長度。
push() 向數組的末尾添加元素；
reverse() 顛倒數組中元素的順序；
splice() 添加/刪除數組元素；
sort() 數組排序；
copyWithin() 指定位置的成員復制到其他位置；
fill() 填充數組；
join() 數組轉字符串；
slice() 淺拷貝數組的元素；
indexOf() 查找數組是否存在某個元素，返回下標；
includes() 查找數組是否包含某個元素 返回布爾；
every 檢測數組所有元素是否都符合判斷條件；
some 數組中的是否有滿足判斷條件的元素；
filter 過濾原始數組，返回新數組；
map 對數組中的每個元素進行處理，返回新的數組；
reduce 為數組提供累加器，合并為一個值；

更多的方法和方法對于的參數用法等，可以自己再去了解一下。

2.數組去重的方法

[...new Set([2,"12",2,12,1,2,1,6,12,13,6])]
或者使用for循環

3.數據類型

Boolean
Null
Undefined
Number
String
Symbol :（ECMAScript 6 新定義 ，Symbol 生成一個全局唯一、表示獨一無二的值） 
Object :（Array、Function、Object）

4.你對重繪、重排的理解？

重繪：不重新布局，只是元素的外觀改變;
重排：重排是更明顯的一種改變，可以理解為渲染樹需要重新計算，重排一定會引起重繪。


頁面渲染初始化（這個無法避免）
DOM元素的幾何屬性變化：元素尺寸（寬或高）改變。
DOM樹的結構變化：例如節點的增減（添加或者刪除可見的DOM元素），移動，元素位置改變等。
改變元素的一些樣式，調整瀏覽器窗口大小，滾動條出現等等

以上都會讓頁面發生重排

5.說說你要用到的es6和es7

對于這個問題，建議大家能阮一峰老師的書
http://es6.ruanyifeng.com/#docs/module

6.函數節流是什么，有什么優點

目的：
從字面上就可以理解，函數節流就是用來節流函數從而一定程度上優化性能的。例如，DOM 操作比起非DOM 交互需
要更多的內存和CPU 時間。連續嘗試進行過多的DOM 相關操作可能會導致瀏覽器掛起，有時候甚至會崩潰。尤
在IE 中使用onresize 事件處理程序的時候容易發生，當調整瀏覽器大小的時候，該事件會連續觸發。在oresize 
事件處理程序內部如果嘗試進行DOM 操作，其高頻率的更改可能會讓瀏覽器崩潰。又例如，我們常見的
一個搜索的功能，我們一般是綁定keyup事件，每按下一次鍵盤就搜索一次。但是我們的目的主要是每輸入一些內容
搜索一次而已。為了解決這些問題，就可以使用定時器對函數進行節流。

函數節流的原理：
某些代碼不可以在沒有間斷的情況連續重復執行。第一次調用函數，創建一個定時器，在指定的時間間隔之后運行
代碼。當第二次調用該函數時，它會清除前一次的定時器并設置另一個。如果前一個定時器已經執行過了，這個操
作就沒有任何意義。然而，如果前一個定時器尚未執行，其實就是將其替換為一個新的定時器。目的是只有在執行
函數的請求停止了一段時間之后才執行。
http://www.cnblogs.com/LuckyW...

7.你知道哪些HTTP的狀態碼，他們分別代表什么

我們一般常見的就是200，304，400，401，404，405，500等，詳細可見如下地址
http://tool.oschina.net/commons?type=5

8.說一說你對閉包的理解

官方對閉包的解釋是：一個擁有許多變量和綁定了這些變量的環境的表達式（通常是一個函數），因而這些變量也
是該表達式的一部分。
太官方了，硬是繞口，我覺得閉包簡單來說就是函數套函數，有權訪問另一個函數作用域內變量的函數。
閉包的好處就是：
1.希望一個變量長期駐扎在內存中；
2.避免全局變量的污染。
3.私有成員的存在。
閉包的缺點：
1.常駐內存，增加內存使用量。
2.使用不當會很容易造成內存泄露。

9.判斷數據類型的方法有哪些

var a = [1,2,3]

1.最常見的判斷方法：**typeof**
alert(typeof a)   ------------> object

2.判斷已知對象類型的方法： **instanceof**
alert(a instanceof Array) ---------------> true

3.**Object.prototype.toString** 
Object.prototype.toString.call("") ; --------------->[object String]

4.**constructor**
alert(c.constructor === Array) ----------> true

5.**jquery.type()**
如果對象是undefined或null，則返回相應的“undefined”或“null”。
jQuery.type( undefined ) === "undefined"
jQuery.type( null ) === "null"
如果對象有一個內部的[[Class]]和一個瀏覽器的內置對象的 [[Class]] 相同，我們返回相應的 [[Class]] 名
字。 (有關此技術的更多細節。 )
jQuery.type( true ) === "boolean"
jQuery.type( 3 ) === "number"
jQuery.type( "test" ) === "string"
其他一切都將返回它的類型“object”。

還有很大一部分關于js的面試題，之后再繼續補充

云服務器 GPU云服務器面試題棧面試題筆試面試題面試題內容

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53472.html

前端最強面經匯總

摘要：獲取的對象范圍方法獲取的是最終應用在元素上的所有屬性對象即使沒有代碼，也會把默認的祖宗八代都顯示出來而只能獲取元素屬性中的樣式。因此對于一個光禿禿的元素，方法返回對象中屬性值如果有就是據我測試不同環境結果可能有差異而就是。花了很長時間整理的前端面試資源，喜歡請大家不要吝嗇star~ 別只收藏，點個贊，點個star再走哈~ 持續更新中……，可以關注下github 項目地址 https:...

wangjuntytl 2019-08-26 10:41 評論0 收藏0
前端開發面試題鏈接

摘要：手冊網超級有用的前端基礎技術面試問題收集前端面試題目及答案匯總史上最全前端面試題含答案常見前端面試題及答案經典面試題及答案精選總結前端面試過程中最容易出現的問題前端面試題整理騰訊前端面試經驗前端基礎面試題部分最新前端面試題攻略前端面試前端入手冊網：http://www.shouce.ren/post/index 超級有用的前端基礎技術面試問題收集：http://www.codec...

h9911 2019-08-02 16:11 評論0 收藏0
前端開發面試題鏈接

摘要：手冊網超級有用的前端基礎技術面試問題收集前端面試題目及答案匯總史上最全前端面試題含答案常見前端面試題及答案經典面試題及答案精選總結前端面試過程中最容易出現的問題前端面試題整理騰訊前端面試經驗前端基礎面試題部分最新前端面試題攻略前端面試前端入手冊網：http://www.shouce.ren/post/index 超級有用的前端基礎技術面試問題收集：http://www.codec...

snifes 2019-08-23 16:48 評論0 收藏0
前端面試 - 收藏集 - 掘金

摘要：一基礎接口的意義百度規范擴展回調抽象類的意義我的前端面試經歷百度前端掘金博主就讀于電子科技大學，大三狗一枚面試是個漫長的過程，從海投到收獲電話面試，一面二面三面，一個步驟出錯那么后面就宣告終結。一道常被人輕視的前端 JS 面試題 - 前端 - 掘金目錄前言第一問第二問變量聲明提升函數表達式第三問第四問第五問第六問構造函數的返回值第七問最后前言年前剛剛離職了，分享下我曾經出過的一道...

lpjustdoit 2019-08-22 11:03 評論0 收藏0
深入理解js

摘要：詳解十大常用設計模式力薦深度好文深入理解大設計模式收集各種疑難雜癥的問題集錦關于，工作和學習過程中遇到過許多問題，也解答過許多別人的問題。介紹了的內存管理。延遲加載 (Lazyload) 三種實現方式延遲加載也稱為惰性加載，即在長網頁中延遲加載圖像。用戶滾動到它們之前，視口外的圖像不會加載。本文詳細介紹了三種延遲加載的實現方式。詳解 Javascript十大常用設計模式力薦~ ...

caikeal 2019-08-26 11:39 評論0 收藏0
求職準備 - 收藏集 - 掘金

摘要：一基礎接口的意義百度規范擴展回調抽象類的意義想不想通過一線互聯網公司面試文檔整理為電子書掘金簡介谷歌求職記我花了八個月準備谷歌面試掘金原文鏈接翻譯者【面試寶典】從對象深入分析 Java 中實例變量和類變量的區別 - 掘金原創文章，轉載請務必保留原出處為：http://www.54tianzhisheng.cn/... , 歡迎訪問我的站點，閱讀更多有深度的文章。實例變量和類變量...

cuieney 2019-08-16 10:36 評論0 收藏0