docs📝:

src/about/about-me.md

@@ -16,5 +16,5 @@ order: 1
 
 :::
 
-<PDF url="https://static.xinyang424.com/%E6%9D%A8%E6%96%B0-%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91-3%E5%B9%B4.pdf" :zoom="900" height="600px"/>
+<PDF url="https://static.xinyang424.com/%E6%9D%A8%E6%96%B0-Web%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91-3%E5%B9%B4.pdf" :zoom="900" height="600px"/>
 

src/about/about-website.md

@@ -7,32 +7,50 @@ category:
 order: 2
 ---
 
+:::note
+  本站将会在服务器到期后停止运行，后续站长将会在语雀里构建我的数字花园，本站内容可能后续更新不积极。
+:::
+
 ## 关于本站初衷
 
-  本站搭建个人的博客包括了如前端、后端、运维、八股文笔记、算法、常用英语命名单词、bug记录、软件教程等方向的知识，若模块不全，请耐心等待站长更新。
+
 
   积累本就是一个长久的过程，站长有时候也未能及时更新技术博客但并不是没有新技术的研究或者笔记，还请耐心等待站长更新。
 
   本站持着简约至上，分享为主的想法，所以整个网站不会有太花里胡哨的动画和炫酷颜色。将主要维护重心放在内容质量上，通过增加更多干货学到更多知识才是重点。
 
-  若本站存在不完善地方或有错误的地方，还请多多指教，你可以下方评论区登录自己的GitHub账号留下你的评论，站长收到会一定会及时处理。
+  若本站存在不完善地方或有错误的地方，还请多多指教，你可以下方评论区登录自己的 GitHub 账号留下你的评论，站长收到会一定会及时处理。
 
 
 
 ## 关于本站技术
 
