前端面试题

最新推荐文章于 2021-06-26 15:34:43 发布

Rocke369

最新推荐文章于 2021-06-26 15:34:43 发布

阅读量1.1k

点赞数

分类专栏：前端面试题

本文链接：https://blog.csdn.net/qq_39314291/article/details/81086384

版权

前端面试题专栏收录该内容

0 篇文章 0 订阅

订阅专栏

HTML CSS 部分

1、什么是盒子模型？

所有HTML元素都可以视为一个盒子，在CSS中谈论设计和布局时会经常使用术语“盒子模型”。盒子模型本质上就是一个包装HTML元素的盒子。它包括：padding（边距），border（边框），margin（外边距）和content（实际内容）。

2、简述src与href的区别

href（Hypertext Reference的缩写）超文本引用，在link、a元素中使用，常用于指定超链接。src（source的缩写）资源，在img，script，iframe上使用，常用于指定本地资源文件。

3、行内元素有哪些？块级元素有哪些？空(void)元素有那些？

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea

块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素：br、meta、hr、link、input、img

4、px和em的区别

px是绝对长度单位，px定义的长度是固定的，计算比较容易。

em是相对长度单位，em定义的长度不是固定的，em会继承父级元素的字体大小（浏览器的默认字体高都是16px，所以1em==16px，0.5em==8px）

5、div和span的区别？

div是块级标签，span是行级标签

6、在html中，position取值有哪几种，默认值是什么？

值：static（默认值）、relative、fixed、absolute

7、清除浮动的几种方式，各自的优缺点？

父元素添加样式 overflow:hidden
父元素添加样式 overflow:auto
浮动元素后加空标签并设置样式 clear:both（添加了无意义的标签）
父元素设置宽高
父元素添加样式 display:table
父元素添加样式：

.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}

.clearfloat{zoom:1}

8、CSS选择器有哪些？
元素选择器、类选择器、ID选择器、通配符选择器、属性选择器、相邻兄弟选择器、普通兄弟选择器、子选择器、后代选择器、伪类选择器

9、CSS选择器优先级算法如何计算？

标签的权重为1，class的权重为10，id的权重为100，如果权重相同则最后定义的样式会起作用，但是应该避免这种情况出现。以下例子是演示各种定义的权重

div{} 权重为1

.class1{} 权重为10

#id1{} 权重为100

#id1 div{} 权重为100+1=101

.class1 div{} 权重为10+1=11

.class1 .class2 div{} 权重为10+10+1=21

11、内联样式和important哪个优先级高？

important

12、css的基本语句构成是？
选择器{属性1:值1;属性2:值2;…}

13、<img>标签上title与alt属性的区别是什么？
alt 如果无法显示图像，浏览器将显示的替代文本
title 全局属性，鼠标移到元素上时显示一段工具提示文本

14、link 和@import 的区别是?

（1） link属于HTML标签，而@import是CSS提供的;

（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

（3） @import只在IE5以上才能识别，而link是HTML标签，无兼容问题;

（4） link方式的样式的权重高于@import的权重

15、列出display的值并说明它们的作用。position的值， relative和absolute定位原点是？

display常用的值有：

inline（默认值），此元素会被显示为内联元素。

block 此元素将显示为块级元素

none 此元素不会被显示。

inline-block 行内块元素

position常用的值有：

static 默认值。静态定位元素不受顶部，底部，左侧和右侧属性的影响。

absolute 绝对定位，相对于最近定位的祖先元素进行定位。

fixed 相对于浏览器窗口进行定位。

relative 相对定位，相对于其正常位置进行定位。

16、列出常见的HTML标签，并简单介绍这些标签用在什么场景？

<header>、<section>、<footer>语义化更强的布局节点

<div>、<span>传统布局节点

<h1>、<h2>、<h3>、<h4>、<h5>、<h6>标题

<p>段落

<a>超链接

<ul>、<li>无序列表

<ol>、<li>有序列表

<img>图片

<audio>音频

<video>视频

<table>、<thead>、<tbody>、<tr>、<th>、<td>表格

<form>、<input>、<label>、<select>、<button>、<textarea>表单

<br>换行

<hr>水平线

<strong>,<em>强调

17、iframe有哪些缺点？

① iframe会阻塞主页面的Onload事件；

② 搜索引擎的检索程序无法解读这种页面，不利于SEO;

③ 会影响页面的并行加载。

18、简单说明什么是HTML5？

