1. 程式人生 > >【web前端】小技巧總結

【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 。