第1章：SEO与性能检测_seo反扒测试-优快云博客

SEO

SEO搜索引擎优化：

我们在日常中如果想要提升自己网站在搜索引擎上面的排名的话，这时候就比不可少的需要用到搜索引擎的规则来提升网站在相关搜索引擎内的自然排名，以便吸引更多的用户访问网站，从而提升网站的曝光度，提升品牌效应。

搜索引擎优化主要有两个手段：

黑帽SEO：通过欺骗技术和滥用搜索算法来推销毫不相关的内容，主要是以商业为主的网页，导致用户在搜索相关内容的时候搜索不到满意的结果。它主要通过：关键字堆叠；隐藏文本（热门的关键词在网站上以小字体显示，或者隐藏，但是这些关键字都是和原网页毫不相关的）；门页（如黄网，小游戏广告等）。
白帽SEO：为用户创建内容，让这些内容易于被搜索引擎机器人检索，并且不会对搜索引擎系统耍花招。这样的做法会让用户的体验更加友好，从这些网站上可以获取合理的流量。但是优化需要较长时间，且不断更新网站的内容和外链。其主要特点是见效慢，稳定性强，可长期发展。

以下为黑帽SEO的实例：

关键字堆叠

隐藏文本

门页网站

提高网站SEO的方法

TDK：可以设置网站的title标题标签；设置网站的description描述标签；设置网站的keywords关键词标签。
提升网站语义化的html标签占比：增强了可读性，结果更加清晰，便于对浏览器，搜索引擎解析。搜索引擎的爬虫也依赖于html标签来确定上下文和各个关键字的权重，利于SEO。如a，p，ul，ol，li，h1等。
SSR：服务端渲染，服务端生成html返回给浏览器渲染，页面的数据可以更好的给搜索引擎录到。

单页面项目为什么不能真正实现SEO优化？

当我们使用vue和react的时候构建出来的项目，往往是进行服务端渲染后的，其SEO的效果差。以下我们将通过vue脚手架，生成一个单页面的项目，进行前后端分离演示一遍。

前端项目创建

vue官方网站：https://cn.vuejs.org/

首先我们要安装vue

npm install -g @vue/cli

然后用vue创建项目

vue create frontend-vue

下载yarn包管理工具(下载速度比npm快)

npm i yarn -g

启动项目

yarn serve

服务端创建

项目初始化，创建package.json文件

yarn init -y

下载express框架

yarn add express@4.18.2

创建app.js并且编写文件

const express = require('express')

const app = express()

app.get('/test',(req,res)=>{
    res.send('成功')
})

app.listen(8081,()=>{
    console.log('server is running at http://127.0.0.1:8081')
}
)

启动服务端

node app.js

前后端联调

在frontend-vue里面的src\components\HelloWorld.vue里面添加以下内容

<template>
  <div class="hello">
    hello
  </div>
</template>

<script setup>
import axios from 'axios'
import { ref } from 'vue'

const data = ref('11')

const resData = await axios('http://127.0.0.1:8081/test')
console.log(resData)
</script>

首先要处理一下跨域问题，安装cors，并且编写代码处理跨域问题

yarn add cors

接下来我们要处理上的警告

通过观看上面的告知，我们直接在app.vue里面的helloworld的外层添加一个<Suspense>标签才可以直接使用await

接下来我们要演示前端的数据没有SEO，也就是没有经过客户端渲染，没有通过服务端放回Html的样式

我们将这一段的response里面的json数据代替原来app.js里面的‘成功’。然后刷新这个页面发现，我们的页面并没有变化。这是我们想到了我们服务端启动的命令是node app.js。这个需要我们更新后再重启。这时候我们就需要用到nodemon

yarn global add nodemon

通过nodemon启动该项目

nodemon app.js

在模板中渲染数据，相当于axios异步请求数据渲染出来的

<template>
  <div class="hello">
    {{data}}
  </div>
</template>

<script setup>
import axios from 'axios'
import { ref } from 'vue'

const data = ref('data')
const resData = await axios('http://127.0.0.1:8081/test')
if (resData.data.code === 0) {
  data.value = resData.data.data
}
</script>

右键显示网页源代码可出现以下页面，此页面并没有网页的文本信息，这个就相当于单页面应用，通过客户端渲染

通过查看源代码我们发现，源代码并没有显示我们页面中实际渲染的内容，这种由浏览器端的js做主导渲染网页内容的方式，我们就称之为客户端渲染。
在客户端生成html，搜索引擎不会等待异步请求到数据返回给到前端页面时再爬取。
SPA项目里面，几乎都是使用 AJAX 获取后端的数据，就会导致我们的页面数据不能被搜索引擎正常收录到。
强交互、不注重SEO的页面，例如：管理、组件库类的项目