HTML5是HTML最新的修订版本，由万维网联盟（W3C）于2014年10月完成标准制定。目标是取代1999年所制定的HTML 4.01和XHTML 1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到匹配当代的网络需求。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少网页浏览器对于需要插件的丰富性网络应用服务（Plug-in-Based Rich Internet Application，RIA），例如：Adobe Flash、Microsoft Silverlight与Oracle JavaFX的需求，并且提供更多能有效加强网络应用的标准集。[更多]

1、前端页面由哪三层构成，分别是什么？作用是什么？

前端页面构成：结构层、表示层、行为层

结构层（structural layer）

由 HTML 或 XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：“这是一个文本段。”

表示层（presentation layer）

由 CSS 负责创建。 CSS对“如何显示有关内容”的问题做出了回答。

行为层（behaviorlayer）-

2、对WEB标准以及W3C的理解与认识？

w3c（World Wide Web Consortium 万维网联盟）提倡所有的标记都必须要有一个相应的结束标记、所有标签的元素和属性的名字都必须使用小写、所有的标记都必须合理嵌套、html（结构层）CSS（表示层）JavaScript（行为层）的分离等；

结构层（structural layer）由 HTML 或 XHTML之类的标记语言负责创建。HTML标签对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：“这是一个文本段。”

表示层（presentation layer）由 CSS 负责创建。 CSS对“如何显示有关内容”的问题做出了回答。

行为层（behavior layer）负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域。

3、什么叫优雅降级和渐进增强？

优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

4、常见的浏览器有哪些？都是什么内核？

浏览器（内核）：Chrome（WebKit）、Mozilla（Gecko）、Safari（Webkit）、Opera（Webkit）、IE（Trident）。

20、浏览器本地储存有哪几种类型？都有什么区别？

21、前端与后台数据交互都有哪些方式？

22、对前端界面工程师这个职位是怎样理解的？

23、列举最近最流行的一些技术？常去哪些网站？

24、HTML中<img>标签上title属性与alt属性的区别是什么？

25、CSS中px、em、rem的区别？

26、JavaScript如何理解闭包？

27、JavaScript中如何检测一个变量是一个String类型？请写出函数实现。

28、JavaScript如何获取浏览器URL中查询字符串中的参数？

29、列举JavaScript字符串和Array操作函数？

30、jQuery有几种选择器？

31、jQuery中$.get()提交和$.post()提交有什么区别？

32、请指出document.load和document.ready的区别？

33、JavaScript常用的调试方法？

34、return 1===1===1 返回的结果是什么？

35、列举JavaScript的几种ES6新特性？

4. 如何居中一个浮动元素？

方式1:设置容器的浮动方式为相对定位，然后确定容器的宽高比如宽500 高 300 的层，然后设置层的外边距。

  div{ 
    
           width: 500px; 
            height: 300px; 
            margin: -150px 0 0 -250px; 
            position: absolute; 
            left: 50%; 
            top: 50%; 
            background-color: yellow;  
        } 
<div> 元素居中 </div>

方式2：需要position:absolute;绝对定位。而层的定位点，使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。

div {
    position:absolute;
    top:50%;
    left:50%;
    margin:-150px 0 0 -200px;
    width:400px;
    height:300px;
    border:1px solid #008800;
}
<div>让层垂直居中于浏览器窗口</div>

5. 请简述HTML和XHTML最重要的4点不同？

不同：

XHTML要求正确嵌套
XHTML 所有元素必须关闭
XHTML 区分大小写
XHTML 属性值要用双引号
XHTML 用 id 属性代替 name 属性
XHTML 特殊字符的处理

6. 页面布局中常听说的“结构与表现”分离，“结构”是指？“表现”是指？

“结构”：HTML

“表现”：CSS

JavaScript 部分

1、简述同步和异步的区别

同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；

异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。

2、JavaScript中哪些方法获取元素?

getElementById

getElementsByClassName

getElementsByTagName

getElementsByName

3、xml和json哪一种更易于开发和维护？

json相比xml可读性和可扩张性好、编码及解码难度较低、在数据交互中带宽占用少，并且在当下是最流行的数据交互格式。

4、JS的typeof返回哪些数据类型?

string、number、object、boolean、function、undefined

5、 HTTP请求有哪几种？

post、get

6、闭包是什么？有什么特性？请简单书写一个简单事例？

7、用JS截取字符串asdfgh，要fgh?

方式1：'asdfgh'.substr(3,3);

方式2：'asdfgh'.substring(3,5) ;

方式3：'asdfgh'.substring(3);

8、JS怎么创建一个类?

