前端面试集合（笔试+面试+hr面不断更新）d

最新推荐文章于 2024-01-20 21:46:40 发布

菠萝油姐姐

最新推荐文章于 2024-01-20 21:46:40 发布

阅读量731

点赞数 2

分类专栏：面试文章标签：前端面试 js面试基础知识 JavaScript面试 css面试

本文链接：https://blog.csdn.net/weixin_43748192/article/details/103419998

版权

面试专栏收录该内容

1 篇文章 0 订阅

订阅专栏

d整理了一些面试题和答案，都是真实遇到的，当然了有些答案整理得比较详细，有需要快速浏览的朋友可以只看重点部分，持续更新~~

1.HMTL里行内元素和块级元素分别有哪些，他们的区别是什么？

块级元素(block)：
div 、h1 ~ h6、hr、ul、ol、p、pre(格式化文本)、noscript、 dir、menu、dl、dt、dd、table、address、blockquote(块引用) 、form、fieldset 等；
行内元素(inline)：
a、span、img、strong、video、b、object、big(大号文本)、small(小号文本)、br、command、del、em、 i、label、map、mark、wbr等；
行内块元素(inline-block)：
button、input、textarea、select

他们的区别：

(1).block元素特点是内容独占一行，可以通过css改宽高；inline元素特点是内容决定元素的占位大小，不能通过css改变宽高，也不能改水平方向的margin（及margin-top、margin-bottom）；inline-block元素可以改宽高，但是依然是内容决定占位大小。除了比较特殊的行内元素（img、video、object是可以设置宽高的）；
(2). block元素可以包含所有类型的元素、inline元素只能包括文字/行内元素/行内块元素，除了p标签比较特殊，只能包含行内元素，如果包含block元素会跑出p标签之外显示；
(3).inline元素和inline-block元素都有文字特性，例如多个img中间会有文字间隔。

2.innerText, innerHTML, outerText, outerHTML的区别

innerHTML：读取或设置当前标签的开始和结束标签之间的文本内容，有子标签的话也输出子标签本身和子标签内的文本内容。

innerText(2016年才被标准化) ：读取或者设置指定元素的文本内容，如果有子标签，那么也只输出子标签内的文本内容。

outerHTML：读取或设置当前标签的本身和标签内的文本内容，如果有子标签的话也输出子标签本身和子标签内的文本内容。
outerText：读取或者设置指定元素的文本内容，如果有子标签，那么也只输出子标签内的文本内容。
读取时outerText和innerText一样，但是在设置时不一样。

3.JS怎么判断是数组还是对象

以下用obj代表对象，str为数组
(1)使用instanceof 判断变量是不是被构造函数 Array 构造出来
obj instanceof Array // false
str instanceof Array // true
(2)使用constructor来判断
obj.constructor — ƒ Object() { [native code] }
str.construcor — ƒ Array() { [native code] }
(3)判断父级原型
Object.getPrototypeOf(obj) == Array.prototype // false
Object.getPrototypeOf(str) == Array.prototype // true
true
(4)通过Object.prototype.toString.call(), 返回对象的具体类型
Object.prototype.toString.call(obj) // [object Object]
Object.prototype.toString.call(str) // [object Array]
Object.prototype.toString.call(null) // [object Null]
Object.prototype.toString.call(undefined) // [object Undefined]
（无法区分自定义对象类型，自定义类型可以采用 instanceof 区分）
(5)Array.isArray(obj)
Array.isArray(obj) // false
Array.isArray(str) // true

4.简述事件流模型，并说明如何阻止事件冒泡和阻止浏览器默认行为

事件流模型有两种：捕获型事件和冒泡型事件，当使用addEventListener绑定事件，第三个参数为true时表示事件捕获， false为事件冒泡。
定义
结构上（非视觉上）嵌套关系的元素，会存在事件冒泡/捕获的功能，即同一事件，自子元素冒泡向父元素（自底向上）是事件冒泡，自父元素捕获至子元素（事件源元素）是事件捕获。

取消冒泡事件
（1） event.stopPropagation // W3C标准方法,不兼容IE
（2）event.cacelBubble = true // 兼容IE的方法

阻止浏览器默认行为：
默认事件就是表单提交、a标签跳转、右键菜单等
（1）return false；// 以对象属性方式注册的事件才生效

（2）event.preventDefault(); //W3C的标准方法,不兼容IE

（3）event.returnValue = false；// 兼容IE低版本

5.冒泡排序手撕代码

