前端面試（簡答）2

以下是需要知道的，加油吧朋友 T T

HTML&CSS：
對Web標準的理解、瀏覽器內核差異、兼容性、hack、CSS基本功：佈局、盒子模型、選擇器優先級、
HTML5、CSS3、Flexbox

JavaScript：
數據類型、運算、對象、Function、繼承、閉包、作用域、原型鏈、事件、RegExp、JSON、Ajax、
DOM、BOM、內存泄漏、跨域、異步裝載、模板引擎、前端MVC、路由、模塊化、Canvas、ECMAScript 6、Nodejs

其他：
移動端、響應式、自動化構建、HTTP、離線存儲、WEB安全、優化、重構、團隊協作、可維護、易用性、SEO、UED、架構、職業生涯、快速學習能力

1 Doctype作用？標準模式與兼容模式各有什麼區別?

2 html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？
（1）HTML5 現在已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增加。
繪畫 canvas;
用於媒介回放的 video 和 audio 元素;
本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失;
sessionStorage 的數據在瀏覽器關閉後自動刪除;
語意化更好的內容元素，比如 article、footer、header、nav、section;
表單控件，calendar、date、time、email、url、search;
新的技術webworker, websockt, Geolocation;

（2）移除的元素：
純表現的元素：basefont，big，center，font, s，strike，tt，u;
對可用性產生負面影響的元素：frame，frameset，noframes；

（3）支持HTML5新標籤：
IE8/IE7/IE6支持通過document.createElement方法產生的標籤，
可以利用這一特性讓這些瀏覽器支持HTML5新標籤，
瀏覽器支持新標籤後，還需要添加標籤默認的樣式。
當然最好的方式是直接使用成熟的框架、比如html5shim;

<!--[if lt IE 9]>
        <script>     src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
 <![endif]-->

3 行內元素有哪些？塊級元素有哪些？空(void)元素有那些？
（1）行內元素有：a b span img input select strong（強調的語氣）
（2）塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）常見的空元素：
br hr img input link meta
鮮爲人知的是：
area base col command embed keygen param source track wbr

4 iframe缺點
iframe會阻塞主頁面的Onload事件；
搜索引擎的檢索程序無法解讀這種頁面，不利於SEO;
iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的並行加載。

使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript動態給iframe添加src屬性值，這樣可以繞開以上兩個問題。

5 如何實現瀏覽器內多個標籤頁之間的通信? (阿里)
調用localstorge、cookies等本地存儲方式

6 如何在頁面上實現一個圓形的可點擊區域？
（1）map+area或者svg
（2）border-radius
（3）純js實現需要求一個點在不在圓上簡單算法、獲取鼠標座標等等

實現不使用 border 畫出1px高的線，在不同瀏覽器的標準模式與怪異模式下都能保持一致的效果。

<div style="height:1px;overflow:hidden;background:#ccc"></div>

7 css3新增僞類有那些？
p:first-of-type 選擇屬於其父元素的首個p 元素的每個p元素。
p:last-of-type 選擇屬於其父元素的最後p 元素的每個p 元素。
p:only-of-type 選擇屬於其父元素唯一的p 元素的每個p元素。
p:only-child 選擇屬於其父元素的唯一子元素的每個p 元素。
p:nth-child(2) 選擇屬於其父元素的第二個子元素的每個p元素。
:enabled :disabled 控制表單控件的禁用狀態。
:checked 單選框或複選框被選中。

8 如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？有待驗證
居中div用 margin:0 auto;這裏不說了
居中浮動元素

 確定容器的寬高 寬500 高 300 的層
  設置層的外邊距

 .div {
      width:500px ; height:300px;//高度可以不設
      margin: -150px 0 0 -250px;
      position:relative;         //相對定位
      background-color:pink;     //方便看效果
      left:50%;
      top:50%;
 }

居中絕對定位元素

  position: absolute;
  width: 1200px;
  background: none;
  margin: 0 auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

9 CSS3有哪些新特性？

10 請解釋一下CSS3的Flexbox（彈性盒佈局模型）,以及適用場景？有待解決

11 用純CSS創建一個三角形的原理是什麼？有待驗證

把上、左、右三條邊隱藏掉（顏色設爲 transparent）
#demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

