一、优化 CSS 样式
1. 精简 CSS 代码
- 移除不必要的 CSS 规则和属性，减少样式文件的大小。例如，删除从未使用的类选择器或重复定义的属性，像 `margin: 0;` 后面又单独写了 `margin-top: 5px;` 这种情况就可以优化。
- 压缩 CSS 文件，去除多余的空格、换行符和注释等，但要注意不要影响代码的可读性，以便后续维护。可以使用一些在线的 CSS 压缩工具来完成这一步操作。
2. 将关键 CSS 内联
- 对于页面首次渲染时需要立即呈现的元素，将其关键的 CSS 样式直接写在元素的 `style` 属性中。这样浏览器在解析 HTML 时就能同时应用这些样式，而不用等待外部 CSS 文件的加载。比如，对于页面中的导航栏、logo 等重要元素，可以采用内联样式。不过要注意，内联样式过多会使 HTML 文件变得臃肿，所以要合理使用，一般只对关键的、少量的关键元素进行内联。
3. 使用媒体查询优化 CSS 加载
- 如果页面中有针对不同设备屏幕尺寸的样式设置（如响应式设计），可以将针对小屏幕设备的 CSS 样式放在一个单独的文件中，并使用媒体查询在需要的时候才加载它。例如，通过 link rel="stylesheet" media="(max-width: 600px)" href="small-screen.css" 这样的代码，只有在屏幕宽度小于 600px 时才会加载 `small-screen.css` 文件，避免在大屏设备上加载不必要的样式，从而减少页面渲染阻塞。
二、优化 JavaScript 脚本
1. 延迟加载非关键 JavaScript
- 对于那些不是页面初始渲染所必需的 JavaScript 脚本，可以使用 `defer` 或 `async` 属性来延迟加载。`defer` 属性表示脚本会在 HTML 文档解析完成后执行，但会在 DOMContentLoaded 事件触发之前执行，保证脚本按顺序加载；`async` 属性则表示脚本会在下载完成后尽快执行，不保证执行顺序。例如，对于一个用于统计用户行为的脚本，就可以使用 script src="analytics.js" defer 来延迟加载。
2. 将 JavaScript 代码放在底部
- 把外部的 JavaScript 脚本标签放在 HTML 文档的底部，就在 body 标签之前。这样可以确保在页面的 HTML 结构完全加载后再执行脚本，避免脚本执行时 DOM 元素还未完全解析导致的阻塞问题。比如，原本在 head 中的一些第三方广告脚本或自定义的功能脚本，都可以移到底部。
3. 合并和压缩 JavaScript 文件
- 与 CSS 类似，将多个小的 JavaScript 文件合并为一个大的文件，并压缩代码以减小文件大小。这可以减少浏览器请求文件的次数，从而提高页面加载速度。可以使用专业的 JavaScript 压缩工具来完成合并和压缩操作，但要注意处理好代码的依赖关系，避免出现错误。
三、优化图片资源
1. 压缩图片
- 使用专业的图片压缩工具，在不损失太多视觉质量的前提下，尽量减小图片的文件大小。常见的图片格式如 JPEG、PNG 等都可以通过调整压缩比来达到减小体积的目的。例如，对于网站上的产品图片、文章配图等，可以适当降低 JPEG 图片的质量参数，或者使用更高效的 PNG 压缩算法。
2. 选择合适的图片格式
- 根据图片的内容和用途选择合适的格式。例如，对于色彩丰富的照片使用 JPEG 格式，对于颜色简单、有大面积纯色的图标或图形使用 PNG 格式，对于需要透明背景的图片也可以使用 PNG 格式。另外，还可以考虑使用新兴的 WebP 格式，它在很多情况下能比 JPEG 和 PNG 提供更好的压缩效果和图像质量，但要注意浏览器的兼容性，目前主流浏览器大多已经支持 WebP 格式。
3. 使用懒加载技术
- 对于页面中不在初始视口范围内的图片（如长页面中的下半部分图片或轮播图中的非当前显示图片等），可以采用懒加载技术。即当图片即将进入视口时才加载它，而不是在页面初次加载时就一次性加载所有图片。可以通过添加 `loading="lazy"` 属性到 img 标签中来实现懒加载，例如 img src="example.jpg" loading="lazy" alt="Description"。
四、利用浏览器缓存
1. 设置缓存头信息
- 在服务器端为静态资源（如 CSS、JavaScript、图片等）设置合适的缓存头信息，告诉浏览器这些资源在多长时间内可以缓存。例如，通过设置 `Cache-Control` 和 `Expires` 头字段，让浏览器知道某个资源可以在一周内直接从缓存中读取，而不需要再次向服务器请求。这样，当用户再次访问页面时，如果这些资源没有变化，就可以快速从本地缓存中获取，减少网络请求和页面渲染时间。
2. 版本控制缓存更新
- 当静态资源发生更新时，要确保浏览器能够获取到最新版本的资源。可以通过在资源文件名中添加版本号或哈希值的方式来实现。例如，将 `style.css` 改为 `style.v1.2.css` 或 `style.abc123.css`，这样浏览器就会认为这是一个新的资源，从而重新下载并缓存。同时，在 HTML 文件中引用这些资源时也要相应地更新路径。
通过以上这些方法的综合运用，可以有效地在谷歌浏览器中减少页面渲染的阻塞，提高网页的加载速度和性能表现，为用户提供更流畅的浏览体验。
