前端面試

HTML

---------------------------------------------------------------

html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

 

* HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。
  	  繪畫 canvas;
  	  用於媒介回放的 video 和 audio 元素;
  	  本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失;
        sessionStorage 的數據在瀏覽器關閉後自動刪除;
  	  語意化更好的內容元素，好比 article、footer、header、nav、section;
  	  表單控件，calendar、date、time、email、url、search;
  	  新的技術webworker, websocket, Geolocation;

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

  * 支持HTML5新標籤：
  	 IE8/IE7/IE6支持經過document.createElement方法產生的標籤，
    	 能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，
    	 瀏覽器支持新標籤後，還須要添加標籤默認的樣式。

       固然也能夠直接使用成熟的框架、好比html5shim;
  	 <!--[if lt IE 9]>
  		<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
  	 <![endif]-->

  * 如何區分HTML5： DOCTYPE聲明\新增的結構元素\功能元素

 

簡述一下你對HTML語義化的理解？

用正確的標籤作正確的事情。
  html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析;
  即便在沒有樣式CSS狀況下也以一種文檔格式顯示，而且是容易閱讀的;
  搜索引擎的爬蟲也依賴於HTML標記來肯定上下文和各個關鍵字的權重，利於SEO;
  使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。

HTML5的離線儲存怎麼使用，工做原理能不能解釋一下？

在用戶沒有與因特網鏈接時，能夠正常訪問站點或應用，在用戶與因特網鏈接時，更新用戶機器上的緩存文件。
  原理：HTML5的離線存儲是基於一個新建的.appcache文件的緩存機制(不是存儲技術)，經過這個文件上的解析清單離線存儲資源，這些資源就會像cookie同樣被存儲了下來。以後當網絡在處於離線狀態下時，瀏覽器會經過被離線存儲的數據進行頁面展現。


  如何使用：
  一、頁面頭部像下面同樣加入一個manifest的屬性；
  二、在cache.manifest文件的編寫離線存儲的資源；
  	CACHE MANIFEST
  	#v0.11
  	CACHE:
  	js/app.js
  	css/style.css
  	NETWORK:
  	resourse/logo.png
  	FALLBACK:
  	/ /offline.html
  三、在離線狀態時，操做window.applicationCache進行需求實現。

 請描述一下 cookies，sessionStorage 和 localStorage 的區別？

cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（一般通過加密）。
  cookie數據始終在同源的http請求中攜帶（即便不須要），記會在瀏覽器和服務器間來回傳遞。
  sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。

  存儲大小：
  	cookie數據大小不能超過4k。
  	sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。

  有期時間：
  	localStorage    存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；
  	sessionStorage  數據在當前瀏覽器窗口關閉後自動刪除。
  	cookie          設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉

 

如何實現瀏覽器內多個標籤頁之間的通訊? (阿里)

WebSocket、SharedWorker；
  也能夠調用localstorge、cookies等本地存儲方式；

  localstorge另外一個瀏覽上下文裏被添加、修改或刪除時，它都會觸發一個事件，
  咱們經過監聽事件，控制它的值來進行頁面信息通訊；
  注意quirks：Safari 在無痕模式下設置localstorge值時會拋出 QuotaExceededError 的異常；

 

webSocket如何兼容低瀏覽器？(阿里)

Adobe Flash Socket 、
  ActiveX HTMLFile (IE) 、
  基於 multipart 編碼發送 XHR 、
  基於長輪詢的 XHR

 

 

 

 

 

 

 

 

 

 

 

 

牛B的和能夠分享的地方:

實現了一個 touchendV1, 靈感主要來自 zepto 的 tab事件, 因爲tab 事件是綁定在document上，因此會有兼容性的問題

zepto 裏面對於animate 實現了一個 stop的功能, 設置當前這個元素的 transform 的屬性, 支持2D;

時間和年化收益率 曲線用createjs實現, 不會奔潰，團隊其它人找了網上好多庫的代碼, 好比 echarts，在微信和app上形成了奔潰

聲音模塊, 先讓它play再pause, 能夠實現iPhone 上播放聲音的功能; iPhone 上要先 play後pause 才能夠實現結果音樂的播放;  不過如今流行用 WebAudio;

修改了 layabox 的源碼，讓它支持能夠不用全屏展現，能夠滾動展現; 增長方法讓之前的遊戲 支持iPhoneX  的適配的功能;

以前作彈珠機遊戲的時候, 性能會一直上去, 經過chrome  的性能分析工具，找出哪一個函數佔用的內存比較高。

頁面 rem 不能自適應的問題

 

組件:

每秒點擊幾回的 limitPerTime 組件

bindInput 組件 和 dragTo 組件 和 texttip 組件

Lightbox 兼容手機端和PC端;

 

如何作遊戲的性能優化:

 

 

參考地址:

https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions/Questions-and-Answers