【面试题】前端常见面试题

置顶 已于 2023-04-11 10:09:43 修改
阅读量1.4k 收藏 12
点赞数
分类专栏： 面试 文章标签： 面试 前端
于 2022-04-23 20:37:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fuxin199207/article/details/124280440
版权

持续更新中

一、 基础面试题

1.ajax，fetch，axios的区别

  • ajax是一种技术统称
  • fetch是一个具体的API
  • axios是一个第三方库

2.节流和防抖有什么区别？分别应用于什么场景？

  • 防抖：防止抖动，比如有一个input框，当输入停止之后才会触发搜索
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>debounce</title>
  </head>
  <body>
    <input type="text" id="input" />

    <script>
      // 防抖
      const debounce = (fn, delay) => {
        let timer = null;

        return function () {
          if (timer) clearTimeout(timer);

          timer = setTimeout(() => {
            fn.apply(this, arguments);
          }, delay);
        };
      };

      // 测试
      const ipt = document.querySelector("#input");
      ipt.addEventListener(
        "keyup",
        debounce(() => {
          console.log("search...");
        }, 500)
      );
    </script>
  </body>
</html>
  • 节流：节省交互沟通，流，不一定指流量，例如drag或scroll期间触发某个回调，要设置一个时间间隔
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>throttle</title>
    <style>
      .box {
        margin: 100px auto 0;
        width: 200px;
        border: 1px solid #ccc;
      }

      .box__header {
        height: 20px;
        background-color: #ccc;
      }

      .box__container {
        height: 180px;
      }
    </style>
  </head>
  <body>
    <div id="throttle" class="box" draggable="true">
      <div class="box__header">可拖拽</div>
      <div class="box__container"></div>
    </div>

    <script>
      // 节流
      const throttle = (fn, delay = 100) => {
        let timer = null;

        return function () {
          if (timer) return;

          timer = setTimeout(() => {
            fn.apply(this, arguments);

            timer = null;
          }, delay);
        };
      };

      // 测试
      const drag = document.querySelector("#throttle");
      drag.addEventListener(
        "drag",
        throttle((e) => {
          console.log("鼠标位置: ", e.offsetX, e.offsetY);
        })
      );
    </script>
  </body>
</html>
  • 防抖和节流的区别
  • 节流: 限制执行频率,有节奏的执行
  • 防抖: 限制执行次数,多次密集的触发只执行一次
  • 节流关注‘过程’， 防抖关注‘结果’

3.px，%，em，rem，vw/vh 有什么区别?

px 和 %

  • px基本单位,绝对单位(其它的都是相对单位)
  • %相对于父元素的宽度比例

em 和 rem

  • em相对于当前元素的font-size
  • rem相对于根节点的font-size

vm / vh

  • vw屏幕宽度的百分比
  • vh屏幕高度的百分比
  • vmin两者的最小值，vmax两者的最大值

4.什么时候不能使用箭头函数？

箭头函数的缺点

  • 没有arguments
  • 无法通过apply，call，bind改变this

不能使用箭头函数的场景：

  • 对象方法
  • 原型方法
  • 构造函数
  • 动态上下文中的回调函数
  • vue生命周期和method

5.请描述TCP三次握手和四次挥手

三次握手 - 建立连接

  1. 客户端发包,服务端接收.
  2. 服务端发包,客户端接收.
  3. 客户端发包,服务端接收.

四次挥手 - 关闭连接

  1. 客户端发包,服务端接收. 客户端告诉服务端,我要关闭连接了.
  2. 服务端发包,客户端接收. 这时服务端已经收到要关闭连接的请求，会将剩下的包发送给客户端
  3. 服务端发包,客户端接收. 服务端告诉客户端所有的包已经发送完了,可以关闭连接了
  4. 客户端发包,服务端接收. 客户端告诉服务端关闭连接。

6.for in 和 for of 有什么区别？

  • for in遍历得到key。for in不能遍历set和map。 主要用于可枚举数据，如对象、数组、字符串
  • for of遍历得到value。for of不能遍历对象。主要用于可迭代数据，如数组、字符串、map、set