方式1：var Obj = new Object();

方式2：var Obj = {};

9、ajax请求的时候get 和post方式的区别？

GET 请求可被缓存
GET 数据在 URL 中对所有人都是可见的。
GET 请求保留在浏览器历史记录中
GET 请求可被收藏为书签
GET 请求不应在处理敏感数据时使用
GET 请求有长度限制
GET 请求只应当用于取回数据
POST 请求不会被缓存
POST 请求不会保留在浏览器历史记录中
POST 不能被收藏为书签
POST 请求对数据长度没有要求

10、”==”和“===”的不同？
JavaScript 有两种比较方式：严格比较运算符和转换类型比较运算符。对于严格比较运算符（===）来说，仅当两个操作数的类型相同且值相等为 true，而对于被广泛使用的比较运算符（==）来说，会在进行比较之前，将两个操作数转换成相同的类型。对于关系运算符（比如 <=）来说，会先将操作数转为原始值，使它们类型相同，再进行比较运算。

11、谈谈对this对象的理解？

this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。

但是总有一个原则，那就是this指的是调用函数的那个对象。

this一般情况下：是全局对象Global。作为方法调用，那么this就是指这个对象

12、JSON 的了解？

JSON 是一种语法，用来序列化对象、数组、数值、字符串、布尔值和 null 。JSON对象包含两个方法: 用于解析 JavaScript Object Notation (JSON) 的 parse() 方法，以及将对象/值转换为 JSON字符串的 stringify() 方法。除了这两个方法, JSON这个对象本身并没有其他作用，也不能被调用或者作为构造函数调用。

13、当一个DOM节点被点击时候，我们希望能够执行一个函数，应该怎么做？

直接在DOM里绑定事件：<div οnclick=”fn()”></div>

在JS里通过onclick绑定：element.onclick = fn()

通过事件监听进行绑定：addEventListener(‘click’, fn())

14、看下列代码输出为何？解释原因。

var a;

alert(typeof a);

alert(b);

alert(typeof a)弹出undefined

alert(b) 会报错

解释：尚未赋值的变量的类型为undefined，在使用var声明变量但并未对其赋初始化值时，这个变量的值就是undefined。而b由于未声明将报错。

15、已知数组var stringArray = [“This”, “is”, “Baidu”, “Campus”]，Alert出”This is Baidu Campus”。

alert(stringArray.join(“ ”));

16、事件绑定和普通事件有什么区别？

普通事件的不支持添加多个事件，最下面的事件会覆盖上面的事件。

事件绑定（addEventListener）可以添加多个事件。

17.述ajax原理，什么是同步异步(主观题，答案不唯一)?

Ajax的工作原理：相当于在用户和服务器之间加了—个中间层，使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，从而达到节约ISP的空间及带宽租用成本的目的。

14. 平时有没有使用xml和json，在ajax交互中，哪一种更易于开发和维护，js中怎么序列化JSON字符串?有，json相比xml可读性和可扩张性好、编码及解码难度较低、在数据交互中带宽占用少，并且在当下是最流行的数据交互格式。序列化JSON字符串：eval() 或者 JSON.parse()

网络

9、http状态码有那些？分别代表是什么意思？

100-199 用于指定客户端应相应的某些动作。

200-299 用于表示请求成功。

300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。

400-499 用于指出客户端的错误。400 1、语义有误，当前请求无法被服务器理解。401 当前请求需要用户验证 403 服务器已经理解请求，但是拒绝执行它 404 页面不存在。

500-599 用于支持服务器错误。 503 – 服务不可用

11、一个页面从输入URL 到页面加载显示完成，这个过程中都发生了什么？

浏览器会开启一个线程来处理这个请求，对URL 分析判断如果是 http 协议就按照 Web 方式来处理;
调用浏览器内核中的对应方法，比如 WebView 中的 loadUrl 方法;
通过DNS解析获取网址的IP地址，设置 UA 等信息发出第二个GET请求;
进行HTTP协议会话，客户端发送报头(请求报头);
进入到web服务器上的 WebServer，如 Apache、Tomcat、Node.js 等服务器;
进入部署好的后端应用，如PHP、Java、JavaScript、Python 等，找到对应的请求处理;
处理结束回馈报头，此处如果浏览器访问过，缓存上有对应资源，会与服务器最后修改时间对比，一致则返回304;
浏览器开始下载html文档(响应报头，状态码200)，同时使用缓存;
文档树建立，根据标记请求所需指定MIME类型的文件（比如css、js）,同时设置了cookie;
页面开始渲染DOM，JS根据DOM API操作DOM,执行事件绑定等，页面显示完成。

