前端面試題總結——綜合問題(持續更新中)

時間  2019-11-10
標籤 端面 試題 總結 綜合 問題 持續 更新 简体版
原文   原文鏈接

前端面試題總結——綜合問題(持續更新中)

1.頁面從輸入URL到頁面加載顯示完成，這個過程當中都發生了什麼？（流程說的越詳細越好）

1.輸入域名地址
2.發送至DNS服務器並得到域名對應的WEB服務器IP地址；
3.與WEB服務器創建TCP鏈接；
4.服務器的永久重定向響應（從 http://example.com 到 http://www.example.com）
5.瀏覽器跟蹤重定向地址
6.服務器處理請求
7.服務器返回一個HTTP響應
8.瀏覽器顯示 HTML
9.瀏覽器發送請求獲取的資源（如圖片、音頻、視頻、CSS、JS等等）
10.瀏覽器發送異步請求javascript

2.瀏覽器工做原理

1.用戶界面 2.網絡 3.UI後端 4.數據存儲
5.瀏覽器引擎 6.渲染引擎 7.js解釋器php

3.瀏覽器解析過程：

流程：解析html以構建dom樹->構建render樹->佈局render樹->繪製render樹html

4.介紹一下你對瀏覽器內核的理解？

主要分紅兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，而後會輸出至顯示器或打印機。
瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣，因此渲染的效果也不相同。全部網頁瀏覽器、電子郵件客戶端以及其它須要編輯、顯示網絡內容的應用程序都須要內核。
JS引擎則：解析和執行javascript來實現網頁的動態效果。
最開始渲染引擎和JS引擎並無區分的很明確，後來JS引擎愈來愈獨立，內核就傾向於只指渲染引擎。前端

5.常見的瀏覽器內核有哪些？

Trident內核：IE,360，傲遊，搜狗，世界之窗，騰訊等。[又稱MSHTML]
Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto內核：Opera7及以上。 [Opera內核原爲：Presto，現爲：Blink;]
Webkit內核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]java

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

cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（一般通過加密），
，數據會在瀏覽器和服務器間來回傳遞。
sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。
存儲大小：node

cookie數據大小不能超過4k。
sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。

有期時間：web

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

7.請大概描述下頁面訪問cookie的限制條件

跨域問題，設置了HttpOnly。面試

8.如何實現瀏覽器內多個標籤頁之間的通訊? (阿里)

調用localstorge、cookies等本地存儲方式ajax

9.頁面可見性（Page Visibility API） 能夠有哪些用途？

經過 visibilityState 的值檢測頁面當前是否可見，以及打開網頁的時間等;
在頁面被切換到其餘後臺進程的時候，自動暫停音樂或視頻的播放；typescript

10.網頁驗證碼是幹嗎的，是爲了解決什麼安全問題。

區分用戶是計算機仍是人的公共全自動程序。能夠防止惡意破解密碼、刷票、論壇灌水；
有效防止黑客對某一個特定註冊用戶用特定程序暴力破解方式進行不斷的登錄嘗試。

11.爲何利用多個域名來存儲網站資源？

CDN緩存更方便 ，突破瀏覽器併發限制
節約cookie帶寬 ，節約主域名的鏈接數，優化頁面響應速度 防止沒必要要的安全問題

12.請談一下你對網頁標準和標準制定機構重要性的理解。

網頁標準和標準制定機構都是爲了能讓web發展的更‘健康’，開發者遵循統一的標準，下降開發難度，開發成本，SEO也會更好作，也不會由於濫用代碼致使各類BUG、安全問題，最終提升網站易用性。

13.知道什麼是微格式嗎？

　微格式（Microformats）是一種讓機器可讀的語義化XHTML詞彙的集合，是結構化數據的開放標準。是爲特殊應用而制定的特殊格式
　優勢：將智能數據添加到網頁上，讓網站內容在搜索引擎結果界面能夠顯示額外的提示。

14.一個頁面上有大量的圖片，加載很慢，你有哪些方法優化這些圖片的加載，給用戶更好的體驗。

（1）圖片懶加載，在頁面上的未可視區域能夠添加一個滾動條事件，判斷圖片位置與瀏覽器頂端的距離與頁面的距離，若是前者小於後者，優先加載。
（2）若是爲幻燈片、相冊等，可使用圖片預加載技術，將當前展現圖片的前一張和後一張優先下載。
（3）若是圖片過大，可使用特殊編碼的圖片，加載時會先加載一張壓縮的特別厲害的縮略圖，以提升用戶體驗。
（4）若是圖片展現區域小於圖片的真實大小，則因在服務器端根據業務須要先行進行圖片壓縮，圖片壓縮後大小與展現一致。

15.談談之前端角度出發作好SEO（搜索引擎）須要考慮什麼？

合理的標籤使用， 主要的互聯網目錄，連接交換和連接普遍度。

