撩課-Web大前端天天5道面試題-Day7

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

定義:
優雅降級（graceful degradation):
一開始就構建站點的完整功能，
而後針對瀏覽器測試和修復

漸進加強（progressive enhancement): 
一開始只構建站點的最少特性，
而後不斷針對各瀏覽器追加功能。

優雅降級和漸進加強都關注於同一網站
在不一樣設備裏不一樣瀏覽器下的表現程度。

區別:
「優雅降級」觀點認爲應該針對那些最高級、
最完善的瀏覽器來設計網站。

而將那些被認爲「過期」或有功能缺失的瀏覽器下
的測試工做安排在開發週期的最後階段，並把測試
對象限定爲主流瀏覽器（如 IE、Mozilla 等）的
前一個版本。

「漸進加強」觀點則認爲應關注於內容自己。

總結:
"優雅降級"就是首先完整地實現整個網站,
包括其中的功能和效果. 而後再爲那些無
法支持全部功能的瀏覽器增長候選方案, 
使之在舊式瀏覽器上以某種形式降級體驗
卻不至於徹底失效。

"漸進加強"則是從瀏覽器支持的基本功能開始,
首先爲全部設備準備好清晰且語義化的html及
完整內容, 而後再以無侵入的方法向頁面增長無
害於基礎瀏覽器的額外樣式和功能。
當瀏覽器升級時, 它們會自動呈現併發揮做用。

複製代碼

2. 請說說瀏覽器內核的組成?

瀏覽器的結構:

用戶界面（UI） - 包括菜單欄、工具欄、地址欄、
後退/前進按鈕、書籤目錄等，也就是能看到的除
了顯示頁面的主窗口以外的部分；

瀏覽器引擎（Rendering engine）-也被稱爲瀏覽器
內核、渲染引擎，主要負責取得頁面內容、整理信息
（應用CSS）、計算頁面的顯示方式，而後會輸出到
顯示器或者打印機；

JS解釋器 - 也能夠稱爲JS內核，主要負責處理
javascript腳本程序，通常都會附帶在瀏覽器
之中，例如chrome的V8引擎；

網絡部分 - 主要用於網絡調用，例如：HTTP請求，
其接口與平臺無關，併爲全部的平臺提供底層實現；

UI後端 - 用於繪製基本的窗口部件，好比組合框和窗口等。

數據存儲 - 保存相似於cookie、storage等數據部分，
HTML5新增了web database技術，一種完整的輕量級客
戶端存儲技術。

主要瀏覽器：
IE、Firefox、Safari、Chrome、Opera。

它們的瀏覽器內核（渲染引擎）：

IE--Trident
FF(Mozilla)--Gecko
Safari--Webkit
Chrome--Blink（WebKit的分支）
Opera--原爲Presto，現爲Blink

複製代碼

3. 爲何利用多個域名來請求網絡資源會更有效？

動靜分離需求，使用不一樣的服務器處理請求。
處理動態內容的只處理動態內容，不處理別的，
提升效率。

突破瀏覽器併發限制, 同一時間針對同一域名
下的請求有必定數量限制。超過限制數目的請
求會被阻止。不一樣瀏覽器這個限制的數目不同。

Cookieless, 節省帶寬，尤爲是上行帶寬通常比下
行要慢。用戶的每次訪問，都會帶上本身的cookie
，長此以往耗費的帶寬仍是挺大的。

假如weibo 的圖片放在主站域名下，那麼用戶
每次訪問圖片時，request header 裏就會帶有
本身的cookie ，header 裏的cookie 還不能壓縮，
而圖片是不須要知道用戶的cookie 的，因此這部分帶
寬就白白浪費了。

避免沒必要要的安全問題(好比: 上傳js竊取主站cookie之類的)

節約主域名的鏈接數，從而提升客戶端網絡帶寬的利用率，
優化頁面響應。

複製代碼

4. 說說前端開發中, 如何進行性能優化?

(1) 減小http請求次數：css spirit,data uri;
(2) JS，CSS源碼壓縮;
(3) 前端模板 JS+數據，減小因爲HTML標籤致使
    的帶寬浪費，前端用變量保存AJAX請求結果，每
    次操做本地變量，不用請求，減小請求次數;
(4) 用innerHTML代替DOM操做，減小DOM操做次數;
(5) 用setTimeout來避免頁面失去響應;
(6) 用hash-table來優化查找;
(7) 當須要設置的樣式不少時設置className而不
    是直接操做style; 
(8) 少用全局變量;
(9) 緩存DOM節點查找的結果;
(10) 避免使用CSS Expression;
(11) 圖片預載;

(12) 避免在頁面的主體佈局中使用table，
     table要等其中的內容徹底下載以後纔會顯示出來，
     顯示比div+css佈局慢;

(13) 控制網頁在網絡傳輸過程當中的數據量; 
     好比: 啓用GZIP壓縮或者保持良好的編程習慣，
     避免重複的CSS，JavaScript代碼，
     多餘的HTML標籤和屬性。
    
複製代碼

5. 從前端角度出發, 談談作好網站seo須要考慮什麼?

1) 語義化html標籤;
2) 合理的title, description, keywords;
3) 重要的html代碼放前面;
4) 少用iframe, 搜索引擎不會抓取iframe中的內容
5) 圖片加上alt

複製代碼