SSR服务端渲染实现-静态页面篇

服务端渲染SSR：

由服务端生成html下发到浏览器直接渲染，搜索引擎抓取我们页面内容时就已经能获取到html

SSR实现：

node环境中使用vue template模版：vue/server-renderer包提供rendTOString api 得到需要渲染的html（自己封装复杂），nuxt框架（开箱即用）。
node环境中使用react.jsx模版：ReactDOMServer.renderToString api（自己封装），next框架（开箱即用）。

首先我们需要安装vue，

yarn add vue

写下以下代码，通过解析vue模版生成服务端渲染的静态页面

const express = require('express')
const server = express()
const { createSSRApp } = require('vue')
const { renderToString } = require('vue/server-renderer')
const cors = require('cors')
server.use(cors())

server.get('/', (req, res) => {
  const app = createSSRApp({
    data: () => ({ count: 1 }),
    template: `<button @click="count++">{{ count }}</button>`
  })
  renderToString(app).then((html) => {
    res.send(`
    <!DOCTYPE html>
    <html>
      <head>
        <title>Vue SSR Example</title>
      </head>
      <body>
        <div id="app">${html}</div>
      </body>
    </html>
    `)
  })
})

server.listen(8081, () => {
  console.log('服务启动在：http://127.0.0.1:8081')
})

解析：

createSSRApp：创建一个服务端的vue应用实例

renderToString：接收一个 Vue 应用实例作为参数，返回 promise，resolve 时得到应用渲染的 html 内容

此时button点击之后数字没有递增，因为我们没有在浏览器中加载 Vue，html在客户端是完全静态的

SSR服务端渲染-逻辑交互篇

// 应用的创建逻辑单独抽离一个app.js
// app.js
import { createSSRApp } from 'vue'
export function createApp() {
  return createSSRApp({
    data: () => ({ count: 1 }),
    template: `<button @click="count++">{{ count }}</button>`
  })
}

// 重写服务端代码
// server.js
import express from 'express'
const app = express()
import { createApp } from './app.js'
import { renderToString } from 'vue/server-renderer'
import cors from 'cors'
app.use(cors())

app.get('/', (req, res) => {
  const app = createApp()
  renderToString(app).then((html) => {
    res.send(`
    <!DOCTYPE html>
    <html>
      <head>
        <title>Vue SSR Example</title>
        <script type="importmap">
          {
            "imports": {
              "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
            }
          }
        </script>
        <script type="module" src="/client.js"></script>
      </head>
      <body>
        <div id="app">${html}</div>
      </body>
    </html>
    `)
  })
})
app.use(express.static('.'));
app.listen(8081, () => {
  console.log('服务启动在：http://127.0.0.1:8081')
})

// 创建客户端代码
// client.js
import { createApp } from './app.js';
createApp().mount('#app');

从上面的例子到一个生产上使用的 SSR 应用还需要很多工作，例如：使用webpack完成客户端和服务器构建

服务端渲染需要考虑的点：

不像客户端渲染的SPA部署在阿里云静态文件服务器上就能访问，需要有服务器运行node的环境
更高的服务器负载，因此服务器的配置要准备好，以及合理的缓存策略

web性能检测和优化方案的利器-Lighthouse

关于性能会遇到以下的问题：

1.工作中对于项目的前端性能优化没有头绪，不知道从哪里下手（不知道影响性能有哪些方面）

2.性能优化已经的手段已经做了很多了，但是性能还是没有提高多少（不能找到主要原因对症下药）

3.前端的页面性能上线之后是没问题的，但是运行一段时间后首屏加载速度变慢了（其他的原因导致页面打开慢，如何甩锅）

性能Performance

Metrics：衡量的标准

- First Contentful Paint（FCP）：从页面开始加载到页面内容的任何部分呈现在屏幕上的时间
 
 - Speed Index(SI)：从页面开始加载到视觉显示内容的时间
 
 - Largest Contentful Paint(LCP)：可见的最大图像或文本块的渲染时间，相对于页面首次开始加载的时间
 
 - Cumulative Layout Shift(CLS)：累计布局偏移值
 
 - Total Blocking Time (TBT)：FCP到TTI之间,主线程被阻塞的时间
 
 - Time To Interactive (TTI)：页面资源加载成功并能响应用户交互的时间

访问无障碍（Accessibility）