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