Web前端常見問題

一、理論知識

1.1、講講輸入完網址按下回車，到看到網頁這個過程中發生了什麼

a. 域名解析

b. 發起TCP的3次握手

c. 建立TCP連接配接後發起http請求

d. 伺服器端響應http請求，浏覽器得到html代碼

e. 浏覽器解析html代碼，并請求html代碼中的資源

f. 浏覽器對頁面進行渲染呈現給使用者

參考《一次完整的HTTP事務是怎樣一個過程》

1.2、談談你對前端性能優化的了解

a. 請求數量：合并腳本和樣式表，CSS Sprites，拆分初始化負載，劃分主域

b. 請求帶寬：開啟GZip，精簡JavaScript，移除重複腳本，圖像優化，将icon做成字型

c. 緩存利用：使用CDN，使用外部JavaScript和CSS，添加Expires頭，減少DNS查找，配置ETag，使AjaX可緩存

d. 頁面結構：将樣式表放在頂部，将腳本放在底部，盡早重新整理文檔的輸出

e. 代碼校驗：避免CSS表達式，避免重定向

參考《前端工程與性能優化》

1.3、前端 MV*架構的意義

早期前端都是比較簡單，基本以頁面為工作單元，内容以浏覽型為主，也偶爾有簡單的表單操作，基本不太需要架構.

随着 AJAX 的出現，Web2.0的興起，人們可以在頁面上可以做比較複雜的事情了，然後前端架構才真正出現了。

如果是頁面型産品，多數确實不太需要它，因為頁面中的 JavaScript代碼，處理互動的絕對遠遠超過處理模型的，但是如果是應用軟體類産品，這就太需要了。

長期做某個行業軟體的公司，一般都會沉澱下來一些業務元件，主要展現在資料模型、業務規則和業務流程，這些元件基本都存在于後端，在前端很少有相應的組織。

從協作關系上講，很多前端開發團隊每個成員的職責不是很清晰，有了前端的 MV架構，這個狀況會大有改觀。

之是以感受不到 MV*架構的重要性，是因為Model部分代碼較少，View的相對多一些。如果主要在操作View和Controller，那當然 jQuery 這類庫比較好用了。

參考《前端 MV*架構的意義》

1.4、請簡述盒模型

IE6盒子模型與W3C盒子模型。

文檔中的每個元素被描繪為矩形盒子。盒子有四個邊界：外邊距邊界margin, 邊框邊界border, 内邊距邊界padding與内容邊界content。

CSS3中有個box-sizing屬性可以控制盒子的計算方式，

content-box：padding和border不被包含在定義的width和height之内。對象的實際寬度等于設定的width值和border、padding之和。（W3C盒子模型）

border-box：padding和border被包含在定義的width和height之内。對象的實際寬度就等于設定的width值。（IE6盒子模型）

參考《盒模型》

1.5、請你談談Cookie的弊端

a. 每個特定的域名下最多生成的cookie個數有限制

b. IE和Opera 會清理近期最少使用的cookie，Firefox會随機清理cookie

c. cookie的最大大約為4096位元組，為了相容性，一般不能超過4095位元組

d. 安全性問題。如果cookie被人攔截了，那人就可以取得所有的session資訊。

1.6、浏覽器本地存儲

在HTML5中提供了sessionStorage和localStorage.

sessionStorage用于本地存儲一個會話（session）中的資料，這些資料隻有在同一個會話中的頁面才能通路并且當會話結束後資料也随之銷毀，是會話級别的存儲。

localStorage用于持久化的本地存儲，除非主動删除資料，否則資料是永遠不會過期的。

1.7、web storage和cookie的差別

a. Cookie的大小是受限的

b. 每次你請求一個新的頁面的時候Cookie都會被發送過去，這樣無形中浪費了帶寬

c. cookie還需要指定作用域，不可以跨域調用

d. Web Storage擁有setItem,getItem等方法，cookie需要前端開發者自己封裝setCookie，getCookie

