前端面试题手册

Web前端安全攻击主要有以下几种常见的方式：XSS攻击（跨站脚本攻击）：攻击者通过在目标网站上注入恶意的HTML代码，当用户浏览该网站时就会运行这些恶意代码。防御措施：输入验证与过滤、输出编码、使用CSP（内容安全策略）防止不安全的动态脚本执行。CSRF攻击（跨站请求伪造）：攻击者诱导用户点击链接，使用用户的登录凭证发送恶意请求。防御措施：使用CSRF token，验证每个请求。点击劫持：攻击者将透明的恶意网站覆盖在真实网站上，诱导用户在不知情的情况下进行恶意操作。防御措施：使用X-FRAME-OPTIONS来防止网页被iframe调用。DoS攻击（拒绝服务攻击）：恶意请求过多使得服务无法处理正常的请求。防御措施：限制访问频率、使用CDN（内容分发网络）等方式分散流量。SQL注入攻击：攻击者通过输入特殊的SQL查询语句，来获取数据库的敏感信息。防御措施：使用预处理语句（Prepared Statements）或参数化的SQL命令，拒绝直接执行动态生成的SQL语句。上传恶意文件：攻击者通过上传恶意文件，例如包含病毒或者后门的文件，来破坏服务器或者网页。防御措施：限制可上传文件类型，扫描上传的文件以防止上传恶意软件，对上传文件名严格过滤等。

