昨天遇到了一個前端問題，作為這個方面的新人邦鲫，基本上無力解決灸叼。在美麗的前端小姐姐的指點下，直到今天才弄明白這個問題庆捺。
背景
某個 Web App古今，可以從本地上傳一張圖片（但只留在瀏覽器端），圖片緩存在會話中滔以。刷新或者跳躍回本頁的時候捉腥，從會話緩存里取出緩存繪制出來。而在上傳圖像之前你画，繪圖板保持空白抵碟。圖像輸入，不論是用戶上傳坏匪，還是從緩存里加載立磁，都是自由模糊類的輸入，為此注冊了畫板的 onerror 事件剥槐，顯示出錯誤消息框。錯誤消息框上的提示信息宪摧，類似是「無法加載圖片」粒竖，但本 App 有國際化要求，視某個選項的可能變成其他語言几于。所以信息的文本實際上是從 i18n 的配置中提取出來的蕊苗。
問題
測試出現(xiàn)了 BUG。在不加載任何圖片沿彭，刷新頁面時朽砰，有一定的概率會彈出無法加載圖片的錯誤消息框。而且錯誤消息并不是正確國際化的內(nèi)容喉刘，而是到此配置項目的鍵路徑瞧柔，類似是：webapp.cannot_load_image。
起
有經(jīng)驗的前端小姐姐很輕松的找出了彈出錯誤框的原因睦裳，在畫框的 <img> 標(biāo)簽里造锅，錯寫了 src="#" 屬性。這會讓瀏覽器加載到此時請求一張跟當(dāng)前 URL 路徑一致的資源廉邑，并當(dāng)作圖片解析哥蔚。也就是得到了本頁的 HTML倒谷，卻要認(rèn)為它是圖片，這是產(chǎn)生錯誤的根本原因糙箍。
這只是一個不大不小的錯誤渤愁，在編碼過程中出現(xiàn)這種情況是很正常的現(xiàn)象。只要將 src 屬性整個刪去即可深夯。但這個現(xiàn)象距離完全解釋清楚還有很長的路要走抖格。
- 為什么這個錯誤不是穩(wěn)定產(chǎn)生的，而是隨機產(chǎn)生的塌西？
- 為什么國際化出了錯誤他挎？
承
實際上，每次因為 src 的錯誤加載了錯誤的圖像捡需，HTML 一定會被請求過來办桨，但是這個請求會不會產(chǎn)生錯誤，要看這時的 onerror 事件有沒有注冊站辉。慣例來說呢撞，頁面的 Js 會控制在 DOM 加載完成之后在注冊這類事件，而這個時機和錯誤的圖片返回回來的時機誰先誰后完全不可知饰剥。
所以說殊霞，在初始加載的過程中，我們不能期望 onerror 發(fā)揮作用汰蓉。
轉(zhuǎn)
國際化錯誤的原因肯定跟國際化方案聯(lián)系在一起绷蹲，此頁加載了國際化工具 Js：some_i18n_prepare.js，但此準(zhǔn)備工作的進行卻是異步的顾孽。類似：
window.i18n.prepare(foo, bar).call(() => {
$(document).trigger('i18n-ok');
// something else
});
所以祝钢，在 src 加載觸發(fā)了錯誤，并觸發(fā)了 onerror 時（一定在 DOM 加載完之后）若厚，i18n 庫的準(zhǔn)備還沒有完成拦英，此時提出的錯誤消息，是一個沒替換的鍵就不足為奇了测秸。實際上疤估，這個 some_i18n_prepare.js 已經(jīng)為此準(zhǔn)備了接口，在加載完成之后會觸發(fā) i18n-ok 事件霎冯。
合
上傳圖片此事不需要過度擔(dān)心铃拇；空圖片的情況，去掉 src 即可解決沈撞；而從緩存加載圖片時锚贱，為了保證 onerror 在錯誤時有效，也應(yīng)該將加載過程放在 i18n-ok 事件的回調(diào)里关串。
此外拧廊，這還解決了另一個此 App 上监徘，以此同樣的原因產(chǎn)生的問題，這也就是題外話了吧碾。
番外
在定位問題的過程中凰盔，小姐姐還教導(dǎo)我，Js 中注冊的任務(wù)有微任務(wù)和宏任務(wù)之分倦春，并且利用 setTimeout 強行讓注冊錯誤發(fā)生在 i18n 準(zhǔn)備之后户敬。也是一番神仙操作。
參見
圖片渲染時機尿庐。
