HTML

服务端渲染和客户端渲染的区别？

客户端渲染：

页面的渲染工作都是由浏览器来完成的，服务器只是负责提供数据。
客户端渲染能尽早的把页面展示给用户，用户体验好
不容易被爬虫爬取数据，同时也无法被搜索引擎搜索到

服务器渲染：

页面渲染的工作都是由服务端来完成的，数据也是由服务端提供的，浏览器只负责展示页面内容
容易被爬虫爬取数据，同时能被搜索引擎搜索到，能在搜索引擎中向用户展示数据

那是用客户端渲染好还是服务器渲染好呢？

其实一般的页面中，两种渲染是相结合着使用的，因为我们会有些数据不想过早的传过来，想要被用到时再去拿数据，同时也不想被爬虫那么轻易的爬取，而且也不需要被搜索引擎搜索并展示，我们就可以用客户端渲染，例如我们本文中提到的商品评论信息。

但有时，我们想让我们网页的数据被搜索引擎搜索到，能让用户在使用搜索引擎的时候，查找到我们的数据信息，我们就可以使用服务器渲染。例如我们本文提到的电商网站的商品的基本信息。

CSS

改变小图标的颜色，hover时颜色变深

思路：使用活跃色的图片素材，给它一个灰色的滤镜。hover的时候取消这个滤镜，还原活跃色。filter:grayscale(x%):将图像转换为灰度图
示例：

js 复制代码

img {  
filter: grayscale(100%);  
opacity: 0.6;  
}

img:hover {  
filter: none;  
opacity: 1;  
}

效果：

圣杯布局、双飞翼布局

css预处理器：less，scss

介绍

less

变量（Variables）：你可以使用@符号来定义和引用变量。
嵌套（Nesting）：你可以在Less中使用嵌套规则来组织样式规则。
运算（Operations）：Less允许你在样式中执行简单的算术运算，如加法、减法、乘法和除法。
导入（Import）：你可以使用@import指令将其他的Less文件导入到当前文件中。这样可以将样式分为多个文件，并在需要时将它们合并到一个文件中。

scss

变量（Variables）：SCSS引入了变量的概念，你可以使用$符号定义变量，并在整个样式表中引用它们。
嵌套（Nesting）：SCSS允许在样式规则中使用嵌套的语法，以表示样式的层次结构和关系。
继承（Inheritance）：SCSS允许通过@extend关键字实现样式的继承。这样可以减少重复的代码。
运算（Operations）：SCSS也支持在样式中执行算术运算。你可以在属性值中使用算术表达式，并使用+、-、*和/等运算符。
导入（Import）：你可以使用@import指令将其他的SCSS文件导入到当前文件中。这样可以将样式分为多个文件，并在需要时将它们合并到一个文件中。

区别

语法：SCSS是基于CSS的超集，它使用和CSS相同的语法，并通过添加一些新的功能和规则来扩展CSS。因此，任何有效的CSS样式表都是有效的SCSS样式表。相比之下，Less引入了一些新的语法元素，例如使用@符号定义变量和混合等。
处理器：SCSS使用的是Sass（Syntactically Awesome Style Sheets）处理器，它在Sass语法的基础上添加了CSS兼容性。Sass提供了两种语法格式：SCSS和Sass（缩进风格）。而Less则使用Less处理器，它的语法更接近于常规的CSS。
嵌套规则：SCSS和Less都支持嵌套规则，允许在父选择器下编写样式规则。然而，它们的嵌套语法略有不同。在SCSS中，使用大括号（{}）来表示嵌套，类似于CSS。而在Less中，使用小括号（()）来表示嵌套。
变量符号：在SCSS中，变量使用 $符号进行定义和引用，例如$ primary-color: #ff0000;。而在Less中，变量使用@符号，例如@primary-color: #ff0000;。
混合（Mixins）：SCSS和Less都支持混合的概念，可以将一组样式规则集合起来并在需要时重用。在SCSS中，使用@mixin关键字定义混合，并使用@include关键字引用它。而在Less中，使用.mixin-name()定义混合，并使用.mixin-name;引用它。
继承（Inheritance）：SCSS和Less都支持样式的继承。在SCSS中，使用@extend关键字来实现样式的继承。而在Less中，使用&符号来表示父选择器，实现样式的继承。

JS

从url中获取指定参数

js 复制代码

function getQueryString(name) {
  const url_string = "https://www.baidu.com/t.html?name=mick&age=20"; // window.location.href
  const url = new URL(url_string);
  return url.searchParams.get(name);
}

console.log(getQueryString('name')) // mick

其他

假如说接口响应拦截错误会有全局统一的弹出错误，那如果有些路由他是不需要这个弹出错误的，那么该怎么实现？