12 li與li之間有看不見的空白間隔是什麼原因引起的？有什麼解決辦法？
出現問題前提：前提是需要將li標籤設置爲display:inline-block;
較爲可信的原因是：瀏覽器的默認行爲是把inline元素間的空白字符（空格換行tab）渲染成一個空格
參考：http://www.iyaxi.com/2016-06-30/1019.html

13 DOMContentLoaded 與onload區別
當 onload 事件觸發時，頁面上所有的DOM，樣式表，腳本，圖片，flash都已經加載完成了。
當 DOMContentLoaded 事件觸發時，僅當DOM加載完成，不包括樣式表，圖片，flash。

14 position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣？

15 移動端的佈局用過媒體查詢嗎？

16 encodeURIComponent
encodeURIComponent() 函數與 encodeURI() 函數的區別之處，前者假定它的參數是 URI 的一部分（比如協議、主機名、路徑或查詢字符串）。因此 encodeURIComponent() 函數將轉義用於分隔 URI 各個部分的標點符號。
而encodeURI() 目的是對 URI 進行完整的編碼，因此對以下在 URI 中具有特殊含義的 ASCII 標點符號，encodeURI() 函數是不會進行轉義的：;/?:@&=+$,#

encodeURI("http://www.w3school.com.cn/My first/")
// "http://www.w3school.com.cn/My%20first/"
encodeURIComponent("http://www.w3school.com.cn/My first/")
// "http%3A%2F%2Fwww.w3school.com.cn%2FMy%20first%2F"

17 JSON轉換

var person={"name":"zhangsan","sex":"男","age":"24"}//json對象
var person='{"name":"zhangsan","sex":"男","age":"24"}';//json字符串

json字符串轉json對象,調用parse方法：
var person='{"name":"zhangsan","sex":"男","age":"24"}';//json字符串
var personObject = JSON.parse(person);

json對象轉爲json字符串，調用stringify方法：
var person={"name":"zhangsan","sex":"男","age":"24"};//json對象
var personString = JSON.stringify(person);

18 簡述一下src與href的區別
href 是指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，用於超鏈接。
src是指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，類似於將所指向資源嵌入當前標籤內。這也是爲什麼將js腳本放在底部而不是頭部。

