前端面试题每日一学_3

今日一题：

下面的JS代码执行的结果是什么？

const a = Boolean()
console.log(a);
const b = Boolean(null);
console.log(b);
const c = Boolean(NaN);
console.log(c);
const d = Boolean('false');
console.log(d);
const e = Boolean({});
console.log(e);
const f = Boolean(' ');
console.log(f);

​ 答案和解析可在文章底部查看。

今日面试题：

1、前端进行网站性能优化的方法有哪些？

① 减少HTTP请求

​ 合并CSS和JS文件、使用CSS精灵图合并图片、使用内联SVG代替图片等等。

② 优化文件大小

​ 压缩图片文件、使用适当的图片格式、压缩JS和CSS文件等等。

③ 使用CDN

​ 将静态资源（图片、CSS、JS）等文件放置到CDN上，减少服务器的负载。

④ 减少重绘和重排

​ 尽量减少DOM操作，减少使用会导致重排的CSS属性，如width、height等等。

⑤ 注意DOM结构

​ 将CSS样式表放在页面顶部优先加载、减少CSS表达式的使用、优先使用<link>加载外部样式。

​ 将<script>放到页面底部、非关键的JS文件使用async属性进行异步加载、使用defer属性进行延迟加载、减少JS对DOM的操作。

⑥ 预加载和预取资源

​ 使用<link rel="preload">在页面加载时提前加载关键资源（如字体、CSS、JavaScript、图像等）。

​ 使用<link rel="prefetch">在当前页面加载完成后，利用空闲时间预取未来可能需要的资源。

⑦ 启用缓存

​ 设置适当的缓存头（如Cache-Control、Expires），让浏览器缓存静态资源，减少重复加载。

​ 使用Service Workers缓存资源，提高离线访问和重复访问的性能。

2、常见的HTTP状态码有哪些？分别表示什么？

① 1XX：信息状态码

• 100 Continue：继续，一般出现在发送POST请求中，当已经发送了http header之后，服务端会返回该状态码，表示确认，继续发送具体参数信息。
• 101 Switching Protocols：切换协议，服务器根据客户端的请求切换协议。

② 2XX：成功状态码1

• 200 OK：请求成功，正常返回信息。
• 201 Created：已创建，请求成功且服务器已经创建新的资源。
• 202 Accepted：已接收，服务器已接受请求，但尚未处理。
• 204 No Content：无内容，服务器成功处理请求，但没有返回任何内容。

③ 3XX：重定向状态码

• 301 Moved Permanently：永久重定向，请求的资源已经被永久移动到新的URL。
• 302 Found：临时重定向，请求的资源临时从不同的URL响应请求。
• 303 See Other：查看重定向，需要使用GET从另一个URL获取资源。
• 304 Not Modified：未修改，从上次请求后，资源未修改，可使用缓存的资源。

④ 4XX：客户端错误码

• 400 Bad Request：错误请求，服务器无法理解请求的格式。
• 401 Unauthorized：未授权，要求客户端进行身份验证。
• 403 Forbidden：禁止访问，服务器理解请求，但拒接执行。
• 404 Not Found：未找到，服务器找不到对应的资源。
• 408 Request Timeout：请求超时，服务器等等客户端发送请求的时间过长。

⑤5XX：服务端错误码

• 500 Internal Server Error：服务端错误，服务器遇到错误，无法完成请求。
• 502 Bad Gateway：错误网关，服务器作为网关或代理，从上游服务器收到无效响应。
• 503 Service Unavailable：服务不可用，服务器暂时不可用，通常是由于过载或维护。

3、谈谈对HTML5中语义化标签的理解

​ HTML语义化的本质是用正确的标签做正确的事，可以让页面的内容结构化，使代码更具可读性，开发者可以更容易地理解和维护代码。

​ 有利于SEO，搜索引擎的爬⾍依赖于标记来确定上下⽂和各个关键字的权重，可以更好理解网页的结构和内容。

​ 还增强了网页的可访问性，视障关怀模式、屏幕阅读器等技术可以更好的解析和朗读语义化标签。

常见的语义化标签：

​ <header>、<nav>、<main>、<article>、<section>、<aside>、<footer>、<figure>等等。

今日一题答案：false、false、false、true、true、true

解析：

在JavaScript中，false、null、0、-0、''、undefined、NaN这七个特殊值被称为"假值"，会在进行布尔判断或通过Boolean()函数转换时，被转换为false。

其他值都被称为"真值"，会在进行布尔判断或通过Boolean()函数转换时，被转换为true。例如：非空字符串（'false', ' ' 等）、非0数字（1, -1等）、对象（包括空对象和空数组）、函数（Boolean(() => {})）等等。

请关注公众号，查看更多优质资源：