Lighthouse的使用与Google的移动端最佳实践
Lighthouse是一个Google开源的自动化工具，主要用于改进网络应用（移动端）的质量。目前测试项包括页面性能、PWA、可访问性（无障碍）、最佳实践、SEO。Lighthouse会对各个测试项的结果打分，并给出优化建议，这些打分标准和优化建议可以视为Google的网页最佳实践。
使用入门
运行Lighthouse的方式有三种：在开发者工具（Devtools）的Audits，作为Chrome拓展程序使用，或者作为命令行工具使用。Chrome开发者工具不需要额外安装，和扩展程序一样提供了一个用户友好的界面，方便读取报告；扩展程序相对于开发者工具的优势是更及时，不用等待Chrome发版就能体验到最新的功能；命令行工具可以将Lighthouse集成到持续集成系统。
开发者工具
仅能在Chrome60及以上使用，因为之前版本的Chrome的开发者工具的audits面板还不是Lighthouse。
通过右上角的菜单或者快捷键（command+option+i）打开开发者工具，然后选择audits面板，点击Perform an audits会弹出一个options面板勾选测试项然后点击Run audits即可。
Chrome拓展程序
在右上角或者菜单里点击图中图标，Options可以配置测试项目，点击Generate report即可测试。
命令行工具
安装：
npm install -g lighthouse
# or use yarn:
# yarn global add lighthouse
使用：
lighthouse https://example.com
配置项：
$ lighthouse --help
lighthouse <url>
Logging:
--verbose Displays verbose logging [boolean]
--quiet Displays no progress, debug logs or errors [boolean]
Configuration:
--save-assets Save the trace contents & screenshots to disk [boolean]
--list-all-audits Prints a list of all available audits and exits [boolean]
--list-trace-categories Prints a list of all required trace categories and exits [boolean]
--additional-trace-categories Additional categories to capture with the trace (comma-delimited).
--config-path The path to the config JSON.
--chrome-flags Custom flags to pass to Chrome (space-delimited). For a full list of flags, see
http://peter.sh/experiments/chromium-command-line-switches/.
Environment variables:
CHROME_PATH: Explicit path of intended Chrome binary. If set must point to an executable of a build of
Chromium version 54.0 or later. By default, any detected Chrome Canary or Chrome (stable) will be launched.
[default: ""]
--perf Use a performance-test-only configuration [boolean]
--port The port to use for the debugging protocol. Use 0 for a random port [default: 0]
--hostname The hostname to use for the debugging protocol. [default: "localhost"]
--max-wait-for-load The timeout (in milliseconds) to wait before the page is considered done loading and the run should continue.
WARNING: Very high values can lead to large traces and instability [default: 45000]
--enable-error-reporting Enables error reporting, overriding any saved preference. --no-enable-error-reporting will do the opposite. More:
https://git.io/vFFTO
--gather-mode, -G Collect artifacts from a connected browser and save to disk. If audit-mode is not also enabled, the run will quit
early. [boolean]
--audit-mode, -A Process saved artifacts from disk [boolean]
Output:
--output Reporter for the results, supports multiple values [choices: "json", "html", "domhtml"] [default: "domhtml"]
--output-path The file path to output the results. Use 'stdout' to write to stdout.
If using JSON output, default is stdout.
If using HTML output, default is a file in the working directory with a name based on the test URL and date.
If using multiple outputs, --output-path is ignored.
Example: --output-path=./lighthouse-results.html
--view Open HTML report in your browser [boolean]
Options:
--help Show help [boolean]
--version Show version number [boolean]
--blocked-url-patterns Block any network requests to the specified URL patterns [array]
--disable-storage-reset Disable clearing the browser cache and other storage APIs before a run [boolean]
--disable-device-emulation Disable Nexus 5X emulation [boolean]
--disable-cpu-throttling Disable CPU throttling [boolean] [default: false]
--disable-network-throttling Disable network throttling [boolean]
--extra-headers Set extra HTTP Headers to pass with request [string]
Examples:
lighthouse <url> --view Opens the HTML report in a browser after the run completes
lighthouse <url> --config-path=./myconfig.js Runs Lighthouse with your own configuration: custom audits, report
generation, etc.
lighthouse <url> --output=json --output-path=./report.json --save-assets Save trace, screenshots, and named JSON report.
lighthouse <url> --disable-device-emulation --disable-network-throttling Disable device emulation
lighthouse <url> --chrome-flags="--window-size=412,732" Launch Chrome with a specific window size
lighthouse <url> --quiet --chrome-flags="--headless" Launch Headless Chrome, turn off logging
lighthouse <url> --extra-headers "{\"Cookie\":\"monster=blue\"}" Stringify\'d JSON HTTP Header key/value pairs to send in requests
lighthouse <url> --extra-headers=./path/to/file.json Path to JSON file of HTTP Header key/value pairs to send in requests
For more information on Lighthouse, see https://developers.google.com/web/tools/lighthouse/.
测试结果示例
最佳实践
这些最佳实践主要针对移动端或者Web应用。某些技术对浏览器版本要求较高，用之前最好在Can I use、MDN上查一下浏览器支持情况
打开外部链接使用rel="noopener"
当页面使用 target="_blank" 跳转至另一个页面时，新页面将与您的页面在同一个进程上运行。 如果新页面正在执行开销极大的 JavaScript，您的页面性能可能会受影响。最重要的是target="_blank”也是一个安全漏洞。新页面可以通过window.opener访问旧页面的window对象，并且它可以使用window.opener.location=newURL将旧页面导航至不同的网址。所以当在新窗口或标签中打开一个外部链接时，应该始终加上rel="noopener"，例如：
<a href="https://examplepetstore.com" target="_blank" rel="noopener">...</a>
地址栏颜色应该和品牌颜色、网页主题匹配
就是地址栏的背景颜色应该和品牌颜色一致
通过meta标签实现的：
<meta name="theme-color" content="#ff6633">
不过仅在认可这个meta的浏览器上有效，比如Chrome for Android，实测pc、ios的Chrome、Safari无效。
如果场景能用上还是能提高一些用户体验的，避免了地址栏突兀。
避免使用AppCache
AppCache已被废弃
考虑使用service worker的Cache API，另外现在ios 11.3也支持了service worker，未来一两年应该有很大发展。
避免使用console.time()
如果使用console.time()测试页面性能，请考虑使用User Timing API。其优势包括：
- 高分辨率时间戳
- 可导出的计时数据
- 与Chrome Devtools TImeline相集成。在 Timeline 录制期间调用 User Timing 函数 performance.measure() 时，DevTools 自动将此测量结果添加到 Timeline 的结果中。
将console.time()替换为performance.mark()。如果需要测量两个label之间经过的时间，则使用performance.measure()。User Timing API
// 获得命名时间戳
window.performance.mark('mark_fully_loaded');
// 获得命名时间戳之间的时间间隔或者与PerformanceTiming的时间间隔
window.performance.measure('measure_load_from_dom', 'domComplete', 'mark_fully_loaded');
避免使用Date.now()
考虑改用performance.now()代替Date.now()。performance.now()可提供较高的时间戳分辨率，并始终以恒定的速率增加，它不受系统时钟（可以调整）的影响。performance.now()
// 获取相对于navigationStart属性中的时间戳为起点开始计时的精确到千分之一毫秒的时间戳
window.performance.now()
避免弃用的API
已弃用的API计划从Chrome中移除，使用这些API后，被删除后将导致网页出错。查看Chrome平台状态
避免使用document.write()
对于网速较慢（2G、3G或较慢的WLAN）的用户，外部脚本通过document.write()动态注入会使页面内容的显示延迟数十秒。
避免巨大的网络负载
延迟请求直到需要它们
启用文本压缩
压缩HTML、JS和CSS
使用Webp而不是JPEG或PNG
将JPEG图像的压缩级别设置为85
缓存请求
避免使用mutation events
以下mutation events会损害性能，在DOM事件规范中已经弃用：
- DOMAttrModified
- DOMAttributeNameChanged
- DOMCharacterDataModified
- DOMElementNameChanged
- DOMNodeInserted
- DOMNodeInsertedIntoDocument
- DOMNodeRemoved
- DOMNodeRemovedFromDocument
- DOMSubtreeModified
建议将每个mutation events替换成MutationObserver
避免使用旧版CSS Flexbox
2009年的旧Flexbox规范已弃用，其速度比最新的规范慢2.3倍。将页面中的display：box及以box开头的每个属性替换成标准的Flexbox属性。
避免在页面加载时自动请求地理位置
页面在加载时自动请求用户位置会使用户不信任页面或感到困惑。应将此请求与用户的手势进行关联，而不是在页面加载时自动请求用户的位置。
避免在页面加载时自动请求通知权限
好的通知需要做到及时、相关且准确。如果页面在加载时要求权限以发送通知，则这些通知可能与您的用户无关或者不是他们的精准需求。为提高用户体验，最好是向用户发送特定类型的通知，并在他们选择加入后显示权限请求。
避免使用Web SQL
背景和前景应该有足够的对比度
低对比度文本对于许多用户来说很难或不可能读取
使用Chrome扩展程序aXe可以分析出所有的可访问性问题
按钮有一个可访问的名称
没有名字的按钮对依赖屏幕阅读器的用户不可用。当一个按钮没有名字时，屏幕阅读器会宣布“按钮”。
对
