#js 全局變量局部變量 ###函數內部未申明的變量自動變成全局變量 ##變量是附在window中的 js函數內部使用`use strict`；必須放到第一行 使用嚴格模式，避免犯一些錯誤 **chrome source 可以打斷點 并在console中輸出 使用**`console.log()` #javascript 沒有整型和浮點型 單精度雙精度的 isNaN()判斷是否是不夠的 NaN === NaN 為false 和NaN比較的數字才是真正的NaN `if(! NaN === num(NaN)){ } x !== x NaN == NaN 是false ` 判斷用！取反 是不嚴格的 if(!x){ x =12; } 因為 false,0,-0,'',NaN, null 和 undefined 在if判斷里都是 false 應該這樣寫 if(typeof x == "undefined"){ } chrome 的 profile 可以做性能評測 那個方法花費了多長時間 ##導航菜單的三角地帶 可以用jquery-menu-aim.js ##導航菜單 只能從服務器取一次 ###jsonp可以從本地取遠程的數據 例如京東 跨域請求 可以jsonp 和設置http協議中的一個cache-origon ###天貓導航菜單用了localstorage 可以在chrome resource 的localstorage 中看到 #### 2 天貓的三級加速 a) ajax取數據(網絡上) b) localStorage 取數據(硬盤上) c) 當前頁面元素或者JS變量里取(內存里) #### 發現導航菜單的秘密 1 找到三角地帶代碼 function isInTriangle() { function a(a, b) { return (b.y - a.y) / (b.x - a.x) } 2 驗證它的作用 驗證普通的導航和牛X導航 #破解壓縮和混淆 1、替換標識為無意義的標識符 2、替換數字為表達式,字符串為十六進制 3、去除注釋 4、去掉空格空行 5、所有代碼成為一行 6、把代碼組裝成為字符串,用Eval來解析 #破解壓縮和混淆 1 用瀏覽器開發者工具破解壓縮 用Chrome瀏覽器看百度的例子 2 解壓縮的工具 把代碼復制出來,到優才網解壓縮 http://www.ucai.cn/tools/code Netbeans : Ctrl+Shit+F 1 破解混淆的第一個例子 破解關鍵點, 恢復代碼 2 第二個例子 Eval函數 #編寫高效的 JavaScript **語言本身的注意事項** 1 避免無意義的計算 2 盡可能減少計算 3 避免使用全局變量 4 始終聲明局部變量、無意識的全局變量是災難 4 如何檢測isNaN 5 了解坑、多少種 false,with 慎用? 6 語句末最好加入分號 7 字符串拼接何為高效、沒有固定范式 瀏覽器如何渲染 頁面渲染就是瀏覽器將html代碼根據CSS定義的規則顯示在瀏覽器窗口中 的這個過程 得出三點CSS優化原則: A、CSS 放頂部 B、使用 Sprite 減少數據連接 C、JS 的DOM操作優化原則 #CSS渲染順序 用一個例子來體驗一下 1、渲染的順序是從上到下 2、邊下載邊渲染 3、開啟單獨連接去取資源 4、后面的定義覆蓋前面的 5、Reflow 和 Repaint #最大的性能問題,在于 DOM 操作 1 要使用高效的選擇器 1 取 20000 次的對比 2 將選擇器結果保存成為局部變量 1 取20000次的對比 3 先操作再顯示(想想渲染原理) 4 先組裝再附加到DOM上去 5 減少頁面 DOM 節點數 6 將事件綁定與操作延遲