包含答案和详细释义：
HTML/CSS 基础
1.什么是HTML语义化？举例说明其优点
答案：使用合适的标签表达内容含义（如<header> <nav> <article>）。优点：SEO友好、可访问性高、代码易维护。
2.CSS盒模型由哪几部分组成？
答案：内容(content)、内边距(padding)、边框(border)、外边距(margin)。通过box-sizing: border-box可切换为边框盒模型。
3.如何实现垂直居中？
答案：Flex布局（display: flex; align-items: center; justify-content: center）或绝对定位（transform: translateY( 50%; transform: translateY(-50%)）。
JavaScript 核心
4.解释闭包（Closure）及其应用场景
答案：函数与其词法环境的组合，内部函数可访问外部作用域变量。用于封装私有变量、模块化开发。
5.事件循环（Event Loop）的运行机制
答案：JS单线程通过任务队列处理异步任务。分为宏任务（setTimeout）和微任务（Promise），微任务优先执行。
6.let、const和var的区别
答案：var存在变量提升；let/const有块级作用域，const声明后不可重新赋值。
网络基础
7.HTTP状态码 200、301、404、500 的含义
答案：200（成功）、301（永久重定向）、404（资源未找到）、500（服务器内部错误）。
8.GET和POST请求的区别
答案：GET参数在URL中，有长度限制，幂等；POST参数在请求体，安全性更高，常用于提交数据。
9.TCP三次握手过程
答案：1.客户端发送SYN；2.服务端返回SYN-ACK；3.客户端发送ACK。确认双方收发能力正常。
浏览器原理
10.浏览器渲染页面的主要步骤
答案：解析HTML生成DOM树 → 解析CSS生成CSSOM树 → 合并为渲染树 → 布局（Layout） → 绘制（Paint）。
11.什么是重绘（Repaint）和回流（Reflow）？如何优化？
答案：重绘是元素外观变化（颜色），回流是布局变化（尺寸）。优化：避免频繁操作DOM，使用transform代替top/left。
12.同源策略（Same-Origin Policy）是什么？
答案：协议、域名、端口相同的页面才能共享资源。限制跨域请求，防止恶意脚本。
性能优化
13.列举3种减少页面加载时间的方法
答案：压缩资源（如Webpack）、使用CDN、懒加载图片、减少HTTP请求（合并文件）。
14.什么是CDN？它的作用是什么？
答案：内容分发网络，将资源缓存到全球多个节点，加速用户访问速度，降低服务器压力。
15.如何利用浏览器缓存？
答案：设置HTTP头（Cache-Control、ETag），强缓存（Expires）和协商缓存（Last-Modified）。
安全相关
16.XSS攻击原理及防御方法
答案：恶意脚本注入页面。防御：输入过滤、转义输出（如innerText代替innerHTML）、设置Content-Security-Policy。
17.CSRF攻击如何防范？
答案：使用Token验证（如JWT）、检查Referer头、设置SameSite Cookie属性。
18.HTTPS如何保证数据传输安全？
答案：通过SSL/TLS加密，结合对称加密（数据传输）和非对称加密（密钥交换），防止中间人攻击。
框架与工具
19.React/Vue中虚拟DOM的作用
答案：通过JS对象模拟真实DOM，减少直接操作DOM的开销，提升渲染性能。
20.Webpack的作用是什么？
答案：模块打包工具，支持代码压缩、转译（Babel）、加载器（Loader）和插件扩展。
