前端注意问题

第一部分

• TCP/IP是为互联网服务的协议族，它将通信过程抽象为四层，分别为应用层、传输层、互联网层和网络接口层。SMTP、FTP、HTTP等常用的协议都位于应用层

• 敏捷软件开发方法是一种创作与交流的协作观

• 选择器原先就存在，CSS3只是完善了它，使其拥有更丰富的功能

• 如果把++运算符单独放一行，那么它会和下面的语句合并，作为一个整体被解析

• switch语句种case子语句中的表达式进行全等（===）匹配

• CSS预处理器能为CSS增加编程特性，通过编译器将使用新语法的文件输出为一个普通的CSS文件，解决CSS难以复用，代码冗余，可维护性低的 问题。常用的预处理器有Less、Sass和stylus

• 盒模型就是从盒子顶部俯视所得到的一张平面图，用于描述元素所占用的空间。有两种和模型W3C和IE盒模型，两者不同之处是对元素尺寸的计算方式。当用CSS给某个元素定义宽或高时，IE盒模型的宽或高将包含内边距和边框，而W3C盒模型并不包含

• HTTP即超文本传输协议，是一种获取网络资源（图像、HTML文档）的应用层协议，它是互联网数据通信的基础，由请求和响应构成。首先客户端会发起HTTP请求（在请求报文中会指定资源的URL）,然后用传输层的TCP建立连接，最后服务器相应请求，做出应答，回传数据报文。

• typeof和instanceof的区别

1. typeof运算符用于检测数据类型，而instanceof运算符用于检测对象之间的关联性
2. typeof运算符执行完之后会返回一个小写字母的类型字符串，而instanceof运算符执行完会返回一个布尔值
3. typeof运算符只需一个操作数，这个操作数可以是基本类型或函数，而instanceof运算符需要两个操作数，并且左操作数不能是基本类型，右操作数必须是函数，否则运算结果没有意义

• let、const与var之间有哪些不同

1. 不允许声明提升
2. 不允许重复声明
3. 不覆盖全局变量

• Array.of()的作用

1. ES6为Array对象新增的一个静态方法是of()，用于创建数组，能接收任意数量的参数，返回值是由这些参数组成的新数组

• yield和return的区别

1. yield是一个关键字，而return是一个运算符
2. yield只能出现在生成器中，而return无此限制
3. yield能暂停函数的执行，而return是直接终止
4. 在一个函数中，可以执行多次yield，热return只能执行一次
5. yield只能返回IteratorResult对象，而return能返回任意值

• 虚拟DOM是构建在真实DOM上的一层抽象，它将DOM元素映射成内存中的js对象（通过React.createElement()得到的React元素），形成一颗javaScript对象树

• React中三个声明周期被标记为过时

1. componentWillMount()
2. componentWillReceiveProps()
3. componentWillUpdate()
4. 官方为以上新增一个UNSAFE_作为前缀的别名

• React中的状态提升是指什么

1. 兄弟之间不能直接通信，需要借助状态提升的方法实现信息的传递，即把组件之间要共享的状态提升至最的父组件中，由父组件来统一管理

• webpack的加载器用途

1. 加载器(loader)能在webpack加载模块时对其进行预处理，即对模块的源码进行转换

• 元素的作用

1. 缓存组件的状态，虽然能包裹任意数量的元素，但是只能渲染其中一个子元素，并且自身不会渲染成一个DOM元素。由此可见，元素内可包含条件指令，但不能包含v-for指令

第二部分

• BTC（block formatting context）即块格式上下文，能够决定元素的内容如何渲染以及其他元素的关系和交互

• HTTP特征

1. 持久连接
2. 管道化
3. 无状态

• 极限编程的核心思想

1. 强调人与人之间的合作因素和以敏捷性应对变化

• TCP/IP的理解

1. 是互联网服务的协议族，是网络通信协议的统称，是由IP、TCP、HTTP和FTP等协议组成。
2. 将通信过程抽象为四层，被视为简化的OSI参考模型

• （function(){}）()

1. 即时函数，也就是刚定义好就马上自动执行的函数
2. 创建块级作用域
3. 解决循环中的异步回调
4. 类库封装

第三部分

• 什么是外边距陷踏