16.請寫出一些前端性能優化的方式，越多越好

1.減小dom操做
2.部署前，圖片壓縮，代碼壓縮
3.優化js代碼結構，減小冗餘代碼
4.減小http請求，合理設置 HTTP緩存
5.使用內容分發cdn加速
6.靜態資源緩存
7.圖片延遲加載

17.描述一下漸進加強和優雅降級之間的不一樣?

區別：優雅降級是從複雜的現狀開始，並試圖減小用戶體驗的供給，而漸進加強則是從一個很是基礎的，可以起做用的版本開始，並不斷擴充，以適應將來環境的須要。降級（功能衰減）意味着往回看；而漸進加強則意味着朝前看，同時保證其根基處於安全地帶。

18.webSocket如何兼容低瀏覽器？(阿里)

Adobe Flash Socket 、
ActiveX HTMLFile (IE) 、
基於 multipart 編碼發送 XHR 、
基於長輪詢的 XHR

19.web開發中會話跟蹤的方法有哪些

  1. cookie 2.session
  2. url重寫 4.隱藏input 5.ip地址

20.HTTP method

  1. 一臺服務器要與HTTP1.1兼容，只要爲資源實現GET和HEAD方法便可
  2. GET是最經常使用的方法，一般用於請求服務器發送某個資源。
  3. HEAD與GET相似，但服務器在響應中值返回首部，不返回實體的主體部分
  4. PUT讓服務器用請求的主體部分來建立一個由所請求的URL命名的新文檔，或者，若是那個URL已經存在的話，就用幹這個主體替代它
  5. POST起初是用來向服務器輸入數據的。實際上，一般會用它來支持HTML的表單。表單中填好的數據一般會被送給服務器，而後由服務器將其發送到要去的地方。
  6. TRACE會在目的服務器端發起一個環回診斷，最後一站的服務器會彈回一個TRACE響應並在響應主體中攜帶它收到的原始請求報文。TRACE方法主要用於診斷，用於驗證請求是否如願穿過了請求/響應鏈。
  7. OPTIONS方法請求web服務器告知其支持的各類功能。能夠查詢服務器支持哪些方法或者對某些特殊資源支持哪些方法。
  8. DELETE請求服務器刪除請求URL指定的資源

21.HTTP response報文結構是怎樣的

rfc2616中進行了定義：

  1. 首行是狀態行包括：HTTP版本，狀態碼，狀態描述，後面跟一個CRLF
  2. 首行以後是若干行響應頭，包括：通用頭部，響應頭部，實體頭部
  3. 響應頭部和響應實體之間用一個CRLF空行分隔
  4. 最後是一個可能的消息實體 響應報文例子以下：

22.HTTP狀態碼及其含義

狀態碼類型
狀態碼 類別 緣由短語
1XX Information（信息性狀態碼） 接收的請求正在處理
2XX Success（成功狀態碼） 請求正常處理完畢
3XX Redirection（重定向狀態碼） 須要進行附加的操做以完成請求
4XX Client Error（客戶端錯誤狀態碼） 服務器沒法處理請求
5XX Server Error（服務端錯誤狀態碼） 服務器處理請求出錯
204：服務器成功處理，但未返回內容。
304：Not Modified 未修改。所請求的資源未修改，服務器返回此狀態碼時，不會返回任何資源。客戶端一般會緩存訪問過的資源，經過提供一個頭信息指出客戶端但願只返回在指定日期以後修改的資源
400：Bad Request 客戶端請求的語法錯誤，服務器沒法理解
403：Forbidden 服務器理解請求客戶端的請求，可是拒絕執行此請求
404：Not Found 服務器沒法根據客戶端的請求找到資源（網頁）。經過此代碼，網站設計人員可設置"您所請求的資源沒法找到"的個性頁面

23.什麼是同源：協議相同 域名相同 端口相同

同源政策的目的，是爲了保證用戶信息的安全，防止惡意的網站竊取數據。
若是非同源，共有三種行爲受到限制。
（1） Cookie、LocalStorage 和 IndexDB 沒法讀取。
（2） DOM 沒法得到。
（3） AJAX 請求不能發送。

24.關於建站安全防禦

答：要作好防XSS、CSRF、SQL注入攻擊.DDOS攻擊。
XSS概念:
譯爲跨站腳本攻擊,具體是指攻擊者在Web頁面裏插入惡意Script腳本，當用戶瀏覽該網頁時，Script代碼會被執行，從而進行惡意攻擊。
XSS預防:
關鍵cookie字段設置httpOnly
輸入檢查,特殊字符 < > / &等,對其進行轉義後存儲
CSRF概念：
本質上講，是黑客將一個http接口中須要傳遞的全部參數都預測出來，而後無論以什麼方式，他均可以根據他的目的來任意調用你的接口，對服務器實現CURD。
CSRF 預防：
使用驗證碼，更高級用圖靈測試
SQL概念：
一般沒有任何過濾，直接把參數存放到了SQL語句當中
SQL預防：
根本上防止SQL注入的方法，就是參數化查詢或者作詞法分析。
DDOS概念：
利用木桶原理，尋找利用系統應用的瓶頸；阻塞和耗盡；當前問題：用戶的帶寬小於攻擊的規模，噪聲訪問帶寬成爲木桶的短板。
DDOS預防：用軟硬件結合的方式來防護是最有效的

