想必前端同學對這個很熟悉, 造成這個錯誤的原因, 大多數情況下是JS語法不規範—即只有開始的符號, 沒有結束的符號.
很可惜, 我不是一小部分人, 所以, 我也遇到了這個問題, 並且被它困擾了三個月. 當然, 於我而言, 錯誤的原因跟其他人不一樣. 我不知道有多少同學知道SSO(單點登錄)的概念, 如果不清楚, 請點擊鏈接.
首先說一下我遇到的情形:
上線大半年了, 頁面突然之間崩了(包括樣式文件丟失, JS文件丟失). 而且這種情況只發生在極少數的電腦上面. 而且因爲某些原因, 我既不能去現場查看, 也無法遠程操控, 因此效率極其低下. 關鍵是大領導還發話了, 要儘快弄好. 對於瀏覽器而言, 清緩存是個神器, 大多數頁面問題都可以通過這個操作被解決. 同樣, 我嘗試過很多次, 但是沒有任何效果. 然後就開始調樣式, 晚上回家後, 照着出問題的頁面調整樣式, 後來綜合得出, 是因爲有幾個樣式文件丟失了. 緊接着, 查看 DevTools 的 NetWork 面板, 發現本該是CSS的文件, 裏面卻是JS代碼—window.location.href=internetSite/sso/.
好, 問題找到了, 就該找原因. 看了下SSO的代碼, 裏面有個過濾器文件, 把所有的文件都過濾了(身份驗證通過的不會被過濾)—<filter>*</filter>類似於這種. 看到這, 其實跟前端已經沒多大關係了, 畢竟這些登陸接口都是後臺人員寫的. 不過, 本着好學的精神, 繼續深挖, 發現登陸到這個系統後, 每個外部文件(CSS, JS, IMG等等)都會從index.html向SSO發送請求, 驗證通過才能獲取文件, 否則跳轉到登錄頁面. 雖然沒找到爲什麼驗證不通過的原因, 但可以用其他的方法來代替.
登陸後, 附帶一個校驗碼, 把這個校驗碼帶到外部文件的請求中, 如果第一次驗證失敗, 會有一次頁面重定向(到登錄頁), 再驗證校驗碼, 如果通過, 再重定向(到文件URL), 獲取相應文件.如下:
css文件URL–>internetSite/sso/–>獲取CSS文件
第二部分: 圖片無法加載
圖片加載失敗可能有三個原因:
1. 網絡問題, 請求超時
2. 資源路徑有誤
3. DOM加載錯誤
而我要說的是DOM加載錯誤. 這種情況也出現的很少, 但是一旦出現, 很難排查. 雖說瀏覽器能夠只能識別部分標籤的開閉, 但是某些多餘的標籤, 很可能會導致其後(或其中)的資源加載失敗. 檢驗的方法也很簡單, 對比DevTools中的Element和Sources面板, 後者是瀏覽器解析前的文件, 在那裏面可以找到多餘的標籤.