【面试题】前端春招第二面

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 【面试题】前端春招第二面

不容错过的一些面试题小细节,话不多说,直接看题~

大厂面试题分享 面试题库

后端面试题库 (面试必备) 推荐:★★★★★

地址:前端面试题库

HTML/CSS/Javascript/ES篇
(1)标准盒模型和怪异盒模型?设置box-sizing:border-box后,content有哪些内容?

标准盒模型:盒子内容的宽/高=margin(左右/上下)+border(左右/上下)+padding(左右/上下)+content;内容区只包含 content;设置box-sizing:content-box; 怪异盒模型:盒子内容的宽/高=margin(左右/上下)+content(包含border(左右/上下)+padding(左右/上下));内容区包含content + padding + border;设置box-sizing:content-box;

<style>
     div{
       width: 200px;
       height: 200px;
       background-color: #ff6700;
       margin: 30px;
       padding: 10px;
       border: 20px solid #bfa;
    }
     .standardBox{
       box-sizing: content-box;
    }
     .weirdBox{
       box-sizing: border-box;
    }
 </style><h2>标准盒模型</h2><divclass="standardBox"></div>
 <h2>IE|怪异盒模型</h2><divclass="weirdBox"></div>复制代码

结果如图所示:

(2)有哪些属性是可以继承?
可继承属性:
  1.字体系列属性:font-family,font-size
  2.文本系列属性:text-indent,line-height,color
  3.元素可见性:visibility
  4.表格布局属性:border-style
  5.列表布局属性:list-stylelist-style-type
  6.光标属性:cursor复制代码
(3)引入css样式会不会阻塞html的渲染?css预处理器解析css会阻塞html的渲染?
css的加载会阻塞html的渲染嘛?
    css的加载不会阻塞html的解析,但是会阻塞渲染。这是因为从浏览器输入url到页面渲染的过程中,html通过html
解析器生成DOM树,css通过css解析器把 CSS 解析成 CSS 对象,然后组装成 CSSOM 树,这两个步骤是互不影响,并行的,
因此CSS不会阻塞页面DOM的解析。
    结合DOM树 和CSSOM树,生成一个render树(重排),由此可见render tree的生成是依赖DOM Tree和CSSOM Tree的,因
此CSS必然会阻塞DOM的渲染;严谨一点的说,CSS会阻塞render tree的生成,进而会阻塞DOM的渲染。
复制代码
(4)执行js脚本会阻塞html的渲染?有没有解决方式?
<script async></script>
    当浏览器读取到属性为async的script标签,获取该脚本的网络请求是异步的;解析html的过程中会进行js脚本的异步
加载,如果网络请求脚本返回后,如果此时 HTML 还没有解析完,浏览器会暂停解析,先让 JS 引擎执行代码,执行完脚本
后再进行解析;反之,如果网络请求脚本返回后,html已经解析完毕,那就相安无事。
    async 是不可控的,因为执行时间不确定,如果在异步JS 脚本中获取某个 DOM 元素,有可能获取到也有可能获取不到。如果存在多个 async 的时候,执行顺序也不确定,完全依赖于网络传输结果,谁先到执行谁。
    总结:解析html过程中会进行脚本的异步下载,下载成功后会立即执行,有可能会阻断html的解析。
<script defer></script>
    当浏览器读取到属性为defer的script标签,获取该脚本的网络请求也是异步的;
解析html的过程中会进行js脚本的异步加载,如果网络请求脚本返回后,如果此时 HTML 还没有解析完,浏览器不会暂停解
析并执行 JS 代码,而是等待 HTML 解析完毕再执行js代码。
    如果存在多个defer script 标签,浏览器(IE9及以下除外)会保证它们按照在 HTML 中出现的顺序执行,不会破坏
js脚本之间的依赖关系。
    总结:不会阻塞html的解析。
复制代码
(5)css选择器有哪些?伪类和伪类选择器有什么区别?
css选择器:
    通用选择器:选择所有元素
    元素选择器:按照给定的节点名称,选择所有匹配的元素(div-->匹配任何<div><div>元素)
    层级选择器:如:nth-child(n)
    属性选择器
    类和id选择器
    标签属性选择器
    伪类与伪元素:伪类用于选择处于特定状态的元素(a:hover|a:first等);伪元素以类似方式表现,不过表现得是像
你往标记文本中加入全新的 HTML元素一样,而不是向现有的元素上应用类(a::after|a::before)
    关系选择器:后代选择器(AB-->单个空格组合两个选择器,选择A元素包含的所有B元素),
                子代关系选择器(A>B-->选择A的直接子元素B),
                邻接兄弟(A+B-->选择紧跟A后的B),
                通用兄弟(A~B-->选择A后任何地方的B元素),
                列组合器(A||B-->选择属于某个表格行的节点,即A作用域内的B元素)
    分组选择器:通过(,)将不同的选择器组合在一起(A,B-->同时匹配A,B元素)
    伪类:(:)伪选择器支持按照未被包含在文档树中的状态信息来选择元素(a:visited-->匹配所有曾被访问过的 
    <a> 元素)
    伪元素:(::) 伪选择器用于表示无法用 HTML 语义表达的实体(p::first-line 匹配所有 <p> 元素的第一行)
复制代码
(6)typeof和instanceof的区别?
typeof 只能准确判断基本数据类型,判断所有的引用类型都为object,但是有两个例外:
        console.log(typeofnull);//object
        console.log(typeofFunction);//function
instanceof 只能准确判断引用数据类型,但是用来判断基本数据类型也不会报错,例如:
        const arr=[1,2]
        console.log(arr instanceofArray);//true
        let len=arr.length
        console.log(len instanceofNumber);//false复制代码
(7)原型和原型链?

原型和原型链

原型:
    原型(prototype)是函数function对象的一个属性,它定义了构造函数制造出来的对象(new运算符调用的函数)的公
共祖先,通过构造函数产生的对象可以继承到该原型的属性和对象,原型也是对象。
    隐式原型(__proto__-->每个实例上都有的属性)和显式原型(prototype-->构造函数的属性)
    函数的原型和对象的原型(对象原型的最顶端是null)
原型链:
    在原型上再加一个原型,再加一个原型..把原型连成链,访问顺序也是按照这个链的顺序跟作用域链一样,叫做原型链
复制代码

(8)深拷贝和浅拷贝?如何拷贝函数?

那就聊聊深拷贝和浅拷贝

浅拷贝:    
    创建一个新对象,如果源对象的属性是基本数据类型,拷贝的是基本数据类型的值;如果源对象的属性是引用数据类型,
拷贝的是内存地址,如果新对象改变了这个地址,会影响到源对象。
    拷贝方式:Object.assign({},obj,...),扩展运算符(...),Array.prototype.concat(),
    Array.prototype.slice(),Array.prototype.concat()
深拷贝:将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新的对象,且修改新对象不会影响
到源对象。
    拷贝方式:JSON.parse(JSON.stringify(obj))
    缺点:A.会忽略Symbol和undefined和function
         B.不能拷贝循环引用的对象
         C.不能序列化函数,拷贝出来的对象的属性顺序可能会和源对象不一致
         D.拷贝Date对象,得到的是字符串;拷贝RegExp对象,得到的是{}
         E.对象中含有NaN,Infinity会变成null
拷贝函数:
    如果拷贝箭头函数,可以直接调用函数的toString方法,然后通过eval解析;如果拷贝普通函数,则需要使用正则表达式匹配函数体,然后通过newFunction生成。
复制代码
(9)闭包?

闭包

闭包:
    当一个外部函数返回一个内部函数,这个内部函数存在对外部函数变量的引用,这些变量不会随着垃圾回收机制而
  被回收,这些变量的集合就是闭包。
复制代码
(10)异步编程?
Promise,async-await,generator
复制代码
(11)ES6中map和every的区别?
Array.prototype.map()  参数为一个回调函数,这个回调函数有三个参数,item,index,array;有返回值,
返回一个新数组
Array.prototype.every()  参数为一个回调函数,这个回调函数有三个参数,item,index,array;有返回值,只有所有的
元素都满足条件,回调函数返回trueArray.prototype.some()  参数为一个回调函数,这个回调函数有三个参数,item,index,array;有返回值,只要
有一个元素满足条件,回调函数就会返回true复制代码
(12)localStorage是永久缓存,如何实现设置localStorage的有效期?

这个实际上就是根据业务逻辑手动去定义一个有效期,有效期到了就手动删除

(13)浏览器的缓存策略(强缓存和协商缓存)?

已经第二次面了,看来真的很重要!

Vue篇
(14)v-if和v-show的区别?
v-if:
    条件渲染
    通过操纵DOM元素来进行切换显示
    值为true的时候元素存在于DOM树中,值为false的时候从DOM树中移除
    会引起回流和重绘
v-show:
    原理是修改元素的的CSS属性(display)来决定实现显示还是隐藏
    指令后面的内容最终都会解析为布尔值
    值为真(true)的时候元素显示,值为假(false)的时候元素隐藏
    数据改变之后呢对应的元素的显示状态也是会同步更新的(响应式的)
    不会引起回流,但是会引起重绘
复制代码
(15)子组件如何使用父组件的方法(父子组件通信)

组件通信