axios 的入参扩展一个自定义参数(skipErrorHandler), 在响应拦截器中拿到这个参数, true表示忽略统一的错误处理逻辑, false反之

npm run dev是如何将本地资源打包编译运行在浏览器上的

执行npm run dev命令后会执行一个脚本使用构建工具对项目文件进行打包编译并输出到特定的目录然后启动了本地开发服务器并监听本地主机和端口号浏览器输入http://localhost:xxxx后会发送请求访问本地开发服务器的资源服务器收到请求就会返回对应的html文件

网络和设备硬件均一致的情况导致首页白屏时间不一致的原因

原因：

浏览器差异：不同的浏览器或浏览器版本对网页的渲染速度可能有所不同。
缓存策略：浏览器的缓存策略可能导致加载速度的差异。例如，如果某个浏览器缓存了某些资源，而其他浏览器没有，那么加载速度就会有所不同。
JavaScript执行：JavaScript的执行速度和效率可能因浏览器和版本的不同而有所差异，从而影响页面的渲染时间。
服务器响应：服务器的响应速度、带宽、负载等因素也会影响页面的加载时间。
第三方服务：如果首页依赖了第三方服务（如CDN、字体、统计工具等），这些服务的响应速度和稳定性也会影响首页的加载时间。
DNS解析：DNS解析的速度和稳定性也可能影响页面加载时间。
用户地理位置：用户地理位置的不同可能会导致访问服务器时的网络延迟差异。
页面内容动态加载：如果页面内容是通过异步加载（如AJAX）的方式获取的，那么加载速度可能会因网络状况、服务器响应速度等因素而有所不同。

方法：

使用性能监控工具来分析和定位问题。
优化JavaScript代码，减少执行时间。
优化图片和其他资源，减少加载时间。
考虑使用CDN来加速资源的加载。
对服务器进行优化，提高其响应速度和带宽。
考虑使用缓存策略来减少重复加载相同资源的时间。

如果是CDN（内容分发网络）的原因导致资源加载时间不一致，可能是由以下因素造成的：

源站的带宽限制：当源站的带宽达到峰值时，会导致访问源站的速度变慢，从而影响CDN边缘服务器上的资源响应速度。
CDN配置问题：CDN需要正确配置以实现资源访问与源站一致。如果配置不当，可能会导致资源加载时间不一致。
源站和CDN的缓存规则不合适：如果源站资源和CDN的边缘资源未正确缓存，可能会导致资源加载时间不一致。
网络抖动或不稳定：网络的不稳定性可能导致CDN的边缘服务器与源站之间的通信受到影响，从而影响资源加载时间。
CDN服务器数量不足：如果CDN服务器数量不足，可能导致网络容量不足和稳定性下降，从而影响资源加载时间。

为了解决这些问题，可以采取相应的措施，如优化源站服务器性能、确认CDN设置正确、审查源站的防火墙规则、增加CDN服务器数量、优化网络拥塞等。

如何自动保存表单数据，防止页面崩溃、用户异常退出时数据未保存的问题

自动保存（个人设想，待实践）

localstorage定时存储表单数据，当异常关闭后进入表单填写页面。判断localstorage是否存在该对象，存在则提示用户是否继续填写，该字段在表单正常提交后被清空。

参考链接：vue--localStorage临时存储未提交表单数据，下次登陆后展示上次未提交的数据_vue 离开页面前,实现表单数据保存,回来页面后重新展示-CSDN博客

提交错误时正常回跳

Node.js和浏览器之间的区别

1. 环境的不同

Node.js和浏览器的环境非常不同，由于其不同的目的，它们之间的一些关键区别包括：

浏览器在宿主环境中执行JavaScript，在客户端执行。浏览器提供了一个表示网页结构的文档对象模型(DOM)。
Node.js提供了一个运行时环境，允许JavaScript在服务器上运行，不在浏览器中。此外，它没有像Web浏览器一样的DOM。

2. 用户界面

一个主要的区别是执行方式。浏览器在其宿主环境中执行JavaScript并渲染HTML、CSS和JavaScript，并提供图形用户界面(GUI)与网页进行交互，因为用户与网页进行交互，所以使用GUI是必不可少的。但是Node.js使用命令行界面(CLI)，因为它与用户没有交互，并且用于服务器端开发构建Web服务器和API。

3. 用法不同

由于两者都执行JavaScript，它们的用途是使它们不同的关键点。浏览器用于客户端，执行JavaScript在浏览器的宿主环境中，开发者使用JavaScript使Web内容动态化。另一方面，Node.js是用于执行JavaScript的运行时环境，用于服务器端开发创建Web服务器和API，因此JavaScript在这里主要用于逻辑构建和算法部分。

场景