1. 外边距陷阱是指相邻的两个元素的外边距发生合并，导致外边距的表现不符合预期的情况。

• 在DOM中，事件对象的两个属性target和currentTarget有什么区别

1. event.target 是触发事件的原始元素，而 event.currentTarget 是绑定事件处理程序的元素。

• 扩展运算符（…）的用途有哪些

1. 替代函数的apply()方法
2. 简化函数调用时传递实参的方式
3. 处理数组和字符串

• find和indexOf有哪些区别

1. 是indexOf的一种补充
2. indexOf只能通过全匹配（===）来搜索指定的值，而新方法可以自定义匹配条件

• 类有哪些成员

1. 类的成员包括属性（也称为字段或变量）和方法（也称为函数）。

• shadowDom和Virtual DOM之间有哪些区别

1. Shadow DOM是用于封装自定义组件样式和行为的DOM树，而Virtual DOM是一种用于优化DOM操作的虚拟表示。 Virtual DOM通过比较变化并批量更新DOM，而Shadow DOM用于隔离组件的样式和行为。

• 有没有办法强制React组件重新渲染，而不用setState（）方法

1. 如果render()方法依赖于其他数据（如更新的数据不在state中），则可以调用组件的forceUpdate()方法，强制让其重新渲染。调用forceUpdate()会让组件跳过shouldComponmentUpdate()方法，直接调用render()方法

• 在React中什么是高阶组件

1. HOC不是一个真的组件，是一个没有副作用的纯函数，以组件作为参数，返回一个功能增强的新组件
2. 遵循了装饰者模式的设计思想，因此不会入侵传递进来的原组件，而是对其进行抽象、包装和拓展，改变原组件的行为
3. 增强了组件的复用性和灵活性，还保持了组件的易用性

• 请描述一下React中的Jest

1. Jest是React中常用的测试框架，用于编写和运行单元测试、集成测试和快照测试。

• Vue.js中的sync修饰符有什么作用

1. sync修饰符用于在子组件中更新父组件的属性，简化了Vue.js中父子组件之间的数据传递。

• 什么是泛型

1. 是程序设计语言中的一种风格或规范，相当于类型模板，允许在声明类、接口或函数等成员时忽略类型，而在未来使用时再指定类型
2. 主要目的是为它们提供有意义的约束，提升代码的可重用性

第四部分

• 什么是IP地址

1. 是指互联网协议地址，为网络中的每台主机分配已给数字标签
2. 是属于网络层

• 在HTTP中，总共有5类状态码，请简单介绍一下这5类状态码

1. 信息性状态码（1xx）
2. 成功状态码（2xx）
3. 重定向状态码（3xx）
4. 客户端错误状态码（4xx）
5. 服务器错误状态码（5xx）

• 在JS中，字面量是指什么

1. 字面量就是常量，是一种在程序中可以直接使用的数据值，通常它的值是固定的。在JS中可以使用各种字面量，如数字字面量、字符串字面量、对象字面量

• 什么叫点击劫持？对这种攻击有什么解决办法

1. 是一种视觉上的欺骗，攻击者把一个透明的iframe覆盖在目标网页的某个位置，这个位置可以是一个按钮，一段文字或一张图片
2. 如果防范该攻击，可以通过限制iframe来实现，只要在HTTP响应报文中增加X-Frame-Options首部，就能让浏览器按照要求加载iframe中的页面，可以是不加载，只加载相同域名或加载指定来源

• ES6中的剩余参数有什么作用

1. 在JS的函数中，声明时定义的形参个数可以和传入的实参个数不同。当实参个数大于形参个数时，ES6新增的剩余参数能把没有对应形参的实参收集到一个数组中

• 什么是类型化数组

1. Typed Array
2. 类型化数组是JavaScript中的一种特殊数组，它允许以固定的数据类型存储数据，提高了对二进制数据的处理效率。
3. 是一种处理二进制数据的特殊数组，可像C语言直接操纵字节，不过需要先用Array-Buffer对象创建数组缓冲区，再映射到指定格式的视图(view)之后，才能读写其中的数据

• 在ES6中，当super作为方法使用时，有哪些注意点

