前端面试题手册

Flutter 中的热重载和热重启都是用来提高开发效率的工具，它们可以让开发者在不完全重启应用的情况下，快速查看代码更改的效果。不过，这两者在功能和使用场景上有所区别：热重载 (Hot Reload)热重载功能可以让你在进行小的更改后迅速看到结果，它主要用于UI层面的调整。当你对代码进行修改后，例如更改一个颜色、调整布局等，通过热重载，Flutter 可以在几秒钟内将更改应用到正在运行的应用程序上，而无需重新启动整个应用。这个过程不会影响应用状态，这意味着你的应用数据和状态会被保留。例子：假设你正在开发一个购物应用，你发现购物车界面的“结账”按钮颜色不符合设计规范。你可以直接在代码中更改颜色值，然后使用热重载，几秒钟内按钮的颜色就会更新，而且购物车中的商品列表和用户的选择状态不会受到影响。热重启 (Hot Restart)热重启则是一个更为全面的重载过程，它会重置应用的状态。这通常用于更加根本的代码更改，比如更改了应用的数据结构，或者进行了大范围的方法或类的重构。热重启会完全重新启动应用程序，但是比冷启动（完全停止再启动应用程序）要快得多。例子：继续上面购物应用的例子，如果你决定重构整个购物车的数据处理逻辑，例如从单例模式改为使用状态管理库来处理状态，这时候仅仅使用热重载可能无法正确显示更改的效果，因为根本的数据处理方式已经改变。此时，使用热重启能够重新构建整个应用的状态，确保所有的更改都能正确应用。总结简而言之，热重载适用于快速的视觉和小逻辑更改，保持应用状态不变，而热重启用于更深层次的代码更改，但会重置应用状态。两者都是Flutter提供的强大工具，极大地提高了开发效率和体验。

在 Flutter 中实现可拖动的小部件，可以使用 Draggable 和 DragTarget 这两个 Widget。下面我将详细说明如何使用这些 Widgets 来创建一个基本的拖放功能。使用 Draggable Widget：Draggable widget 允许用户在屏幕上拖动它。你需要定义以下属性：data: 这是被拖动时传递给 DragTarget 的数据。child: 当不被拖动时显示的 Widget。feedback: 拖动时跟随手指移动的 Widget。childWhenDragging: 在原位置留下的 Widget，可以是透明的或任何占位符。示例代码： Draggable( data: '你拖动的数据', child: Container( width: 100.0, height: 100.0, color: Colors.blue, child: Center( child: Text('Drag me'), ), ), feedback: Container( width: 120.0, height: 120.0, color: Colors.lightBlue, child: Center( child: Text('Dragging'), ), ), childWhenDragging: Container( width: 100.0, height: 100.0, color: Colors.grey, child: Center( child: Text('Original Position'), ), ), );使用 DragTarget Widget：DragTarget widget 允许接收被拖动的 Widget。它需要指定一些回调函数来处理接受或拒绝数据：onWillAccept: 确定数据是否被接受的函数。onAccept: 当接受数据时调用的函数。builder: 构建显示的 Widget，可以根据是否有 Widget 正在悬停来改变显示。示例代码： DragTarget( onWillAccept: (data) { return true; // 根据数据决定是否接受拖动的 Widget }, onAccept: (data) { // 处理接受数据的逻辑 print('Data received: $data'); }, builder: ( BuildContext context, List<dynamic> accepted, List<dynamic> rejected, ) { return Container( width: 200.0, height: 200.0, color: accepted.isEmpty ? Colors.red : Colors.green, child: Center( child: Text('Drop here!'), ), ); }, );通过组合使用 Draggable 和 DragTarget，你就可以在 Flutter 应用中创建复杂的拖放交互。这种方法不仅适用于简单的数据传递，也可以用于更复杂的交互，如排序列表、移动卡片等。

JavaScript中有8种基本类型的值：Undefined：一个未给定值的变量的类型是undefined。例如: let x;Null：表示缺少或者空值的类型。例如：let x = null;Boolean：有两个boolean操作符：true 和 false。例如：let x = true;String：用于显示文本数据的类型。例如：let x = 'hello world';Number：用于表示整数和浮点数。例如：let x = 3.14;BigInt：一种用于存储和操作任意大小整数的类型。例如：let x = 9007199254740991n;Symbol：一种唯一并且不可变的数据类型。例如：let x = Symbol('hi');Object：对象数据类型用于存储更复杂的数据集。例如: let x = {firstName:"John", lastName:"Doe"};以上8种类型可大致分为两类：原始值（Undefined, Null, Boolean, Number, String, Symbol, BigInt对象值（Object）。

同源策略同源策略是一种对浏览器发出请求的安全策略。根据这种策略，一个Web页面只能从同一来源（协议，域名和端口都必须相同）获取数据。跨域问题.当一个Web页面尝试从不同的源访问资源时，就会出现跨域问题。例如，一个在 www.example1.com 上托管的脚本尝试访问 www.example2.com 上的资源，这就违反了同源策略，所以浏览器会阻止这个请求并产生跨域错误。解决跨域问题的手段以下是一些常见的解决跨域问题的方法：CORS（跨源资源共享）：CORS是一种让服务器允许来自特定源访问资源的机制。服务器通过设置特定的HTTP头部告诉浏览器哪些Web页面可以访问这些资源。JSONP（JSON with Padding）：JSONP是一种通常用于解决跨域数据获取问题的方式。不过，这种方式局限于GET请求，并且安全性较差。代理服务器：可以使用服务器端的代理转发请求，因为在服务器端不受同源策略限制。postMessage API：使用HTML5引入的 window.postMessage 方法，可以安全地实现跨源通信。WebSocket协议：WebSocket是一种建立在TCP协议之上的全双工通信协议，不受同源策略影响。WebSockets：WebSockets API 是另一种通信协议，它不受同源策略的影响，可以用于任何地方的通信。Document.domain+iframe：基于 document.domain 的跨域方法只适合主域相同的情况，也就是abc.example.com到www.example.com这样的跨域，区域子域和顶级字段相同。

强制类型转换强制类型转换 是指开发者显式地将一种数据类型转换为另一种数据类型。强制类型转换的例子：Number转换为String：使用 toString()方法来转换数字为字符串。例如：(123).toString()，结果为 "123"。String转换为Number：使用 Number()函数将字符串转换为数字。例如：Number("123")，结果为 123。非布尔值转换为布尔值：使用 Boolean()函数将非布尔值转换为布尔值。例如：Boolean(1)，结果为 true。 隐式类型转换隐式类型转换，又被称为隐式类型强制转换，是指JavaScript引擎在处理表达式时自动完成的类型转换。隐式类型转换的两个例子：加法运算符：当通过加法运算符加入字符串和非字符串（数字，布尔值等）时，非字符串将被转换为字符串。例如："5" + 3，结果为 "53"。相等性比较：如果比较的值具有不同的类型，JavaScript会尝试通过诸如转换字符串为数字，或转换布尔值为数字等方式，来进行比较。例如："5" == 5，结果为 true。

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的主要区别。