Props用于父组件向子组件传值
emit用于子组件向父组件传值
expose/ref用于父组件接收子组件传来的的属性或方法
provide/inject用于父组件向子组件或者其他跨级组件或多级嵌套组件之间的通信
attrs用于子组件接收父组件中不是通过Props接收的属性
另外,可以试试mitt.js
复制代码
(16)说说vue中nextTick()?
nextTick():等待下一次 DOM 更新刷新的工具方法
当你在 Vue 中更改响应式状态时,最终的 DOM 更新并不是同步生效的,而是由 Vue 将它们缓存在一个队列中,直到下一个
“tick”才一起执行。这样是为了确保每个组件无论发生多少状态改变,都仅执行一次更新。
nextTick() 可以在状态改变后立即使用,以等待 DOM 更新完成。你可以传递一个回调函数作为参数,或者 await 返回的
Promise
实现原理:
在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后立即使用 nextTick 来获取更新后的 DOM。 nextTick主要
使用了宏任务和微任务。 根据执行环境分别尝试采用Promise、MutationObserver、setImmediate,如果以上都不行则采用
setTimeout定义了一个异步方法,多次调用nextTick会将方法存入队列中,通过这个异步方法清空当前队列
复制代码
(17)vue中是如何阻止事件冒泡的?
<!-- 单击事件将停止传递 --><a @click.stop="doThis"></a>
<!-- 事件处理器不来自子元素 --><div @click.self="doThat">...</div>复制代码
(18)如何保证一份css文件样式不会作用在全局(样式隔离)?
scoped
BEM(block element modifier) 可读性好,命名太长,css打包后的体积会更大
css-loader(css模块化) 会将css类名转换成哈希值;代码可读性变差
css in js
预处理器的嵌套样式
shadow DOM(微前端)

大厂面试题分享 面试题库

后端面试题库 (面试必备) 推荐:★★★★★

地址:前端面试题库

相关文章
|
5月前
|
存储 前端开发 JavaScript
前端面试题23-34
通过对 Promise 和 ECMAScript6 的深入理解,可以更好地应对现代 JavaScript 开发中的复杂异步操作和新特性,提升代码质量和开发效率。
44 2
|
3月前
|
缓存 前端开发 中间件
[go 面试] 前端请求到后端API的中间件流程解析
[go 面试] 前端请求到后端API的中间件流程解析
|
27天前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
62 1
|
6月前
|
缓存 JavaScript 前端开发
2024 前端高频面试题之 Vue 篇
2024 前端高频面试题之 Vue 篇
289 8
|
6月前
|
前端开发 JavaScript Java
2024高频前端面试题合集(一)
JavaScript Bridge 是一种在 JavaScript 和其他语言(如 Java、Objective-C 等)间建立通信的技术,常用于混合应用开发,允许调用原生功能、获取数据、事件通知及优化性能。SSR(服务器端渲染)的单机 QPS 取决于服务器性能、应用复杂度、网络条件等因素。Egg.js 是基于 Node.js 的企业级框架,通过目录结构约定、启动流程、插件机制和核心组件来初始化应用。前端错误捕获可通过 try-catch、window.onerror、Promise.catch 和 unhandledrejection 事件等方式实现。
134 1
|
3月前
|
前端开发 应用服务中间件 API
"揭秘!面试官必问:你是如何巧妙绕过跨域难题的?前端代理VS服务器端CORS,哪个才是你的秘密武器?"
【8月更文挑战第21天】在软件开发中,尤其前后端分离架构下,跨域资源共享(CORS)是常见的挑战。主要解决方案有两种:一是服务器端配置CORS策略,通过设置响应头控制跨域访问权限,无需改动前端代码,增强安全性;二是前端代理转发,如使用Nginx或Webpack DevServer在开发环境中转发请求绕过同源策略,简化开发流程但不适用于生产环境。生产环境下应采用服务器端CORS策略以确保安全稳定。
52 0
|
4月前
|
缓存 前端开发 JavaScript
高级前端常见的面试题?
【7月更文挑战第11天】 **高级前端面试聚焦候选人的技术深度、项目实战、问题解决及技术趋势洞察。涉及React/Vue生命周期、Redux/Vuex状态管理、Webpack优化、HTTP/HTTPS安全、性能提升策略、PWA、GraphQL、WebAssembly、安全性议题及项目管理。通过回答,展现候选人技术广度与应对复杂场景的能力。**
105 1
|
5月前
|
存储 缓存 监控
2024春招小红书前端面试题分享
2024春招小红书前端面试题分享
141 3
|
5月前
|
网络协议 算法 安全
小米安卓春招面试一面
小米安卓春招面试一面
47 3
|
4月前
|
移动开发 前端开发 JavaScript
前端常见的面试题都有那些?
【7月更文挑战第10天】 前端面试涵盖HTML5新特性、CSS盒模型、JS事件传播、Vue的双向绑定、React生命周期、性能优化策略、浏览器解析流程及安全知识等。例如,HTML5新增video/audio元素、CSS选择器优先级计算、闭包功能、async/await处理异步、Vue通过Object.defineProperty实现数据绑定、React组件生命周期的关键阶段、前端优化如CDN和资源压缩,以及浏览器如何构建渲染树。面试还可能涉及XSS/CSRF防护和框架选择考量。准备面试需全面理解基础概念并结合实践经验。
52 0
下一篇
无影云桌面