背景
背景由于公司最近項目有一個H5測試項目，功能測試不用多說，但是H5性能測試是一個大難題，于是研究下H5性能測試，下面總結(jié)下，希望能幫助自己回顧項目也希望能幫到測友。
總結(jié)
H5性能測試的常用指標：
- 白屏時間：用戶首次看到網(wǎng)頁內(nèi)容的時間，即第一次渲染流程完成的時間；
- 首屏時間：用戶看到第一屏，即整個網(wǎng)頁完全顯示出來的時間；
- 首資源下載時間：從開始下載第一個資源到下載完成的時間；
- 總資源下載時間：從開始下載到所有資源下載完成的時間；
- 用戶可操作時間：從頁面開始加載，到用戶能夠操作界面的時間。
H5性能測試工具
下面以chrome 瀏覽器為例：
通過chrom 應用商店搜索Lighthouse 下載安裝后，打開需要測試的網(wǎng)頁—打開F12—選擇Lighthouse選項—點擊 分析網(wǎng)頁加載情況 ，即開始分析H5網(wǎng)頁性能，并且生成性能測試報告。
相關(guān)指標的含義：
首次內(nèi)容繪制（First Contentful Paint）：即瀏覽器首次將任意內(nèi)容（如文字、圖像、canvas等）繪制到屏幕上的時間點；
最大內(nèi)容繪制（Largest Contestful Paint）：表示可視區(qū)最大的可見元素開始出現(xiàn)在屏幕上的時間點；
總得阻塞時間（Total Blocking Time）：表示此次分析過程中遇到阻塞時間；
可交互時間（Time to Interactive）：指所有的網(wǎng)頁內(nèi)容已經(jīng)成功加載完成，且能夠快速對用戶的操作做出反應的時間點；
速度指標（Speed Index）：衡量了首屏可見內(nèi)容繪制在屏幕上的速度，在首次加載頁面的過程中盡量展現(xiàn)更多的內(nèi)容，往往能夠給用戶帶來更好的體驗，所以速度指標的值越小越好；
Cumulative Layout Shift：簡稱CLS。即累計布局偏移量。
??借助Lighthouse 可以快速簡單的測試H5 網(wǎng)頁的性能測試報告。文章來源：http://www.zghlxwxcb.cn/news/detail-625932.html
Tips文章來源地址http://www.zghlxwxcb.cn/news/detail-625932.html
- 您發(fā)布的文章將會展示至 里程碑專區(qū) ，您也可以在 專區(qū) 內(nèi)查看其他創(chuàng)作者的紀念日文章
- 優(yōu)質(zhì)的紀念文章將會獲得神秘打賞哦
到了這里，關(guān)于H5性能測試以及H5性能測試工具的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
