面试筛选题移动web_web APIs阶段

最新推荐文章于 2024-08-25 09:57:22 发布

小祥编程

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量251

点赞数 1

分类专栏：前端文章标签：前端面试 html

本文链接：https://blog.csdn.net/qq_51602285/article/details/127361243

版权

前端专栏收录该内容

28 篇文章 8 订阅

订阅专栏

一、移动web

要有条理性的回答：
- 原因…所以…最后
- 首先…其次…最后

1.1 请说下初始化CSS样式的意义

答：
1、浏览器差异：因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

2、提高编码质量：初始化CSS可以节约网页代码，节约网页下载时间；还会使得我们开发网页内容时更加方便简洁，不用考虑很多。如果不初始化，整个页面做完会很糟糕，重复的css样式很多。
常见写法：
①：最简单的初始化方法就是： * {padding: 0; margin: 0;} 。这样一个通用符在编写代码的时候是快，但这样写的话，他会把所有的标签都初始化一遍，这样就增加了网站运行的负载，会使网站加载过慢。
②：最好的做法是针对常用的标签进行初始化即可。
参考淘宝、腾讯等网站的css初始化：https://www.jb51.cc/css/1113842.html

1.2 谈谈你对HTML语义化的理解？

答：
根据页面的结构，选择合适的语义化标签，用正确的标签做正确的布局，同时有利于浏览器、搜索引擎的解析。

追问：为什么要语义化
1、HTML语义化让页面的内容结构化，结构更清晰，便于让浏览器、搜索引擎解析
2、即使在没有样式CSS情况下也以一种文档格式显示，并且是易于阅读的
3、搜索引擎也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO
4、使阅读源代码的人更容易将网站分块，便于阅读维护理解

追问：平时你写HTML代码还有那些注意事项？
1）尽可能少的使用无语义的标签div和span
2）在语义不明显时，既可以使用div或者p时，尽量用p，因为p在默认情况下有上下间距，对兼容特殊终端有利
3）不要使用纯样式标签，如：b、font、u等，改用CSS设置
4）需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用css指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）
5）使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和单元格要区分开，表头用th，单元格用td
6）表单域要用fieldset标签抱起来，并用legend标签说明表单的用途
7）每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在label标签中设置for=someId来让说明文本和相对应的input关联起来

追问：你知道有哪些HTML5新增的语义标签？
article（定义文章）、aside（定义文章的侧边栏）、figure（一组媒体对象以及文字）、figurecaption（定义figure的标题）、footer（定义页脚）、header（定义页眉）、nav（定义导航栏）、section（定义文档中的区段）、time（定义日期和时间）、dialog（定义一个对话框）

1.3 请说下如何居中一个div？

答：方法有很多，我大概记得以下5~6种吧。（回答可以直接说标题即可如果非要说代码，也是说文字）
方法一：利用定位

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .parent {
      width: 500px;
      height: 500px;
      border: 1px solid #000;
      position: relative;
    }

    .child {
      width: 100px;
      height: 100px;
      border: 1px solid #999;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -50px;
      margin-left: -50px;
    }
  </style>
</head>

<body>
  <div class="parent">
    <div class="child">我是子元素</div>
  </div>
</body>

</html>

