在前端摸爬滚打了8年，以前做的主要是B端项目，所以很少能接触到性能优化方面的需求。

最近我们面向C端用户的产品首页图片比较多，产品在给老板演示时，发现图片加载速度很慢。

之前虽然设置了图片缓存，但架不住用户首次打开；而且之前的分页在最近一次调整中临时去掉了，导致首页需要加载50张高清大图，产品也没压缩，不卡才怪。当然也有我的锅，去掉分页后没有做懒加载。

所以，我决定对首页图片进行懒加载优化，不就是计算滚动top设置图片src吗？我都懒得写。

然后，我果断给TRAE下达了任务。

看着TRAE吭哧吭哧的干活，我悠闲的喝了一口咖啡。喝完之后，TRAE也差不多干完活了，我刷新了浏览器后滚动鼠标到底部，图片才开始加载。完美！

我开始看TRAE的代码，封装的真好啊，不过咋有点看不懂？IntersectionObserver是啥，Observer倒有点眼熟，连在一起是真不知道。

于是我点开了MDN的文档，被迫学习了一下！发现IntersectionObserver是一个非常方便的API，它可以监听元素是否进入视口。都不需要前端自己计算滚动top了，浏览器自己就可以监听。

果然科技是在进步的，就如我们现在指挥AI干活。

TRAE封装的代码如下（lazyload.ts）：