e. Cookie的作用是與伺服器進行互動，作為HTTP規範的一部分而存在 ，而Web Storage僅僅是為了在本地“存儲”資料而生

f. IE7、IE6中的UserData通過簡單的代碼封裝可以統一到所有的浏覽器都支援web storage

1.9、線程與程序的差別

a. 一個程式至少有一個程序，一個程序至少有一個線程

b. 線程的劃分尺度小于程序，使得多線程程式的并發性高

c. 程序在執行過程中擁有獨立的記憶體單元，而多個線程共享記憶體，進而極大地提高了程式的運作效率

d. 每個獨立的線程有一個程式運作的入口、順序執行序列和程式的出口。但是線程不能夠獨立執行，必須依存在應用程式中，由應用程式提供多個線程執行控制

e. 多線程的意義在于一個應用程式中，有多個執行部分可以同時執行。但作業系統并沒有将多個線程看做多個獨立的應用，來實作程序的排程和管理以及資源配置設定

1.10、請說出三種減少頁面加載時間的方法

a. 盡量減少頁面中重複的HTTP請求數量

b. 伺服器開啟gzip壓縮

c. css樣式的定義放置在檔案頭部

d. Javascript腳本放在檔案末尾

e. 壓縮合并Javascript、CSS代碼

f. 使用多域名負載網頁内的多個檔案、圖檔

參考《減低頁面加載時間的方法》

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

JSPerf, Dromaeo

1.12、你遇到過比較難的技術問題是？你是如何解決的？

1.13、常使用的庫有哪些？常用的前端開發工具？開發過什麼應用或元件？

1.14、列舉IE與其他浏覽器不一樣的特性？

a. IE的排版引擎是Trident （又稱為MSHTML）

b. Trident核心曾經幾乎與W3C标準脫節（2005年）

c. Trident核心的大量 Bug等安全性問題沒有得到及時解決

d. JS方面，有很多獨立的方法，例如綁定事件的attachEvent、建立事件的createEventObject等

e. CSS方面，也有自己獨有的處理方式，例如設定透明，低版本IE中使用濾鏡的方式

參考《Trident（排版引擎）》

1.15、什麼叫優雅降級和漸進增強？

漸進增強 progressive enhancement：

針對低版本浏覽器進行建構頁面，保證最基本的功能，然後再針對進階浏覽器進行效果、互動等改進和追加功能達到更好的使用者體驗。

優雅降級 graceful degradation：

一開始就建構完整的功能，然後再針對低版本浏覽器進行相容。

差別：

a. 優雅降級是從複雜的現狀開始，并試圖減少使用者體驗的供給

b. 漸進增強則是從一個非常基礎的，能夠起作用的版本開始，并不斷擴充，以适應未來環境的需要

c. 降級（功能衰減）意味着往回看；而漸進增強則意味着朝前看，同時保證其根基處于安全地帶

參考《優雅降級和漸進增強的差別》

1.16、WEB應用從伺服器主動推送Data到用戶端有那些方式？

a. html5 websoket

b. WebSocket 通過 Flash

c. XHR長時間連接配接

d. XHR Multipart Streaming

e. 不可見的Iframe

f. <script>标簽的長時間連接配接(可跨域)

1.17、對前端界面工程師這個職位是怎麼樣了解的？

a. 前端是最貼近使用者的程式員，前端的能力就是能讓産品從 90分進化到 100 分，甚至更好

b. 參與項目，快速高品質完成實作效果圖，精确到1px；

c. 與團隊成員，UI設計，産品經理的溝通；

d. 做好的頁面結構，頁面重構和使用者體驗；

e. 處理hack，相容、寫出優美的代碼格式；

f. 針對伺服器的優化、擁抱最新前端技術。

1.18、你在現在的團隊處于什麼樣的角色，起到了什麼明顯的作用？

1.19、你的優點是什麼？缺點是什麼？

1.20、如何管理前端團隊?

1.21、最近在學什麼？能談談你未來3，5年給自己的規劃嗎？

