网站的性能对于用户的体验以及搜索引擎排名非常重要。根据谷歌的一项研究，超过三秒才能加载的网站会让53%的移动用户放弃浏览，而对于产品相关的网站，如果页面加载速度慢，每慢一秒就会损失5%的用户转化率。可见，网页的性能优化非常重要。在本期视频中，我们将介绍一些优化网站性能的方法。

压缩文件

第一种优化方式是压缩文件。对于 HTML、CSS 和 JavaScript 这些源代码来说，它们包含大量的空格和不必要的缩进，会占据文件空间。而网络传输受到带宽的影响，可能会使得大文件加载很慢。对这些文件进行压缩之后就能够减少文件大小，提高加载速度。你可以使用一些库来压缩代码，例如使用 UglifyJS 用于压缩 JavaScript，CSS Nano 来压缩 CSS，HTML Minifier 来压缩 HTML 文件。它们可以把源代码中的空白去掉，还会把代码进行转义，以最简约的形式呈现。这种形式可能不易阅读，但是能够保证代码能够正常执行。

另外一种压缩方式是利用服务器的功能，开启 Gzip。对于 Apache 或者 Nginx 都有对应的配置来开启。

压缩图片

第二种方式是压缩图片。可以利用一些图片压缩工具，比如说 ImageOptim、TinyPNG 等等。这些工具都比较简单，直接打开之后把图片拖进去，就能够自动进行压缩。另外，对于图片文件的选择，我们一般使用 JPG 格式的图片展示照片和比较复杂的图片，PNG 用于展示带有透明度的图片，SVG 用于加载矢量的图形。

浏览器缓存

第三种优化方式是利用浏览器的缓存，避免反复请求页面。可以把不常变化的页面内容缓存起来，每次浏览器去取本地的就可以了。比如说可以把一些图片样式和 JavaScript 代码缓存起来。这个能够极大地减少数据的传输。这个可以通过后端代码来设置，或者也可以通过 Apache 或者 Nginx 服务器进行设置。

CDN

第四种方式是利用 CDN。对于一些云厂商都提供了 CDN 服务，它会把我们的网站分发到全球不同的地理位置，然后用户在访问的时候会根据他当时的位置，取最近的服务器来访问我们的网站。当然这些网站会缓存在 CDN 服务器上，在修改之后也记得要去刷新缓存。

Deffered 和 Async 的 JavaScript

第五种是使用 async 和 defer，对于一些不太重要的 JavaScript，可以对它们进行延迟加载或者异步加载，先保证HTML DOM 的渲染。async 会在 js 下载完成之后执行，而 defer 会在 HTML 解析完成之后执行。普通的 script 则会在解析到它时立即加载并等待加载完成之后执行。

CSS 预加载（关键 CSS）

第六种是使用 CSS 资源预加载，先加载最关键的 CSS，之后再延后加载不关键的 CSS，可以通过预加载来实现。

图片懒加载

第七种方式是用图片懒加载。当图片不在屏幕的时候，那么它就先不去加载。当用户滚动到一定的距离之后，再去加载图片。也就是 lazy loading。可以通过 image 标签的 loading 属性来实现。

提高代码效率

第八种方法就是优化代码的效率，使用良好的数据结构和算法，来减少程序的运行对内存的占用。

好了，这些就是网站性能优化的一些常见方法。当然，还有很多其他的方法可以自己去研究。你学会了吗？如果有帮助请三连并关注，想学更多的开发知识，可以在评论区留言，感谢观看！

滑动窗口是一种编程技巧，用于把多层嵌套循环平铺成单层循环，来减少时间复杂度。几年前微软中国曾经考察过这项能力。那么这个视频我们来看一下滑动窗口的实现方法。

假设有一个题目：

给定一个数组，有 5 个元素，分别是 [3, 2, -4, 6, 1]，对于每 3 个连续的元素，求它们最大的和。

例如，对于这个数组，前 3 个元素 3, 2, -4, 和为 1，后面 2, -4, 6 和为 4，再后面 -4, 6, 1 和为 3，因此最大的和是 4。

如果使用最简单的暴力解题方式，我们可能会用双层循环：

• 从第一个元素开始遍历，直到倒数第 3 个。
• 然后再内层循环中，加上后面 2 个元素的值。
• 之后比对最大的和。循环结束之后就得到了结果。

function burteForce(arr, windowSize) {
  if (arr.length < windowSize) {
    return null;
  }

  let maxSum = 0;
  for (let i = 0; i < arr.length - windowSize + 1; i++) {
    let tempSum = 0;
    for (let j = 0; j < windowSize; j++) {
      tempSum += arr[i + j];
    }
    maxSum = Math.max(maxSum, tempSum);
  }

  return maxSum;
}

这样的效率会比较低，因为对于每个元素，都要在内层循环中循环 3 次，如果计算更多的元素，那么就要循环更多次。