/** * 图片懒加载工具函数 * 实现首次只渲染可视区域图片，滚动后加载其它图片 */interface LazyLoadOptions {  threshold?: number  rootMargin?: string}/** * 创建IntersectionObserver观察器 * @param callback 回调函数 * @param options 配置选项 * @returns IntersectionObserver实例 */const createObserver = (  callback: (entries: IntersectionObserverEntry[]) => void,  options: LazyLoadOptions = {}): IntersectionObserver => {  const defaultOptions: IntersectionObserverInit = {    threshold: options.threshold ?? 0.1,    rootMargin: options.rootMargin ?? '0px',  }  return new IntersectionObserver(callback, defaultOptions)}/** * 加载图片 * @param img 图片元素 */const loadImage = (img: HTMLImageElement): void => {  if (!img || !img.dataset.src) {    return  }  img.src = img.dataset.src  img.removeAttribute('data-src')}/** * 初始化图片懒加载 * @param selector 图片选择器 * @param options 配置选项 * @returns IntersectionObserver实例 */export const initLazyLoad = (  selector: string = 'img[lazy]',  options: LazyLoadOptions = {}): IntersectionObserver => {  const images = document.querySelectorAll<HTMLImageElement>(selector)    if (images.length === 0) {    console.warn('未找到需要懒加载的图片元素')    return createObserver(() => {})  }  const observer = createObserver((entries) => {    entries.forEach((entry) => {      if (entry.isIntersecting) {        const img = entry.target as HTMLImageElement        loadImage(img)        observer.unobserve(img)      }    })  }, options)  images.forEach((img) => {    if (img.dataset.src) {      observer.observe(img)    }  })  return observer}/** * 手动加载单张图片 * @param img 图片元素或图片元素ID */export const loadSingleImage = (img: HTMLImageElement | string): void => {  const imageElement = typeof img === 'string'     ? document.querySelector<HTMLImageElement>(img)     : img  if (imageElement) {    loadImage(imageElement)  }}/** * 销毁懒加载观察器 * @param observer IntersectionObserver实例 */export const destroyLazyLoad = (observer: IntersectionO

公司目前做的是一款激光雕刻产品，主要用于出口海外，需要开发一个web社区网站用于桌面端模型生成后发布到社区进行分享和交流。说到出海产品，google第三方登录是必须接入的，这两天和后端一起开发完成了此功能，现将流程大概梳理如下。

首先当然是看Google的OAuth 2.0文档，了解其流程和参数。

文档地址：developers.google.com/identity/pr…

第一步：在Google API Console创建 OAuth 2.0 凭据

第二步：接入方式和流程

我们可以看到文档提供了多种应用类型的接入方式，对于web来说主要是红框里的两种。

1、适用于服务器端 Web 应用

我们目前采用的方式，需要后端存储google用户信息。

接入流程：前端唤起 Google 授权 → 前端获取授权码 → 后端用授权码换 token → 验证用户信息并返回自有 token

2、适用于 JavaScript Web 应用

主要前端完成google登录，后端只需要接收前端返回的token进行验证即可。

接入流程：用户点击登录 → 授权 -> 前端直接获得id_token + 用户信息 -> id_token 发给后端验证 → 完成登录。

另外对于前端交互来说均有两种可供选择：

1、popup模式：在当前页面弹窗授权，体验更友好。

2、redirect模式：跳转新页面授权后重定向回来。

popup模式，采用vue3-google-login第三方依赖。需要注意的点:

1、前端测试通过code换取access_token时，postman需要设置请求头“Content-Type: application/x-www-form-urlencoded”，否则会报错“invalid_grant”。

2、Google凭据那里不需要配置重定向URI，且后端用code换取access_token所传的参数redirect_uri应该为“postmessage”，否则会报错“redirect_uri_mismatch”。

3、code不能重复使用。

以下是直接可用的前端代码（popup模式）：

GoogleLoginBtn.vue

<template>  <GoogleLogin    :client-id="googleClientId"    popup-type="CODE"    :callback="handleGoogleSuccess"    :error="handleGoogleError"  >    <img class="google-login-icon" src="@/assets/icons/google.png" alt="google-login">    <button v-if="false" class="google-login-button" type="button">      <span class="google-mark">G</span>      <span class="google-label">{{ buttonLabel }}</span>    </button>  </GoogleLogin></template><script setup lang="ts">import { ElMessage } from 'element-plus'import { GoogleLogin, type CallbackTypes } from 'vue3-google-login'import { useUserStore } from '@/stores/user'interface Props {  buttonLabel?: string}interface Emits {  (e: 'success'): void  (e: 'error'): void}withDefaults(defineProps<Props>(), {  buttonLabel: 'Google 账号快捷登录',})const emit = defineEmits<Emits>()const userStore = useUserStore()const googleClientId = import.meta.env.VITE_GOOGLE_CLIENT_ID as string | undefinedconst handleGoogleSuccess = async (response: CallbackTypes.CodePopupResponse) => {  if (!response?.code) {    ElMessage.error('未获取到 Google 授权码')    emit('error')    return  }  const success = await userStore.userLoginByGoogleCode(response.code)  if (success) {    emit('success')    return  }  emit('error')}const handleGoogleError = (_error: unknown) => {  ElMessage.error('Google 授权失败，请重试')  emit('error')}</script><style scoped lang="scss">.google-login-button {  width: 176px;  height: 44px;  border: 1px solid #d9d9d9;  border-radius: 10px;  background: #fff;  display: flex;  align-items: center;  justify-content: center;  gap: 8px;  cursor: pointer;  transition: all 0.2s ease;}.google-login-button:hover {  border-color: #c7c7c7;  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);  transform: translateY(-1px);}.google-mark {  font-size: 18px;  font-weight: 700;  color: #ea4335;}.google-label {  font-size: 13px;  color: #333;  white-space: nowrap;}.google-login-icon {  width: 48px;  height: 48px;  cursor: pointer;}</style>

redirect模式，期间由于踩了上面提的popup模式的坑，也改过一版redirect模式，没有采用第三方依赖。

以下是直接可用的前端代码（redirect模式）：

GoogleLoginBtn.vue

<template>  <button class="google-login-trigger" type="button" @click="handleGoogleLogin">    <img class="google-login-icon" src="@/assets/icons/google.png" alt="google-login" />    <span class="sr-only">{{ buttonLabel }}</span>  </button></template><script setup lang="ts">import { ElMessage } from 'element-plus'interface Props {  buttonLabel?: string}interface Emits {  (e: 'success'): void  (e: 'error'): void}withDefaults(defineProps<Props>(), {  buttonLabel: 'Google 账号快捷登录',})const emit = defineEmits<Emits>()const GOOGLE_STATE_KEY = 'google_oauth_state'const googleClientId = import.meta.env.VITE_GOOGLE_CLIENT_ID as string | undefinedconst googleRedirectUri = (import.meta.env.VITE_GOOGLE_REDIRECT_URI as string | undefined)  || `${window.location.origin}/front/community/home`const createOAuthState = () => {  if (window.crypto?.randomUUID) {    return window.crypto.randomUUID()  }  return `${Date.now()}_${Math.random().toString(36).slice(2)}`}const handleGoogleLogin = () => {  if (!googleClientId) {    ElMessage.error('未配置 Google Client ID，无法登录')    emit('error')    return  }  const state = createOAuthState()  sessionStorage.setItem(GOOGLE_STATE_KEY, state)  const query = new URLSearchParams({    client_id: googleClientId,    redirect_uri: googleRedirectUri,    response_type: 'code',    scope: 'openid profile email',    state,  })  window.location.assign(`https://accounts.google.com/o/oauth2/v2/auth?${query.toString()}`)}</script><style scoped lang="scss">.google-login-trigger {  display: inline-flex;  align-items: center;  justify-content: center;  border: none;  background: transparent;  padding: 0;  cursor: pointer;}.google-login-icon {  width: 48px;  height: 48px;  cursor: pointer;}.sr-only {  position: absolute;  width: 1px;  height: 1px;  padding: 0;  margin: -1px;  overflow: hidden;  clip: rect(0, 0, 0, 0);  white-space: nowrap;  border: 0;}</style>

App.vue

<template>  <Layout :show-top-bar="showTopBar">    <router-view />  </Layout></template><script setup lang="ts">import Layout from './components/Layout.vue'import { useRoute, useRouter } from 'vue-router'import { computed, onMounted, nextTick, ref, watch } from 'vue'import { useI18n } from 'vue-i18n'import { ElMessage } from 'element-plus'import { useUserStore } from '@/stores/user'const route = useRoute()const router = useRouter()const userStore = useUserStore()const { t } = useI18n()const isProcessingGoogleOAuth = ref(false)const GOOGLE_STATE_KEY = 'google_oauth_state'const showTopBar = computed(() => {  const from = route.query.from as string  localStorage.setItem('from', from || 'community')  return from !== 'pc-home'})const getSingleQueryValue = (value: unknown) => {  if (Array.isArray(value)) {    return value[0] || ''  }  return typeof value === 'string' ? value : ''}const clearGoogleOAuthQuery = async () => {  const nextQuery = { ...route.query }  delete nextQuery.code  delete nextQuery.scope  delete nextQuery.authuser  delete nextQuery.prompt  delete nextQuery.state  delete nextQuery.error  delete nextQuery.error_description  await router.replace({    path: route.path,    query: nextQuery,  })}const processGoogleOAuthCallback = async () => {  const code = getSingleQueryValue(route.query.code)  const oauthError = getSingleQueryValue(route.query.error)  const incomingState = getSingleQueryValue(route.query.state)  if ((!code && !oauthError) || isProcessingGoogleOAuth.value) {    return  }  isProcessingGoogleOAuth.value = true  try {    if (oauthError) {      ElMessage.error(`Google OAuth failed: ${oauthError}`)      return    }    const expectedState = sessionStorage.getItem(GOOGLE_STATE_KEY)    sessionStorage.removeItem(GOOGLE_STATE_KEY)    if (expectedState && expectedState !== incomingState) {      ElMessage.error('Google OAuth state validation failed')      return    }    const success = await userStore.userLoginByGoogleCode(code)    if (success) {      ElMessage.success(t('auth.loginSuccess'))    }  } finally {    await clearGoogleOAuthQuery()    isProcessingGoogleOAuth.value = false  }}watch(  () => route.fullPath,  () => {    void processGoogleOAuthCallback()  },  { immediate: true })onMounted(async () => {  await nextTick()  const from = route.query.from as string  console.log('route.query.from:', from)})</script><style scoped>* {  margin: 0;  padding: 0;  box-sizing: border-box;}body {  font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;  line-height: 1.5;  color: #333;  background-color: #f5f5f5;}.content-placeholder {  text-align: center;  padding: 60px 20px;  color: #666;}.content-placeholder h1 {  font-size: 36px;  margin-bottom: 20px;  color: #333;}</style>