为什么存在 1px 问题移动端的1px问题主要是由于设备的物理像素和逻辑像素的不同所致。在高清显示屏（即设备独立像素比例devicePixelRatio大于1）的设备上，一个CSS像素可能会对应多个设备像素。这就导致了CSS的1px边框在高清屏上显示得比预期更粗。 1px以下是一些主要的解决1px问题的方案：视口缩放（Viewport Scale）视口缩放的原理是将页面的视口设置为设备宽度的一半或一部分，然后布局以这个新的视口宽度为基准进行。由于视口被缩小，一个CSS像素也就对应了更少的设备像素。 <meta name="viewport" content="width=device-width,initial-scale=.5,maximum-scale=.5,user-scalable=no">使用Media Query可以使用CSS的Media Query配合devicePixelRatio设定不同dpr下的边框样式，这样可以确保在不同dpr的设备上边框都看起来只有1px。 @media only screen and (-webkit-device-pixel-ratio: 2) { .border { border-width: 0.5px; } }使用伪元素 + transform: scaleY(.5)/scaleX(.5)利用伪元素，将元素的边框做一次.5的缩放，使得高清屏下1px边框变细。 .border:after { content: ''; position: absolute; bottom: 0; background: #000; width: 100%; height: 1px; transform: scaleY(.5); -webkit-transform: scaleY(.5); }使用SVG可以使用SVG矢量图形来实现1px边框。由于SVG是矢量图形，在任何分辨率的屏幕上都会很清晰。 <svg width="100%" height="1" xmlns="http://www.w3.org/2000/svg" version="1.1"> <line x1="0" y1="0" x2="100%" y2="0" stroke="black" stroke-width=".5"/> </svg>边框图片（Border Image）border-image 属性可以让你使用图像作为边框，你可以自由定义图像如何填充和拉伸。以上只是其中的一些常用解决方案，每种方法都有其适用范围和局限。在实际开发过程中，需要根据具体的应用情况选择最合适的方案。

CSS 选择器用于决定某个HTML元素上应用哪些样式。以下是一些常用的CSS选择器：1. 元素选择器基于HTML元素的名称选择元素。例如，选择所有的 <p> 元素：p { color: red;}2. id 选择器使用HTML元素的 id 属性选择特定元素。id 选择器在CSS中使用 #" 符号定义。例如,选择 id="intro"的元素：#intro { color: blue;}3. 类选择器使用HTML元素的 class 属性选择特定元素。类选择器在CSS中使用 . 符号定义。例如,选择 class="highlight"的所有元素：.highlight { background-color: yellow;}4. 属性选择器可以选择带有指定属性的HTML元素。例如，选择所有带有 target 属性的 <a> 元素：a[target] { background-color: pink;}5. 伪类选择器用于选择HTML元素的特定状态。例如，选择鼠标悬停在上面的 <a> 元素：a:hover { color: green;}6. 伪元素选择器用于选择元素的某一部分。例如，选择每个 <p> 元素的第一行：p::first-line { color: orange;}7. 组合选择器有时候，我们需要选择满足多项条件的元素，这时候就可以使用组合选择器。常见的组合选择器如下：后代选择器（空格）div p { color: brown;}子代选择器（>）div > p { color: purple;}相邻兄弟选择器（+）div + p { color: gray;}一般兄弟选择器（~）div ~ p { color: teal;}

联系：它们都能让元素不可见区别：display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染时元素继续占据空间，只是内容不可见。display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility: hidden;是继承属性，子孙节点由于继承了 hidden 而消失，通过设置 visibility: visible，可以让子孙节点显示。修改常规流中元素的 display 通常会造成文档重排。修改 visibility 属性只会造成本元素的重绘。读屏器不会读取 display: none;元素内容；会读取 visibility: hidden;元素内容。

link和 @import都是用于在HTML文档中链接和导入CSS样式的方法，但它们之间存在一些关键区别：表现形式link是HTML标签，这种方式通过HTML的 <link>元素来提供链接；@import是CSS提供的方式，可以在一个CSS样式表中导入其他样式表；加载方式link在页面一开始加载时就会同时加载CSS文件；@import则是在页面加载完之后再加载CSS，因此如果CSS文件较多、较大时，可能会导致页面加载不同步，影响网页性能；兼容性link是XHTML标签，无论是早期的HTML版本还是现在的XHTML，都支持 link标签；@import是在CSS2.1才出现的，所以早期的浏览器不支持 @import方式；使用条件link可以定义RSS、链接到打印版的CSS等，更具有扩展性；@import只能加载CSS以上就是 link和 @import的主要区别。

GIF8 位像素，256 色无损压缩支持简单动画支持 boolean 透明适合简单动画JPEG颜色限于 256有损压缩可控制压缩质量不支持透明适合照片PNG有 PNG8 和 truecolor PNGPNG8 类似 GIF 颜色上限为 256，文件小，支持 alpha 透明度，无动画适合图标、背景、按钮

HTML表单（form）是可以执行跨域请求的。在Web开发中，跨域请求指的是从一个源（domain、协议、端口）发起的请求试图获取另一个源上的资源。通常，出于安全考虑，浏览器会实施同源策略（Same-Origin Policy），这意味着如果使用XMLHttpRequest或Fetch API来发起Ajax请求，那么请求通常会受到限制，除非目标服务器明确允许跨源资源共享（CORS，Cross-Origin Resource Sharing）。但是，HTML表单不受同源策略的限制，因此可以向任何URL发起POST或GET请求，即使这个URL指向的是另一个域。当表单提交时，浏览器会将用户输入的数据作为请求参数发送到表单的 action属性所指定的URL。不过，使用表单进行跨域提交时，浏览器会导航到响应页面，也就是说用户的当前页面会被新页面替换。下面是一个简单的表单跨域请求的例子：<form action="https://example.com/api/submit" method="POST"> <input type="text" name="username" value="User"> <input type="text" name="password" value="Pass"> <input type="submit" value="Submit"></form>在此示例中，表单数据将提交给位于 example.com域的服务器，即使表单所在的HTML页面可能托管在不同的域上。当用户点击提交按钮时，浏览器会将表单数据作为POST请求的一部分发送到 example.com。需要注意的是，即使表单可以跨域提交，服务端仍然需要处理来自不同源的请求。此外，跨域表单提交不会提供Ajax那样的客户端JavaScript接口来访问响应内容，除非服务器在响应中包含适当的CORS头部信息。

什么是 Web 语义化Web 语义化是指通过 HTML 标记表示页面包含的信息，包含了 HTML 标签的语义化和 css 命名的语义化。HTML 标签的语义化通过使用包含语义的标签（如 h1-h6）恰当地表示文档结构 。CSS 命名的语义化 为 html 标签添加有意义的 class，id 补充未表达的语义，如通过添加符合规则的 class 描述信息。 Web 语义化的好处需要语义化的主要理由有以下几点：去掉样式后页面呈现清晰的结构盲人使用读屏器更好地阅读搜索引擎更好地理解页面，有利于收录便团队项目的可持续运作及维护

JavaScript 的执行过程大致可以分为以下几个阶段：1. 解析（Parsing）在这一阶段，JavaScript 引擎会读取源代码，并将其解析成抽象语法树（AST）。抽象语法树是一种深层次的、结构化的代码表达方式，能够以树形结构表现代码中的每个语句、表达式等元素。解析过程中，如果遇到语法错误，会抛出错误，停止进一步执行。2. 编译（Compilation）JavaScript 引擎（如V8）通常会将解析后的代码进行即时编译（JIT）。编译器会先生成字节码，这是一种低级的、比源代码更接近机器语言的代码。随后根据程序的执行情况，编译器可能会把热点代码（经常执行的代码）编译成优化的机器码，提高执行效率。3. 执行（Execution）编译后得到的字节码或机器码被送到 JavaScript 引擎的执行环境中执行。在执行过程中，会进入下面的子阶段：创建执行上下文（Execution Context）：首先会创建全局执行上下文，随后每当调用一个函数时，就会为该函数创建一个新的执行上下文。执行上下文包括变量对象、作用域链和 this 引用等信息。变量提升（Hoisting）：在执行代码前，函数声明和变量（声明）会被提升到它们各自的执行上下文的顶部。变量会初始化为 undefined，而函数则会完整地提升。执行代码（Running Code）：按照执行上下文中的代码逐行执行，进行变量赋值、函数调用等。垃圾回收（Garbage Collection）：在执行过程中，引擎会进行内存管理，自动释放那些不再被需要的内存空间。4. 优化（Optimization）在代码执行的过程中，某些代码可能会被执行多次，引擎会尝试对这些频繁执行的代码进行优化。例如，在V8引擎中，有一个称为“TurboFan”的优化编译器，它可以根据代码执行的特点对代码进行优化，提高性能。如果优化假设失败了（即出现了“去优化” deoptimization），引擎还可以将代码回退到一个较少优化的版本。5. 回收（Deoptimization & Garbage Collection）对于那些不再需要的数据和优化，JavaScript 引擎会进行去优化和垃圾回收，以保证内存的高效使用。例子：假设我们有这样一个简单的 JavaScript 函数：function sum(a, b) { return a + b;}let result = sum(5, 3);首先，该函数会被解析成 AST。然后，它可能会被编译成字节码，当我们调用 sum(5, 3) 时，会创建一个新的执行上下文，包含 a 和 b 的参数以及任何局部变量。在这个上下文中，a 和 b 被赋予了值 5 和 3，函数执行，并返回结果 8。这个过程中可能还包括了对 sum 函数的优化，如果函数被频繁调用。最后，当执行上下文离开作用域，如果没有其他引用指向其中的数据，垃圾回收器最终会清理掉这些对象。

JSONP（JSON with Padding）是一种利用<script>标签不受同源策略限制的特性来实现跨源请求的技术。因为<script>标签的初衷是加载静态的JavaScript文件，所以<script>标签仅支持GET方法来请求资源，它并不支持POST方法。这就是为什么JSONP不支持POST方法的根本原因。当使用JSONP进行通信时，您会将请求参数包含在URL中，并通过动态创建<script>标签的方式将其发出。服务器接收到GET请求后，将数据包裹在一个函数调用中，并将其作为响应返回。客户端定义好回调函数后，这段包裹着JSON数据的JavaScript被执行，回调函数便会被调用并处理返回的数据。例如，假设您的页面需要从http://example.com获取一些用户数据，您可能会发送如下的JSONP请求：<script type="text/javascript"> // 定义回调函数 function handleResponse(data) { console.log('Received data:', data); }</script><script type="text/javascript" src="http://example.com/data?callback=handleResponse"></script>服务器端需要接收到callback参数后，把数据包装在该函数调用中：// 服务器端响应handleResponse({ "user": "Alice", "age": 25 });如上所述，JSONP请求的本质是一个GET请求，它是通过<script>标签的src属性来发起的。因此，它不能使用POST方法，后者通常用于传输大量数据或者发送需要安全传输的数据。如果您需要进行跨域的POST请求，可以考虑使用更现代的技术，如CORS（跨源资源共享），它允许在各种HTTP方法中使用跨源请求，同时提供了更好的安全性。