JavaScript >> Javascript 文檔 >  >> JavaScript

加速你的 JavaScript:談話

Steve Souders 最近邀請我參加他的 Web E x Google 的 ponents 演講者係列。人們會定期進來就各種主題進行長達一小時的技術講座。因為我最近與史蒂夫合作寫了他的新書,更快的網站 .我寫了一章關於 JavaScript 性能的文章,Steve 問我是否願意來與 Google 的員工分享這些方面的一些技巧。在我的一系列關於 JavaScript 性能的博文之後,我將這次演講命名為 加速你的 JavaScript .

今天的演講進行得很順利(除了一些幽默的技術故障)。出席率很高,在演講期間和之後都有很多好的、有見地的問題。我的幻燈片現在可用,下周可能會發布一個視頻。主題包括如何優化:

  • 範圍管理
  • 數據訪問
  • 循環
  • DOM

演講結束後,我與 Steve 和 Doug Crockford(他們也參加了演講)共進午餐,進一步討論了 Web 技術的現狀。總的來說,一次非常有趣的體驗。

對於在場和不在場的人,我想對這次談話提出的最大觀點之一是,我並不是說要一直做事。演講中介紹的技術旨在為那些注意到性能瓶頸並需要知道如何解決它們的人提供指導。沒有測量的優化是徒勞的,我將這些技術呈現為在任何情況下都“必須遵循”,這對每個人都是極大的傷害。始終使用分析器測量代碼的性能(無恥插件:YUI Profiler 非常好用),然後確定應該做些什麼來加快速度。

道格事後向我指出,他認為演講中的許多早期主題通常不會帶來很大的性能提升。我認為他的說法有一定的道理,因為一切都與你正在開發的代碼庫有關。當我在 My Yahoo! 上工作時,我們在循環性能方面遇到了很多麻煩,並為此做了很多優化。其他人的循環可能沒有瓶頸。我演講中的所有信息都是基於我在職業生涯中遇到的性能問題,雖然有些可能不太清楚,但我認為討論這些問題很重要,這樣它們可以為其他在這些領域發現瓶頸的人提供指導.我們能做的最糟糕的事情就是避免為稀有問題提出解決方案,因為稀有問題也需要解決。

談話結束後,我們遇到了 Caja 背後的谷歌研究科學家 Mark Miller。他沒有看過談話,但談話的主題顯然很快就傳到了他身上。他提到我的演講似乎是針對在性能不佳的瀏覽器中進行編程的。完全正確,我的演講是針對那些被困在為 Internet Explorer、Firefox、Safari 和 Opera 進行開發的可憐人(以及我自己)。那些只為 Chrome 或任何其他使用 JIT JavaScript 編譯器的瀏覽器開發的人不需要擔心性能問題(到目前為止)。 Mark 似乎很擔心我的建議,即避免使用原生 forEach() 方法(定義見 ECMA-262,第 5 版)。在我的演講中,我說這個實現比使用常規的 JavaScript 循環要慢得多,這是真的(它要慢得多)。這在 Firefox 和 Chrome 中是正確的,它們都本機實現了該方法。 Mark 斷言 ECMAScript 5 只會在性能最高的 JavaScript 引擎中實現,這些引擎將使用內聯來提高性能。雖然很高興聽到,但它讓我意識到我應該更完整地解釋本次演講的目的:幫助目前正在處理糟糕的瀏覽器性能的開發人員。

我為演講進行的實驗(並在視頻中提到)在這裡:

  • 標識符深度測試
  • 數據訪問測試
  • 循環測試(通過 Greg Reimer)

您可能不會在本次演講中使用所有內容,這很好。我確實希望您將這些信息牢記在心,並在您發現 JavaScript 中的性能問題時返回它。我曾經遇到過對毫秒數進行嚴格審查的情況,我希望這些信息能對處於類似情況的開發人員有所幫助。


Tutorial JavaScript 教程
  1. 角度如何等待訂閱

  2. javascript搜索數組數組

  3. 使用 HTML、CSS、JavaScript 在 Django 中登錄 + 註冊頁面(第一部分)

  4. 如何從 GitHub 存儲庫發布 chrome 擴展

  5. Kubernetes (K3S) POD 在 5-20 小時的播出時間後獲得“ENOTFOUND”

  6. Javascript 調用()、應用()、綁定()

  7. 讓我們使用 Vue.js 和 Firebase 構建一個 WhatsApp 克隆

  1. 使用 ReactJS 設置 Laravel 9 項目

  2. 在 NodeJS 中使用帶有循環的異步函數的正確方法

  3. 節點包管理器 4 --- 對預發布 (NPM) 的更改

  4. 加速 TypeScript 開發的 5 個技巧諷刺

  5. 在 React 中簡單實現 SSR

  6. 5 月 17 多篇學習 Javascript 的文章

  7. 帶有 Typescript、Tailwind、Sass、Purgecss 等的 Svelte 模板...

  1. 在 Redwood 中構建虛擬節拍盒

  2. 使用 styled-components v5 全局樣式化 Gatsby 默認啟動器

  3. 使用 Vuepress 使用 Vue 構建文檔

  4. 內部 Observables 和高階映射