背景
這兩天做了一個簡單的課程商城，用手機微信測試時總有一些小問題。雖然只是一個簡單的應用，前後也花了兩天的時間，本文來整理下期間碰到的問題。
額外的請求參數
微信瀏覽器在請求外鏈接時，會額外戴上一些參數，很長一串，像這樣：
nsukey=bOA6RWDJv%2Bx2M%2FGSgcAFCm1kkdQirp2%2BWxs2I4QHEHDALqxzq54WtEJgWVniYxnAkAUZgKRFDviVFZVCtzKFbslEQP5X0xAbB66h6i1E12mLpBdFcWGB2Xbefp66xbMReG4OB1kPshA6LcT7zQdIk3vQyzeYN6MK8mkPJh%2Brvl8V%2BnYXHjqBwzfA3%2BAc6y3eXKfTHzRblCPioWoh6P3UdA%3D%3D
這兩天做一個手機端的簡版商城網頁應用，發現截取一個請求參數時，微信瀏覽器的截取不到。使用 Fidder 抓包，對比後發現 URL 後面多了一串詭異的數字。
好吧，恕我才疏學淺，第一次知道微信瀏覽器的這個行爲。
同步請求警告
ajax 請求時，使用同步標識時，瀏覽器會報這個錯誤：
jquery.min.js:4 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
爲什麼會廢棄呢？
img 未閉合時修改 src 無效
img 標籤沒有右側的閉合符號時，修改圖片的 src 屬性時，不同瀏覽器行爲如何呢？
| 瀏覽器 | 行爲 |
|---|---|
| 電腦瀏覽器 | 自動糾錯，正常顯示 |
| 電腦微信瀏覽器 | 自動糾錯，正常顯示 |
| 手機瀏覽器 | 自動糾錯，正常顯示 |
| 知識星球瀏覽器 | 自動糾錯，正常顯示 |
| 手機微信瀏覽器 | 無法刷新圖片爲新的 src 資源 |
代碼拼接頁面內容時，忘記拼上 img 的閉合符合了，然後對於需要延遲加載的圖片再次觸發加載時，測了上面所有的瀏覽器，確定了問題，但是找不到解決辦法。
百度看到一個回答：
圖像的標籤時
<img>,這是HTML中少有的幾個單邊標籤
這裏提及的單標籤的說法，給了筆者啓發，檢查一下代碼，還真是這個問題。
圖片加載優化
實現的是一個課程商城，頁面需要加載所有的圖片，那就遇到一個問題：圖片太多，頁面渲染很慢，頁面沒有渲染完成時，使用 Tab 切換的操作沒有響應，這非常影響使用：
圖片加載期間，點擊頭部的導航切換是無法響應的，找到一個比較笨的解決辦法：
第一步，頁面加載時只對第一個 Tab 標籤內的 img 標籤設置 src 屬性；
第二步，渲染商品列表時，非第一個 Tab 簽下的其它 img 指定 src 屬性爲空，並添加 id 存儲真正的 src 地址；
第三步，對 Tab 的 open 事件進行修改，切換 Tab 時，查找它所在的 div 裏面的 img ，判斷 src 是否爲空。
如果爲空，則修正 src 爲真正的地址。
此外，對圖片進行壓縮，使用繪圖軟件，調整圖片大小，改變圖片的 size 可以減少請求數據的長度。將所有商品海報圖片壓縮在 30 kb 左右，頁面請求會快一點。
切換 Tab 時滾動到頂部
在某個 Tab 籤，用戶滑到底部後，再切換到另一個 Tab 籤時，應該將滾動條重新滾動到頂部。JavaScript 的 Element 的 scrollTo 可以實現該功能，找了一圈，發現有兩點要注意的：
- 只能使用
document.getElementById('id').scrollTo(0,0)滾動； - 確定頁面滾動條所在的元素，即具有
over-flow-y爲auto的元素，調用纔會生效。
favicon.ico 的作用
微信裏面分享鏈接時，不是顯示顯示的鏈接，而是一個圖片，這是怎麼做到的呢？
網頁頂部的小圖標是怎麼設置的呢？
這裏又有一個小知識點，就是網頁小圖標。使用 Tomcat 服務器發佈的應用，默認訪問時頂部會有一隻湯姆貓；百度的是小腳印；CSDN 是 C ：
地址欄的小圖標修改的方法：
第一步， 訪問該在線工具 生成一個 ico 文件；
第二步，在頁面的 head 元素內部引用：
<link rel="shortcut icon" href="images/bitbug_favicon.ico" />
域名是怎麼回事
買了一個百度域名，一個騰訊雲服務器，搭起來這個小商城應用，沒想明白百度域名和騰訊域名有什麼區別。聽說域名需要備案，就在百度智能雲控制平臺進行備案操作。發現百度的域名備案時，提示我沒有購買可備案的產品，可是我明明買了域名的呀！
給百度客服打電話，客服說域名都是一樣的，域名備案的本質時對雲服務器備案，所以真正買誰的服務器，就在誰那裏備案，這下徹底明白了網站建立的過程了。
編程啓示錄
這兩天搞這個小應用，基本上都是 6 點多起來，不停地調試糾正問題。因爲一直想着這個事情，睡覺也不踏實，乾脆就醒了繼續搞。以前有段子說，叫醒我的不是鬧鐘，而是夢想！現在看來，這並不是段子，而是一些人的真實寫照吧。
這是自己想到的一個小應用，功能不復雜，也就一個 Servlet 和 一個 html 頁面，不一定有市場和收益。算是給自己這段被迫居於室內時光，增加一點可說道的內容吧！
還有一點，關於網站的 web 服務器安全問題，建站的時候，下了一個 8.5.51 的版本的 Tomcat ，這個是 8 版本的最新版本，使用最新版本的好處就是，它的版本發佈肯定是有一定原因的。鑑於最新的 Tomcat 漏洞 CVE-2020-1938 ，我專門看了下發現這個版本不受影響，根源在於它註釋掉了 8009 端口。