1.22、平時如何管理你的項目？

a. 先期團隊必須确定好全局樣式（globe.css），編碼模式(utf-8) 等；

b. 編寫習慣必須一緻（例如都是采用繼承式的寫法，單樣式都寫成一行）；

c. 标注樣式編寫人，各子產品都及時标注（标注關鍵樣式調用的地方）；

d. 頁面進行标注（例如 頁面 子產品 開始和結束）；

e. CSS跟HTML 分檔案夾并行存放，命名都得統一（例如style.css）；

f. JS 分檔案夾存放 命名以該JS功能為準的英文翻譯。

g. 圖檔采用整合的 images.png png8 格式檔案使用 盡量整合在一起使用友善将來的管理

1.23、說說最近最流行的一些東西吧？常去哪些網站？

CSDN、SegmentFault、php.net、MDN、css參考手冊、iconfont、

underscore、github、Bootstrap、W3Shool、W3Cplus、caniuse

1.24、Flash、Ajax各自的優缺點，在使用中如何取舍？

Flash：

a. Flash适合處理多媒體、矢量圖形、通路機器

b. 對CSS、處理文本上不足，不容易被搜尋

Ajax：

a. Ajax對CSS、文本支援很好，支援搜尋

b. 多媒體、矢量圖形、機器通路不足

共同點：

a. 與伺服器的無重新整理傳遞消息

b. 可以檢測使用者離線和線上狀态

c. 操作DOM

1.25、請解釋一下 JavaScript 的同源政策

同源政策指的是：協定，域名，端口相同，同源政策是一種安全協定。

指一段腳本隻能讀取來自同一來源的視窗和文檔的屬性。

1.26、AMD和CMD 規範的差別？

AMD 提前執行依賴 - 盡早執行，requireJS 是它的實作

CMD 按需執行依賴 - 懶執行，seaJS 是它的實作

參考《SeaJS與RequireJS最大的差別》、《與 RequireJS 的異同》

1.27、網站重構的了解

重構：在不改變外部行為的前提下，簡化結構、添加可讀性，而在網站前端保持一緻的行為。

a. 使網站前端相容于現代浏覽器(針對于不合規範的CSS、如對IE6有效的)

b. 對于移動平台的優化，針對于SEO進行優化

c. 減少代碼間的耦合，讓代碼保持彈性

d. 壓縮或合并JS、CSS、image等前端資源

1.28、浏覽器的核心分别是什麼?

IE浏覽器的核心Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera核心原為Presto，現為Blink；

1.29、請介紹下cache-control

每個資源都可以通過 Cache-Control HTTP 頭來定義自己的緩存政策

Cache-Control 指令控制誰在什麼條件下可以緩存響應以及可以緩存多久

Cache-Control 頭在 HTTP/1.1 規範中定義，取代了之前用來定義響應緩存政策的頭（例如 Expires）。

1.30、前端頁面有哪三層構成，分别是什麼？作用是什麼？

a. 結構層：由 HTML 或 XHTML 之類的标記語言負責建立，僅負責語義的表達。解決了頁面“内容是什麼”的問題。

b. 表示層：由CSS負責建立，解決了頁面“如何顯示内容”的問題。

c. 行為層：由腳本負責。解決了頁面上“内容應該如何對事件作出反應”的問題。

1.31、知道的網頁制作會用到的圖檔格式有哪些？

png-8，png-24，jpeg，gif，svg

Webp：谷歌（google）開發的一種旨在加快圖檔加載速度的圖檔格式。圖檔壓縮體積大約隻有JPEG的2/3，并能節省大量的伺服器帶寬資源和資料空間。Facebook Ebay等知名網站已經開始測試并使用WebP格式。

Apng：全稱是“Animated Portable Network Graphics”, 是PNG的位圖動畫擴充，可以實作png格式的動态圖檔效果。04年誕生，但一直得不到各大浏覽器廠商的支援，直到日前得到 iOS safari 8的支援，有望代替GIF成為下一代動态圖示準。

