以下是谷歌浏览器优化网页中资源异步加载的方法：
一、使用HTML5特性
1. 利用async和defer属性加载脚本：在HTML文件中，对于不需要阻塞页面解析的脚本，可以使用async属性。这样脚本会在后台下载，一旦下载完成就会立即执行，不会等待页面其他内容的加载。例如，<script src="example.js" async>。而对于需要按照顺序执行的脚本，可以使用defer属性。使用defer属性的脚本会在整个页面解析完成后再执行，并且按照在HTML中出现的顺序依次执行。例如，<script src="example.js" defer>。
2. 使用HTML5的Web Workers：Web Workers可以在后台线程中运行JavaScript代码，不会影响页面的渲染和用户的交互。通过将一些耗时的任务（如数据处理、复杂计算等）放到Web Workers中执行，可以提高页面的响应速度。例如，创建一个worker.js文件，在主脚本中使用new Worker('worker.js')来创建一个新的Web Worker，然后通过postMessage方法向worker发送数据，worker处理完数据后再通过message事件将结果返回给主脚本。
二、优化图片和多媒体资源的加载
1. 使用懒加载技术：对于图片和多媒体资源，只有当它们进入视口（用户可见区域）时才进行加载。可以通过监听scroll事件和判断元素的位置来实现懒加载。例如，当页面滚动时，检查图片是否接近视口，如果是，则设置图片的src属性为实际的图片地址，触发图片的加载。这样可以减少初始页面加载时的资源消耗，提高页面的加载速度。
2. 选择合适的图片和多媒体格式：根据不同的设备和浏览器支持情况，选择最适合的图片和多媒体格式。例如，对于现代浏览器，可以使用WebP格式的图片，它具有更高的压缩比和更好的图像质量。对于视频，可以使用MP4格式，并结合自适应码率技术，根据用户的网络状况自动调整视频的码率，以保证流畅播放的同时减少带宽占用。
三、合理利用缓存机制
1. 设置缓存策略：通过设置HTTP头部的Cache-Control字段，可以控制浏览器对资源的缓存行为。例如，对于经常更新的资源，可以设置较短的缓存时间或使用no-cache指令，确保用户获取到最新的资源。而对于不经常更新的资源，可以设置较长的缓存时间，让浏览器从本地缓存中获取资源，减少网络请求。
2. 利用Service Workers实现离线缓存：Service Workers可以在浏览器后台运行，拦截网络请求并提供自定义的响应。通过注册一个Service Worker，可以将一些关键的资源（如HTML文件、CSS样式表、JavaScript脚本等）缓存到本地，实现离线访问功能。同时，Service Workers还可以根据缓存策略动态地更新缓存资源，保证用户始终能够获取到最新的内容。