5.JavaScript優化及導航菜單背後的祕密

JavaScript優化及導航菜單背後的祕密 伍星

學習目標
1.進一步瞭解前端優化
學習如何編寫良好的 JavaScirpt
2.經過導航的學習，瞭解JavaScirpt的應用
JavaScript在用戶體驗優化的實現中起着相當重要的做用
3.前端開發相關的工具和手段瞭解
瞭解JavaScript開發相關的工具和手段

目錄 CONTENTS
1 回顧：HTML語義、CSS高級
2 編寫高效的 JavaScript
3 認識導航菜單及其開發
4 導航菜單的性能加速
5 破解牛X導航菜單的祕密
5 JS的調試、壓縮、混淆與破解

第一章：回顧：HTML語義、CSS高級
1 HTML語義
①網頁的原理
人類看到的網頁是文字和圖片，計算機看到的網頁是代碼
②HTML語義
有些招聘要求："深入理解WEB標準..."
③語義例子
如何才能便於計算機理解你的代碼

<p><b>優才網</b>的目標是：造就全棧工程師、成就將來CTO</p>
<p><strong>優才網</strong>的目標是：造就全棧工程師、成就將來CTO</p>

<div>全棧工程師</div>與
<span style="display:block">全棧工程師</span>

選擇題
哪一個是予以花的HTML結構的好處？ C
A.樣式丟失的時候能讓頁面呈現清晰的結構
B.便於不支持CSS的設備根據你的標記來"讀"你的網頁（好比盲人用的上網工具）
C.利於搜索引擎的爬蟲抓取，爬蟲依賴與語義標記來肯定上下文和各個關鍵字的權重。
D.對瀏覽器兼容性更好
E.便於團隊開發和維護


1 CSS渲染順序
用一個例子來體驗一下

html
head title "Web p..."
body div
h1 "Web p..."
p "This..."

一、渲染的順序是從上到下
二、邊下載邊渲染
三、開啓單獨鏈接去取資源
四、後面的定義覆蓋前面的
五、Reflow 和 Repaint

2 CSS渲染原理
瀏覽器如何渲染

頁面渲染就是瀏覽器將HTML代碼根據CSS定義的規則顯示在瀏覽器窗口中的這個過程

得出三點CSS優化原則：
A、CSS放頂部
B、使用Sprite減小數據鏈接
C、JS的DOM操做優化原則

2 語言自己的注意事項
① 避免無心義的計算
②儘量減小計算
③避免使用全局變量
④始終聲明局部變量、無心識的全局變量是災難

調試js "use strict"

④ 如何檢測 isNaN
⑤ 瞭解坑、多少中 false, with 慎用？
⑥ 語句末最好加入分號
⑦ 字符竄拼接何爲高效、沒有固定範式



1 、 最大的性能問題，在於 DOM 操做
① 要使用高效的選擇器
① 取 20000 次的對比
② 將選擇器結果保存成爲局部變量
① 取20000次的對比
③ 先操做再顯示（想一想渲染原理）
④ 先組裝再附加到 DOM 上去
⑤減小頁面 DOM 節點數
⑥ 將事件綁定與操做延遲