1. 程式人生 > >前端面試常見問題(2018.10.18)

前端面試常見問題(2018.10.18)

1. position的定位方式?檢視

常見的有4種:

  • position:static(靜態定位)

靜態定位;是position的預設值,元素框正常生成,也就是沒有定位時的正常顯示。

  • position:relative(相對定位)

生成的位置相對於自身定位的,需要注意的是使用position:relative的元素並沒有脫離文件流,且原來的位置佔用的空間依舊存在,只是位置發生了變化。一般使用relative來改變位置比較少,主要是用來設定子級的absolute定位的參考物件。

  • position:absolute(絕對定位)

absolute定位是佈局中最常用到的定位,其生成的位置是相對於帶有position屬性的父(父...)級來定位

;如果父級都沒有position屬性,則相對於document來定位;使用absolute定位後,定位元素是脫離文件流的,這時候父級會檢測不到定位元素的寬高。inline元素使用absolute定位之後,可以對其設定寬高;元素是不可以同時使用絕對定位和浮動的。

  • position:fixed(固定定位)

fixed定位是相對於瀏覽器視窗來定位的,所以也是脫離了文件流,與absolute一樣,父級會檢測不到定位元素的寬高。inline元素使用fixed定位之後,可以對其設定寬高;元素是不可以同時使用fixed定位和浮動的。

另外,還有4種不常見的:

  • position: inherit;  // 繼承父元素的position屬性
  • position: initial;  // 設定屬性為預設值
  • position: unset;    // 不設定屬性
  • position: sticky;   // 粘性定位

2. 描述下從輸入URL到整個網頁載入完畢及顯示在螢幕上的整個流程 檢視

(1)、輸入url地址
(2)、瀏覽器查詢域名的 IP 地址  
(3)、瀏覽器向 web 伺服器傳送一個 HTTP 請求
(4)、伺服器的永久重定向響應
(5)、瀏覽器跟蹤重定向地址
(6)、伺服器處理請求
(7)、伺服器返回一個 HTTP 響應 
(8)、瀏覽器顯示 HTML
(9)、瀏覽器傳送請求獲取嵌入在

HTML 中的資源(如圖片、音訊、視訊、CSS、JS等等)
3. 描述一下漸進增強和優雅降級之間的不同

  •  漸進增強(progressive enhancement):針對低版本瀏覽器進行構建頁面,保證最基本的功能,然後再針對高階瀏覽器進行效果、互動等改進和追加功能達到更好的使用者體驗。 
  • 優雅降級(graceful degradation):一開始就構建完整的功能,然後再針對低版本瀏覽器進行相容。

區別:優雅降級是從複雜的現狀開始,並試圖減少使用者體驗的供給,而漸進增強則是從一個非常基礎的,能夠起作用的版本開始,並不斷擴充,以適應未來環境的需要。降級(功能衰減)意味著往回看;而漸進增強則意味著朝前看,同時保證其根基處於安全地帶。  

優雅降級”觀點
“優雅降級”觀點認為應該針對那些最高階、最完善的瀏覽器來設計網站。而將那些被認為“過時”或有功能缺失的瀏覽器下的測試工作安排在開發週期的最後階段,並把測試物件限定為主流瀏覽器(如 IE、Mozilla 等)的前一個版本。
在這種設計範例下,舊版的瀏覽器被認為僅能提供“簡陋卻無妨 (poor, but passable)” 的瀏覽體驗。你可以做一些小的調整來適應某個特定的瀏覽器。但由於它們並非我們所關注的焦點,因此除了修復較大的錯誤之外,其它的差異將被直接忽略。

“漸進增強”觀點
“漸進增強”觀點則認為應關注於內容本身。

內容是我們建立網站的誘因。有的網站展示它,有的則收集它,有的尋求,有的操作,還有的網站甚至會包含以上的種種,但相同點是它們全都涉及到內容。這使得“漸進增強”成為一種更為合理的設計範例。這也是它立即被 Yahoo! 所採納並用以構建其“分級式瀏覽器支援 (Graded Browser Support)”策略的原因所在