使用滑动窗口算法可以提高速度，我们用 k 表示要计算的连续的元素数量，例如这个示例里边 k = 3，它的原理是：

• 先计算前 k 个连续的元素的和。
• 把和保存到一个变量 maxSum 当前最大值中。再定义一个变量 tempSum 保存后面计算 k 个元素的和，用于和当前最大值进行比对。
• 之后，我们把 k 个元素当成可视区域窗口，让它整体向右移动 1 位，来计算后面 k 个元素的和。
• 这样计算的话，就是减掉之前窗口所在位置中第 1 个元素的值，再加上窗口新位置中，最后一个元素的值。
• 接下来比对新的窗口的和 tempSum 和 maxSum，如果 tempSum 大于 maxSum 就更新当前最大值。
• 重复第 3 步和后面的操作，直到达到数组的末尾就找到了最大的和。

这个是 JavaScript 代码实现：

function slidingWindow(arr, windowSize) {
  if (arr.length < windowSize) {
    return null;
  }

  let maxSum = 0;
  let tempSum = 0;

  for (let i = 0; i < windowSize; i++) {
    maxSum += arr[i];
  }

  tempSum = maxSum;
  for (let i = windowSize; i < arr.length; i++) {
    tempSum = tempSum - arr[i - windowSize] + arr[i];
    maxSum = Math.max(maxSum, tempSum);
  }

  return maxSum;
}

小结

好了，这个就是使用滑动窗口解题的过程，你学会了吗？如果有帮助请三连并关注，想学更多的开发知识，可以在评论区留言，感谢观看！

上期视频我们添加了 Express.js 结合 Notion API 的后端服务，这一期我们看一下如和把 Vue 3.0 的前端应用和后端的 Express.js API 连接起来。

配置 Proxy

我们的 Express server 部署在 3001 端口，而前端应用开发时的服务器是在 3000 端口，在浏览器访问的时候会有跨域问题，那么我们可以通过 Vite 2.0 的配置文件，添加一条 Proxy 代理配置，来让 Vite 的开发服务器帮我们转发请求，以避免跨域。

1. 打开 vite.config.js 配置文件，在 plugins 的下方定义一个 server 属性，传递给它一个对象配置：

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      "/api": {
        target: "http://localhost:3001",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
});

在 server 配置对象中：

• 配置 proxy 对象，设置 key 为 "/api" ，这样所有对于 /api 的请求都会交由这个代理去处理。
• 配置 changeOrigin 为 true，发送请求的时候修改请求的 origin，避免跨域。
• 配置 rewrite，把实际请求的 /api 这一段去掉，因为我们后端的服务 URL 中，没有 /api 这一段，它只是方便前端区分是否为调用后端的 URL。

现在服务代理就配置完了，我们尝试一下加载留言列表。

加载留言列表

我们需要在应用一加载就去请求留言列表并展示，所以在我们的应用入口组件中，需要使用生命周期回调，在里边发送请求加载留言列表数据。

1. 打开 CommentsApp.vue 组件，把之前定义的 comments ref 的示例数据删除，只保留一个空数组：

const comments = ref([]);

2. 定义一个异步函数 getAllComments ，请求后端数据，并把结果放到 comments ref 中：

async function getAllComments() {
  const res = await fetch("/api/comments");
  comments.value = await res.json();
}

3. 使用 onMounted() 生命周期回调，在组件加载完成之后，调用 getAllComments() 请求留言列表数据，记得导入进来：

import { ref, onMounted } from "vue";
onMounted(() => {
  getAllComments();
});

4. 保存一下，先在一个命令行窗口中运行 node server，启动 express 后端服务

node server

5. 再运行 yarn dev，访问 http://localhost:3000，如果能加载到留言列表就说明成功了。

接下来，我们看一下发表留言。

发表留言和回复

发表留言和回复的事件处理逻辑保持不变，但是现在需要调用后端服务，添加到 Notion 中。那么还是在 CommentsApp.vue 文件里，找到之前定义的 addNewComment 事件处理函数，在里边我们调用 API 把留言内容发送给后台：

const addNewComment = async (content, replyTo) => {
  await fetch(`/api/comments`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      content,
      ...(replyTo && { replyTo }),
    }),
  });

  // 新增完评论后，自动获取新的评论列表
  // Notion API 有延迟，在添加完 page 之后，需要过一会才能获取到新的评论列表
  setTimeout(async () => {
    await getAllComments();
  }, 1000);
};

这个函数我们可以让发表留言和回复共用，一并处理，因为我们不需要手动维护 comments 这个列表数组了，只是发送数据给后台，而唯一不同的地方就是 body 里，是否有 replyTo 属性，那么我们可以删除之前的 addReply() 函数，给 addNewComment 函数再加上 replyTo 参数，它接收要回复的留言的 id，再给它加上 async 关键字，因为它要发送网络请求。