19 什麼是CSS Hack?
一般來說是針對不同的瀏覽器寫不同的CSS,就是 CSS Hack。
IE瀏覽器Hack一般又分爲三種，條件Hack、屬性級Hack、選擇符Hack（詳細參考CSS文檔：css文檔）。

    // 1、條件Hack
   <!--[if IE]>
      <style>
            .test{color:red;}
      </style>
   <![endif]-->
   // 2、屬性Hack
    .test{
    color:#090\9; /* For IE8+ */
    *color:#f00;  /* For IE7 and earlier */
    _color:#ff0;  /* For IE6 and earlier */
    }
   // 3、選擇符Hack
    * html .test{color:#090;}       /* For IE6 and earlier */
    * + html .test{color:#ff0;}     /* For IE7 */

20、如何將僞數組轉化爲標準數組？
典型的是函數的argument參數，還有像調用getElementsByTagName,document.childNodes之類的,它們都返回NodeList對象都屬於僞數組。可以使用Array.prototype.slice.call(fakeArray)將數組轉化爲真正的Array對象。

21、bgcolor背景色會渲染哪些？
會渲染content、padding、border
把border樣式設爲dotted或有透明度的，就能看到背景色了

22、


(function() {
var x=foo();
var foo=function foo() {
return “foobar”
};
return x;
})();

輸出 TypeError
因爲變量提升，但是函數表達式不會提升。
x在foo之前定義，此時foo是undefined。運行到x = foo（）；時，當然會報錯。
如果把x定義放在foo的後面，就不會報錯。

23、==
JS在做==運算時會將操作數轉換爲Number類型之後再操作，而’ ‘，false，0，[]都能轉換爲爲數字類型0，而{}卻轉換不了，轉換後爲NaN,而NaN做任何運算返回都是false

24、

["1", "2", "3"].map(parseInt);
//結果不是想象中的[1，2，3]

map有三個參數val, index, arr
parseInt 要兩個參數，所以執行的是parseInt(val, index)

parseInt("1", 0, ["1", "2", "3"]);
parseInt("2", 1, ["1", "2", "3"]);
parseInt("3", 2, ["1", "2", "3"]);
// 而我們根據parseInt函數的語法, 得知最後一個參數將直接被忽略
// 於是原題, 相當於這樣
parseInt("1", 0); // 這是特例, 按照 0 進制轉成數, 直接得本身
parseInt("2", 1); // 直接NaN, 因爲計數的進制至少也是 2 進制
parseInt("3", 2); // 也是NaN, 右邊參數是2, 大家千萬不要理解成
// 把10進制的3轉成2進制是多少? No, 大錯特錯.

// 正確的理解是, 右邊參數是2, 函數會認爲左邊的字符串參數是由0, 1
// 等組成的2進制數, 結果發現出現了3, 無法轉換, 結果就是NaN
// 像這樣才能正常輸出console.log(parseInt("10", 2)); // 2

25、px,em,rem,vh,vm區別
px：絕對單位，頁面按精確像素展示
em：相對單位，基準點爲父節點字體的大小
rem：相對單位，可理解爲”root em”, 相對根節點html的字體大小來計算
vw：viewpoint width，視窗寬度，1vw等於視窗寬度的1%。
vh：viewpoint height，視窗高度，1vh等於視窗高度的1%。
vmin：vw和vh中較小的那個。
vmax：vw和vh中較大的那個。

26、requestAnimationFrame作用和應用場景
http://www.cnblogs.com/xiaohuochai/p/5777186.html
window.requestAnimationFrame() 方法告訴瀏覽器您希望執行動畫，並請求瀏覽器調用指定的函數在下一次重繪之前更新動畫。該方法使用一個回調函數作爲參數，這個回調函數會在瀏覽器重繪之前調用。。
如果您想在下一個重繪時爲另一個框架設置動畫，您的回調例程必須調用 requestAnimationFrame()。
…………………………
用它可以實現間隔渲染，得到流暢的動畫，
它可以取代計時器來做動畫

27、網站登錄態如何保持？完整登錄態如何實現？
cookie和session都可以用來保存登錄態。
COOKIE由於存儲在客戶端,有被隨意篡改的風險。所以如果用cookie需要加密，並且可以被識別，但不可以解密。需要將它發到服務器端進行比較或解密。
所以其實服務器判斷用戶登陸狀態,一般都是用SESSION的…SESSION的數據存儲在服務器中,但是必須通過客戶端的COOKIE來找到對應的SESSION。

所以用戶登錄的過程實際上是
1:用戶輸入用戶名密碼,POST數據到服務器
2:服務器判斷用戶名密碼是否正確,若正確,則在客戶端創建一個存儲SESSION_ID的COOKIE,並且在服務器中創建一個相對應的SESSION_ID的SESSION,SESSION裏面的數據可能爲用戶的數據
3:以後該用戶進行操作時,先從客戶端取出SESSION_ID,找到服務器相對應的SESSION,取出數據,進行校驗後再進行下一步操作

28、JSONP跨域設置cookie

29、CORS跨域
阮一峯大神寫的CORS

php設置兩個網址來的請求可以跨域：

$origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : ''; 

$allow_origin = array( 
 'http://blog.pkcms.cn', 
 'http://blog.pkcms.cn' 
); 

if(in_array($origin, $allow_origin)){ 
 header('Access-Control-Allow-Origin:'.$origin); 
 header('Access-Control-Allow-Methods:POST'); 
 header('Access-Control-Allow-Headers:x-requested-with,content-type'); 
}

29、爲什麼利用多個域名來存儲網站資源會更有效?
1、CDN緩存更方便

2、突破瀏覽器併發限制

3、節約cookie帶寬

4、節約主域名的連接數，優化頁面響應速度

5、防止不必要的安全問題

30、websocket
簡單講解demo

hcy48

發佈了36 篇原創文章 · 獲贊 6 · 訪問量 1萬+

私信關注

前端面試（簡答）2

Bootstrap學習小小小小筆記

前端面試（計算機網絡、數據算法、Linux）

jQuery中以0/1編號

【轉】常見瀏覽器兼容

AngularJS學習筆記

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結