web前端面试基础

蔚落 2022-11-30 15:41 242阅读 0赞

**1.简述XMLHttpRequest、JSONP的适用场景，并针对两种请求形式简述如何检测请求错误？**

> 1.  **XMLHttpRequest** 用于**浏览器端与服务器端异步请求数据从面实现对页面的无刷新修改**，支持**GET/POST请求**，一般用于非跨域的场景。如果需要使用XMLHttpRequest跨域请求数据，需要通过CORS头支持。 JSONP用于跨域请求数据的场景，只支持GET请求。
> 2.  **XMLHttpRequest** 异常判断一般通过该对象的readystate和http状态码status来判断，JSONP的异常判断一般是onerror事件和超时timer来判断。

**2.CSS样式主要包含以下三种类型：**  
（1）行内样式（内嵌样式）：结构的内部，即写在标签内的样式；写在标签的开始部分内部，style属性当中。

> <标记 style=“样式的属性名1：样式的属性值1；属性名2：属性值2；…”></标记>

（2）内部样式（内联样式）：写在HTML页面内部，存放于head标记当中，样式写在style标记内。

（3）外部样式（外联样式）：写在css文件内。

**3.HTML5 事件可以触发多少次？**  
多次  
**4.关于块级元素和行内元素？**  
**----> 块级元素** 在浏览器显示时，通常以新行来开始（和结束）。  
块级元素按照其应用于结构内容分为三种：

> **结构化块状元素**： 这类元素用于构造文档的结构，没有语义上的含义，仅仅划分出了文档的组织方式，并没有体现文档的内容。  
> **终端块状元素**：这类元素用于从结构转向内容，拥有语义上的含义，能够表明内容的性质。终端块状元素属于结构的终点，它们不能再包含其他块级元素，只能包含文本或行级元素。  
> **多目标块状元素**：多目标指的是可以自由的扩展或嵌套文档的结构，以可以终端的形式出现。当多目标块状元素以结构化的方式使用时就含有结构化的内涵，以终端的形式使用就含有语义的内涵。

**----> 行内元素** 基于语义级(semantic)的基本元素，只能容纳文本或其它内联元素。

**简单判断方法 :**

> **块级元素**：会独占一行，默认情况下，其宽度自动填满其父元素宽度。  
> **行内元素**：不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化。

5.内联元素加上display：block后被块级化，块级元素一般是其他元素的容器，可容纳其他内联元素和其他块状元素。块状元素排斥和其他元素一行，高度和宽度起作用，因此可以定义宽高。

> **block**:将行级别元素转为块级别元素。  
> **inline**:将块级别元素转为行级别元素。  
> **inline-block**:不能自动换行,但是可以设置宽高。

**6.id与class之间的区别？**  
id在文档中只能使用一次，而class可以多次使用。  
id比class具有更高的样式优先级。  
一个元素只能有一个id属性值，却拥有多个class属性值。  
**7.link和@import区别？**  
（1）link除了引用样式文件，还可以引用图片等资源文件，而import只引用样式文件。

（2）兼容性不同，link不存在兼容性的问题，import在IE5以上支持，是css2.1新增的。  
（3）在样式表文件可以使用import导入其它的样式表文件，而link不可以。  
（4）link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。  
（5）link支持使用Javascript，控制DOM去改变样式；而@import不支持。  
**8. display**：none指的是元素完全不陈列出来，不占据空间，涉及到了DOM结构，故产生reflow与repaint  
**visibility**：hidden指元素不可见但存在，保留空间，不影响结构，故只产生repaint，不可触发绑定事件。  
**opacity=0**：指元素不可见但存在，保留空间，不影响结构。  
**9.reflow是什么？**  
reflow(回流)是指浏览器为了重新渲染部分或者全部的文档，重新计算文档中的元素的位置和几何构造的过程。  
**以下操作会引起回流：**

> ① 改变窗口大小 ② font-size大小改变 ③ 增加或者移除样式表 ④ 内容变化（input中输入文字会导致） ⑤  
> 激活CSS伪类（:hover） ⑥ 操作class属性，新增或者减少 ⑦ js操作dom ⑧ offset相关属性计算 ⑨设置style的值

**10.四种触摸事件。**  
touchstart: //手指放到屏幕上时触发  
touchmove: //手指在屏幕上滑动式触发  
touchend: //手指离开屏幕时触发  
touchcancel: //系统取消touch事件的时候触发  
**11.JavaScript中**：  
**concat()** 方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。  
**append()** 方法在被选元素的结尾（仍然在内部）插入指定内容。  
**appendTo()** 方法在被选元素的结尾（仍然在内部）插入指定内容。  
**pop()** 方法用于删除并返回数组的最后一个元素。