1. super()方法相当于父类的构造函数
2. 只有在子类的构造函数中才能调用super()方法
3. 如果子类显式地定义了构造函数，那么必须调用super()方法，否则会报错
4. 如果子类没有定义构造函数，那么会自动调用super()方法
5. 当子类的构造函数显式地返回一个对象时，就能避免调用super()方法
6. 在使用this之前，必须先调用super()方法

• 什么是React Fiber

1. React Fiber 是 React 中一种用于进行协调和调度的新的 reconciler 架构，用于实现增量式的渲染和优先级调度。Fiber 是 React 内部的实现细节，由 React 框架自己管理。

• Refs有什么用

1. Refs是一种访问方式，通过它可以读取render()方法内生成的组件实例和DOM元素，常用来处理元素的焦点、触发动画、集成第三方DOM库等

• 在React的高阶组件中，为何要定义displayName属性

1. 在高阶组件中创建的新组件，不会再沿用原组件的名称。为了便于在React Devloper Tools中调试，需要为新组件设置一个显示的名称。

• 什么是npm?由哪几部分组成

1. npm是Node.js的包管理工具，用于安装、分享和管理JavaScript包。它由CLI工具、网站和包存储库三部分组成。

• 请介绍一下webpack.config.js中的mode字段

1. 在webpack.config.js中，mode字段用于指定当前构建的模式，可以设置为"development"、“production"或"none”。它会影响webpack的优化行为和默认的配置选项。

• Vue.nestTick()有什么作用

1. Vue.nextTick()用于在DOM更新之后立即执行一个回调函数，确保在下次DOM更新周期之后执行。

• 在Vue中，如何能直接访问父组件、子组件和根实例

1. $parent：父组件
2. $root:根实例，如果没有父实例，那么读取的将是自身
3. $children：直接子组件，无法获取隔代的子组件，并且不保证组件的顺序，也非响应式

• 在TypeScript创建了两种兼容性：子类型和赋值，它们有什么区别

1. 赋值兼容性扩展了子类型兼容性，增加了一些规则，允许和any相互赋值，以及enum和对应数字之间的相互赋值
2. 类型兼容性遵从赋值兼容性，即使是implements和extends语句也不例外

第五部分

• 请简单介绍一下WEB缓存机制，具体过程有哪些步骤

1. WEB缓存机制是指浏览器在加载WEB页面时会将一部分资源存储在本地，以提高用户访问速度。具体过程包括检查缓存、读取缓存、验证缓存和更新缓存。

• 在浏览器中，一个页面从输入URL到加载完成，都有哪些步骤

1. 域名解析，根据域名找到服务器的IP地址
2. 建立TCP连接，浏览器与服务器经过三次握手后建立连接
3. 浏览器发起HTTP请求，获取想要的资源
4. 服务器响应HTTP请求，返回指定的资源
5. 浏览器渲染页面，解析接收到的HTML、CSS和JS等文件

• 请描述对JS的理解

1. 是一种通过解析执行的高级编程语言，同时也是一门动态、弱类型的直译脚本语言，适合面向对象（基于原型）和函数式的编程风格

• XSS是什么？对这种攻击有哪些防范办法

1. 跨站脚本攻击，将恶意脚本注入到目标网页中，用户访问页面时，造成信息泄露、行为被劫持等
2. 为Cookie添加HttpOnly标记，使得客户端不能通过JS读取Cookie信息
3. 对提交到服务器中的信息做输入检查，如白名单过滤、把字符串编码成HTML实体等
4. 对输出到页面中的信息做输出检查

• 什么是解构

1. 是一种赋值语法，可以从数组中提取元素或从对象中提取属性，将其赋值给对应的变量或另一个对象的属性
2. 目的是简化提取数据的过程，增强代码的可读性
3. 分为数组解构和对象解构,区别在于解构赋值语句的左侧，前者是数组字面量，后者是对象字面量

• 为什么React组件的名称首字母要大写

1. 在JSX中，为区分HTML元素和组件，规定前者的标签首字母要小写，而后者的首字母要大写

• 什么是Forward Refs?

1. Forward Refs 是 React 中一种转发 refs 到组件的技术，允许父组件访问子组件的 DOM 节点或实例。

• React的高阶组件有哪些限制（即注意事项）

