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