1.32、一次js請求一般情況下有哪些地方會有緩存處理？

a. 浏覽器端存儲

b. 浏覽器端檔案緩存

c. HTTP緩存304

d. 伺服器端檔案類型緩存

e. 表現層&DOM緩存

參考《一次HTTP請求中有哪些地方可以緩存》

1.33、一個頁面上有大量的圖檔（大型電商網站），加載很慢，你有哪些方法優化這些圖檔的加載，給使用者更好的體驗。

a. 圖檔懶加載，滾動到相應位置才加載圖檔。

b. 圖檔預加載，如果為幻燈片、相冊等，将目前展示圖檔的前一張和後一張優先下載下傳。

c. 使用CSSsprite，SVGsprite，Iconfont、Base64等技術，如果圖檔為css圖檔的話。

d. 如果圖檔過大，可以使用特殊編碼的圖檔，加載時會先加載一張壓縮的特别厲害的縮略圖，以提高使用者體驗。

1.34、談談以前端角度出發做好SEO需要考慮什麼？

a. 了解搜尋引擎如何抓取網頁和如何索引網頁

b. meta标簽優化

c. 關鍵詞分析

d. 付費給搜尋引擎

e. 連結交換和連結廣泛度（Link Popularity）

f. 合理的标簽使用

二、HTML

2.1、<img>标簽上title屬性與alt屬性的差別是什麼？

alt屬性是為了給那些不能看到你文檔中圖像的浏覽者提供文字說明的。且長度必須少于100個英文字元或者使用者必須保證替換文字盡可能的短。

這包括那些使用本來就不支援圖像顯示或者圖像顯示被關閉的浏覽器的使用者，視覺障礙的使用者和使用螢幕閱讀器的使用者等。

title屬性為設定該屬性的元素提供建議性的資訊。使用title屬性提供非本質的額外資訊。參考《alt和title屬性的差別及應用》

2.2、分别寫出以下幾個HTML标簽：文字加粗、下标、居中、字型

加粗：<b>、<strong>

下标：<sub>

居中：<center>

字型：<font>、<basefont>、參考《HTML标簽清單》

2.3、請寫出至少5個html5新增的标簽，并說明其語義和應用場景

section：定義文檔中的一個章節

nav：定義隻包含導航連結的章節

header：定義頁面或章節的頭部。它經常包含 logo、頁面标題和導航性的目錄。

footer：定義頁面或章節的尾部。它經常包含版權資訊、法律資訊連結和回報建議用的位址。

aside：定義和頁面内容關聯度較低的内容——如果被删除，剩下的内容仍然很合理。

參考《HTML5 标簽清單》

2.4、請說說你對标簽語義化的了解？

a. 去掉或者丢失樣式的時候能夠讓頁面呈現出清晰的結構

b. 有利于SEO：和搜尋引擎建立良好溝通，有助于爬蟲抓取更多的有效資訊：爬蟲依賴于标簽來确定上下文和各個關鍵字的權重；

c. 友善其他裝置解析（如螢幕閱讀器、盲人閱讀器、移動裝置）以意義的方式來渲染網頁；

d. 便于團隊開發和維護，語義化更具可讀性，遵循W3C标準的團隊都遵循這個标準，可以減少差異化。

2.5、Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?

<!DOCTYPE> 聲明位于文檔中的最前面，處于 <html> 标簽之前。告知浏覽器以何種模式來渲染文檔。

嚴格模式的排版和 JS 運作模式是，以該浏覽器支援的最高标準運作。

在混雜模式中，頁面以寬松的向後相容的方式顯示。模拟老式浏覽器的行為以防止站點無法工作。

DOCTYPE不存在或格式不正确會導緻文檔以混雜模式呈現。

2.6、你知道多少種Doctype文檔類型？

标簽可聲明三種 DTD 類型，分别表示嚴格版本、過渡版本以及基于架構的 HTML 文檔。

HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset。

XHTML 1.0 規定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。