7.for await of有什么作用？

其实就是promise.all的替代品,用来遍历promise

8.offsetHeight scrollHeight clientHeight有什么区别?

  • offsetHeight / offsetWidth = border + padding + content
  • clientHeight / clientWidth = padding + content
  • scrollHeight / scrollWidth = padding + 实际内容尺寸

9.HTMLCollection和NodeList的区别

  • 如下图，DOM是一棵树，所有节点都是Node
  • Node是Element的基类
  • Element是其它HTML元素的基类，如HTMLDivElement

在这里插入图片描述
它俩的区别：

  • HTMLCollection是Element的集合
  • NodeList是Node的集合

10.computed和watch的区别

  • computed用于计算产生新的数据
  • watch用于监听现有数据

computed 和 method:

computed有缓存,method没有

11.vue2组件通讯有几种方式，尽量全面

  • props和$emit
  • 自定义事件
  • $attrs $listener；
    比如父组件给子组件传a，b，c三个数据，但子组件只接收了a数据，那么b和c就会放入attrs中，方法会放入listener中
    这种方式虽然也可以用于多层级传值，只需要给每个层级用v-bind绑定一个$attrs,但不是最合适的
  • $parent
  • $refs
    parent和refs适合在mounted钩子中使用，因为这时候组件已经渲染完成了
  • provide/inject
    适合多层级传值，在provide方法中返回一个对象，对象中就是需要传递下去的数据
  • vuex

12.vuex中mutation和action的区别

  • mutation:原子操作,必须是同步代码
  • action:可包含多个mutation,可包含异步代码

13.JS严格模式有什么特点？

  • 全局变量必须先声明
  • 禁止使用with
  • 创建eval作用域
  • 禁止this指向window
  • 函数参数不能重名

14.HTTP跨域请求时为何发送options请求

跨域请求

  • 因为浏览器同源策略,所以出现了跨域问题
  • 同源策略一般限制ajax网络请求，不能跨域请求服务器
  • 但不会限制<link> <img> <script> <iframe>加载第三方资源

解决跨域的方法

  • jsonp,利用了不会限制这些标签加载第三方资源的特性,通过这些标签去发起请求,后台配合返回一个方法的字符串,标签会将这些字符串当作方法去加载,从而获取到数据.
  • cors，服务端配置允许跨域
  • vue中配置porxy

多余的options请求

  • options请求,是跨域请求之前的预检查
  • 浏览器自行发起的，无需我们干预，不会影响实际的功能

二、原理相关面试题

1.js内存泄漏如何检测？场景有哪些？

什么是垃圾回收？

  • 全局作用域中声明的变量不是垃圾，因为程序不确定你啥时候可以用到它。
  • 局部作用域中的变量会在函数执行完毕之后成为垃圾，被回收掉。

内存泄漏的检测可以通过控制台的performance

在vue中内存泄露的场景

  • 被全局变量,函数引用,组件销毁时未清除
  • 被全局事件，定时器引用，组件销毁时未清除
  • 被自定义事件引用，组件销毁时未清除

2.浏览器和nodejs的事件循环有什么区别？

  • 浏览器和nodejs的event loop流程基本相同
  • nodejs宏任务和微任务分类型，有优先级

3.虚拟DOM(vdom)真的很快吗?

vdom

  • Virtual DOM,虚拟DOM
  • 用JS对象模拟DOM节点数据
  • 由React最先推广使用

vdom快吗？

  • vdom并不快,js直接操作DOM才是最快的
  • 但数据驱动视图要有合适的技术方案，不能全部DOM重建
  • vdom就是目前最合适的技术方案

4.遍历数组，for和forEach哪个快？

  • for更快
  • forEach每次都要创建一个函数来调用，而for不会创建函数
  • 函数需要独立的作用域，会有额外的开销

5.什么是JS Bridge？

  • JS无法直接调用 native API
  • 需要通过一些特定的格式来调用
  • 这些格式就统称JS-Bridge，例如微信JSSDK

js bridge常见的实现方式

  • 注册全局API
  • URL Scheme

6.vue每个生命周期都做了什么？

beforeCreate

  • 创建一个空白的vue实例
  • data method尚未被初始化，不可使用

created

  • vue实例初始化完成,完成响应式绑定
  • data，method都已经初始化完成，可调用
  • 尚未开始渲染模板

beforeMount

  • 编译模板,调用render生成vdom
  • 还没有开始渲染DOM

mounted

  • 完成DOM渲染
  • 组件创建完成
  • 开始由创建阶段进入运行阶段

beforeUpdate

  • data发生变化之后
  • 准备更新DOM

update

  • data发生变化,且DOM更新完成
  • 不要在update中修改data，可能会导致死循环

beforeDistroy

  • 组件进入销毁阶段（尚未销毁，可正常使用）
  • 可移除、解绑一些全局事件，自定义事件

distroy

  • 组件被销毁了
  • 所有子组件也都被销毁了

vue什么时候操作DOM比较合适？

  • mounted和updated都不能保证子组件全部挂载完成
  • 可以使用$nextTick渲染DOM

三、移动端，http相关面试题

1.移动端H5 click有300ms延迟，如何解决？

  • 背景:double tap to zoom
  • fastClick
  • width=device-width

2.token和cookie有什么区别？

cookie

  • http无状态,每次请求都要带cookie,以帮助识别身份
  • 服务端也可以向客户端set-ciikie，cookie大小限制4kb
  • 默认有跨域限制：不可跨域共享，传递cookie
  • html5之前cookie常用于本地存储，大小只有4KB
  • html5之后一般使用localStroge或sessionStroge，存储大小为5M左右

cookie和token

  • cookie是HTTP规范，而token是自定义传递
  • cookie会默认被浏览器存储，而token需要自己存储
  • token默认没有跨域限制

JWT(JSON Web Token)

  • 登录的一个解决方案
  • 前端发起登录,后端验证成功之后,返回一个加密的token
  • 前端自行存储这个token（其中包含了加密过的用户信息）
  • 以后访问服务端接口，都带着这个token，作为用户信息

3.如何实现SSO单点登录？

基于cookie

  • cookie默认不可跨域共享,但有些情况下可设置为共享
  • 主域名相同，如www.baidu.com 和 image.baidu.com
  • 设置cookie domain为主域名，即可共享cookie

sso

  • 主域名不同,则不能使用cookie
  • 这时可以使用sso

如何实现单点登录？

  • 主域名相同,则可共享cookie
  • 主域名不同，则需使用sso

4.script的defer和async有什么区别？

  • 不加任何属性,当遇到script标签时,会暂停解析,下载js,执行js,再继续解析HTML
  • 加defer属性，当遇到script标签时，HTML会继续解析，并行下载js，HTML解析完后再执行js
  • 加async属性，当遇到script标签时，HTML会继续解析，并行下载js，执行js，再解析HTML

5.prefetch和dns-prefetch有什么区别？

preload和prefetch

  • 在link标签中使用,<link rel=‘preload’ />
  • preload资源在当前页面使用,会优先加载
  • prefetch资源在未来页面使用,空闲时加载

dns-prefetch和preconnet

  • dns-prefetch即DNS预查询
  • preconnet即DNS预连接

prefetch和dns-prefetch的区别？

  • prefetch是资源预获取（和preload相关）
  • dns-prefetch是DNS预查询（和preconnet相关）

6.你知道哪些前端攻击？该如何预防？

XSS

  • Cross site Script跨站脚本攻击
  • 黑客将js代码插入到网页内容中，渲染时执行JS代码
  • 预防：特殊字符替换

CSRF

  • Cross Site Rquest Forgery 跨站请求伪造
  • 黑客诱导用户去访问另一个网站的接口，伪造请求
  • 预防：严格的跨域限制 + 验证码机制

点击劫持

  • click jacking
  • 诱导界面上蒙一个透明的ifrme，诱导用户点击
  • 预防：让ifrme不能跨域访问

sql注入

  • 黑客提交内容时写入sql语句，破坏数据库
  • 预防：处理输入的内容，替换特殊字符

7.webSocket和HTTP有什么区别?

WebSocket

  • 支持端对端通讯
  • 可以由client发起，也可以由server发起
  • 应用场景：消息通知，直播室讨论区，聊天室，协同编辑

区别：

  • websocket协议名是ws://,可双端发起请求
  • websocket没有跨越限制
  • 通过send和onmessage通讯（http通过req和res）

8.从输入url到页面展示的完整过程

步骤

  1. 网络请求
  2. 解析
  3. 渲染

网络请求

  1. DNS查询(得到IP)，建立TCP连接（三次握手）
  2. 浏览器发起HTTP请求
  3. 收到请求响应，得到HTML源代码

解析:字符串 ->结构化数据

  • HTML构建DOM树
  • CSS构建CSSOM树
  • 两者结合，形成render tree

渲染：render tree绘制到页面

  • 计算各个DOM的尺寸,定位,最后绘制到页面
  • 遇到js可能会执行
  • 异步css，图片加载，可能会触发重新渲染

9. 重绘repaint和重排（回流）reflow有什么区别？

动态网页，随时都会重绘，重排

  • 网页动画
  • model Dialog弹窗
  • 增加/删除一个元素，显示/隐藏一个元素
    …
  • 这些都会导致重绘或重排

重绘repaint

  • 元素改变外观,如颜色,背景
  • 但元素的尺寸，定位不变，不会影响其他元素的位置

重排reflow

  • 重新计算尺寸和布局,可能会影响其它元素的位置
  • 如元素高度增加，可能会让相邻元素改变位置

区别

重排比重绘要影响更大,消耗也更大，所以要尽量避免无意义的重排

减少重排的方法：

  • 集中修改样式,或直接切换css class
  • 修改之前先设置display：none，脱离文档流
  • 使用BFC（内部改变不会影响外部元素）特性，不影响其它元素位置
  • 频繁触发使用节流和防抖
  • 使用createDocumentFragment批量操作DOM

四、实际工作相关面试题

1.h5页面如何进行首屏优化

路由懒加载

  • 适用于SPA(不使用MPA)
  • 路由拆分，优先保证首页加载

服务端渲染SSR

  • 传统的前后端分离(SPA)渲染页面的过程复杂
  • SSR渲染页面过程简单，所以性能好
  • 如果是纯h5页面，SSR是性能优化的终极方案

2.后端一次性返回10w条数据，你该如何渲染？

后端返回10w条数据，技术方案设计不合理，后端应该进行分页处理

如果非要这样处理，可以使用如下方法：
自定义中间层

  • 自定义nodejs中间层,获取并拆分这10w条数据
  • 前端对接nodejs中间层，而不是服务器
  • 成本比较高

虚拟列表

  • 只渲染可视区域DOM
  • 其它隐藏区域不显示，只用div撑起高度
  • 随着浏览器滚动，创建和销毁DOM

3.前端常用的设计模式有哪些？并说明使用场景

前端设计模式可参考这篇博客详解前端设计模式

4.做过哪些vue的优化

  • v-if和v-show

v-if会彻底销毁组件,v-show是使用css隐藏组件

  • v-for使用key
  • 使用computed缓存
  • keep-alive缓存组件

频繁切换的组件,如tabs

  • 异步组件
  • 针对体积较大的组件,如编辑器,复杂表格,复杂表单等
  • 拆包，需要时异步加载，不需要时不加载
  • 减少主包的体积，首页会更快加载
  • 路由懒加载

5.使用vue遇到过哪些坑？

内存泄露

全局变量,全局事件,全局定时器,自定义事件未销毁

vue2响应式的缺陷

data新增属性用vue.set,删除属性用vue.delete，无法直接修改数据arr[index] = value

路由切换时scroll到顶部

  • spa的通病,不仅仅是vue
  • 如：列表页，滚动到第二屏，点击进入详情页
  • 再返回到列表页（此时组件重新渲染）就scroll到顶部

解决方案：

  • 在列表页缓存数据和scrollTop值
  • 当再次返回列表页时，渲染组件，执行scrollTo(xx)

6.如何统一监听vue组件报错？

==window.onerror

  • 全局监听所有js错误
  • 但它是js级别的，识别不了vue组件信息
  • 可以捕捉一些vue监听不到的错误

errorCaptured生命周期

  • 监听下级组件的所有错误
  • 返回false会阻止向上传播

errorHandler配置

  • vue全局错误监听,所有组件错误都会汇总到这里
  • 但errorCaptured返回fanlse，不会传播到这里

7.如果一个h5很慢，该如何排查性能问题

前端性能指标

  • first paint(FP)，开始渲染了，但页面上不一定有内容
  • first contentful paint，第一次有内容的渲染
  • first Meaningful paint，第一次有意义的渲染，能看到页面的大概内容，已弃用，改用LCP
  • domContentLoaded，页面的dom内容加载完成
  • largest Contentfull paint（LCP），页面最大的内容已经渲染完成
  • load

chrome devtools

  • performance可查看上述性能指标,并有网页快照
  • network可以查看各个资源的加载时间

分析后得出结果

  • 如果是网页加载慢，那么可以优化服务端硬件配置，使用cdn
  • 路由懒加载，大组件异步加载，减少主包的体积
  • 优化http缓存策略
  • 如果是网页渲染慢，优化服务端接口
  • 继续分析，优化前端组件内部的逻辑
菜卷_
关注
  • 0
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VUE前端面试题 附答案.pdf
12-14
VUE前端面试题 附答案.pdf
前端Vue常见面试题大全
10-27
手动整理了前端Vue常见面试题
准备面试之前要做什么准备，前端经典面试题(60道前端面试题包含JS、CSS，移动端开发工程师面试
最新发布
2401_83740107的博客
04-05 873
阿里十分注重你对源码的理解，对你所学，所用东西的理解，对项目的理解。CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】一个人可以走的很快，但一群人才能走的更远。如果你从事以下工作或对以下感兴趣，欢迎戳这里加入程序员的圈子，让我们一起学习成长！
常见前端面试题及答案
10-21
本文是在GitHub上看到一个大牛总结的前端常见面试题，很多问题问的都很好，很经典、很有代表性。上面没有答案，我就整理了一下，从网上找了一些相关问题的答案
前端开发常见面试题
01-08
常见面试题 介绍js的基本数据类型、引用类型、特殊类型 基本数据类型：String、Number、Boolean、undefined、unll (新增Symbol) 引用类型 ： function、Object 特殊类型 ：undefined、null 原型链是什么 ? 用new运算符加上函数的调用，调用的结果就是一个对象，new出来的这个对象我们称他为实例 prototype（原型）是一个指针指向了一个原型对象，这个对象里面存放所有的实例共享的属性和方法 实例的__proto__指向了构造函数的prototype，构造函数是object的实例，构造函数的prototype下的__proto_
前端语言vue常见面试题
02-06
1.vue优点？ 答：轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb； 简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习； 双向数据绑定：保留了angular的特点，在数据操作方面更为简单； 组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有着独特的优势； 视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作； 虚拟DOM：dom操作是非常耗费性能的， 不再使用原生的dom操作节点，极大解放dom操作，但具体操作的还是dom不过是换了另一种方式； 运行速度更快:相比较与react而言，同样是操作虚拟dom，就性能而言，vue存在很大的优势。 2.vue父组件向子组件传递数据？ 答：通过props 3.子组件像父组件传递事件？ 答：$emit方法 转载：https://zhuanlan.zhihu.com/p/92407628
options请求（跨域预检）
weixin_45943355的博客
06-10 3万+
options 请求就是预检请求，可用于检测服务器允许的 http 方法。当发起跨域请求时，由于安全原因，触发一定条件时浏览器会在正式请求之前自动先发起 OPTIONS 请求，即 CORS 预检请求，服务器若接受该跨域请求，浏览器才继续发起正式请求。...
前端面试之 options 请求详解
kjssjj12的博客
06-15 3391
options 请求就是预检请求，可用于检测服务器允许的 http 方法。当发起跨域请求时，由于安全原因，触发一定条件时浏览器会在正式请求之前自动先发起 OPTIONS 请求，即 CORS 预检请求，服务器若接受该跨域请求，浏览器才继续发起正式请求。HTTP 的 OPTIONS 方法 用于获取目的资源所支持的通信选项。客户端可以对特定的 URL 使用 OPTIONS 方法，也可以对整站（通过将 URL 设置为"*"）使用该方法。(简而言之，就是可以用 options 请求去嗅探某个请求在对应的服务器中都支持
从前后端的角度分析options预检请求
华为云官方博客
05-16 2414
options预检请求是干嘛的？options请求一定会在post请求之前发送吗？前端或者后端开发需要手动干预这个预检请求吗？不用文档定义堆砌名词，从前后端角度单独分析，大白话带你了解！
从前后端的角度分析options预检请求——打破前后端联调的理解障碍
追寻心的步伐
05-31 1346
这些请求被称为“非简单请求”。反之，如果一个跨域请求被认为是“简单请求”，那么浏览器将不会发送OPTIONS请求。请求的目的是为了获取服务器对于跨域请求的配置信息（如允许的请求方法、允许的请求头部等），而不是为了获取实际的业务数据，如果一个跨域请求不满足以上所有条件，那么它被认为是非简单请求。因为这个请求不满足简单请求条件，所以在实际POST请求之前，浏览器会发送。请求成功还是失败，在设置的时间范围内，同一个接口请求是绝对不会再次发送。提示：当一个跨域POST请求满足简单请求条件时，浏览器不会发送。
HTTP 之 options预请求
qq_43842093的博客
10-22 5109
预请求就是复杂请求（可能对服务器数据产生副作用的HTTP请求方法，如put，delete都会对服务器数据进行更修改，所以要先询问服务器）。跨域请求中，浏览器自发的发起的预请求,浏览器会查询到两次请求，第一次的请求参数是options，以检测试实际请求是否可以被浏览器接受。
前端多了一个options请求？是Bug吗？
KIKI_20170120的博客
03-02 378
预检请求是由浏览器自动发起的一个额外的 OPTIONS 请求，以获知服务器是否授权后续的实际请求，是为保护客户端的安全，防止不受信任网站利用用户浏览器向其他网站发恶意请求。半信半疑：明明一次请求，干嘛要两次呢，这不是增大服务端压力吗？Orign: 表示允许该来源的请求说明资源是共享的，可以拿到；开发解释：这不用管，是浏览器默认发送的一个预检请求。：告知服务器实际请求所携带的自定义首部字段。就是预检请求，预先检查服务器是否支持。2、什么时候触发预检请求？：告知服务器实际请求使用的。请求，并确认实际请求的。
前端面试题（计算机网络）：options请求方法及使用场景
laowang357的博客
12-21 772
是HTTP请求的一种，询问支持的请求方法，用来跨域请求。
options请求_前端数据请求的终极方案
weixin_39639518的博客
11-30 728
数据请求是我们开发中非常重要的一环，如何优雅地进行抽象处理，不是一件很容易的事情，也是经常被忽略的事情，处理不好的话，重复的代码散落在各处，维护成本极高。所以我们需要好好梳理下数据请求涉及到哪些方面，对它有整体的管控，从而设计出扩展性高的方案。案例分析下面我们以 axios 这个请求库进行讲解。假如我们在页面中发出一个 POST 请求，类似这样：axios后来发现需要防止 CSRF，那我们需要在请...
跨域请求的OPTIONS问题
achang07的博客
02-26 2万+
今天在做项目的时候，有一个问题折腾了大半天。 前后端分离的项目，前端独立启动，端口号为1024；后端为微服务架构，前端部署一个网关服务，端口号7001。前后端都启动以后，前端向后端发送请求属于跨域，在登录完成以后前端会设置请求头Authorization将token带入，但是在后端的过滤器中却发现获取不到Authorization。 问题定位 前端是通过ajax发送的rest请求，将所有可能...
【前端面试题】—21道有关移动端的面试题
油墨香^-^的博客
05-30 3871
前端发展到今天，移动端的流量已经超越了PC端。比如对绝大部分人来说，每天使用手机上网的时间要远高于使用笔记本电脑、计算机的上网时间。因此移动端变得越来越重要。每个人的手机屏幕大小不同、系统不同，因此移动端屏幕的响应式适配、移动端兼容性、浏览器的操作Bug等是移动端部分的面试题主要考察的内容。 1、在移动端，单击穿透是什么？ 单击穿透现象有3种。 单击穿透问题：单击蒙层（mask）上的“关闭”按钮，蒙层消失后，发现触发了按钮下面元素的 click事件。 页面单击穿透问题：如果按钮下面恰妤是
OPTIONS请求：解析HTTP中的神秘请求
博客
08-08 1007
OPTIONS请求是一种向服务器询问某个资源支持的HTTP方法的请求。它不会对服务器资源做出实际的修改或操作，而只是用于获取服务器的元数据信息。与其他请求方法不同，OPTIONS请求并不是必需的，服务器可以选择不支持OPTIONS请求或者只支持部分资源的OPTIONS请求。跨域请求指的是客户端在访问不同域名下的资源时发起的请求。由于浏览器的同源策略限制，跨域请求通常受到一些限制。本篇博客介绍了OPTIONS请求在HTTP中的作用和使用场景。
前端面试题汇总大全（含答案）-- 持续更新
热门推荐
张兴华的博客
08-07 17万+
汇总了一些前端常见的面试题。 一、HTML 篇 1. 简述一下你对 HTML 语义化的理解？ 用正确的标签做正确的事情。 html 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的; 搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于 SEO; 使阅读源代码的人对网站更容易将网站...
关于options请求方式
Zzexi的博客
05-28 6495
关于options请求方式 options请求方法的主要用途有两个： 1、获取服务器支持的HTTP请求方法； 2、用来检查服务器的性能。例如：AJAX进行跨域请求时的预检，需要向另外一个域名的资源发送一个HTTP OPTIONS请求头，用以判断实际发送的请求是否安全。 为什么会出现options请求方式 想必很多小伙伴在第一次遇到请求方式为options时，会有一丝诧异，有些人会百度百度，有些人可能压根不在乎。至于为什么会出现options请求，我也是百度查阅资料略知一二。 这得从浏览器同源策略和跨域说
2023常见的前端面试题
07-12
以下是一些可能在2023年前端面试中常见的问题： 1. 介绍一下你对 Web 标准的理解。 2. 请解释一下什么是跨域，以及如何解决跨域问题。 3. 请解释一下什么是闭包，并举例说明闭包的应用场景。 4. 请解释一下什么是事件冒泡和事件捕获，以及它们之间的区别。 5. 请解释一下什么是 Virtual DOM，以及它与真实 DOM 的区别和优劣势。 6. 请解释一下什么是异步编程，以及常见的异步编程方法和优缺点。 7. 请解释一下什么是 CSS 盒模型，并且描述一下标准盒模型和 IE 盒模型的区别。 8. 请解释一下什么是响应式设计和自适应设计，并举例说明它们的应用。 9. 请解释一下什么是 MVC 和 MVVM 架构，以及它们的区别和适用场景。 10. 请解释一下什么是浏览器本地存储，以及 localStorage 和 sessionStorage 的区别。 11. 请解释一下什么是前端性能优化，以及常用的性能优化策略和技术手段。 12. 请解释一下什么是单页面应用（SPA），以及它的优势和缺点。 13. 请解释一下什么是前端安全，以及如何防止常见的前端安全攻击。 14. 请解释一下什么是模块化开发，以及常见的 JavaScript 模块化规范和工具。 15. 请解释一下什么是浏览器 Event Loop，以及如何理解 JavaScript 的同步和异步机制。 这些问题涵盖了前端开发的基础知识和常见技术，希望对你的面试准备有所帮助。当然，面试题的具体内容可能会根据公司和职位的要求有所不同，建议你结合自己的经验和项目经历进行更全面的准备。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值