jQuery部分

1、 jQuery 库中的 $() 是什么？

$() 函数是 jQuery() 函数的别称，乍一看这很怪异，还使 jQuery 代码晦涩难懂。一旦你适应了，你会爱上它的简洁。$() 函数用于将任何对象包裹成 jQuery 对象，接着你就被允许调用定义在 jQuery 对象上的多个不同方法。你甚至可以将一个选择器字符串传入 $() 函数，它会返回一个包含所有匹配的 DOM 元素数组的 jQuery 对象。这个问题我已经见过好几次被提及，尽管它非常基础，它经常被用来区分一个开发人员是否了解 jQuery。

2、网页上有 5 个 <div> 元素，如何使用 jQuery来选择它们？

另一个重要的 jQuery 问题是基于选择器的。jQuery 支持不同类型的选择器，例如 ID 选择器、class 选择器、标签选择器。鉴于这个问题没提到 ID 和 class，你可以用标签选择器来选择所有的 div 元素。jQuery 代码：$("div")，这样会返回一个包含所有 5 个 div 标签的 jQuery 对象。更详细的解答参见上面链接的文章。

3、jQuery 里的 ID 选择器和 class 选择器有何不同？

如果你用过 CSS，你也许就知道 ID 选择器和 class 选择器之间的差异，jQuery 也同样如此。ID 选择器使用 ID 来选择元素，比如 #element1，而 class 选择器使用 CSS class 来选择元素。当你只需要选择一个元素时，使用 ID 选择器，而如果你想要选择一组具有相同 CSS class 的元素，就要用 class 选择器。在面试过程中，你有很大几率会被要求使用 ID 选择器和 class 选择器来写代码。下面的 jQuery 代码使用了 ID 选择器和 class 选择器：

$('#LoginTextBox')  // Returns element wrapped as jQuery object with id='LoginTextBox'
$('.active') // Returns all elements with CSS class active.

　　正如你所见，从语法角度来说，ID 选择器和 class 选择器的另一个不同之处是，前者用字符”#”而后者用字符”.”。更详细的分析和讨论参见上面的答案链接。

4. 如何在点击一个按钮时使用 jQuery 隐藏一个图片？

这是一个事件处理问题。jQuery为按钮点击之类的事件提供了很好的支持。你可以通过以下代码去隐藏一个通过ID或class定位到的图片。你需要知道如何为按钮设置事件并执行hide() 方法，代码如下所示：

$('#btn').click(function(){
    $('#img').hide();
});

我喜欢这个问题，因为很贴近实际使用，代码也不复杂。

5、jQuery与jQuery UI 有啥区别？

jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。

jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等

6、$(document).ready() 是个什么函数？为什么要用它？

　　这个问题很重要，并且常常被问到。 ready() 函数用于在文档进入ready状态时执行代码。当DOM 完全加载（例如HTML被完全解析DOM树构建完成时），jQuery允许你执行代码。使用$(document).ready()的最大好处在于它适用于所有浏览器，jQuery帮你解决了跨浏览器的难题。需要进一步了解的用户可以点击 answer链接查看详细讨论。

7、JavaScript的window.onload 事件和 jQuery的ready()函数有何不同？

这个问答是紧接着上一个的。JavaScript window.onload 事件和 jQuery ready 函数之间的主要区别是，前者除了要等待 DOM 被创建还要等到包括大型图片、音频、视频在内的所有外部资源都完全加载。如果加载图片和媒体内容花费了大量时间，用户就会感受到定义在 window.onload 事件上的代码在执行时有明显的延迟。

　　另一方面，jQuery ready() 函数只需对 DOM 树的等待，而无需对图像或外部资源加载的等待，从而执行起来更快。使用 jQuery $(document).ready() 的另一个优势是你可以在网页里多次使用它，浏览器会按它们在 HTML 页面里出现的顺序执行它们，相反对于 onload 技术而言，只能在单一函数里使用。鉴于这个好处，用 jQuery ready() 函数比用 JavaScript window.onload 事件要更好些。

　　另一方面，jQuery ready() 函数只需对 DOM 树的等待，而无需对图像或外部资源加载的等待，从而执行起来更快。使用 $(document).ready() 的另一个优势是你可以在网页里多次使用它，浏览器会按它们在 HTML 页面里出现的顺序执行它们，相反对于 onload 技术而言，只能在单一函数里使用。鉴于这个好处，用 ready() 函数比用window.onload 事件要更好些。

