【web前端】小技巧總結

1

 HTML5多功能增加

HTML5 現在已經不是 SGML 的子集，主要是關於影象，位置，儲存，多工等功能的增加。

(1)繪畫 canvas;

(2)用於媒介回放的 video 和 audio 元素;

(3)本地離線儲存 localStorage 長期儲存資料，瀏覽器關閉後資料不丟失;

(4)sessionStorage 的資料在瀏覽器關閉後自動刪除;

(5)語意化更好的內容元素，比如 article、footer、header、nav、section;

(6)表單控制元件，calendar、date、time、email、url、search;

(7)新的技術webworker, websocket, Geolocation;

2

 瀏覽器支援HTML5新標籤

IE8/IE7/IE6支援通過document.createElement方法產生的標籤，

可以利用這一特性讓這些瀏覽器支援HTML5新標籤，

瀏覽器支援新標籤後，還需要新增標籤預設的樣式。

當然也可以直接使用成熟的框架、比如html5shim，

<!--[if lt IE 9]>

<![endif]-->

3

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

用正確的標籤做正確的事情。

html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜尋引擎解析;

即使在沒有樣式CSS情況下也以一種文件格式顯示，並且是容易閱讀的;

搜尋引擎的爬蟲也依賴於HTML標記來確定上下文和各個關鍵字的權重，利於SEO;

使閱讀原始碼的人對網站更容易將網站分塊，便於閱讀維護理解。

4

效能優化有哪些方法？

（1） 減少http請求次數：CSS Sprites, JS、CSS原始碼壓縮、圖片大小控制合適；網頁Gzip，CDN託管，data快取 ，圖片伺服器。

（2） 前端模板 JS+資料，減少由於HTML標籤導致的頻寬浪費，前端用變數儲存AJAX請求結果，每次操作本地變數，不用請求，減少請求次數

（3） 用innerHTML代替DOM操作，減少DOM操作次數，優化javascript效能。

（4） 當需要設定的樣式很多時設定className而不是直接操作style。

（5） 少用全域性變數、快取DOM節點查詢的結果。減少IO讀取操作。

（6） 避免使用CSS Expression（css表示式)又稱Dynamic properties(動態屬性)。

（7） 圖片預載入，將樣式表放在頂部，將指令碼放在底部 加上時間戳。

5

JavaScript知識點

資料封裝類物件：Object、Array、Boolean、Number 和 String

其他物件：Function、Arguments、Math、Date、RegExp、Error

1.eval是做什麼的？

它的功能是把對應的字串解析成JS程式碼並執行；

應該避免使用eval，不安全，非常耗效能（2次，一次解析成js語句，一次執行）。

由JSON字串轉換為JSON物件的時候可以用eval，var obj =eval('('+ str +')')。

2.new操作符具體幹了什麼呢?

（1）建立一個空物件，並且 this 變數引用該物件，同時還繼承了該函式的原型。

（2）屬性和方法被加入到 this 引用的物件中。

（3）新建立的物件由 this 所引用，並且最後隱式的返回 this 。