1. 不要在组件的render()方法中使用高阶组件。因为高阶组件每次都会创建一个新组件，而根据React的diff算法可知，原组件（即前一次所创建的组件）会先被卸载掉，然后重新挂载新组件。这么做不仅效率低下，而且原组件的状态和所有子组件都将丢失
2. 高阶组件创建的新组件不会包含原来组件的静态方法，如果需要，只能手动复制

• npm在什么情况下适合将包本地安装？而在什么情况适合全局安装

1. 如果代码依赖于某个包（如JQ等），就应该本地安装。
2. 如果将包作为一个命令行工具（如gulp、grunt等），就应该全局安装

• 什么是Vue CLI

1. CLI是一个全局安装的npm包，提供了终端里的Vue命令
2. CLI服务是一个开发环境依赖
3. CLI插件是一种包含特定功能的npm包，如Babel转译、ESLint集成等

• display:none与visibility:hidden都可隐藏元素，有何区别

1. 定义为none后，相当于元素没有了后代元素，在正常流中不占任何空间，元素的真实尺寸将会丢失，还会导致浏览器的重排和重绘
2. 定义为hidden后，在正常流中还是会占用空间，但仍具有元素的真实尺寸，只会导致浏览器重绘

第六部分

• 什么是微格式

1. 是一种数据机构化技术，通过添加属性（class或rel）和元数据(Link元素)的方式来实现Web的语义化，让内容适合人类阅读，以及容易被机器处理

• 什么是HTML实体

1. 就是对当前文档的编码方式不能包含的字符，提供一种转义表示

• 请谈一下你对BFC的理解

1. 格式化上下文，即不是CSS属性也不是一段代码，而是CSS2.1规范的一个概念，决定元素的内容如何渲染以及其他元素的关系和交互，有五条规则
2. 隔离作用，内部元素不会受外部元素的影响（反之亦然）
3. 一个元素只能存在于一个BFC中，如果能同时存在两个BFC中，就违反了BFC的隔离规则
4. BFC内的元素按正常流排列，元素之间的间隙由元素的外边距控制
5. BFC中的内容不会与外面的浮动元素重叠
6. 计算BFC的高度，需要包括BFC内的浮动子元素的高度

• get和post的区别有哪些

1. 语义不同，get是获取数据，post是提交数据
2. get请求会把附加参数带在URL上，而POST请求会把提交数据放在报文内，URL长度会被限制，所以get请求能传递的数据有限
3. HTTP规定GET是幂等的，而POST不是

• 分号什么时候自动补全？自动补全有什么弊端

1. 分号在 JavaScript 中会在一行的末尾自动补全，但这种自动补全可能导致混淆和错误。当 JavaScript 解释器对代码进行解析时，会尝试在行末尾自动添加分号，这可能导致出现意外的行为和错误。在某些情况下，自动补全会引发难以察觉的 bug，并且在一些情况下会影响到代码的性能。

• 解析对CSRF的攻击原理和防御手段

1. CSRF攻击原理是利用用户在登录认证后的状态下对应用程序的信任，利用认证信息的漏洞进行攻击。攻击者通过诱使受害者访问恶意网站或点击恶意链接，利用受害者在目标网站的已认证状态，对目标网站发起请求，暴露用户信息或执行恶意操作。
2. 防御CSRF攻击的常见手段包括使用CSRF令牌，在请求中携带一个随机生成的令牌，服务端验证该令牌的有效性，从而防止CSRF攻击。另外，限制跨域请求、使用同源策略和安全的HTTP头部设置也可以帮助防御CSRF攻击。

• 如何使用DataView

1. DataView是JavaScript中用于读取和写入二进制数据的接口。

// 创建一个Buffer
let buffer = new ArrayBuffer(16);
// 创建一个DataView实例
let dataView = new DataView(buffer);
// 写入数据
dataView.setInt32(0, 42);
// 读取数据
let value = dataView.getInt32(0);
console.log(value); // 输出 42

• ReactDom中的render()方法有什么功能

1. ReactDom中的render()方法用于将React元素渲染到DOM中。

• 为什么弃用字符串类型的Refs

