很多人都認為js的效率太慢了，都不願意用js來實現相對困難一點的程式邏輯。在這裡我要說的是其實js的效率並不慢，慢的是dom，如果操作好dom，你的js效率將提高接近千倍（這並不是什麼誇張的數字）。
1. 批量增加dom
有一點需要注意的是,用innerhtml方式新增時,一定不要在迴圈中使用 innerhtml += 的方式新增,這樣反而會使速度減慢; 而是應該中間用array快取起來,迴圈結束後呼叫 xx.innerhtml = array.join(『』);的方式,或者至少儲存到string中再插到innerhtml中.
針對使用者列表一塊採用這種方式優化後,載入速度提公升一倍.
2. 單個增加dom
綜上,如果在乙個有動態內容的節點上 出現了 innerhtml += 的**,就該考慮是否有問題了.
3. 建立dom節點
4. 刪除dom節點
刪除dom節點之前,一定要刪除註冊在該節點上的事件,不管是用observe方式還是用attachevent方式註冊的事件,否則將會產生無法**的記憶體.
另,在removechild和innerhtml=』』二者之間,盡量選擇後者. 因為在sieve(記憶體洩露監測工具)中監測的結果是用removechild無法有效地釋放dom節點.
5. 建立事件監聽
現有的js庫都採用observe方式來建立事件監聽,其實現上隔離了dom物件和事件處理函式之間的迴圈引用,所以應該盡量採用這種方式來建立事件監聽.
6. 監聽動態元素
dom 事件預設是向上冒泡的,發生在子節點中的事件,可以由父節點來處理. event的 target/srcelement 仍是產生事件的最深層子節點. 這樣,對於內容動態增加並且子節點都需要相同的事件處理函式的情況,可以把事件註冊上提到父節點上,這樣就不需要為每個子節點註冊事件監聽了.
同時,這樣做也避免了產生無法**的記憶體.即使是用prototype的observe方式註冊事件並在刪除節點前呼叫stopobserving,也會產生出少量無法**的記憶體,所以應該盡量少的為dom節點註冊事件監聽.
所以,當**中出現在迴圈裡註冊事件時,也是我們該考慮事件上提機制的時候了.
**於
頁面優化 js非同步載入
在介紹js非同步載入之前。我們先來看看什麼是js同步載入。我們平時最常使用的就是這樣的同步載入形式 曾經的一般建議是把放在頁面末尾之前，這樣盡可能降低這樣的堵塞行為。而先讓頁面展示出來。它同意無堵塞資源載入。而且使 onload 啟動更快，同意頁面內容載入。而不須要重新整理頁面，也能夠依據頁面內容延...
前端js效能優化（一）
多數瀏覽器使用單一程序來處理ui重新整理和js指令碼執行，因此同一時刻只能做一件事。因此，當頁面遇到script標籤後都會阻止頁面渲染過程並等待指令碼的解析和執行，無論指令碼是內嵌的還是外鏈的。由於每乙個script標籤都會阻塞頁面渲染，所以減少頁面包含的script標籤數量有助於改善這一狀況。這不...
記一次壓測優化事件（http配置優化）
事件起因 樓主今年手上有個專案，上線後，每天大概15w的訪問量，單台pod 公司用的docker tps在6 7之間，第一次壓測的時候，最好的情況是5個pod，tps達到了36。樓主當時有點絕望，因為跟我們其他的服務上千的qps差距太大了，但是考慮到這個服務的特殊性，所以沒有仔細去驗證效能這麼差的原...