前端面试题目小结 之一(精选10题)

简介: 前端面试题目小结 之一(精选10题)

CSS+HTML

1、H5新增特性

  • Canvas -- 用于绘画的元素
  • video、audio -- 用于播放视频和音频的媒体。
  • 语义化标签 : headernavmainarticlesectionasidefooter
  • webSocket -- 单个TCP连接上进行全双工通讯的协议。
  • localStorage、sessionStorage -- 本地离线存储。
  • 新的表单控件 -- 如:date、time、email、url、search。

2、重绘&重排

  • 重排(回流):当DOM变化,引起了元素形状大小等几何变化,浏览器会重新计算元素的几何属性,将其放置到正确位置,这个过程叫重排。
  • 重绘:当一个元素的外观发生变化但并未引起布局上的变化,重新把元素绘制出来对的过程叫做重绘

3、BFC

官方:块级格式上下文,是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。浏览器对BFC的限制规则是

  • 生成BFC元素的子元素会一个接一个的放置。
  • 垂直方向上他们的起点是一个包含块的顶部,两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC-- 中相邻的块级元素的外边距会折叠(Mastering margin collapsing)。
  • 生成BFC元素的子元素中,每一个子元素左外边距与包含块的左边界相接触(对于从右到左的格式化,右外边距接触右边界),即使浮动元素也是如此(尽管子元素的内容区域会由于浮动而压缩),除非这个子元素也创建了一个新的BFC(如它自身也是一个浮动元素)。 触发条件:
  • 根元素,即HTML标签
  • 浮动元素:float值为left、right
  • overflow值不为 visible,为 autoscrollhidden
  • display值为 inline-blocktable-celltable-captiontableinline-tableflexinline-flexgridinline-grid
  • 定位元素:position值为 absolute、fixed

我的理解:内部的盒子会在垂直方向上一个接一个放置;垂直方向上的盒子间距margin决定,但是同属于一个BFC的两个盒子会发生margin重叠;每个盒子左右外边距不会超出包含他的块;BFC的区域不会与float的元素区域重叠;计算高度时浮动元素也要计算在内;

  • 解决margin重叠问题:给其中一个盒子添加float利用规则(BFC的区域不会与float的元素区域重叠)
  • 利用BFC可以清除浮动:计算高度时浮动元素也要计算在内所以可以利用这一点清除浮动

4、编写CSS代码的时候如何优化CSS渲染性能?

  • 内联首屏关键关键Css,优先加载主要的内容。
  • 异步加载Css
//设置link标签media属性为noexis,浏览器会认为当前样式表不适用当前类型,会在不阻塞页面渲染的情况下再进行下载。加载完成后,将media的值设为screen或all,从而让浏览器开始解析CSS
<link rel="stylesheet" href="mystyles.css" media="noexist" onload="this.media='all'">
//通过rel属性将link元素标记为alternate可选样式表,也能实现浏览器异步加载。同样别忘了加载完成之后,将rel设回stylesheet
<link rel="alternate stylesheet" href="mystyles.css" onload="this.rel='stylesheet'">
复制代码
  • 合理使用选择器

5、CSS响应式布局有哪些?

  • CSS3媒体查询@media 查询(麻烦,需要考虑的情况很多,不推荐)
  • 在头部meta标签中加入“name=“viewport元标签””代表网页宽度默认等于屏幕宽度
  • 借助bootstrap中的栅格
  • 弹性盒子(推荐使用)

6、CSS盒模型(标准盒模型和IE盒模型)

共同点:两种盒模型都是由 content + padding + border + margin 构成,其大小都是由 content + padding + border 决定的,但是盒子内容宽/高度(即 width/height)的计算范围根据盒模型的不同会有所不同:

  • 标准盒模型:只包含 content
  • IE盒模型:content + padding + border

box-sizing 改变元素的盒模型:

  • box-sizing: content-box :标准盒模型(默认值)。
  • box-sizing: border-box :IE(替代)盒模型。

JS相关

1、闭包(面试+笔试===高频)

闭包是指有权访问另一个函数作用域中的变量的函数

  • 优点:延长变量生命周期、私有化变量
  • 缺点:会导致函数的变量一直保存在内存中,过多的闭包可能会导致内存泄漏
 function fun1() {
      let n = 0;
      function fun2() {
        n++;
        console.log("@"+n);
        return n
      }
      return fun2;
    }
    let res = fun1();
    // 执行12次,fn2中的变量的生命周期变长了,fun2函数中的n被外部使用了
    for (let i = 0; i < 12; i++) {
      console.log(res()+"执行的第"+(i+1)+"次");
    }
复制代码

2、原型、原型链(高频)

  • 原型链:当我们访问一个对象的属性时,如果这个对象内部不存在这个属性,那么它就会去它的原型对象里找这个属性,这个原型对象又会有自己的原型,于是就这样一直找下去,这就是原型链。
  • 原型链的尽头一般来说都是Object.prototype所以这就是我们新建的对象为什么能够使用toString()等方法的原因。 Object.prototype.toString.call([])//tostring可以返回一个精确的类型
  • 原型:在 JS 中,每当定义一个对象(函数)时,对象中都会包含一些预定义的属性。其中每个函数对象都有一个prototype 属性,这个属性指向函数的原型对象

3、this指向

  • 全局函数中,this指向window
  • 作为对象的方法调用 this 指向调用对象
  • 自定义构造函数中,this指向新的实例化对象(new 会改变 this 的指向)
  • 事件绑定中this指向事件源
  • 定时器函数中this指向window

4、JS继承的方式有哪些?

  • 原型链的方式继承
  • 借用构造函数来实现继承
  • 组合继承
  • ES6中使用extendssuper关键字来实现继承

5、JS事件循环机制或js的执行机制?

一次弄懂Event Loop

EventLoop,就像是一个银行叫号系统,负责去找到对应任务队列中的函数,然后放入执行栈中进行调用,任务队列分为宏任务和微任务。在执行过程中,某个宏任务执行结束后,然后查看是否有微任务,如果没有,则执行下一个宏任务,以此类推直到全部执行结束。

js是一个单线程、异步、非阻塞I/O模型、 event loop事件循环的执行机制

所有任务可以分成两种,一种是同步任务(synchronous),另一种是异步任务(asynchronous)。 同步任务指的是,在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务。异步 任务指的是,不进入主线程、而进入"任务队列"(task queue)的任务,只有"任务队列"通知主线程, 某个异步任务可以执行了,该任务才会进入主线程执行。

宏任务包含

script(整体代码)
setTimeout
setInterval
I/O
UI交互事件
postMessage
MessageChannel
setImmediate(Node.js 环境)
复制代码

微任务

Promise.then
Object.observe
MutationObserver
process.nextTick(Node.js 环境)
复制代码

请写出下段代码的输出结果(js事件循环机制)

new Promise(resolve => {
  console.log(1);
  setTimeout(() => console.log(2), 0)
  Promise.resolve().then(() => console.log(3)) 
    resolve();
}).then(() => console.log(4)) 
console.log(5)
复制代码

1 5 3 4 2

6、原生ajax

ajax是一种异步通信的方法,从服务端获取数据,达到局部刷新页面的效果。

实现步骤

  • 创建XMLHttpRequest对象;
  • 调用open方法传入三个参数 请求方式(GET/POST)、url、同步异步(true/false);
  • 监听onreadystatechange事件,当readystate等于4时返回responseText;
  • 调用send方法传递参数。

7、事件冒泡、委托(捕获)

  • 事件冒泡指在在一个对象上触发某类事件,如果此对象绑定了事件,就会触发事件,如果没有,就会向这个对象的父级对象传播,最终父级对象触发了事件。
  • 事件委托本质上是利用了浏览器事件冒泡的机制。因为事件在冒泡过程中会上传到父节点,并且父节点可以通过事件对象获取到目标节点,因此可以在父节点上定义监听函数,我们就可以到具体触发事件的元素,由父节点的监听函数统一处理多个子元素的事件,这种方式称为事件代理。
    event.stopPropagation() 或者 ie下的方法 event.cancelBubble = true; //阻止事件冒泡

8、promise?(高频)

是异步编程解决的一种方案,可以浅显的认为他就是个容器,里面存放着未来才会结束的事情的结果。同时Promise也是一个对象,可以从该对象获取异步操作的消息。可以解决回调层层嵌套的问题。

promise有几种状态?三种

  • promise有三种状态pending(等待)、已完成(fullled)、已拒绝(rejected)
  • 一个promise的状态只可能从“等待”转到“完成”态或者“拒绝”态,不能逆向转换,同时“完成”态和“拒绝”态不能相互转换

promise的方法有哪些?

  • promise.all-----同时多个异步操作时,同时发生,等待最后一个结束才结束。只要有一个出错,则都获取不到
const request1 => () => axios.get()
const request2 => () => axios.get()
const request3 => () => axios.get()
const request4 => () => axios.get()
Promise.all([request1(), request2(), request3(), request4()]).then(res => {
    // res中就包含了四个请求得到的结果
})
复制代码
  • promise.race-----可以在同时多个异步操作时,同时发生,第一个结束就结束 在一些异步处理中,我们想要设置超时时间的话,xhr对象可以调用xhr.abort()让请求结束,但是其他的没有
const asyncFn = () => new Promise(() => {
    // 代码
})
Promise.race([asyncFn(), new Promise((resolve) => {
    setTimeout(() => {
      resolve()    
    }, 5000)
})])
复制代码
  • Promise.reject (返回一个失败的 promise)
  • Promise.resolve (返回一个成功的 promise)
  • Promise.prototype.finally (无论成功还是失败都会执行 finally)
  • Promise.prototype.catch (就是调用 promise 自身的 then 方法,只传入失败的回调)

Async和await

  • sync/await是生成器函数的语法糖 async/await是基于promise实现的,他们不能用于普通的函数回调 async/await更符合同步语义 使得异步代码看起来更像同步代码 async/await与promise一样,是非阻塞的 执行async函数返回的都是promise对象

9、函数防抖和节流(高频---笔试+面试)

函数防抖:在规定时间内多次执行代码,只执行最后一次(按钮频繁点击时,只让最后一次生效) 函数节流:定义一个执行频率时间,在执行的过程每隔对应的频率时间执行一次(表单验证中输入内容时、滚动条事件)

平时项目中我们会直接使用lodash库,来解决对应的问题

// 防抖
function debounce(func, wait) {
    let timeout;
    return function () {
        let context = this;
        let args = arguments;
        if (timeout) clearTimeout(timeout);
          timeout = setTimeout(() => {
            func.apply(context, args)
        }, wait);
    }
}
// 节流函数
function throttle(fn, delay) {
    // 记录上一次函数触发的时间
    var lastTime = 0;
    return function() {
        // 记录当前函数触发的时间
        var nowTime = Date.now();
        if (nowTime - lastTime > delay) {
        // 修正this指向问题
            fn.call(this);
        // 同步时间
          lastTime = nowTime;
        }
    }
}
document.onscroll = throttle(function() { console.log('scroll事件触发' + Date.now()) }, 200)
复制代码

10、let;const;var区别?

不同点:

作用域:

  • Var声明的变量只能是全局对的或者是函数块的
  • let声明的变量它的作用域既可以是全局或者整个函数块
  • var 允许在同一作用域中重复声明,而 let 不允许在同一作用域中重复声明,否则将抛出异常
  • var 在全局环境声明变量,会在全局对象里新建一个属性,而 let 在全局环境声明变量,则不会在全局对象里新建一个属性。
  • var 声明变量存在变量提升;let 声明变量存在暂存死区

相同点:

  • var 和 let 的作用域规则都是一样的,其声明的变量只在其声明的块或子块中可用

总结给大家推荐一个实用面试题库

1、前端面试题库 (面试必备)            推荐:★★★★★

地址:前端面试题库

2、前端技术导航大全      推荐:★★★★★

地址:前端技术导航大全