1. 弃用字符串类型的Refs是因为它们已被认为是一种过时的做法，并且有潜在的安全风险和性能问题。Refs应该是对象类型或回调函数，以便更好地支持React的特性和优化。

• 什么是Redux

1. 是一个可预测的状态容器，不但融合了函数式编程，还严格遵循了单向数据流的理念
2. 约定了一系列的规范，并且标准化了状态（数据）的更新步骤
3. 是一个独立的库，可与React等其他库搭配使用

• packpage.json有什么作用

1. 用于管理本地已安装的npm包，记录项目的作者、依赖包、版本等各类信息
2. 能方便地复制一个项目，不比再手动地安装相关的包，利于多人协作

• TypeScript中的.d.ts文件用来做什么的

1. d.ts 文件用来为 JavaScript 文件中的库提供类型定义。这些文件充当了TypeScript中的声明文件，可以定义库的API结构以及类型信息，从而使得JavaScript库可以在TypeScript中进行类型安全的使用。

第七部分

• HTML实体的应用场景有哪些

1. HTML实体在以下场景中被广泛使用： 1. 用于显示特殊字符，如版权符号©、小于号<、大于号>等。 2. 用于转义HTML中的特殊字符，例如&、<、>等，以避免它们被浏览器解释为标签和其他特殊用途。

• 什么是shadowDom

1. 是浏览器的一种功能，能够自动添加子元素

• CSS中类选择器和ID选择器有哪些区别

1. 类选择器以点号（.）开头，用于选择具有相同类的元素；而ID选择器以井号（#）开头，用于选择具有特定ID的元素。区别在于类选择器可以被多个元素使用，而ID选择器只能对应于一个唯一的元素。

• 请简单介绍下REST

1. 表示状态性转移，既不是标准，也不是协议，而是一组架构约束条件和设计指导原则，一种基于HTTP\URL\XML等现有协议与标准的开发方式
2. 常说的RESTful是一种遵守REST设计的架构风格

• undefined和null的异同

1. undefined表示一个变量未被初始化或不存在，而null是专门用来表示空值的特殊关键字。

相同

1. 都有空缺的意思
2. 不包含方法和属性
3. 都是假值
4. 都只有一个值

不同

1. undefined是表示一个未定义的值，null表示一个空的对象
2. 类型不同，typeof运算符应用与undefined得"undefined"，而应用于null，得到的是"object"
3. 数字转换不同,Number()转换数字后，得NAN和0
4. 在非严格模式表现不同，undefined可以是一个标识符，能被当作变量来使用和赋值，而null不可以

• 什么是模板字面量

1. 在RS6一般人模板字面量后，能避免用若干个加号来实现字符串拼接

• ES6为函数做了哪些改良

1. 默认参数、元属性、块级函数、箭头函数

• 什么是Promise

1. 能更合理地控制和追踪异步操作

• Redux三大原则

1. 单一数据源
2. 保持状态只读
3. 状态的改变由纯函数完成

第八部分

• 元素属性src和href有何区别

1. 功能不同
2. href能够建立一条通道，将当前文档和定义的资源连接起来
3. src是将定义的资源嵌入到当前文档中

• 伪元素::before和:before有什么区别

1. 在CSS中，双冒号(::)用于表示伪元素，单冒号(:)用于表示伪类。因此，::before表示使用伪元素::before，而:before可能会被认为是语法错误。

• calc()函数有什么作用

1. 是css的一个函数，只有一个数字表达式参数，可处理加减乘除等数学运算，并且在表达式中可混用不同的单位

• 什么是RESTful API？

1. RESTful API是一种基于REST架构原则设计的API。它使用GET、POST、PUT、DELETE等HTTP方法，通过URL来唯一地定位资源，并使用JSON或XML格式作为数据传输。

• 如何设计RESTful API？

1. 使用合适的URL来唯一地标识资源。
2. 使用合适的HTTP方法（GET、POST、PUT、DELETE）来执行对资源的操作。
3. 使用合适的HTTP状态码来表示操作的结果或错误情况。
4. 使用合适的数据格式（如JSON或XML）来传输数据。
5. 为资源的不同表示（如不同的语言或格式）提供适当的支持。
   设计RESTful API时需考虑资源的层级关系、行为和属性，以及URL、HTTP方法、状态码和数据格式的选择。