25.對前端工程化的理解

1.開發規範
2.模塊化開發
3.組件化開發
4.組件倉庫
5.性能優化
6.項目部署
7.開發流程
8.開發工具

26.AMD和CMD是什麼？它們的區別有哪些？

AMD和CMD是二種模塊定義規範。如今都使用模塊化編程，AMD，異步模塊定義；CMD，通用模塊定義。AMD依賴前置，CMD依賴就近。CMD的API職責單一，沒有全局require，AMD的一個API能夠多用。

27.MVC BFC

mvc是模型(model)－視圖(view)－控制器(controller)的縮寫，一種軟件設計典範使用MVC的目的是將M和V的實現代碼分離，從而使同一個程序可使用不一樣的表現形式。MVC對應Html，CSS，js。
BFC全稱」Block Formatting Context」, 中文爲「塊級格式化上下文」。流體特性：塊狀水平元素，如div元素（下同），在默認狀況下（非浮動、絕對定位等），水平方向會自動填滿外部的容器；BFC元素特性表現原則就是，內部子元素不會影響外部的元素。

28.你如何對網站的文件和資源進行優化？

期待的解決方案包括：文件合併文件最小化/文件壓縮使用CDN託管緩存的使用（多個域名來提供緩存）其餘。

29.你都使用哪些工具來測試代碼的性能？

Profiler,JSPerf,Dromaeo。

30.若是網頁內容須要支持多語言，你會怎麼作？

1.應用字符集的選擇，選擇UTF-8編碼
2.語言書寫習慣&導航結構
3.數據庫驅動型網站

31.若是設計中使用了非標準的字體，你該如何去實現？

所謂的標準字體是多數機器上都會有的，或者即便沒有也能夠由默認字體替代的字體。
方法：
用圖片代替
web fonts在線字庫，如Google Webfonts，Typekit等等；http://www.chinaz.com/free/20...；
@font-face，Webfonts(字體服務例如：Google Webfonts，Typekit等等。)

32.：如何自學一門新編程語言

(1)瞭解背景知識：歷史、現狀、特色、應用領域、發展趨勢
(2)搭建開發環境，編寫HelloWorld
(3)聲明變量和常量
(4)數據類型
(5)運算符
(6)邏輯結構
(7)通用小程序
(8)函數和對象
(9)第三方庫、組件、框架
(10)實用項目

33.什麼是哈希表？

散列表（也叫哈希表），是根據關鍵碼值直接進行訪問的數據結構。也就是說，它經過把關鍵碼值映射到表中一個位置來訪問記錄，以加快查找的速度。這個映射函數叫作散列函數，存放記錄的數組叫作散列表。

34.靜態網頁和動態網頁區別：

靜態:網頁內容任何人在任什麼時候間訪問都是不變的

HTML/CSS/JS/視頻/音頻

動態:網頁內容不一樣人在不一樣時間訪問多是不一樣的

JSP/PHP/ASP.NET/Node.JS

35.SQL語句的分類

DDL:數據定義語句 CREATE/DROP/ALTER…
DCL:數據控制語句 GRANT…
DML:操做操做語句 INSERT/UPDATE/DELETE
DQL:查詢語句 SELECT

36.如何學習新技術: 3步:

  1. 上官網看是什麼
  2. 上官網看快速入門
  3. 下載手冊備查

37.什麼是彈性佈局？

解決某元素中「子元素」的佈局方式，爲佈局提供最大的靈活性。
設爲flex佈局之後，子元素的float、clear和vertical-align屬性將失效!!!
display:flex; 屬性align-self 定義子元素的位置。

38.編寫響應式？

1.聲明viewport元標籤 2.使用流式佈局 3.全部容器使用相對尺寸，不用絕對尺寸
4.（最重要原則）使用CSS3 Media Query技術

39.常見的瀏覽器兼容問題？

1.不一樣瀏覽器的標籤默認的內.外補丁不一樣。
*{margin:0;padding:0;}
2.圖片默認有間距
使用float屬性爲img佈局
3.居中問題（而FF默認爲左對齊）
margin: 0 auto;
4.CSS 兼容前綴
-ms- IE
-moz- Firefox
-o- Opera
-webkit- Chrome
5.使用CSS Hack
如： +:IE6,7的前綴