-  本网站采用框架是vuepress的主题之一，更多有关vuepress，[点击此链接](https://vuepress.github.io/zh/)，初次之外，若默认主题不满足开发者需求，开发者可仔细查阅文档构建自己喜欢的主题。
+  本网站采用框架是 Vuepress 的主题之一，更多有关 Vuepress，[点击此链接](https://vuepress.github.io/zh/)，初次之外，若默认主题不满足开发者需求，开发者可仔细查阅文档构建自己喜欢的主题。
 
-  除了vuepress外，还有vitepress，vitepress不管是构建速度还是打包速度都是比vuepress要快的，但是vuepress社区更强大一些，社区内有很多可开箱即用的主题，若想自己设计主题，或许vitepress更适合你。
+  除了 Vuepress 外，还有 Vitepress，Vitepress 基于 Vite 不管是构建速度还是打包速度都是比 Vuepress 要快的，但是 Vuepress 社区更强大一些，社区内有很多可开箱即用的主题，若想自己设计主题，或许 Vitepress更适合你。
 
 ## 关于本站部署
 
-  本网站部署成本接近0成本，部署拥有以下特点：
-1. 采用GitHub Actions实现自动推送代码后打包，并推送分支到[此代码仓库](https://github.com/xinyang424/xinyang424.github.io)。
-2. 推送到上述代码仓库后，会自动触发GitHub Action自动打包，打包后的代码会自动利用GitHub Pages重新部署，通过GitHub部署的可点击此链接访问[https://xinyang424.github.io/](https://xinyang424.github.io/)。
-3. 除了GitHub Pages部署之外，Vercel也会监听此代码的推送记录，若main分支有推送记录，会自动触发重新部署，但是由于默认部署域名在国内用户若不科学上网则访问不了，这里我租用了国内域名填写对应DNS服务器即可实现访问Vercel部署的地址。即[https://blog.coder-new.cn/](https://blog.coder-new.cn/)。Vercel为个人用户提供了免费的构建流量和访问流量，搭建个人博客近乎零成本。
-4. 除了Vercel和GitHub Pages，还有Netlify可以免费部署。
-5. 本站用的默认文档搜索工具，当然还可以使用algolia提供的dosearch。
+  本网站部署成本接近 0 成本，主要方式如下：  
+1. 采用 GitHub Actions 和 Github Pages 实现自动推送代码后打包。
+   推送代码后触发 GitHub Actions 自动打包构建，打包后的代码将推送到[此代码仓库](https://github.com/xinyang424/xinyang424.github.io)，然后 Github Pages 会将此放库代码进行部署，改部署方式可通过 <https://xinyang424.github.io/> 进行访问。
+2. 采用 Vercel 进行自动化打包部署。首先 Vercel 监听到你的代码推送记录后，可以自动进行打包和构建，默认打包后可以通过 <https://blog-git-main-xinyang424s-projects.vercel.app/> 这个链接进行访问，但是由于此链接如果不使用科学上网工具是无法访问的。这里我利用了一个国内域名通过配置 DNS 就可以进行访问了。通过 Vercel 部署方式并使用自定义域名访问链接是：<https://blog.coder-new.cn/>。
+
+&emsp;&emsp;以上两种方案，虽然 0 成本，但是由于服务器并不在国内，就会导致访问很慢或者访问不了，而现在如果你通过 <https://xinyang424.com> 访问本站的话，就是使用了在成都的服务器，通过配置 Nginx + Centos 进行实现的。
+
+该技术实现特点如下：
+1. 利用 OpenSSH 连接 Centos 服务器，通过 Git 克隆或拉取 <https://github.com/xinyang424/xinyang424.github.io> 此仓库代码的静态资源。
+2. Nginx 实现了 https访问，并支持 http 重定向至 https，即你访问 <http://xinyang424.com> 是会重定向到 <https://xinyang424.com> 的。
+3. Nginx 还实现了虚拟主机，你可以通过 <https://static.xinyang424.com/%E6%9D%A8%E6%96%B0-Web%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91-3%E5%B9%B4.pdf> 访问到站长的简历。
+
+
+
+&emsp;&emsp;除了 Vercel 和 GitHub Pages 可以实现 0 成本部署外，你还可以利用 Gitee 或 Netlify 来实现免费部署。
+
+本站支持文档搜索，当然也可以使用 algolia 的 dosearch，但是没有使用 dosearch。
+
+本站也支持评论功能，现配置的是 Github 的 Giscus，当然也还有 Waline 可以选择。
+
 
 
 

src/interview/html.md

@@ -0,0 +1,86 @@
+---
+title: HTML
+date: 2023-06-28
+---
+
+## 无样式内容闪烁（FOUC）Flash of Unstyle Content
+
+  出现FOUC的原因是CSS文件中使用了`@import`关键字，在CSS文件中使用`@import`关键字会等到文档加载后再加载CSS样式表。因此，在页面DOM加载完成到CSS导入完成之间会有一段时间页面上内容是没有样式的。
+
+  解决办法：使用link标签加载CSS样式文件，因为link是顺序加载的，这样页面会等到CSS下载完后再下载HTML文件，这样先布局好，就不会出现FOUC问题。
+
+
+## title 和 h1 的区别
+
+  title 属性没有明确意义只表示是个标题，h1 则表示层次明确的标题，对页面信息的抓取也有很大的影响。
+
+## cookies sessionStorage localStorage 的区别
+
+  SessionStorage， LocalStorage， Cookie 这三者都可以被用来在浏览器端存储数据，而且都是字符串类型的键值对。区别在于前两者属于 HTML5 WebStorage，创建它们的目的便于客户端存储数据。而 cookie 是网站为了标示用户身份而储存在用户本地终端上的数据（通常经过加密）。cookie 数据始终在同源（协议、主机、端口相同）的 http 请求中携带（即使不需要），会在浏览器和服务器间来回传递。
+
+**存储大小：**\
+1. cookie 数据大小不超过 4k。
+2. sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大。
+
+**有效时间：**\
+1. localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据。
+2. sessionStorage 数据再页面会话结束时会被请求。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面时会在顶级浏览上下文中初始化一个新的会话。
+3. cookie 设置的 cookie 过期时间之前一直有效，即时浏览器关闭
+
+**作用域：**\
+1. sessionStorage 只在同源的同窗口（或标签页）中共享数据，也就是只在当前会话中共享。
+2. localStorage 在所有同源窗口中都是共享的。
+3. cookie 在所有同源窗口中都是共享的。
+
+## 选择器的优先级
+
+
+
+!important > 行内样式 > id选择器 > class选择器 > 标签选择器 > 通配符 > 继承
+
+在选择器相同的情况下，如同为id选择器，越靠下写的样式越比靠上写的样式权重大。
+
+
+## 如何进行网站优化
+
+`content` 方面：
+1. 减少http请求：合并文件、css精灵、inline Image
+2. 减少DNS查询：DNS缓存、将资源分布到恰当数量的主机名
+3. 减少DOM元素数量
+
+`Server`方面：
+1. 使用CDN加速
+2. 配置ETag
+3. 对组件使用Gzip压缩
+
+`Cookie`方面：
+1. 减少cookie大小
+
+`css`方面
+
+1、 将样式表放到页面顶部
+
+2、 不使用CSS表达式
+
+3、 使用<link>不使用@import
+
+`Javascript`方面
+
+1、 将脚本放到页面底部
+
+2、 将`javascript`和`css`从外部引入
+
+3、 压缩`javascript`和`css`
+
+4、 删除不需要的脚本
+
+5、 减少`DOM`访问
+
+图片方面
+
+1、 优化图片：根据实际颜色需要选择色深、压缩
+
+2、 优化`css`精灵
+
+3、 不要在`HTML`中拉伸图片
+

src/interview/npm-run-xxx.md

@@ -44,7 +44,6 @@ category:
 ### .bin文件夹下的软链接类型有哪些？
 `vite`——unit平台、`vite.cmd`——cmd窗口、`vite.ps1`——powerShell
 
-### 
 
 
 ### vue-cli-service的软链接实际执行的是什么？为什么不能直接执行？