• 删除里边手动维护 comments 数组的代码。这时，constructNewComment() 也没用了，一并删除。
• 在函数里，使用 fetch() 发送一个 post 请求。
• 设置 content-type header 为 application/json，这一步是必须的，这样 express 才能把请求 body 转换为 json 格式。
• body 里调用 JSON.toString() 把一个 JavaScript 对象转换为 JSON 字符串，里边同样用到了扩展运算符技巧，根据 replyTo 是否有值，来决定是否添加 replyTo 属性。
• 后面，我们使用 setTimeout() 再请求一次获取留言列表的 API，来刷新列表。

接着把 ReplyBox 标签中，对 addReply 的调用改成 addNewComment：

<ReplyBox @submit="addNewComment($event, comment.id)" />

Notion API 的问题

这里之所以用了一个 setTimeout() 是因为 Notion API 添加数据似乎并不是实时的，如果在创建一个 page 之后，立即获取 page，那么会获取不到它，只有在等待 700 毫秒或以上才能访问到，这个得看网络情况，后面我们再对这种情况优化一下，现在先实现主要功能。 ​

好了，现在我们发表留言和回复的接口也连接上了，打开咱们的页面，编写一些示例的留言，发表一下看看，稍等一会，能加到下面的列表中，就算成功了，如果好久没显示，可以把 setTimeout() 里的延迟调大一些。再接着试试回复，编写示例的回复并提交，稍等一会能加载出来，也就算是成功了。 ​

好了，这期视频我们连接了 Vue 3.0 的前端应用到我们的 Express 后端接口了，基本上实现了一个留言板的功能，后面看情况需要对它进行优化。Notion API 现在还在 Beta 阶段，有些不稳定，所以现在适合尝鲜，等它稳定了再开发一些比较重要的 APP。 ​

这个就是 Vue 3.0 与 Express.js 前后端交互的方法，你学会了吗？如果有帮助请三连，想学更多有用的前端开发知识，请关注峰华前端工程师，感谢观看！

Vue 是一个渐进式的 UI 框架。它改变了传统的网页开发中需要使用 JS 手动操作 DOM 的开发方式。

const ele = document.querySelector("...");
ele.value = "...";

而是以组件化的形式管理页面元素的代码。这样，每个组件就形成了特殊的、类似于自定义的 HTML 元素。我们可以给它们添加独特的功能和样式，并管理数据。

<template>
  <h1>
    <a :href="blog.link">{{ blog.title }}</a>
  </h1>
  <article>
    <div>{{ blog.content }}</div>
  </article>
</template>

<script setup>
import { ref } from "vue";

const blog = ref({
  title: "Vue 3 基础教程",
  content: "Vue 3 在 Vue 2 的基础上发生了重大变化",
  link: "/vue-3-tutorial",
});
</script>

<style scoped></style>

每个组件的代码都是独立且隔离的，可以防止与其他元素的数据冲突。

<template></template>

<script setup>
blogs; // X 不能访问
</script>

<style scoped></style>

Vue 是由华人尤雨溪主导开发的，符合国人的开发习惯。现在无论是个人、中小企业还是大企业，都有 Vue 框架的影子，而它们招聘的前端工程师岗位中大部分都是 Vue 开发。这个视频我们来快速的学习一下如何使用 Vue JS 进行开发，并使用 Vite 脚手架创建项目，让你能在最短时间内上手。

创建 vue 项目(vite)

npm init vue@latest

预览项目

yarn install yarn dev

组件结构

template、script、style

为模板提供数据

展示一篇博客详情，使用 ref 定义对象，然后再 template 展示。

• 标签之间 {{}}
• HTML 属性 v-bind

<template>
  <h1>
    <a :href="blog.link">{{ blog.title }}</a>
  </h1>
  <article>
    <div>{{ blog.content }}</div>
  </article>
</template>

<script setup>
import { ref } from "vue";

const blog = ref({
  title: "Vue 3 基础教程",
  content: "Vue 3 在 Vue 2 的基础上发生了重大变化",
  link: "/vue-3-tutorial",
});
</script>

<style scoped></style>

条件渲染

如果内容长度大于 100，用 v-if 展示阅读原文按钮

<article>
  <div>{{ blog.content.slice(0, 100) }}</div>
  <footer v-if="blog.content.length > 100">
    <button>阅读原文</button>
  </footer>
  </article>

切换 blog.content.length > 10 看效果：

<article>
    <div>{{ blog.content }}</div>
    <footer v-if="blog.content.length > 10">
      <button>阅读原文</button>
    </footer>
  </article>

渲染列表

把博客 ref 改成数组，渲染多个博客

