准备前端面试:15个问题

这篇文章的作者(我们今天要翻译的翻译版)列出了他在面试中被问到的15个问题,他亲自问了前端开发人员职位的候选人。







1.什么是DOM?



DOM(文档对象模型)是HTML文档的编程接口。此界面使您可以从脚本影响文档,更改其外观,样式和内容。在DOM中,文档表示为节点树。



2. <span>和<div>元素之间有什么区别?



  • <span> 是一个内联元素。
  • <div> 是一个块元素。


元素<div>应用于设置文档各节的样式。元素用作<span>少量文本,图像和其他类似页面元素的容器。



应当注意,不能将块元素放在内联元素上。这是一个示例,其中显示了块元素在内联元素内的不正确放置(这是<div>I'm illegal</div>放置在element内的片段<span>):



<div>Hi<span>I'm the start of the span element <div>I'm illegal</div> I'm the end of the span</span> Bye I'm the end of the div</div>


3.什么是元标记?



元标记是在页面标记<head>中找到的描述页面内容的标记元标记不会显示在页面上。它们仅在其代码中可用。



他们的主要任务是向搜索引擎简要描述页面的内容。这是一个例子:



<head>
  <meta charset="UTF-8">
  <meta name="description" content="Description search engines use">
  <meta name="keywords" content="Keywords, of, your, page">
  <meta name="author" content="Me">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>


4. CSS中的标识符和类选择器有什么区别?



标识符(id)是唯一的。一个项目只能有一个标识符。页面上只能有一个具有特定ID的元素。



类名(class)不是唯一的。可以将同一类分配给多个元素。可以为一个元素分配多个类。



如果需要将某种样式应用于页面的多个元素,则需要使用类来解决此任务。



5.如何在CSS中使用媒体查询?



媒体查询使用的规则@media可让您将CSS样式应用于不同类型的内容。媒体查询还可以用于基于在其中查看页面的环境的特征来自定义页面元素。



/*      <div>  "red"   ,      600px   */
@media only screen and (max-width: 600px) {
  div {
    background-color: red;
  }
}


6. CSS中的伪类是什么?



在CSS中,伪类用于描述处于特殊状态的元素的样式。伪类可以与CSS选择器结合使用,以根据元素的状态自定义元素的外观。



这是一个例子:



/* 
     <a>,      ,     green. 
*/
a:hover {
  color: green;
}
/*     <a>      purple.*/
a:visited {
  color: purple;
}


如果询问您是否可以命名任何伪类,则页面上有大量伪类



7.以下类型的元素定位之间有什么区别:相对,固定,绝对,静态?



  • 相对定位是指元素从其默认位置移开时的位置。
  • 固定位置是根据浏览器窗口的边缘调整元素的位置时的位置。
  • 绝对定位是元素相对于最接近的父元素放置的位置,并且完全由开发人员指定。
  • 静态定位是默认定位模式,该模式按文档中描述的顺序显示项目。


8. PUT和POST请求之间有什么区别?



PUT请求导致目标资源被请求中传输的数据替换。它可用于更新现有资源的内容或创建新资源。



POST请求导致对请求中传递的数据进行特定于资源的处理。它们可以用来执行各种动作。包括-用于创建新资源,用于将文件上传到服务器,用于提交表单。



PUT和POST请求之间的另一个区别是PUT请求是幂等的,而POST请求不是。即,如果发送相同数据并以相同URL执行的请求将被执行几次,则等同于执行一次该请求。多次执行POST请求并不等同于执行一次。也就是说,例如,多个此类请求可能导致服务器上创建多个对象。



9. Long Polling技术,WebSocket协议和服务器生成的事件之间有什么区别?



  • Long Polling . , , , . .
  • WebSocket .
  • , , HTTP-, .


10. -, ?



顾名思义,本地存储是浏览器可用来在本地存储数据的地方。它最多可以存储10 MB的数据。会话存储是一种与会话相关联的本地存储,在完成后会被删除。会话存储最多可以存储5 MB的数据。



Cookies用于存储少量数据,不超过4KB。浏览器可以使用它们,服务器可以从浏览器中请求它们。



11.什么是CORS?



CORS(跨源资源共享)是一种基于浏览器的机制,它允许页面访问特定域之外的资源。这扩展了页面的功能,并为同源策略增加了灵活性。



12.什么是诺言?



承诺是JavaScript在执行异步操作时使用的对象。与回调和事件相比,它们使使用异步操作更容易,并提供了更方便的错误处理机制。



13.一个承诺可以处于什么状态?



一个承诺可以处于以下三种状态之一:



  1. 已完成-与承诺相关联的操作已成功完成。
  2. 已拒绝-与承诺相关联的操作以错误完成。
  3. 待定-承诺处于待定状态,即不能说已成功完成或有错误。


14.什么是JavaScript中的变量和函数提升?



提升变量和函数是将其声明移至其范围(全局或函数范围)的顶部。



15. JavaScript中哪些值是错误的?



在JavaScript中,假值是当转换为布尔类型时变成值的值false这些是以下值:



  • '' 
  • 空值
  • 未定义
  • N
  • -0
  • 0n // BigInt类型的值转换为布尔类型时,其行为与Number类型的值相同


结果



采访中询问了我与您分享的问题。我在采访其他开发人员时曾问过他们。像这样的问题,再加上实际的作业,是测试前端程序员职位候选人的知识的好方法。



我认为准备进行前端面试的JavaScript问题比本文涉及的更多。解析有关TypeScript的问题也非常有帮助。



如果您在简历中表示您熟悉前端框架,则意味着您应该为以下事实做好准备:将询问有关该框架知识的问题。



在前端面试中问了您什么问题?










All Articles