function MybubbleSort(arr){
	var last = arr.length - 1 ;
	for(var i = 0; i < last;i++ ){
		let completedFlag = true;
		for(var j = 0; j < last- i;j++ ){
			if(arr[j] >arr[j+1]){
				const temp = arr[j];
				arr[j] = arr[j+1];
				arr[j+1] = temp;
				completedFlag = false;
			}
		}
		if(completedFlag){
			break;
		}
	}
	return arr;
}
MybubbleSort([7,8,9,4,3,7,1,23]);
// [1, 3, 4, 7, 7, 8, 9, 23]

6.说一下http和https，他们的区别是什么

http: 超文本传输协议，互联网上应用最广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。

https: HTTPS协议是由HTTP和SSL协议（安全套接层协议）构建的可进行加密传输和身份认证的网络协议，比http协议的安全性更高。

他们的区别

（1）http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。

（2）Https协议需要ca证书，费用较高。

（3）使用不同的链接方式，端口也不同，一般而言，http协议的端口为80，https的端口为443

（4）http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

7.HTTPS的工作原理、作用是什么

客户端在使用HTTPS方式与Web服务器通信时有以下几个步骤：

客户使用https url访问服务器，则要求web 服务器建立ssl链接。

web服务器接收到客户端的请求之后，会将网站的证书（证书中包含了公钥），返回或者说传输给客户端。

客户端和web服务器端开始协商SSL链接的安全等级，也就是加密等级。

客户端浏览器通过双方协商一致的安全等级，建立会话密钥，然后通过网站的公钥来加密会话密钥，并传送给网站。

web服务器通过自己的私钥解密出会话密钥。

web服务器通过会话密钥加密与客户端之间的通信。

https协议的主要作用是：建立一个信息安全通道，来确保数组的传输，确保网站的真实性。

8.https协议的优点和缺点是什么

优点
使用HTTPS协议可认证用户和服务器，确保数据发送到正确的客户机和服务器；

HTTPS协议比http协议安全，可防止数据在传输过程中不被窃取、改变，确保数据的完整性。

HTTPS是现行架构下最安全的解决方案，虽然不是绝对安全，但它大幅增加了中间人攻击的成本。

谷歌曾在2014年8月份调整搜索引擎算法，并称“比起同等HTTP网站，采用HTTPS加密的网站在搜索结果中的排名将会更高”。
缺点
https握手阶段比较费时，会使页面加载时间延长50%，增加10%~20%的耗电。

https缓存不如http高效，会增加数据开销。

SSL证书也需要钱，功能越强大的证书费用越高。

SSL证书需要绑定IP，不能再同一个ip上绑定多个域名，ipv4资源支持不了这种消耗。

9.简要概括tcp三次握手

在TCP/IP协议中,TCP协议提供可靠的连接服务,采用三次握手建立一个连接.
首先客户端向服务器发SYN（同步请求），然后服务器回SYN+ACK（同步请求应答），最后客户端回复ACK确认，这样TCP的一次连接（三次握手）的过程就建立了

10. HTTP的六种请求协议

1，GET：GET可以说是最常见的了，它本质就是发送一个请求来取得服务器上的某一资源。资源通过一组HTTP头和呈现据（如HTML文本，或者图片或者视频等）返回给客户端。GET请求中，永远不会包含呈现数据。

2，HEAD：HEAD和GET本质是一样的，区别在于HEAD不含有呈现数据，而仅仅是HTTP头信息。有的人可能觉得这个方法没什么用，其实不是这样的。想象一个业务情景：欲判断某个资源是否存在，我们通常使用GET，但这里用HEAD则意义更加明确。

3，PUT：这个方法比较少见。HTML表单也不支持这个。本质上来讲， PUT和POST极为相似，都是向服务器发送数据，但它们之间有一个重要区别，PUT通常指定了资源的存放位置，而POST则没有，POST的数据存放位置由服务器自己决定。
举个例子：如一个用于提交博文的URL，/addBlog。如果用PUT，则提交的URL会是像这样的”/addBlog/abc123”，其中abc123就是这个博文的地址。而如果用POST，则这个地址会在提交后由服务器告知客户端。目前大部分博客都是这样的。显然，PUT和POST用途是不一样的。具体用哪个还取决于当前的业务场景。

4，DELETE：删除某一个资源。基本上这个也很少见，不过还是有一些地方比如amazon的S3云服务里面就用的这个方法来删除资源。

5，POST：向服务器提交数据。这个方法用途广泛，几乎目前所有的提交操作都是靠这个完成。

6，OPTIONS：这个方法很有趣，但极少使用。它用于获取当前URL所支持的方法。若请求成功，则它会在HTTP头中包含一个名为“Allow”的头，值是所支持的方法，如“GET, POST”。

11. Ajax原生实现

Ajax的本质是使用XMLHttpRequest对象来请求数据

function ajax(url, fnSucc, fnFaild)
{
    //1.创建Ajax对象
    if(window.XMLHttpRequest){
       var oAjax=new XMLHttpRequest();
    }else{
       var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
    }

    //2.连接服务器（打开和服务器的连接）
    oAjax.open('GET', url, true);

    //3.发送
    oAjax.send();

    //4.接收
    oAjax.onreadystatechange=function (){
       if(oAjax.readyState==4){
           if(oAjax.status==200){
              //alert('成功了：'+oAjax.responseText);
              fnSucc(oAjax.responseText);
           }else{
              //alert('失败了');
              if(fnFaild){
                  fnFaild();
              }
           }
        }
    };
}

(https://blog.csdn.net/weixin_44369568/article/details/92803296)

12. fetch用过吗？fetch和AJAX的区别

fetch 是全局量 window 的一个方法，它的主要特点有：
1、第一个参数是URL:
2、第二个是可选参数，可以控制不同配置的 init 对象
3、使用了 JavaScript Promises 来处理结果/回调:

// 链式处理,将异步变为类似单线程的写法: 高级用法.
fetch('/some/url').then(function(response) {
    return . //... 执行成功, 第1步...
}).then(function(returnedValue) {
    // ... 执行成功, 第2步...
}).catch(function(err) {
    // 中途任何地方出错...在此处理 :( 
});

fetch规范与jQuery.ajax() 主要有两个不同，牢记：
1、从 fetch()返回的 Promise 将不会拒绝HTTP错误状态, 即使响应是一个 HTTP 404 或 500。相反，它会正常解决 (其中ok状态设置为false), 并且仅在网络故障时或任何阻止请求完成时，它才会拒绝。

2、默认情况下, fetch在服务端不会发送或接收任何 cookies, 如果站点依赖于维护一个用户会话，则导致未经认证的请求(要发送 cookies，必须发送凭据头).
[11、12题原文链接]

13.web Quality（无障碍）

能够被残障人士使用的网站才能称得上一个易用的（易访问的）网站。

残障人士指的是那些带有残疾或者身体不健康的用户。
使用alt属性：

有时候浏览器会无法显示图像。具体的原因有：

用户关闭了图像显示

浏览器是不支持图形显示的迷你浏览器

浏览器是语音浏览器（供盲人和弱视人群使用）
如果您使用了alt 属性，那么浏览器至少可以显示或读出有关图像的描述。

14.BOM和DOM分别是什么

BOM是浏览器对象，主要是访问一些和网页无关的浏览器功能，如window，location，navigator，screen，history等
DOM是文档对象模型，针对HTML文档的API，描绘的一个层次化的节点树。

15.有哪些常用的BOM属性

(1)location对象

location.href-- 返回或设置当前文档的URL
location.search – 返回URL中的查询字符串部分。例如 http://www.dreamdu.com/dreamdu.php?id=5&name=dreamdu 返回包括(?)后面的内容?id=5&name=dreamdu
location.hash – 返回URL#后面的内容，如果没有#，返回空
location.host – 返回URL中的域名部分，例如www.dreamdu.com
location.hostname – 返回URL中的主域名部分，例如dreamdu.com
location.pathname – 返回URL的域名后的部分。例如 http://www.dreamdu.com/xhtml/ 返回/xhtml/
location.port – 返回URL中的端口部分。例如 http://www.dreamdu.com:8080/xhtml/ 返回8080
location.protocol – 返回URL中的协议部分。例如 http://www.dreamdu.com:8080/xhtml/ 返回(//)前面的内容http:
location.assign – 设置当前文档的URL
location.replace() – 设置当前文档的URL，并且在history对象的地址列表中移除这个URL location.replace(url);
location.reload() – 重载当前页面

(2)history对象

history.go() – 前进或后退指定的页面数 history.go(num);
history.back() – 后退一页
history.forward() – 前进一页

(3)Navigator对象

navigator.userAgent – 返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)
navigator.cookieEnabled – 返回浏览器是否支持(启用)cookie

16.有哪些常用的BOM属性 HTML5 drag api

dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发，。
darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。

dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。

dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。

dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。

drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。

dragend：事件主体是被拖放元素，在整个拖放操作结束时触发

17. 说说iframe及它的优缺点

