3
【茶包射手日記】網頁 TextArea 編輯長文字時反應極慢
source link: https://blog.darkthread.net/blog/textarea-super-slow/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
【茶包射手日記】網頁 TextArea 編輯長文字時反應極慢-黑暗執行緒
使用者回報問題：某個使用 HTML 編輯器元件編輯 HTML 內容的網頁，遇到內容較長(約 250KB)，操作會卡頓， CPU 飆高(四核電腦吃掉 25%)，點個滑鼠或移輸入游標都要等上十幾秒，甚至會冒出網頁無回應警示。
我的開發機器 CPU 比使用者快 (i7 vs i5)，沒能重現無回應警示，但 CPU 飆高跟操作卡頓狀況明顯，捲動時會空白一陣子(如以下示範)，在文字位置點滑鼠要等上五六秒游標才移過去：
先懷疑是 HTML 編輯器元件的限制，文字長度超出可負荷上限，但追查發現文字編輯區只是單純 <textarea>，更重要的證據，用 F12 分析效能，觀察到每次點選捲動操作後確實會有一波 CPU 100% 高原([1] 所指的綠色突起)，但 CPU 耗用比例中 JavaScript 只用了 0.2s、Rendering 則用了 9s，推測效能瓶頸出在瀏覽器，與程式無關：
使用者還補充了兩則線索：
- 同一篇 HTML 剛好有中文版跟英文版可對照，中文版只是偏慢，英文版則完全卡死冒出網頁無回應警示。
- 如果操作速度夠快，開網頁、全選、貼上、儲存一氣喝成，則不會遇到阻礙。如果每個步驟做完等一陣子，便會陷入無窮盡的等待。
用 textarea slow 關鍵字爬文，查到一篇拼字檢查導致 textarea 編輯變慢的回報，我感覺被掉下來的蘋果打到頭， 就是這個!
瀏覽器在處理 TextArea 內容時進行即時拼字檢查，拖累了效能，而拼字檢查會在欄位出現一段時間後才啟動。這完美解釋了為什麼英文慢的情況比中文嚴重，動作夠快趕在拼字檢查啟用前完成操作就可以成功!
不囉嗦，直接在 body 加上 <body spellcheck="false">，讓全頁繼承停用拼字檢查，TextArea 操作就流暢起來，之前的卡頓問題煙消雲散!
不管你寫了多少年，永遠都會有新發現，哈。
- Posted in
- Chrome
Comments
Post a comment
Comment Name Captcha 55 + 10 =
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK