前端面试题（2021年6月5日）

最新推荐文章于 2024-09-27 18:45:08 发布
最新推荐文章于 2024-09-27 18:45:08 发布
阅读量148 收藏
点赞数
文章标签： 面试 前端
原文链接：https://www.nowcoder.com/
版权
  • WebSocket的实现和应用

webSocket是HTML5的一种新协议，先通过HTTP/HTTPS协议进行握手后创建一个用于交换数据的TCP连接，服务器与客户端通过此TCP连接进行实时通信，实现了服务器与客户端的双向通信。
应用场景：需要提供多个用户相互交流或者实时的展示服务器端需要经常变动的数据，如社交类应用，在线教育等。

  • 一个图片url访问后直接下载怎样实现？

请求的返回头里面，用于浏览器解析的重要参数就是OSS的API文档里面的返回http头，决定用户下载行为的参数。 下载的情况下：

  1. x-oss-object-type:

Normal

  1. x-oss-request-id:

598D5ED34F29D01FE2925F41

  1. x-oss-storage-class:

Standard

  • 说一下web Quality（无障碍）

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

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

<img src=“person.jpg” alt=“this is a person”/>

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

用户关闭了图像显示

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

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

  • 几个很实用的BOM属性对象方法?

什么是Bom? Bom是浏览器对象。有哪些常用的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

  • 说一下HTML5 drag api

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

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

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

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

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

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

  • 说一下http2.0

首先补充一下，http和https的区别，相比于http,https是基于ssl加密的http协议
简要概括：http2.0是基于1999年发布的http1.0之后的首次更新。
提升访问速度（可以对于，请求资源所需时间更少，访问速度更快，相比http1.0）

允许多路复用：多路复用允许同时通过单一的HTTP/2连接发送多重请求-响应信息。改善了：在http1.1中，浏览器客户端在同一时间，针对同一域名下的请求有一定数量限制（连接数量），超过限制会被阻塞。

二进制分帧：HTTP2.0会将所有的传输信息分割为更小的信息或者帧，并对他们进行二进制编码

首部压缩

服务器端推送

  • 补充400和401、403状态码

(1)400状态码：请求无效 产生原因：

前端提交数据的字段名称和字段类型与后台的实体没有保持一致

前端提交到后台的数据应该是json字符串类型，但是前端没有将对象JSON.stringify转化成字符串。

解决方法：

对照字段的名称，保持一致性

将obj对象通过JSON.stringify实现序列化

(2)401状态码：当前请求需要用户验证

(3)403状态码：服务器已经得到请求，但是拒绝执行

  • fetch发送2次请求的原因

fetch发送post请求的时候，总是发送2次，第一次状态码是204，第二次才成功？
原因很简单，因为你用fetch的post请求的时候，导致fetch
第一次发送了一个Options请求，询问服务器是否支持修改的请求头，如果服务器支持，则在第二次中发送真正的请求。

  • Cookie、sessionStorage、localStorage的区别

共同点：都是保存在浏览器端，并且是同源的
Cookie：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下,存储的大小很小只有4K左右。
（key：可以在浏览器和服务器端来回传递，存储容量小，只有大约4K左右）
sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持，localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。（key：本身就是一个回话过程，关闭浏览器后消失，session为一个回话，当页面不同即使是同一页面打开两次，也被视为同一次回话）
localStorage：localStorage
在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。（key：同源窗口都会共享，并且不会失效，不管窗口或者浏览器关闭与否都会始终生效）
补充说明一下cookie的作用：
保存用户登录状态。例如将用户id存储于一个cookie内，这样当用户下次访问该页面时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。
cookie还可以设置过期时间，当超过时间期限后，cookie就会自动消失。因此，系统往往可以提示用户保持登录状态的时间：常见选项有一个月、三个
月、一年等。
跟踪用户行为。例如一个天气预报网站，能够根据用户选择的地区显示当地的天气情况。如果每次都需要选择所在地是烦琐的，当利用了cookie后就会显得很人性化了，系统能够记住上一次访问的地区，当下次再打开该页面时，它就会自动显示上次用户所在地区的天气情况。因为一切都是在后
台完成，所以这样的页面就像为某个用户所定制的一样，使用起来非常方便定制页面。如果网站提供了换肤或更换布局的功能，那么可以使用cookie来记录用户的选项，例如：背景色、分辨率等。当用户下次访问时，仍然可以保存上一次访问的界面风格。

  • 说一下web worker

在HTML页面中，如果在执行脚本时，页面的状态是不可响应的，直到脚本执行完成后，页面才变成可响应。web worker是运行在后台的js，独立于其他脚本，不会影响页面你的性能。并且通过postMessage将结果回传到主线程。这样在进行复杂操作的时候，就不会阻塞主线程了。
如何创建web worker：

检测浏览器对于web worker的支持性

创建web worker文件（js，回传函数等）

创建web worker对象

  • 对HTML语义化标签的理解

HTML5语义化标签是指正确的标签包含了正确的内容，结构良好，便于阅读，比如nav表示导航条，类似的还有article、header、footer等等标签。

  • iframe是什么？有什么缺点？

定义：iframe元素会创建包含另一个文档的内联框架
提示：可以将提示文字放在之间，来提示某些不支持iframe的浏览器
缺点：
会阻塞主页面的onload事件
搜索引擎无法解读这种页面，不利于SEO
iframe和主页面共享连接池，而浏览器对相同区域有限制所以会影响性能。

  • Doctype作用?严格模式与混杂模式如何区分？它们有何意义?

Doctype声明于文档最前面，告诉浏览器以何种方式来渲染页面，这里有两种模式，严格模式和混杂模式。 严格模式的排版和JS 运作模式是
以该浏览器支持的最高标准运行。

混杂模式，向后兼容，模拟老式浏览器，防止浏览器无法兼容页面。

  • Cookie如何防范XSS攻击

XSS（跨站脚本攻击）是指攻击者在返回的HTML中嵌入javascript脚本，为了减轻这些攻击，需要在HTTP头部配上，set-cookie：
httponly-这个属性可以防止XSS,它会禁止javascript脚本来访问cookie。

secure - 这个属性告诉浏览器仅在请求为https的时候发送cookie。

结果应该是这样的：Set-Cookie=<cookie-value>…

J-April
关注
2021-最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)---JavaScript篇
m0_54853146的博客
03-07 475
★★ 介绍一下JS的内置类型有哪些？ ★★★★ 介绍一下 typeof 区分类型的原理 ★★★ 介绍一下类型转换 ★★★★ 说说你对 JavaScript 的作用域的理解。什么是作用域链？ ★★ 解释下 let 和 const 的块级作用域 ★★★★ 说说你对执行上下文的理解 ★★★ 对闭包的看法，为什么要用闭包？说一下闭包的原理以及应用场景？闭包的 this 指向问题？ ★★★ 简述闭包的问题以及优化 ★★★ 如何确定 this 指向？改变 this 指向的方式有哪些？ ★★★ 介绍箭头函数的 this
2022年 前端web 面试题（笔试真题）(5)
weixin_59519449的博客
04-13 2082
笔试题 已知： 布局分为：父元素A和N个子元素B； A宽度不固定：最小宽度为1000px，内部边距是32px B的宽度不固定：相邻两个B元素的间距是16px，所有B的宽度相同，边框为1像素，颜色为999 每行只能有3个B元素，超过的话需要换行； 最左侧B元素和最右侧的B元素，距离A的边缘都是32px； .client-a{ min-width: 1000px; padding: 24px; display: flex; ...
http请求 状态码204
热门推荐
柠檬不萌只是酸i
02-02 4万+
今天在调试接口的时候遇到个问题： 一个请求走了两次，一次204，一次200。 且，请求204的 Request Method 是 OPTIONS 在网上查看资料后得知，是因为跨域而引起的，OPTIONS是一种“预检请求”， 浏览器在处理跨域访问的请求时如果判断请求为复杂请求，则会先向服务器发送一条预检请求（这就是为什么第一次请求接口是204），根据服务器返回的内容浏览器判断服务器...
前端经典面试题 30道
任磊
05-13 2万+
题 1 ：什么是防抖和节流？有什么区别？如何实现？ 防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间 思路：每次触发事件时都取消之前的延时调用方法 节流：高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率 思路：每次触发事件时都判断当前是否有等待执行的延时函数 题 2 ：get请求传参长度的误区、get和post请求在缓存方面的区别 误区：我们经常说get请求参数的大小存在限制，而post请求的参数大小是无限制的。 实际.
使用js的fetch发送一个post请求浏览器却请求两次的原因
fyp_1995的博客
05-08 3447
使用js的fetch发送一个post请求浏览器却请求两次的原因关于跨域解决方式关于CORS跨域资源共享机制 这个问题涉及到跨域请求，大概做一下笔记。 关于跨域 根据浏览器同源策略（协议、域名、端口一致为同源），凡是发送请求的源与当前页面的源不同的即为跨域。同源策略用于隔离潜在的恶意文件。 解决方式 JSONP：只支持GET，不支持POST请求； 原理：浏览器只对XHR请求有同源限制，对scrip...
HTTP fetch发送2次请求的原因
风华绝代的博客
10-12 1338
HTTP fetch发送2次请求的原因？面对这道出现频率较高的面试题，我想说的是：发送两次请求的情况确实存在，但这与你所使用的是不是http协议，所采用的是不是fetch真的没有一毛钱关系！ 接下来，咱们可以通过代码一一去验证…… 一、准备工作 1、创建一个文件夹zhangpeiyue 2、在zhangpeiyue文件夹内创建两个文件：server.js与index.html •server.js：搭建一个express服务器，用于提供接口 •index.html：通过fetch调用接口。 .
fetch发送2次请求的原因分析
qq_35629054的博客
08-21 2644
划重点：如果被别人问到，其实这是在迷惑你，发送两次请求的情况确实存在，但这与你所使用的是不是http协议，所采用的是不是fetch真的没有任何关系！ 我们所说的发送2次请求，其实就是在跨域请求时，编写了带预检请求的代码导致多了一次名为OPTIONS的尝试请求 发送2次请求需要满足以下2个条件： 必须要在跨域的情况下 除GET、HEAD和POST(only with application/x-www-form-urlencoded, multipart/form-data, text/plain .
前端面试题（2021年6月6日）
J-April的博客
06-06 165
addEventListener参数 addEventListener(event, function, useCapture) 其中，event指定事件名；function指定要事件触发时执行的函数；useCapture指定事件是否在捕获或冒泡阶段执行。 (addEventListener 方法的第三个参数isCapture，默认是false，在冒泡阶段执行该事件，也就是最内层的触发元素最先执行该事件，当设置为true时，在捕获阶段执行，也就是从最外层元素执行该事件。) 介绍知道的http返回的.
2022年最新(腾讯)前端面试题真题解析
07-07
通过这份2021年腾讯前端面试题真题解析，求职者可以针对性地复习和练习，加深对前端开发核心知识的理解，提升面试表现，争取在激烈的竞争中脱颖而出。记住，面试不仅仅是检验技术能力，更是展现个人解决问题、学习新...
2021年web前端基础面试题
yangjian_666的专栏
09-06 1591
# 2021面试复习笔记 ## [全方面面试总结](https://juejin.cn/post/6844904070579240974#heading-25) ## `1.javascript` ### [JS面试题](https://juejin.cn/post/6844903815053852685) ### [JS面试题](https://juejin.cn/post/6844903958591324168#heading-5) ### [手写无敌JS](https://juejin.cn
17张思维导图，2021年作为一名前端开发者需要掌握这些，前端面试复习资料参考大纲
cYang2030的博客
12-09 5960
本文首发于17张思维导图，最全前端复习资料总结，转载请联系作者 前言 2020年最后一个月了，熬夜多天整理出17张思维导图，对前端面试复习知识点进行了最全的总结，分享给大家。每个知识点都尽量找到最好的文章来解释，通过思维导图的形式进行展示。 给大家准备了高清的思维导图和食用更加方便的PDF文档，全部聚合思维导图一张，分类思维导图17张，涉及前端开发的方方面面面，JS基础，工程化，性能优化，安全，框架等。如果您是准备面试，或者享扩展前端知识，都可以通过这个目录进行学习。 废话不多说，下面分类展开来说，收藏.
总结了17年初到18年初百场前端面试的面试经验(含答案)
weixin_34055910的博客
07-10 515
我是一名刚毕业的程序媛，面试的岗位是前端开发工程师，从17年初找实习开始，先后面试了50多家公司，加上123面，总共经历了上百场面试，其中包括百度，腾讯，阿里，滴滴，网易，美团等等，也面了一些中小公司的社招。 总结一下面试遇到的问题，希望对大家助，本文很长很长很长（省略n个很长），但是看完的话，确实可以加深前端基础知识的理解，原文链接可以...
前端常见知识点五之Fetch
1234Wu--Blog
07-11 470
前端常见知识点五之Fetch fetch发送2次请求的原因 fetch发送post请求的时候，总是发送2次。第一次状态码是204，第二次才成功； 因为在用fatch的post请求的时候，导致fetch第一次发送了一个Options请求，询问服务器是否支持修改的请求头，如果服务器支持，则在第二次中发送真正的请求。 参考文章：Fetch API 教程 ...
2021年最新web前端面试题及答案：HTTP/HTML/浏览器专题
北冥の魚
05-19 1251
HTTP/HTML/浏览器 本章节面试题与HTTP/HTML/浏览器相关，以专题形式推出便于各个击破。 说一下 http 和 https https 的 SSL 加密是在传输层实现的。 (1)http 和 https 的基本概念 http: 超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端和服 务器端请求和应答的标准（TCP），用于从 WWW 服务器传输超文本到本地浏览器的传 输协议，它可以使浏览器更加高效，使网络传输减少。 https: 是以安全为目标的 HTTP 通道，简单讲是 HTT
大厂面试真题-ConcurrentHashMap怎么保证的线程安全？
最新发布
个人专长：数据结构和算法、大数据、数据库、主流框架
09-27 813
ConcurrentHashMap是Java中的一个线程安全的哈希表实现，它通过一系列精妙的机制来保证线程安全。
LeetCode 面试经典150题 66.加一
qq_57349657的博客
09-27 288
加一
java中线程的生命周期，线程有哪些状态？-----面试题分享
Yluciud的博客
09-26 411
线程的状态转换是由JVM控制的，并且随着程序的执行，线程可以在这些状态之间进行切换。例如，一个线程可以从新建状态过渡到可运行状态，然后可能会因为调用。方法而进入计时等待状态，之后又回到可运行状态继续执行，直到最终到达终止状态。在Java中，线程的生命周期指的是一个。Java中的线程状态是通过。线程从创建到最终消亡的过程。
8月面试总结
一起学习
09-27 969
从7月中旬辞职，中间玩儿了接近两周，到8月中下旬找到工作，对之前部分面试进行一下总结（包括我朋友面试的公司）。base成都，22届，普本 。祝大家找到自己满意的工作。
2021年Vue前端面试精华题+答案深度解析
在2021年的前端Vue面试题汇总中，涵盖了Vue框架的基础理论和实践技巧。首先，面试官通常会考察对Vue核心原理的理解，包括Vue实例创建时如何利用`Object.defineProperty()`或`proxy`实现数据响应式。Vue通过这种方式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值