作為互聯網的基礎載體，Web站點具有開放性、跨平臺性的優勢。百度作為國內在搜索領域不斷深耕技術的公司，一直在Web生態的整體體驗提升中扮演著重要角色。同時，在移動互聯網時代，通過移動設備瀏覽移動網站流量早已超過了電腦版網站。可見，對移動端的頁面優化也是必不可少的過程。

4月22日，由百度開發者中心主辦，極客邦科技承辦的第70期百度技術沙龍圓滿結束，沙龍的主題圍繞Web技術生態，邀請了百度技術專家現場分享了百度在這方面的技術成果，和最優的實踐案例。因為篇幅有限，所以本文以介紹關鍵內容為主，讀者后續可以下載演講PDF文件深入了解。

MIP－加速移動頁面

百度資深Web前端研發工程師 李浪波為大家分享了MIP（Mobile Instant Page 移動網頁加速器）的相關內容，MIP是一套應用于移動網頁的開放性技術標準，可以大大提升用戶在瀏覽移動頁面時的打開速度。

MIP實際上是一套基于代理的CDN緩存系統，包含三個重要部分，第一個，它會緩存所有符合MIP規范的頁面，只要這個頁面是MIP頁面就都可以進入CDN系統，緩存頁面上所有的圖片，字體等。同時它最大的一個亮點就是支持HTTPS。

訪問MIP在線的流程的話，是先請求CDN，然后一直查詢到MIP-server，然后到Mint，如果有緩存，直接給訪問用戶返回超快的緩存頁面。當然如果沒有緩存，就直接請求原站把頁面反饋給用戶。

>>加速實現原理

總結起來就是通過這幾點來進行加速：網絡連接優化、靜態自適應布局、加速實現原理、資源緩存、資源加載順序以及預取、超大圖片控制等等。利用MIP加速盡最大限度去解決頁面抖動的問題。在資源緩存方面，目前MIP緩存在80%左右，在緩存命中率超高的情況下，資源緩存對性能提升是非?？捎^的。MIP在對圖片資源進行緩存的同時，也會限制超大圖片，避免或減少頁面加載超大圖片對性能的消耗，同時還會對超大網頁進行限制。

關于MIP的工具集和安裝步驟，可以詳細閱讀李浪波老師的演講PDF內容，也可以在文章中留言反饋。

PWA的探索與實踐

陶清乾是百度資深Web前端研發工程師，目前致力于提升百度搜索生態體驗。他介紹了什么是PWA－－Progressive Web Apps（漸進式Web Apps）是Google提出來的一種帶來突破性體驗的Web站的應用標準，主要特性是：Reliable（可依賴）Fast（快），Engaging（有粘性的）與傳統Web相比，多了幾個關鍵特性：offline、icon、splash、notification

>>關鍵技術

• Serviceworkers－－通過瀏覽器網絡代理，提供Web離線緩存能力，這也是Serviceworkers的核心功能
• Add To Home Screen－－讓頁面可以被添加到手機主屏，通過icon調起，就像一個APP圖標一樣也可以被調起
• Web Push & Notifications－－提供通知推送功能，增加Web站點與用戶互動能力

基于上面所提到的概念，陶老師介紹了PWA和OpenWeb之間的細節，包括傳統Web的困境，例如在移動互聯網的入口不像以前在PC入口一樣單一，Web在手機上很多用戶通過App直達。其次，App遇到的問題也很多。90%的用戶在一天內打開的App不超過10個；另外就是App獲取的路徑特別長等問題。

>>PWA與Open Web變革與影響

★ 體驗層面向Native App靠攏：離線能力、添加到主屏、調起交互
★ 開發模式的變革：Web開發同時考慮離線模式和體驗
★ 安裝更新機制帶來的運營方式變化：與Web互聯，URL直達，不再依賴應用分發

在開發模式上的變革，其實以前的Web開發只是單純的寫一些頁面（HTML、CSS、JS）的業務邏輯，但是未來需要同時考慮用戶在沒有網絡的情況下能給用戶提供什么樣的體驗，這就是Web在未來開發的過程中需要考慮的線下體驗和開發模式。

一起開發PWA需要涉及到的內容包括：? Service  Worker配置；? 緩存策略設計；? Manifest配置；? 頁面質量檢測；? 開發總結。

>>離線化關鍵細節－緩存策略思考：

• 緩存key對應于版本號。
• 獲取資源(樣式、腳本、字體)時離線優先(Cache First)。
• 獲取數據(天氣、地理位置)時網絡優先(Network First)。
• 所有網絡請求都會被更新到緩存。

如何評估PWA帶來的技術體驗上的改善，陶老師說，首先需要一個實驗，使用A/B Test可以看出改造和沒有改造的?？梢韵仍u估頁面的性能，頁面的到達率，頁面的轉化這些都是需要考慮的。如果PWA改造本身會影響統計方式，那么評估的時候PWA的改變方式就是對使用方式的影響。了解更多內容請下載講師的演講PDF文件。

ECharts 中應用 WebGL 的實踐

百度資深前端工程師，ECharts 項目的團隊成員沈毅在這次分享中介紹了他們團隊在ECharts GL中應用 WebGL 的探索和經驗。包括他們現在使用的 Canvas 所存在的一些限制， 應用 WebGL 后解決了哪些原先 Canvas 無法解決的問題，以及帶來的一些新的問題和他們所采用的解決方案。

分享的第一塊是三維可視化中基礎的點、線、面的繪制，點線面在 Canvas 中的繪制非常簡單，在 WebGL 中卻需要很多技巧才能繪制好。