3、开发者颜色值转换工具   推荐:★★★★★

地址 :开发者颜色值转换工具

相关文章
|
4月前
|
Web App开发 缓存 前端开发
浏览器常见面试题目及详细答案解析
本文围绕浏览器常见面试题及答案展开,深入解析浏览器组成、内核、渲染机制与缓存等核心知识点。内容涵盖浏览器的主要组成部分(如用户界面、呈现引擎、JavaScript解释器等)、主流浏览器内核及其特点、从输入URL到页面呈现的全过程,以及CSS加载对渲染的影响等。结合实际应用场景,帮助读者全面掌握浏览器工作原理,为前端开发和面试提供扎实的知识储备。
190 4
|
4月前
|
缓存 NoSQL Java
Java Redis 面试题集锦 常见高频面试题目及解析
本文总结了Redis在Java中的核心面试题,包括数据类型操作、单线程高性能原理、键过期策略及分布式锁实现等关键内容。通过Jedis代码示例展示了String、List等数据类型的操作方法,讲解了惰性删除和定期删除相结合的过期策略,并提供了Spring Boot配置Redis过期时间的方案。文章还探讨了缓存穿透、雪崩等问题解决方案,以及基于Redis的分布式锁实现,帮助开发者全面掌握Redis在Java应用中的实践要点。
235 6
|
4月前
|
算法 Java 关系型数据库
校招 Java 面试基础题目解析及学习指南含新技术实操要点
本指南聚焦校招Java面试,涵盖Java 8+新特性、多线程与并发、集合与泛型改进及实操项目。内容包括Lambda表达式、Stream API、Optional类、CompletableFuture异步编程、ReentrantLock与Condition、局部变量类型推断(var)、文本块、模块化系统等。通过在线书店系统项目,实践Java核心技术,如书籍管理、用户管理和订单管理,结合Lambda、Stream、CompletableFuture等特性。附带资源链接,助你掌握最新技术,应对面试挑战。
101 2
|
4月前
|
安全 Java 编译器
Java 校招面试题目合集及答案 120 道详解
这份资料汇总了120道Java校招面试题目及其详细答案,涵盖Java基础、JVM原理、多线程、数据类型、方法重载与覆盖等多个核心知识点。通过实例代码解析,帮助求职者深入理解Java编程精髓,为校招面试做好充分准备。无论是初学者还是进阶开发者,都能从中受益,提升技术实力和面试成功率。附带的资源链接提供了更多学习材料,助力高效备考。
202 3
|
4月前
|
存储 算法 Java
校招 java 面试基础题目及解析
本文围绕Java校招面试基础题目展开,涵盖平台无关性、面向对象特性(封装、继承、多态)、数据类型、关键字(static、final)、方法相关(重载与覆盖)、流程控制语句、数组与集合、异常处理等核心知识点。通过概念阐述和代码示例,帮助求职者深入理解并掌握Java基础知识,为校招面试做好充分准备。文末还提供了专项练习建议及资源链接,助力提升实战能力。
131 0
|
缓存 前端开发 中间件
[go 面试] 前端请求到后端API的中间件流程解析
[go 面试] 前端请求到后端API的中间件流程解析
|
存储 JavaScript 前端开发
2022年前端js面试题
2022年前端js面试题
252 57
|
存储 XML 移动开发
前端大厂面试真题
前端大厂面试真题
|
Web App开发 前端开发 Linux
「offer来了」浅谈前端面试中开发环境常考知识点
该文章归纳了前端开发环境中常见的面试知识点,特别是围绕Git的使用进行了详细介绍,包括Git的基本概念、常用命令以及在团队协作中的最佳实践,同时还涉及了Chrome调试工具和Linux命令行的基础操作。
「offer来了」浅谈前端面试中开发环境常考知识点
|
11月前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
226 1

热门文章

最新文章

  • 1
    Redis常见面试题全解析
  • 2
    前端工程化演进之路:从手工作坊到AI驱动的智能化开发
  • 3
    Vue 3 + TypeScript 现代前端开发最佳实践(2025版指南)
  • 4
    实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式