以下是Google浏览器查看网页加载顺序与性能瓶颈的方法：
一、使用浏览器开发者工具
1. 打开开发者工具：在Google浏览器中，可以通过按`F12`键或右键点击页面并选择“检查”来打开开发者工具。
2. 查看网络请求：在开发者工具中，切换到“网络”选项卡。这里会显示网页加载时所有的网络请求，包括HTML文档、CSS样式表、JavaScript文件、图片等资源的加载情况。每个请求都会显示其加载时间、状态码等信息。通过观察这些请求的加载顺序和时间，可以了解网页的加载过程。例如，HTML文档通常会首先加载，然后是CSS和JavaScript文件，最后是图片等其他资源。如果某个资源的加载时间过长，可能会影响整个网页的加载速度。
3. 分析性能指标：在“网络”选项卡中，还可以查看一些性能指标，如页面加载时间、首次绘制时间、最大内容绘制时间等。这些指标可以帮助你评估网页的性能。例如，如果首次绘制时间过长，说明网页在初始渲染时花费了较多时间，可能需要优化CSS和JavaScript的加载顺序。
二、使用性能分析工具
1. 录制性能日志：在开发者工具中，切换到“性能”选项卡。点击“录制”按钮，然后在网页上进行操作，如滚动页面、点击按钮等。操作完成后，点击“停止”按钮，浏览器会生成一份性能日志。这份日志会详细记录网页在操作过程中的性能表现，包括CPU使用率、内存占用、渲染时间等。通过分析这份日志，可以找到性能瓶颈所在。例如，如果在某个操作过程中CPU使用率过高，可能是相关的JavaScript代码存在性能问题。
2. 分析火焰图：在性能日志中，会有一个火焰图。火焰图可以直观地展示网页中各个函数的执行时间和调用关系。通过查看火焰图，可以找到执行时间最长的函数，从而确定性能瓶颈的位置。例如，如果某个JavaScript函数在火焰图中占据较大比例，说明该函数可能存在性能问题，需要进一步优化。
三、优化网页性能
1. 优化资源加载顺序：根据网页加载顺序的分析结果，调整CSS和JavaScript文件的加载顺序。可以将关键的CSS和JavaScript文件放在HTML文档的头部，确保它们优先加载，以便尽快开始渲染网页。对于非关键资源，可以采用延迟加载或异步加载的方式，减少对网页初始加载的影响。
2. 压缩资源文件：对CSS、JavaScript和图片等资源文件进行压缩，可以减少文件大小，加快加载速度。可以使用在线压缩工具或相关的软件插件来压缩资源文件。例如，使用UglifyJS来压缩JavaScript文件，使用cssnano来压缩CSS文件，使用TinyPNG来压缩图片文件。
3. 缓存资源文件：利用浏览器缓存机制，将经常使用的资源文件缓存到本地，减少重复下载的次数。可以通过设置HTTP缓存头信息来实现缓存。例如，对于CSS和JavaScript文件，可以设置较长的缓存时间，这样在用户再次访问网页时，浏览器可以直接从缓存中获取这些文件，而不需要重新下载。