• 點：ECharts GL中用了 Signed Distance Field 繪制不同矢量形狀的點，Signed Distance Field 的優勢是可以存儲在小尺寸的紋理中，圖形放大后也有清晰的邊緣，而且還能夠繪制描邊、外發光、陰影等效果。
• 線：WebGL 中原生的繪制線段的方法有許多坑，比如在 Windows 中沒辦法設置線寬0。由于這些限制，ECharts GL 中最后放棄了原生的畫線方式，改用三角面模擬線段，并且在像素著色器中動態計算，實現屏幕空間等寬的線條。
• 面：在可視化中需要根據輸入的數據動態的構建三角面。合理拿三維地圖的構建作為例子介紹了如何將用戶輸入的 GeoJSON 數據三角化后構建成三維的網格。最后分析了其中三角化所使用的算法 Ear Clipping 的性能問題以及幾個優化的思路。

分享的第二塊通過 WebGL 加速力引導布局這個案例介紹了在WebGL中實現 GPU 通用計算的思路。傳統的力引導布局每次迭代都是 O(n2)，并且需要上百次的迭代才能完成布局，所以開銷很大，就算使用了 Barnes Hut Simulation 將算法復雜度降到 O(nlogn) 也沒辦法很快對上千個點的關系圖布局完。對此可以利用 GPU 的并行性，嘗試在shader 里完成力引導布局的計算。GPU 加速后在高端的顯卡中相對于傳統的 JS 布局有上百倍的性能提升。

分享的第三塊介紹了PBR、軟陰影、SSAO、景深和散景、調色、超采樣抗鋸齒等幾種對最后輸出的畫質影響比較大的技術，但是這里面的一些技術往往需要很多的采樣才能有比較好的效果，這會導致在一些低端電腦中沒法流暢的交互。對于這個問題 ECharts GL 中采用的思路是“交互時用較低的畫質從而能夠得到實時的畫面反饋，交互結束后對畫面漸進增強”，把原先一幀中要做的工作分到很多幀中去做。從而減小單幀的計算壓力，并且又能保證最后輸出的畫質是增強后的。

Web安全之HTTPS技術應用

張偉偉先后參與了百度搜索HTTPS、移動端網絡優化等項目，之前工作方向包括SSLVPN、WAF、防火墻/路由器等。在這次演講中，張老師更多的講解了安全、證書、性能優化等內容方向。

此前，百度網站也遇到過篡改URL、302跳轉、手機號泄露、DNS劫持到其他網站、搜索功能異常、白頁等狀況，影響了用戶的訪問體驗。百度搜索在國內率先實現了全站HTTPS。全站HTTPS首先得考慮HTTPS帶來的性能問題。HTTPS訪問過程中增加的不只是SSL握手，還要其他一些因素，比如證書驗證。

總體的來說，HTTPS主要優化點包括：消除網絡延遲，減少CPU運算，節省流量，提前渲染。

HTTPS對內容保護提供了一些安全的保證，但是HTTPS本身是否安全呢？張老師說，這主要從四個角度考慮；第一、私鑰的保護，很多域名共同用一個證書，第二、服務部署在多個點，甚至是第三方服務平臺，部署環境比較復雜。第三、當一個私鑰泄露以后，攻擊者可以偽造服務端來劫持流量。解決方案可以從三個部署去做；首先要保證私鑰加密保護。其次最好是有一個“私有”的加密方案，通過開源算法組合，以及在密鑰選擇的時候，通過一些噪聲的干擾等等措施達到更好的保護效果。最后是通過特殊硬件，私鑰所有的運算都放在硬件中，硬件也有自我保護避免被惡意破壞。

第二個安全方面，大家可以關注一下服務的安全等級。SSLLABS提供了影響安全等級的幾個因素，包括證書、協議版本，加密套件，以及協議和實現中的漏洞。當然安全性和可用性是一對相矛盾的命題，如果對于普通的服務B這個等級就可以滿足當前的基本安全要求。這里需要考慮兩點。第一、需要建立一套發現、驗證和修復的響應機制，及時修復服務漏洞。第二、建議使用不同的TLS協議棧。另外，針對不同類型的服務提供不同的安全等級，比如說金融類提供A等級及以上。

第三點，證書驗證。大部分App在開發的時候會忽略證書的檢查，當被劫持和出現偽造證書的時候也很難發現。谷歌play發布了兩個安全警告，聲明如果不解決證書驗證中存在的問題是不能上線的。建議在做證書驗證的時候考慮以下四個緯度。第一個是證書提供的域名和訪問的域名是否一致；第二個是訪問的時間和證書有效期對比；第三個是證書鏈的簽名檢查；還有一個是證書有效性的驗證。最后，還可以監控一下當前的服務站證書是否存在偽造（偽造證書有一個前提，必須配合DNS劫持、鏈路劫持或客戶端劫持），如果一旦出現被劫持，就可以篡改用戶的請求，窺探用戶的隱私。

最后看一下HTTPS的應用實踐問題，張老師說，團隊在開發的時候就要有自動糾錯，自動降級的自我保護意識。其次是上線的驗證，分級發布，回滾預案等；第三，常態的監控和報表；第四、容量保證以及異常流量的檢查。是否考慮HTTPS協議降級呢？從互聯網發展趨勢來看，張老師建議是提供好服務，不降級。更多詳情請下載講師演講PDF查看。

總結

以上是生活随笔為你收集整理的MIP、PWA、WebGL、HTTPS，来看Web生态的领先技术的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。