-:IE6的前綴

40.H5新特性：總共10點

(1)Canvas繪圖
(2)SVG繪圖
(3)地理定位
(4)Web Worker
web worker 是運行在後臺的 JS，獨立於其餘腳本，不會影響頁面的性能。
(5)Web Storage
1.Cookie技術 （ 兼容性好,數據不能超4kb,操做複雜）2.（兼容性差,數據8MB,操做簡單）sessionStorage 3.localStorage
(6)Web Socket
WebSocket協議是基於TCP的一種新的網絡協議。它實現了瀏覽器與服務器全雙工(full-duplex)通訊——容許服務器主動發送信息給客戶端。

41.C3新特性：共7點

1.複雜的選擇器
2.彈性佈局
3.動畫

42.Less，Sass

Less 是一門 CSS 預處理語言，它擴展了 CSS 語言，增長了變量、函數等特性，使 CSS 更易維護和擴展。

43ES6新特性：共8點

1.ES7只有2個特性:1.includes() 驗證數組中是否存在某個元素 2.指數操做符
2.ES8新特性：
Object.values()
Object.entries()
padStart()
padEnd()
Object.getOwnPropertyDescriptors()
函數參數列表結尾容許逗號
Async/Await

43.原生ajax

function setRequest(){
              //1.獲取xhr對象
              var xhr=createXhr();
              //2.建立請求
             xhr.open("get","response.php",true);
              //3.設置回調函數-onreadystatechange
             xhr.onreadystatechange=function(){
                 //判斷readyState以及status
        if(xhr.readyState==4&&xhr.status==200){
             //接收響應數據
             var resText=xhr.responseText;
             //打印在控制檯
             console.log(resText); 
                 }
              }
             //4.發送請求
              xhr.send(null);
           }

44.跨域

  1. 經過jsonp跨域
    1.）原生實現：
    <script>

    var script = document.createElement('script');
script.type = 'text/javascript';

// 傳參並指定回調執行函數爲onBack
script.src = 'http://www.....:8080/login?user=admin&callback=onBack';
document.head.appendChild(script);

// 回調執行函數
function onBack(res) {
    alert(JSON.stringify(res));
}

    </script>

2.跨域資源共享（CORS）只要服務端設置Access-Control-Allow-Origin便可

  1. nodejs中間件代理跨域

45.什麼是typescript

1.它是JavaScript的一個超集，並且本質上向這個語言添加了可選的靜態類型和基於類的面向對象編程。
2.TypeScript擴展了JavaScript的語法，因此任何現有的JavaScript程序能夠不加改變的在TypeScript下工做。
TypeScript是爲大型應用之開發而設計，而編譯時它產生 JavaScript 以確保兼容性。

46.三大框架的區別：

Angular帶有比較強的排它性的
React主張是函數式編程的理念，侵入性沒有Angular那麼強，主要由於它是軟性侵入。
Vue 漸進式的

47.spa應用

優勢：用戶體驗好 、良好的先後端分離。
缺點：
1.不利於SEO。
2.初次加載耗時相對增多。
3.導航不可用，若是必定要導航須要自行實現前進、後退。

48.什麼是模塊化編程？

每一個模塊內部，module變量表明當前模塊。
這個變量是一個對象，它的exports屬性（即module.exports）是對外的接口。加載某個模塊，實際上是加載該模塊的module.exports屬性。

49.什麼是混合編程？

混合編程是指使用兩種或兩種以上的程序設計語言來開發應用程序的過程。

50.性能優化？

1.使用 CDN
2.圖片懶加載
3.使用外部 JavaScript 和 CSS
4.壓縮 JavaScript 、 CSS 、字體、圖片等
5.優化 CSS Sprite
6.減小 HTTP 請求數
7.減小 DNS 查詢
8減小 DOM 元素數量
9.減小 DOM 操做
10.把腳本放在頁面底部

51.什麼是HTTP協議：

HTTP協議傳輸的數據都是未加密的，也就是明文的，所以使用HTTP協議傳輸隱私信息很是不安全，HTTPS協議是由SSL+HTTP協議構建的可進行加密傳輸、身份認證的網絡協議，要比http協議安全。

HTTPS和HTTP的區別主要以下：
　　一、https協議須要到ca申請證書，通常免費證書較少，於是須要必定費用。
　　二、http是超文本傳輸協議，信息是明文傳輸，https則是具備安全性的ssl加密傳輸協議。
　　三、http和https使用的是徹底不一樣的鏈接方式，用的端口也不同，前者是80，後者是443。
　　四、http的鏈接很簡單，是無狀態的；HTTPS協議是由SSL+HTTP協議構建的可進行加密傳輸、身份認證的網絡協議，比http協議安全。

前端加密方式https：是在http基礎上加了SSL協議，使用443端口,http是80端口;

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程