這個周末寫了一個網頁版的個人簡歷，基于bootstrap框架 + github page進行快速的開發及部署。
首先說下github page吧，真的很方便，github幫你提供一個無需配置直接使用的服務器來供你展示靜態網頁，非常適合做個人網頁/博客，同時github page也提供了Blogging with Jekyll的方法使開發者使用markdown語句快速修改網頁內容。非常的便捷，實用。
?點擊打開github page官網
但是我這里自己開發了網頁進部署，沒有用官方推廣的 Blogging with Jekyll ，也沒有什么其他的原因了。就是想練練前端網頁的開發。
然后在開發過程中還是碰到了很多坑的，在這里記錄一下，以供記錄和分享。
開發思路
感覺這次的開發思路很好的模擬了一次軟件設計的流程
- 開發一個網頁，可以在自己的電腦上完美展示
- 由于各個瀏覽器解析和支持情況不同，需要對瀏覽器進行適配
- 現在移動端更加廣泛一些，需要支持移動端的適配
- 可不可以根據用戶使用的默認語言來自動調整網頁上顯示內容來做到更好地用戶友好性
最后磕磕絆絆的也算完成了以上的過程，按照流程的話，我之后思考的應該是，如何快速修改網頁內容，如何進行動態修改，能不能把這種模式固定下來制作為模板大量開發復用。這也是之后考慮的事了，這次就先做到這里吧。
開發遇到的坑
1.手機適配
手機適配真的很麻煩，文字的展示還好，但是圖片的展示真的繁瑣，各個手機屏幕的大小都要考慮到，之前也沒做過移動端的開發，所以研究了很久。最后采用了@media (max-width){}的方法來判斷屏幕來進行適配，可以直接用瀏覽器的f12打開切換手機顯示來調整網頁內容的分布。
2.網頁打開慢
第一次做好后部署完，網站打開很慢，真的覺得無法忍受，測試了一下，完整加載網頁需要10s的時間，很明顯是不合適的。查閱了很多方法，找到了幾個有顯著效果的方法
- 合并請求，減少請求數量，在加載網頁時，最多同時對一個站點發送6個request請求，所以減少請求數量可以很好地減少請求的等待延遲。
- 動態加載內容，對圖片進行懶加載
- css中的背景圖片總是最后加載的，所以不重要的圖片也可以使用這種策略去打開
- 使用CDN進行內容分發，使資源來源不同來達到并發加載資源，提高速度
- 壓制圖片大小，這里強力安利webp格式的圖片，可以用格式工廠去轉換，大約可以壓制出30%~40%的空間，大大縮減圖片所占的網絡資源，并且質量不會有損失。（但是有缺陷，之后會提到）
- 壓縮css和js，使用min.js來縮減資源容量
3.微信/qq內置瀏覽器打不開圖片
騰訊會去檢測圖片來源，如果使用了外站圖片會進行自動屏蔽，此時圖片都不會加載，如果只適配安卓端，可以使用<meta name="referrer" content="never" />來屏蔽這種檢測，但是ios端無法完成這一操作。值得一提的是可以使用放在qq空間/說說/朋友圈等等一系列放在騰訊服務器的圖片，可以很好地通過這層檢測。
4.蘋果系統瀏覽器不顯示圖片
Safari瀏覽器對于圖片來源的檢測更為嚴格，一定要用有證書的圖片（為了通過證書檢測，不能引用外站圖片）。并且由于webp格式圖片是谷歌推出的，蘋果公司并沒有對其進行兼容，所以為了去滿足蘋果用戶的使用，必須使用png格式的圖片來進行加載
以上就是這次開發經歷，文中有不足，歡迎討論與指正。