8、如何找到所有 HTML select 标签的选中项？

　　这是面试里比较棘手的 jQuery 问题之一。这是个基础的问题，但是别期望每个 jQuery 初学者都知道它。你能用下面的 jQuery 选择器获取所有具备 multiple=true 的 <select > 标签的选中项：

$('[name="users"] :selected')

　　这段代码结合使用了属性选择器和 :selected 选择器，结果只返回被选中的选项。你可按需修改它，比如用 id 属性而不是 name 属性来获取 <select> 标签。

9、你是如何将一个 HTML 元素添加到 DOM 树中的？

你可以用 jQuery 方法 appendTo() 将一个 HTML 元素添加到 DOM 树中。这是 jQuery 提供的众多操控 DOM 的方法中的一个。你可以通过 appendTo() 方法在指定的 DOM 元素末尾添加一个现存的元素或者一个新的 HTML 元素。

10、$(this) 和 this 关键字在 jQuery 中有何不同？

　　$(this) 返回一个jQuery 对象，你可以对它调用多个 jQuery 方法，比如用 text() 获取文本，用val() 获取值等等。而 this 代表当前元素，它是 JavaScript 关键词中的一个，表示上下文中的当前 DOM 元素。你不能对它调用 jQuery 方法，直到它被 $() 函数包裹，例如 $(this)。

12、你如何使用jQuery来提取一个HTML 元素的属性例如a标签的href?

attr() 方法被用来提取任意一个HTML元素的一个属性的值. 你首先需要利用jQuery选择及选取到所有的链接或者一个特定的链接，然后你可以应用attr()方法来获得他们的href属性的值。下面的代码会找到页面中所有的链接并返回href值：

$("a").each(function(){
    alert($(this).attr("href"));
});

13、你如何使用jQuery设置一个属性值?

例：给a标签href属性设置一个值

$("a").attr("href","https://www.baidu.com/")

14、jQuery中 detach() 和 remove() 方法的区别是什么?

remove() 和detach()都是将被选元素移出DOM。

区别是：

remove()将移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据时使用。

detach()会保存所有jQuery数据和被移走的元素相关联的事件。例如，当需要移走一个元素，不久又将该元素插入DOM时，这种方法很有用。

15、你如何利用jQuery来向一个元素中添加和移除CSS类?

通过利用 addClass() 和 removeClass() 这两个 jQuery 方法。动态的改变元素的class属性可以很简单例如. 使用类“.active"来标记它们的未激活和激活状态，等等.

16、使用 CDN 加载 jQuery 库的主要优势是什么 ?

　　这是一个稍微高级点儿的jQuery问题。好吧，除了报错节省服务器带宽以及更快的下载速度这许多的好处之外, 最重要的是，如果浏览器已经从同一个CDN下载类相同的 jQuery 版本, 那么它就不会再去下载它一次. 因此今时今日，许多公共的网站都将jQuery用于用户交互和动画, 如果浏览器已经有了下载好的jQuery库，网站就能有非常好的展示机会。

17、jQuery 中的方法链是什么？使用方法链有什么好处？

　　方法链是对一个方法返回的结果调用另一个方法，这使得代码简洁明了，同时由于只对 DOM 进行了一轮查找，性能方面更加出色。

18、哪种方式更高效：document.getElementbyId("myId") 还是 $("#myId")？

　　第一种，因为它直接调用了 JavaScript 引擎。

19. jQuery 里的 each() 是什么函数？你是如何使用它的？（答案如下）

　　each() 函数就像是 Java 里的一个 Iterator，它允许你遍历一个元素集合。你可以传一个函数给 each() 方法，被调用的 jQuery 对象会在其每个元素上执行传入的函数。有时这个问题会紧接着上面一个问题，举个例子，如何在 alert 框里显示所有选中项。我们可以用上面的选择器代码找

出所有选中项，然后我们在 alert 框中用 each() 方法来一个个打印它们，代码如下：

$('[name=NameOfSelectedTag] :selected').each(function(selected) {
    alert($(selected).text());
});

　　其中 text() 方法返回选项的文本。

20. jQuery.get() 和 jQuery.ajax() 方法之间的区别是什么?

　　ajax() 方法更强大，更具可配置性, 让你可以指定等待多久，以及如何处理错误。get() 方法是一个只获取一些数据的专门化方法。

21. 你要是在一个 jQuery 事件处理程序里返回了 false 会怎样？

　　这通常用于阻止事件向上冒泡。