<template>
  <div v-for="blog in blogs">
    <h1>
      <a :href="blog.link">{{ blog.title }}</a>
    </h1>
    <article>
      <div>{{ blog.content.slice(0, 100) }}</div>
      <footer v-if="blog.content.length > 100">
        <button>阅读原文</button>
      </footer>
    </article>
  </div>
</template>

<script setup>
import { ref } from "vue";

const blogs = ref([
  {
    id: 1,
    title: "Vue 3 基础教程",
    content: "Vue 3 在 Vue 2 的基础上发生了重大变化",
    link: "/vue-3-tutorial",
  },
  {
    id: 2,
    title: "React 18 基础教程",
    content: "React 18 在 React 17 的基础上发生了重大变化",
    link: "/react-18-tutorial",
  },
  {
    id: 3,
    title: "JavaScript 基础教程",
    content: "ECMAScript 2015 在 ECMAScript 5 的基础上发生了重大变化",
    link: "/javascript-tutorial",
  },
]);
</script>

<style scoped></style>

计算属性

使用计算属性显示文章数量

<template>
  <!-- ... -->
  <h3>总共 {{ total }} 篇</h3>
</template>
<script setup>
// ...
const total = computed(() => blogs.value.length);
</script>

处理事件

可以隐藏总页数，使用事件和函数，处理按钮事件。

<template>
  <!-- .. -->
  <h3 v-if="showTotal">总共 {{ total }} 篇</h3>
  <button @click="toggleTotal">{{ showTotal ? "隐藏" : "显示" }}总数</button>
</template>

<script setup>
import { computed, ref } from "vue";

// ...

const showTotal = ref(true);

function toggleTotal() {
  showTotal.value = !showTotal.value;
}
</script>

<style scoped></style>

处理表单

v-model 绑定响应性数据，同步用户输入和 vue 状态

<template>
  <form @submit.prevent="addPost">
    <label for="blogTitle">博客标题</label>
    <input type="text" id="blogTitle" v-model="blogForm.title" />
    <label for="content">内容</label>
    <textarea
      id="content"
      cols="30"
      rows="10"
      v-model="blogForm.content"
    ></textarea>
    <label for="link">链接</label>
    <input type="text" id="link" v-model="blogForm.link" />
    <button type="submit">提交</button>
  </form>
</template>

<script setup>
import { computed, ref } from "vue";

const initialBlogForm = {
  title: "",
  content: "",
  link: "",
};
const blogForm = ref({
  ...initialBlogForm,
});

function addPost() {
  blogs.value.push({
    id: blogs.length + 1,
    ...blogForm.value,
  });
  blogForm.value = { ...initialBlogForm };
}
</script>

创建组件并定义属性

创建博客组件，把显示博客列表项放到单独的组件中。

<template>
  <div>
    <h1>
      <a :href="link">{{ title }}</a>
    </h1>
    <article>
      <div>{{ content.slice(0, 100) }}</div>
      <footer v-if="content.length > 100">
        <button>阅读原文</button>
      </footer>
    </article>
  </div>
</template>
<script setup>
defineProps(["title", "content", "link"]);
</script>

传递属性

给博客列表项组件传递数据。v-bind 传递所有

<template>
  <BlogPost v-for="blog in blogs" v-bind="blog" />
  <!-- ... -->
</template>

<script setup>
import BlogPost from "./components/BlogPost.vue";
</script>

slot

显示分享到微信按钮

BlogPost.vue

<template>
  <div>
    <!-- ... -->
    <slot></slot>
  </div>
</template>

App.vue

<BlogPost v-for="blog in blogs" v-bind="blog">
    <button>分享到微信</button>
  </BlogPost>

生命周期

模拟远程加载阅读数

BlogPost.vue

<template>
  <div>
    <article>
      <p>阅读量：{{ viewCount }}</p>
      <footer v-if="content.length > 100">
        <button>阅读原文</button>
      </footer>
    </article>
  </div>
</template>
<script setup>
const viewCount = ref(0);
onMounted(() => {
  setTimeout(() => {
    viewCount.value = 1000000;
  }, 1000);
});
</script>

自定义事件

在博客列表项里触发标题点击事件，并在 app.vue 中处理

BlogPost.vue

<template>
  <div>
    <h1>
      <a :href="link" @click.prevent="$emit('titleClick', title)">{{
        title
      }}</a>
    </h1>
</template>
<script setup>
defineEmits(["titleClick"]);
</script>

App.vue

<template>
  <BlogPost v-for="blog in blogs" v-bind="blog" @titleClick="handleTitleClick">
    <button>分享到微信</button>
  </BlogPost>
</template>

<script setup>
function handleTitleClick(title) {
  console.log(title);
}
</script>

小结

好了，这个就是 Vue 的基础语法教程，你学会了吗？如果有帮助请三连并关注，想学更多的开发知识，可以在评论区留言，感谢观看！