定义：
iframe元素会创建包含另一个文档的内联框架。
应用：
iframe就是一个标签dom元素, 我们可以使用向一个网页里嵌入另一个网页，以及用在导航栏tab切换页（古老的做法）、在线编辑器、广告植入，以及跨域通信等。
优点：
解决跨域问题，其实这个很牵强…，因为其实他已经不怎么用了。
缺点：
1.会阻塞主页面的onload事件
2.搜索引擎无法解读这种页面，不利于SEO(Search Engine Optimization)
3.iframe和主页面共享连接池，而浏览器对相同区域有限制所以会影响性能。

18. XSS和CSRF是什么

跨站脚本（英语：Cross-site scripting，通常简称为：XSS） 是一种网站应用程序的安全漏洞攻击，是代码注入的一种。它允许恶意用户将代码注入到网页上，其他用户在观看网页时就会受到影响。这类攻击通常包含了HTML以及用户端脚本语言。
跨站请求伪造（英语：Cross-site request forgery），通常缩写为 CSRF 或者 XSRF，攻击者通过一些技术手段，欺骗用户的浏览器去访问一个用户曾经认证过的网站，并以用户的名义运行一些操作（如发邮件，发消息，甚至财产操作如转账和购买商品）。
区别：
跟跨网站脚本（XSS）相比，XSS 利用的是用户对指定网站的信任，CSRF 利用的是网站对用户网页浏览器的信任。

19. 盒子模型的理解

html文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，这个模型称为盒模型。 盒模型通过四个边界来描述：margin（外边距），border（边框），padding（内边距），content（内容区域）
分为两种：IE盒模型和标准盒模型
标准的盒模型，根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。
IE盒模型（ IE 5 和 6 使用）中 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
可以通过boxsizing 改变:
boxsizing:border-box // IE盒模型
boxsizing:content-box // 标准盒模型，一般浏览器默认的
box-sizing:padding-box // 从padding算起，例如width等于左右padding+content

20. transition和animation的区别

触发条件。transition仅表现为对已更改的CSS属性的动画。常用的是用 hover伪类来更改CSS样式，或者通过js操作脚本化CSS。animation动画则不需要任何显式触发。定义动画后，它自动开始播放。
循环。 animation可以设定循环次数，通过设置animation-iteration-count 属性
精确性。 animation可以设定每一帧的单独样式和时间。tranistion 只能设定开始和结尾。
与javascript的交互。更常用的是tranistion和js的结合。

如果想要通过多个关键帧和轻松循环更灵活性的制作动画，那么用animation。
如果想简单的制作从开始到结尾的动画，用transition。
如果我想使用JS操纵要设置动画的属性值，用transition。

21. 数组中的方法哪些是改变原数组的，哪些不是

改变原数组：push 、pop、 shift 、unshift 、sort 、reverse、splice
不改变原数组：concat， join，split，toString，slice

22. Vue的生命周期

beforeCreate（创建前）在数据观测和初始化事件还未开始，： Vue 实例的挂载元素 $e l 和数据对象 d a t a 都为 u n d e f i n e d ，还未初始化。 c r e a t e d （创建后）完成数据观测，属性和方法的运算，初始化事件，$ el属性还没有显示出来
beforeMount（载入前）在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
mounted（载入后）在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
beforeUpdate（更新前）在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
updated（更新后）在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
beforeDestroy（销毁前）在实例销毁之前调用。实例仍然完全可用。
destroyed（销毁后）在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

23.获取十个10-1000之间的随机数，并插入到数组中，然后排序。

代码就不贴了哈，需要自己写才能记得住，光看不行滴，自己动手写出来才是你自己的。

24.获取YYYY-MM-dd的日期格式

代码就不贴了哈，需要自己写才能记得住，光看不行滴，自己动手写出来才是你自己的。

25.

(function(x){
delete x;
alert(x);
}(1+5))
结果是6 ，delete x这是个陷阱。

26.谈谈对HTML语义化的理解

27.get和post请求的区别

28. 手写一个闭包函数

29.JS的内置对象有哪些

菠萝油姐姐

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
前端面试集合（笔试+面试+hr面不断更新）d

1.HMTL里行内元素和块级元素分别有哪些，他们的区别是什么？块级元素(block)：div 、h1 ~ h6、hr、ul、ol、p、pre(格式化文本)、noscript、 dir、menu、dl、dt、dd、table、address、blockquote(块引用) 、form、fieldset 等；行内元素(inline)：a、span、img、strong、video、b、obje...
复制链接

扫一扫