- 元素的位置发生变化
- 元素的尺寸发生变化(包括外边距、内边框、边框大小、高度和宽度等)
- 内容发生变化,比如文本变化或图片被另一个不同尺寸的图片所替代。
- 页面一开始渲染的时候(这肯定避免不了)
- 浏览器的窗口尺寸变化(因为回流是根据视口的大小来计算元素的位置和大小的)
如何画一条0.5px的线?
tansform
- 渐变
#line1 {
border-bottom: 1px solid black;
transform: scaleY(0.5);
}
选择器的优先级?
!important > 内联样式 > id选择 > (class选择 = 伪类选择) > (标签选择 = 伪元素选择)
若是行内选择符,则加1、0、0、0
若是ID选择符,则加0、1、0、0
若是类选择符/伪类选择符,则分别加0、0、1、0
若是元素选择符,则分别加0、0、0、1
伪类和伪元素的区别?
- 伪类本质上是为了弥补常规CSS选择器的不足,以便获取到更多信息;
- 伪元素本质上是创建了一个有内容的虚拟容器;
- CSS3中伪类和伪元素的语法不同;伪类 :link :hover ,伪元素 ::before ::after
- 可以同时使用多个伪类,而只能同时使用一个伪元素;
flex 和 grid 介绍?
- Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
- 网格布局(Grid)是最强大的 CSS 布局方案。它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。
区别
Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。Grid 布局远比 Flex 布局强大。
介绍下BFC
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,其中的元素布局是不受外界的影响,并且在一个BFC中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列。
触发 BFC
只要元素满足下面任一条件即可触发 BFC 特性:
- body 根元素
- 浮动元素:float 除 none 以外的值
- 绝对定位元素:position (absolute、fixed)
- display 为 inline-block、table-cells、flex
- overflow 除了 visible 以外的值 (hidden、auto、scroll)
如果需要手动写动画,你认为最小时间间隔是多久,为什么?
- 16.7ms.
- 多数显示器默认频率是60Hz,即1秒刷新60次,所以理论上最小间隔为1/60*1000ms = 16.7ms
JavaScript
JavaScript 的基本数据类型有哪些?
- JS 中分为
七种
内置类型,七种内置类型又分为两大类型:基本类型
和对象(Object)
。 - 基本类型有六种: null,undefined,boolean,number,string,symbol。
从输入url 到看到页面发生了什么?
- DNS解析
- 发起TCP链接
- 发送HTTP请求
- 服务器响应请求并返回HTTP报文
- 浏览器解析渲染页面
- 连接结束
0.1 + 0.2 === 0.3 吗?为什么?
JavaScript 使用 Number 类型来表示数字(整数或浮点数),遵循 IEEE 754 标准,通过 64 位来表示一个数字。
- 1 符号位,0 表示正数,1 表示负数 s
- 11 指数位(e)
- 52 尾数,小数部分(即有效数字)
最大安全数字:Number.MAX_SAFE_INTEGER = Math.pow(2, 53) - 1,转换成整数就是 16 位,所以 0.1 === 0.1,是因为通过 toPrecision(16) 去有效位之后,两者是相等的。
在两数相加时,会先转换成二进制,0.1 和 0.2 转换成二进制的时候尾数会发生无限循环,然后进行对阶运算,JS 引擎对二进制进行截断,所以造成精度丢失。
所以总结:精度丢失可能出现在进制转换和对阶运算中
requestAnimationFrame 比起 setTimeout、setInterval的优势?
- requestAnimationFrame不需要设置时间间隔
- requestAnimationFrame会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率
- 在隐藏或不可见的元素中,requestAnimationFrame将不会进行重绘或回流,这当然就意味着更少的CPU、GPU和内存使用量
- requestAnimationFrame是由浏览器专门为动画提供的API,在运行时浏览器会自动优化方法的调用,并且如果页面不是激活状态下的话,动画会自动暂停,有效节省了CPU开销
new 操作做了什么事情?
- 创建了一个全新的对象;
- 让this 指向新创建的对象;
- 执行构造函数里面的代码,给这个新对象添加属性和方法;
- 返回这个新的对象(所以构造函数里面不需要return)。
什么是闭包?有什么作用?
1.什么是闭包?
- 定义:闭包是指有权访问另一个函数作用域中的变量的一个函数。简单的说,你可以认为闭包是一个特别的函数,他能够读取其他函数内部变量的函数。
- 自由变量:在当前作用域没有定义,在父作用域及以上定义了,他会一层一层的往上找。闭包的中那个没有被回收的变量就是自由变量。自由变量是在函数定义的那里一层层的往上找。
- 闭包产生的本质s:当前环境中存在指向父级作用域的引用
2.作用
- 希望变量长期驻扎在内存当中(一般函数执行完毕,变量和参数会被销毁);
- 避免全局变量的污染。
- 私有化变量
- 创建模块
3.一般如何产生闭包?
- 返回函数
- 函数当做参数传递
什么是作用域链?
首先要了解作用域链,当访问一个变量时,编译器在执行这段代码时,会首先从当前的作用域中查找是否有这个标识符,如果没有找到,就会去父作用域查找,如果父作用域还没找到继续向上查找,直到全局作用域为止,而作用域链,就是有当前作用域与上层作用域的一系列变量对象组成,它保证了当前执行的作用域对符合访问权限的变量和函数的有序访问。
箭头函数与普通函数的区别
this指向问题
:箭头函数的this指向的是父级作用域的this,是通过查找作用域链来确定 this 的值也就是说,看的是上下文的this,指向的是定义它的对象,而不是使用时所在的对象;普通函数this 指向的是它的直接调用者。- 箭头函数没有 prototype (原型),所以箭头函数本身没有this
- 不能直接修改箭头函数的this指向
- 箭头函数不能作为构造函数使用
- 箭头函数不绑定arguments,取而代之用rest参数…代替arguments对象,来访问箭头函数的参数列表
- 语法更加简洁、清晰
- 箭头函数不能用作Generator函数,不能使用yield关键字
深拷贝和浅拷贝的区别?怎么实现一个深拷贝?
- 浅拷贝是创建一个新对象,这个新对象有着原始对象属性值的一份精确拷贝,如果是基本类型,拷贝的就是基本类型的值,如果属性是引用类型,拷贝的就是内存地址,所以其中一个对象改变了这个地址,就会影响到另一个对象
- 深拷贝是将一个对象从内存中完整的拷贝出来一份,从堆内存中开辟一个新的区域存放对象,且修改新对象不会影响原对象。
深拷贝的实现方式
- JSON.parse(JSON.stringify()) ,这种方法虽然可以实现数组或对象深拷贝,但不能处理函数和正则
- 函数库lodash的_.cloneDeep方法
- 手写递归方法
bind,call,apply 的区别?
事件委托
原理:不是给每个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点。
核心原理:给父节点添加侦听器,利用事件冒泡影响每一个子节点。
作用:我们只操作了一次dom,提高了程序的性能。
js执行机制
同步和异步
为了解决js是单线程语言的问题,利用多核CPU的计算能力,HTML5提出 Web Worker 标准,允许javascript脚本创建多个线程。于是,js中出现了同步
和异步
同步任务:
同步任务都在主线程上执行,形成一个执行栈。
异步任务:
js的异步是通过回调函数实现的。
一般而言,异步任务有以下三种类型:
- 普通事件,如click、resize等
- 资源加载,如load、error等
- 定时器,包括setInterval、setTimeout等
异步任务相关回调函数
添加到任务队列
中(任务队列也称为消息队列)。
ES6 有哪些新特性?
- 新增symbol类型 表示独一无二的值,用来定义独一无二的对象属性名;
- const/let 都是用来声明变量,不可重复声明,具有块级作用域。存在暂时性死区,也就是不存在变量提升。(const一般用于声明常量);
- 变量的解构赋值(包含数组、对象、字符串、数字及布尔值,函数参数),剩余运算符(…rest);
- 模板字符串(${data});
- 扩展运算符(数组、对象);
- 箭头函数;
- Set和Map数据结构;
- Proxy/Reflect;
- Promise;
- async函数;
- Class;
- Module语法(import/export)。
JavaScript设计模式
Vue
v-if和v-for的那个优先级更高,如果两个同时出现,应该怎么优化得到更好的性能
2.x 当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级。
3.x当 v-if 与 v-for 一起使用时,v-if 具有比 v-for 更高的优先级。
谈谈对vue生命周期的理解?
vue2总共11个生命周期
v-for中key的作用
- key的作用主要是为了更高效的对比虚拟DOM中每个节点是否是相同节点;
- 从源码中可以知道,Vue判断两个节点是否相同时主要判断两者的key和元素类型等,因此如果不设置key,它的值就是undefined,则可能永 远认为这是两个相同的节点,只能去做更新操作,这造成了大量的dom更新操作,明显是不可取的。
vue组件的通信方式
- props / $emit
- $children / $parent
- provide / reject
- ref
- eventBus
- Vuex
- $attrs 与 $listeners
Vue 中的methods 与computed的区别?
- 在computed中的函数,是在dom加载后马上执行的;在methods中的函数,必须要有一定的触发条件,才会执行。
- 调用方式不同:computed直接以对象属性方式调用,不需要加括号,而methods必须要函数执行才可以得到结果。
computed
计算属性是基于它们的依赖进行缓存的。如果你进行多次访问的时候(在不改变值的情况下),计算属性会立即返回数据,而不必再次执行函数。并且他还可以自动执行。- 而
methods
只要发生重新渲染,就必定执行该函数,他必须有一定的触发条件才能执行。
路由的两种模式及区别?
hash 模式和 history 模式
hash 模式
- 浏览器兼容性较好,连 IE8 都支持
- 路径在井号 # 的后面,比较丑
history 模式
- history API 是 H5 提供的新特性
- 路径比较正规,没有井号 #
- 兼容性不如 hash,且需要服务端支持,否则一刷新页面就404了
watch 和计算属性有什么区别?
- watch 监听的是已经在data 中定义的变量,当该变量变化时,会触发watch 中的方法。
- computed 计算属性是用来声明式的描述一个值依赖了其它的值,当所依赖的值或者变量 改变时,计算属性也会跟着改变;
- 使用场景 computed:当一个属性受多个属性影响的时候使用,例:购物车商品结算功能 watch:当一条数据影响多条数据的时候使用,例:搜索数据
Vue 双向绑定原理
Vue 数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。
利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)。
你对虚拟DOM原理的理解?
虚拟dom是对dom的抽象,本质上是JavaScript对象
优点?
- 减少 JavaScript 操作真实 DOM 的带来的性能消耗(我们都知道在前端性能优化的一个秘诀就是尽可能少地操作DOM,不仅仅是DOM相对较慢,更因为频繁变动DOM会造成浏览器的回流或者重回,这些都是性能的杀手)
- 无须手动操作DOM,可以大大提高开发效率.
- 可以更好的跨平台,因为Virtual DOM本身是JavaScript对象,可以在多平台运用
vue组件data为什么必须是个函数,而vue根实例则没有此限制?
- data必须是个函数是保证在多实例的时候,为了保护相互之间的状态不干扰,不污染。
- 每次在创建根实例的时候,使用new的方式,全局的范围内只创建一个,不会创建多个,不会存在污染的问题,因此可以不使用函数
- 不使用return包裹的数据会在项目的全局可见,会造成变量的污染
- 使用return包裹后的数据只在当前组件中生效,不会影响其它组件
vue设计原则的理解
vue是一个渐进式的javscript框架 易用,高效,灵活
渐进式javascript框架:
跟其他大型框架不同的是,vue被设计为可以自底向上逐层应用。vue的核心库只关注视图层,不仅易于上手,还便于与第三方库活既有的项目整合,另一方面,当现代的工具链以及各种支持类库结合使用的时候。vue也完全能够为复杂的单页面提供驱动
核心库就是一些声明是的渲染,组件系统 只关注视图层
可以作为一个库在其他项目中去用,也能作为一个大型的框架去搭建项目,这就是渐进式
学习过程也是渐进式的,只学习模板语法,基础功能也能开发,后期才学习工程化,
易用性:
vue提供数据响应式,声明式模板语法和基于配置的组件系统等核心特性,这些使我们只需要关注应用的核心业务即可,只要会写js。html和css就能轻松编写vue应用
灵活性:
渐进式框架最大的优点就是灵活性,如果应用足够小,我们可能仅仅需要vue的核心特性就能去完成功能了,随着应用规模的不断扩大,我们才可能追歼引入路由,状态管理,vue-cli等库和工具,不管是应用体积还是学习难度都是一个逐渐增加的平和曲线
高效性:
超快的虚拟DOM和diff算法使我们的应用有最佳的性能表现, 追求更高效的过程还在继续,vue3中引入proxy对数据响应式的改进以及编译器中对于静态内容的改进都会让vue更加高效
你了解哪些vue的性能优化方法?
- 路由懒加载
- 使用CDN链接
- 第三方插件按需导入
- keep-alive缓存页面
- 使用v-show复用DOM
最后
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
给大家分享一些关于HTML的面试题。
高效性:
超快的虚拟DOM和diff算法使我们的应用有最佳的性能表现, 追求更高效的过程还在继续,vue3中引入proxy对数据响应式的改进以及编译器中对于静态内容的改进都会让vue更加高效
你了解哪些vue的性能优化方法?
- 路由懒加载
- 使用CDN链接
- 第三方插件按需导入
- keep-alive缓存页面
- 使用v-show复用DOM
最后
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
给大家分享一些关于HTML的面试题。
[外链图片转存中…(img-8F5X2YDI-1714768786126)]
[外链图片转存中…(img-Yzptx3Jj-1714768786127)]