Standards （标準）模式（也就是嚴格呈現模式）用于呈現遵循最新标準的網頁，

Quirks（包容）模式（也就是松散呈現模式或者相容模式）用于呈現為傳統浏覽器而設計的網頁。

2.7、HTML與XHTML——二者有什麼差別

a. XHTML 元素必須被正确地嵌套。

b. XHTML 元素必須被關閉。

c. 标簽名必須用小寫字母。

d. XHTML 文檔必須擁有根元素。

參考《XHTML 與 HTML 之間的差異》

2.8、html5有哪些新特性、移除了那些元素？

a. HTML5 現在已經不是 SGML 的子集，主要是關于圖像，位置，存儲，多任務等功能的增加。

b. 拖拽釋放(Drag and drop) API

c. 語義化更好的内容标簽（header,nav,footer,aside,article,section）

d. 音頻、視訊API(audio,video)

e. 畫布(Canvas) API

f. 地理(Geolocation) API

g. 本地離線存儲 localStorage 長期存儲資料，浏覽器關閉後資料不丢失

h. sessionStorage 的資料在頁面會話結束時會被清除

i. 表單控件，calendar、date、time、email、url、search

j. 新的技術webworker, websocket等

移除的元素：

a. 純表現的元素：basefont，big，center, s，strike，tt，u；

b. 對可用性産生負面影響的元素：frame，frameset，noframes；

2.9、iframe的優缺點？

優點：

a. 解決加載緩慢的第三方内容如圖示和廣告等的加載問題

b. iframe無重新整理檔案上傳

c. iframe跨域通信

缺點：

a. iframe會阻塞首頁面的Onload事件

b. 無法被一些搜尋引擎索引到

c. 頁面會增加伺服器的http請求

d. 會産生很多頁面，不容易管理。

參考《iframe的一些記錄》

2.10、Quirks模式是什麼？它和Standards模式有什麼差別？

在寫程式時我們也會經常遇到這樣的問題，如何保證原來的接口不變，又提供更強大的功能，尤其是新功能不相容舊功能時。IE6以前的頁面大家都不會去寫DTD，是以IE6就假定 如果寫了DTD，就意味着這個頁面将采用對CSS支援更好的布局，而如果沒有，則采用相容之前的布局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。

差別：總體會有布局、樣式解析和腳本執行三個方面的差別。

a. 盒模型：在W3C标準中，如果設定一個元素的寬度和高度，指的是元素内容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。

b. 設定行内元素的高寬：在Standards模式下，給<span>等行内元素設定wdith和height都不會生效，而在quirks模式下，則會生效。

c. 設定百分比的高度：在standards模式下，一個元素的高度是由其包含的内容來決定的，如果父元素沒有設定百分比的高度，子元素設定一個百分比的高度是無效的用

d. 設定水準居中：使用margin:0 auto在standards模式下可以使元素水準居中，但在quirks模式下卻會失效。

2.11、請闡述table的缺點

a. 太深的嵌套，比如table>tr>td>h3，會導緻搜尋引擎讀取困難，而且，最直接的損失就是大大增加了備援代碼量。

b. 靈活性差，比如要将tr設定border等屬性，是不行的，得通過td

c. 代碼臃腫，當在table中套用table的時候，閱讀代碼會顯得異常混亂

d. 混亂的colspan與rowspan，用來布局時，頻繁使用他們會造成整個文檔順序混亂。

e. table需要多次計算才能确定好其在渲染樹中節點的屬性，通常要花3倍于同等元素的時間。

f. 不夠語義

參考《為什麼說table表格布局不好？》

2.12、簡述一下src與href的差別

src用于替換目前元素；href用于在目前文檔和引用資源之間确立聯系。

src是source的縮寫，指向外部資源的位置，指向的内容将會嵌入到文檔中目前标簽所在位置

href是Hypertext Reference的縮寫，指向網絡資源所在位置，建立和目前元素（錨點）或目前文檔（連結）之間的連結

轉載于:https://www.cnblogs.com/sweet-ice/p/10513015.html