方法二：利用 margin:auto;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .parent {
      width: 500px;
      height: 500px;
      border: 1px solid #000;
      position: relative;
    }

    .child {
      width: 100px;
      height: 100px;
      border: 1px solid #999;
      position: absolute;
      margin: auto;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
  </style>
</head>

<body>
  <div class="parent">
    <div class="child">我是子元素</div>
  </div>
</body>

</html>

方法三：利用 display:table-cell

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .parent {
      width: 500px;
      height: 500px;
      border: 1px solid #000;
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }

    .c hild {
      width: 100px;
      height: 100px;
      border: 1px solid #999;
      display: inline-block;
    }
  </style>
</head>

<body>
  <div class="parent">
    <div class="child">我是子元素</div>
  </div>
</body>

</html>

方法四：利用 display： flex;设置垂直水平都居中

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .parent {
      width: 500px;
      height: 500px;
      border: 1px solid #000;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .c hild {
      width: 100px;
      height: 100px;
      border: 1px solid #999;
    }
  </style>
</head>

<body>
  <div class="parent">
    <div class="child">我是子元素</div>
  </div>
</body>

</html>

方法五：计算父盒子与子盒子的空间距离(这跟方法一是一个道理) （不够好：自己算）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .parent {
      width: 500px;
      height: 500px;
      border: 1px solid #000;
    }

    .c hild {
      width: 100px;
      height: 100px;
      border: 1px solid #999;
      margin-top: 200px;
      margin-left: 200px;
    }
  </style>
</head>

<body>
  <div class="parent">
    <div class="child">我是子元素</div>
  </div>
</body>

</html>

方法六：利用 transform

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .parent {
      width: 500px;
      height: 500px;
      border: 1px solid #000;
      position: relative;
    }

    .c hild {
      width: 100px;
      height: 100px;
      border: 1px solid #999;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>

<body>
  <div class="parent">
    <div class="child">我是子元素</div>
  </div>
</body>

</html>

1.4 请说下px/em/rem这三个单位有什么区别？

答：
①： px 是绝对单位，而 em 和 rem 是相对单位。
②： em相对于当前元素内文本的字体大小，找不到就找父亲的文字大小，而 rem是相对的** HTML 根元素**文字大小
③： px适合于固定文字大小， em经常用于比如段落首行缩进等， rem在后期移动端开发经常用于做适配。

1.5 你说下rem布局的原理和思路吧？

答：
1、rem 是css的相对单位，rem缩放是相对根元素字体大小.
2、rem 布局的本质是等比缩放，一般是基于宽度。
3、rem 会配合媒体查询（或js动态获取屏幕宽度）来一起使用，来实现屏幕的适配。

rem布局实现目的：等比缩放

1、元素所有属性只要px单位—>rem单位

2、rem单位非常神奇，背后基准值会变。

3、基准值取决于根元素字号大小，屏幕变化导致根元素字号大小变；

4、实现原理：给window注册resize。当变化内部函数设置根元素字号大小 = 为当前屏幕宽度 / 固定数值通常为10

1.6 通过CSS如何写一个三角形？

答：
利用css边框属性就可以得到三角形。
边框是梯形的，如果盒子没有宽高，则会变成三角形，设置三个角透明色，其中一个角给颜色，就能得到三角形了

1.7 如何实现两侧固定中间自适应的布局？

答：
圣杯布局

最简单方法，可以通过flex布局来显示，大盒子里面包含左中右三个小盒子，父盒子利用display：flex。两侧直接写固定宽度，中间盒子给flex:1 即可。

传统方案：父亲设置 box-sizing:border-box CSS3盒子模型，设置左右padding, 子元素三个：左右侧绝对定位宽度（正好是设置padding）高度同父亲。中间：设置100%宽 100%高

1.8 你知道BFC吗？

答：
①：BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则，BFC目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素
②：触发BFC的条件

根元素，即HTML元素
浮动元素：float值为left、right
overflow值不为 visible，为 auto、scroll、hidden
display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
position的值为absolute或fixed

③：BFC的主要使用场景：

防止margin重叠（塌陷）。比如给父级添加overflow，就触发了BFC，还有子元素浮动，不会触发外边距塌陷原因也是因为触发了BFC
清除内部浮动。同样，清除浮动方法中有个overflow:hidden 方法

二、JS基础

2.1 说下typeof返回的数据类型

回答：
①：简单数据类型直接返回对应的英文，比如：number string boolean undefined 等，特殊情况，null 返回 object
②：复杂数据类型返回 object，函数返回的是 function fn(){…} typeof fn

2.2 请说下转换为false的情况有哪些？

**答：**七种
自动转换为false的有： 0 、 “”、 null、 false、 NaN、 undefined、还有不成立的表达式

2.3 两个等号和三个等号的区别是什么？

回答：
== 表示是相等，只比较内容，类型不同，会隐式转换为同类型，进行比较！
=== 表示是全等，不仅比较内容，也比较类型！如果类型不同，直接false

2.4 请说说你对作用域链的理解？

回答：
①：JavaScript中的作用域分为全局作用域、局部作用域，多个嵌套的作用域形成作用域链。
②：作用域链：内部寻找一个变量的查找规则，

规则：
- 当在某个作用域中查找变量时，如果当前作用域没有找到，则向上层作用域查找，上层没有声明，继续向上层查找，一直找到全局作用域。
- 找的过程中，找到则使用该变量，没有找到则报错。

2.5 简单数据类型与复杂数据类型在内存上存储有什么区别？

回答：
①：基本类型（简单类型）主要为以下6种：Number、String、Boolean、Undefined、null、symbol

基本数据类型的值存储在栈中

②：引用类型（复杂类型） Object、Array、Function

引用类型的值存储于堆中

三、webapi

3.1 请说下什么是重绘和重排（回流）？他们的区别是什么？

重排: 也叫做回流，当DOM元素影响了元素的几何属性（例如宽和高），浏览器需要重新计算元素的几何属性，同样其它元素的几何属性和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。这个过程称为“重排”。
重绘: 完成重排后，浏览器会重新绘制受影响的部分到屏幕上中，该过程称为“重绘”。
总结：
当我们改变DOM的大小，增加删除都会导致重排，当给DOM元素改变颜色的时候，会导致重绘，重排一定会重绘，重绘不会重排。重排会影响性能，所以我们尽快能的减少重排的操作（这句话是重点）

3.2 说说this的指向问题吧？

this是个关键字,它的指向和函数的调用方式有关，初步的理解就是，this指向所在函数的调用者。
1、以函数形式调用时， this 永远都是 window
2、以方法的形式调用时， this 是调用方法的对象

let obj = {
   fn:function(){
      log(this)
   }
}
obj.fn();  // this--->obj

3、以构造函数的形式调用时， this 是新创建的那个对象
4、使用 call 和 apply 调用时， this 是指定的那个对象
5、箭头函数：箭头函数的 this 按照普通变量对待。比如把他当做 x 变量即可，然后按照作用域链找就行了。
6、全局中的this是window
7、事件处理函数，如果是普通的function函数，则this指向事件源。

3.3 事件流分为哪两个阶段？

事件流是指事件传播的顺序，由事件捕获 => 目标事件 => 事件冒泡
所以事件流分为捕获和冒泡两个阶段。

3.4 事件委托的实现原理？如果获取当前触发的dom节点？

回答：
①：事件委托主要利用事件冒泡特性来实现的。
②：事件委托（事件委派）主要有2个使用场景：

如果有多个子元素，可以把事件注册给父元素，因为点击子元素，也会将事件冒泡到其父元素上，利用这个特点提高了性能。
给后来动态生成的元素绑定事件。因为动态生成的元素没有办法直接绑定事件，可以利用事件委托来绑定事件。

使用 e.target 获取当前触发事件的元素。

3.5 你能说说怎么理解事件循环机制的？

1、JavaScript 是一门单线程语言. 单线程可能会出现阻塞的情况，所js分了同步任务和异步任务。
2、同步和异步任务分别进入不同的执行环境，同步的进入主线程，即主执行栈，异步的进入任务队列。
3、主线程内的任务执行完毕为空，会去任务队列读取对应的任务，推入主线程执行。上述过程的不断重复就是我们说的 Event Loop (事件循环)。