web前端常见面试题归纳

行内元素和块元素的区别

1. 概念
   • 块元素：默认独占一行，页面中垂直排列，宽高和内外边距可控
   • 行内元素：默认同行排列，宽高由内容决定
2. 行内元素和块元素举例
   • 块元素：
     、

     、

     、

     • 行内元素：、、、

     行内元素和块元素的相互转换

     • display:inline;将块元素转换为行内元素
     • display:block;将行内元素转换为块元素
     • display；inline-blockl;行内块元素，既有block的宽度高度特性，也有inline的同行特性

     对盒模型的理解

     1. 概念
        • 盒模型：CSS定义所有元素都可以拥有像盒子一样的外形和平面空间，包括内容区（content），内边距（padding）、边框（border）、外边距（margin）
     2. 盒模型分为：标准盒模型和IE盒模型（怪异盒模型）
        • 标准盒模型（box-sizing:content-box;)的width和height属性的范围只包含content内容区
        • IE盒模型（怪异盒模型，box-sizing:border-box;)的width和height属性的范围包含了border、padding和content。

     页面元素常见的水平居中方式

     1. 块元素外边距auto自动居中
        • 为块元素添加margin:auto属性，兼容性好，PC端常用技术
     2. 内联元素text-align文本居中
        • 父元素设定text-algin:center属性，子元素会居中，对大多数内联元素有效
     3. 使用弹性盒布局：父元素添加弹性盒，控制子元素的水平位置居中
        • 父元素添加弹性盒（display:flex），且添加justify-content:center;和align-items:center;
     4. transform移动+position绝对定位居中
        • 通过定位使元素左上角居中，在通过transform:transform:translate(-50%,-50%)居中

     CSS优先级和权重使怎么样的

     1. CSS选择器优先级
        • !important style属性 #id .className 派生选择器 群组选择器 *
     2. CSS选择器权重
        • 行内样式（1000）>id选择器（100）>class选择器（10）>标签选择器（1）>通用下选择器（0）

     常用的浏览器内容有哪些

     1. 浏览器内核的作用
        • 也称“渲染引擎”，用来解释网页语法并渲染到网页上，浏览器内核决定了浏览器该如何显示网页内容及页面的格式信息。
     2. 常见的浏览器内核
        • IE浏览器内容：Trident内核，也是俗称的IE内核
        • Chrome浏览器内容：统称Chrome内核，以前是Webkit内核，现在是Blink内核
        • Firefox浏览器内核：Gecko内核，俗称Firefox内核
        • 苹果Safari浏览器内核：Webkit内核，特点是不受IE、Firefox等内核的约束，比较安全
        • Opera浏览器内核:最初是自己的Presto内核，后来加入谷歌大军，从Webkit又到了Blink内核

     常见的浏览器兼容性问题有哪些

     1. 浏览器兼容问题产生的原因
        • 因为不同浏览器使用内核及所支持的HTML等网页语言标准不同，以及用户客户端的环境不同（如分辨率不同）造成的显示效果不能打到理想效果，一般兼容问题主要解决的是IE6、7、8的问题
     2. 常见的兼容性问题
        • 在IE6、7中没办法设置1px的高度的元素，解决方案：添加overflow:hidden
        • 图片下方缝隙问题，解决方案：添加vertical-align:center;
        • IE6中双倍边距的问题，给float元素添加display:inline;
        • 可以采用CSS hack，为不同的样式添加不同的CSS前缀；

     link和@import的区别

     1. link和@import的区别
        • link是XHTML标签，除了加载CSS外，还可以定义RSS，@import只能加载CSS
        • link引用CSS时，在页面载入时同时加载，@import需要页面网页完全载入以后加载，可能会出现闪屏
        • link是XHTML标签，无兼容性问题，@import是在CSS2.1提出的，低版本浏览器不支持
        • link支持使用JavaScript控制DOM去改变样式，而@import不支持。

     对CSSOM的理解

     1. 概念
        • CSSOM。即CSS Object Model（CSS对象模型），是对CSS样式表的对象化表示，同时还提供了相关API用来操作CSS样式
     2. CSSOM包含两部分
        • Model：描述样式表和规则的模型部分
        • View：和元素视图相关的API部分
     3. Model部分：是CSSOM的本体，通常用HTML标签style或者link标签即可创建
        • 构建CSSOM树是依赖于DOM树的，在构建CSSOM树时，对于任何一个元素的最终样式，浏览器都会从该节点的最上层节点开始，通过递归的方式不断向下合并更加具体的规则，最终得出完整的结果。
     4. View部分：分成三个部分：窗口部分、滚动部分和布局部分
        • 窗口的api：操作浏览器窗口的位置、尺寸等，包括；moveTo（x，y)：窗口移动到屏幕的特定坐标；moveBy（x，y）：窗口移动特定距离；resizeTo（x，y）：改变窗口大小到特定尺寸；resizeBy（x，y)：改变窗口大小特定尺寸。
        • 滚动的api:分为视口滚动和元素滚动，为元素添加监听滚动的事件，scrollX:表示X方向上的当前滚动距离，scrollY：表示Y方向上的当前滚动距离；scrollTop：表示Y方向上的当前滚动距离。scrollLeft:表示X方向上的当前滚动距离。
        • 布局：获特定元素的位置和尺寸信息，window.innerHeight，window.innerWidth:表示视口的高度和宽度。window.outerWidth，window.outerHeight:表示浏览器窗口占据的大小，很多浏览器没有实现，window.screen.width,window.screen.height:设备屏幕宽高尺寸 小结：DOM承担了语义职能，而CSSOM承担了表现职能。

     对边界塌陷的理解

     1. 边界塌陷的概念：
        • 父元素包裹子元素，给子元素设置margin-top，只想让子元素距离父元素边框有一段距离，而却出现了父元素的顶端距离body这个边框出现了位移
     2. 边界塌陷的解决办法
        • 给父元素加边框
        • 为父元素添加padding-top去控制子元素
        • 给父元素设置溢出隐藏（overflow:hidden）触发bfc机制
        • 给父元素或者子元素添加浮动，让其脱离标准流
        • 将父元素转变为行内块元素，display:inline-block

     什么是bfc

     1. 概念
        • bfc，即Block Formatting Contexts（块级格式化上下文），是指浏览器中创建了一个独立的渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。
     2. bfc的原理
        • 内部的块元素会在垂直方向上一个接一个的放置，且垂直方向上的距离由margin决定
        • 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此
        • bfc的区域不会与float的元素区域重叠
        • 计算BFC的高度时，浮动子元素也参与计算
        • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

     对语义化标签的理解

     1. 语义化标签的概念
        • 具有含义的标签，它可以清晰的展示标签的作用和用途
     2. 语义化标签的优势
        • 语义化标签具有可读性，使得文档结构清晰
        • 浏览器便于读取，有利于SEO优化
        • 展现在页面中时，用户体验好
        • 便于团队开发和维护
     3. H5的语义化标签有：header，nav，footer，section，aside

     对渐进增强和优雅降级的理解

     1. 渐进增强和优雅降级的概念
        • 渐进增强：对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
        • 优雅降级：构建站点的完整功能，然后针对浏览器进行兼容。比如用CSS3构建了一个应用，做完后逐步针对各大浏览器进行hack，使其可以在低版本浏览器上正常浏览
     2. 渐进增强和优雅降级的区别
        • 优雅降级是从复杂开始，逐步向下兼容，最终能适应各种浏览器和平台
        • 渐进增强是从一个能够起作用的初始版本开始，不断扩充，以适应各种环境的要求

     在项目中是如何适配的

     1. 自适应和响应式概念
        • 自适应：根据不同的设备屏幕大小来自动调整尺寸、大小
        • 响应式：会随着屏幕的实时变动而自动调整，是一种自适应
     2. 常见的适配方案（4种）
        • 百分比布局：因为不同属性的百分比值，相对的可能是不同的参照物，所以百分比往往很难统一，在移动端适配中使用是很少的。
        • rem + 动态font-size，rem是相对于html元素的font-size来设置的。（em是相对所在元素的font-size）
          • 通过媒体查询来设置不同尺寸的屏幕html的font-size尺寸
          • js监听页面clientWidth的变化，重新设置font-size到HTML上。
        • flex的弹性布局
        • VW:比如375的屏幕，1vw=3.75px。 一般开发过程中，这几种方式都是组合使用的。

     对响应式的理解

     1. 响应式布局的概念
        • 同一页面在不同屏幕尺寸下有不同的布局，使一个网站、app能够兼容多个终端，最终目的其实也是为了适配。
     2. 常见的响应式布局方式有哪些
        • 流式布局，也叫百分比布局，将页面的宽度设置成百分比，根据窗口的宽度来进行伸缩
        • 栈格系统（Grid System）将一个页面划分为几个主要区域，定义这些区域的大小、位置、层次等关系
        • 媒体查询@media，@media由媒体类型和一个或多个检测条件表达式组成
        • viewport适配将px转换为rem或者vw，让页面自适应。

     HTML5的新特性有哪些

     1. 拖拽释放（drag and drop）API
     2. 语义化更好的内容标签（header footer nav aside article section）
     3. 音频、视频（audio video）API
     4. 画布（Canvas）API
     5. 地理（Geolocation）API
     6. localstroage和sessionstroage缓存方式
     7. 新增表单控件（calendar date time email ul search）

     localStroage和sessionStroage的区别

     1. 相同点
        • 都是用来存储客户端临时信息的对象
        • 都只能存储字符串类型，如果遇到其他类型，需要转换成字符串类型（JSON.stringfy()）
        • 存储大小都是5MB（不同浏览器可能不同）
     2. 不同点
        • localStroage是永久存储在浏览器中，只要用户不删，就会一直存在。
        • sessionStroage是会话级别的存储，当用户关闭浏览器，此时数据就会被销毁。 不同浏览器无法共享localStroage和sessionStroage中的信息

     js中数据类型有哪些

     1. 在ES5中 基本类型：Number、String、Boolean、undefined、Null 引用类型：object、function、Array
     2. ES6中新增了一种symbol：这种类型的数据每次创建，则开辟新空间存储，可解决属性名称冲突问题
     3. 谷歌新版本中还出现了一种bigInt，是指安全存储、操作大整数
     4. null和undefined的区别
        • undefined：声明了但没有使用
        • null：声明的是一个空类型。

     js中数组的常用方法有哪些

     1. ES5中的数组常用方法 join：合并数组摒转换为字符串，参数代表以其分隔符 reverse：反转数组内元素 slice：从数组内截取数组。第一个参数为开始下标，第二个参数为结束下标（不包含） concat：连接两个或以上的数组 splice：方法从数组添加/删除项目，并返回删除的项目
     2. ES6中的数组常用方法 map：数组循环、遍历（map会返回一个新数组，forEach()则是直接修改原数组） some：数组循环、遍历，返回值为判断结果，当条件只要有一个成立，就返回true，反之false。 reduce：为数组中的每一个元素依次执行回调函数，其中要注意第一个参数prev，第一次执行，表示的默认值，第二次以后的执行，表示的是上一次回调的结果。

     js中常用的事件绑定方式有哪些

     1. 在dom元素中直接绑定，<标签 on事件名称=”function”>
     2. js代码中用对象.on事件名称绑定。
     3. 绑定事件监听该函数：addEventListener（事件名称、函数、否使用捕获类型），这里事件名称不加on

     对作用域和作用域链的理解

     1. 作用域的概念
        • 限制某个变量只能在某个区域内有效，分为全局作用域和局部作用域，因此根据作用域中变量的划分，分为全局变量和局部变量。
     2. 作用域的分类
        • 全局作用域：代码中任何地方都能访问到的变量
        • 局部作用域：函数内可访问的变量
        • ES6中的块级作用域：通过let或const声明，所声明的变量在指定块中被访问
     3. 作用域链的概念 作用域链：变量取值是在创建这个变量的函数的作用域中取值，但是如果在当前作用域中没用查到值，就会向上级作用域去查，直到查到全局作用域，查找过程形成的链条就叫做作用域链。

     var\let\const的区别

     1. var是ES5提出的，let和const是ES6提出的
     2. const声明的是常量，必须赋值。
        • 一旦声明必须赋值，不能用null占位
        • 声明后不能再修改
        • 如果声明的是复合类型数据，可以修改其属性。
     3. let和var声明的是变量，声明后可以修改，声明时可以不赋值
     4. var允许重复声明变量，后面后覆盖前面的变量，let和const在同一作用域不允许重复声明变量，会报错。
     5. var声明的变量存在变量提升（将变量提升到当前作用域的顶部）。即变量可以在声明之前调用，值为underfined。let和const不存在变量提升。
     6. var不存在块级作用域，let和const存在块级作用域。

     谈谈对闭包的认识

     1. 闭包的概念
        • 一个函数访问了此函数的父级及父级以上的作用域中的变量，这个函数就是闭包。本质上，js中的每个函数都是一个闭包，因为每个函数都可以访问全局变量。一般理解为函数嵌套函数。
     2. 闭包的作用
        • 访问函数内部的变量
        • 让变量始终保持在内存中
     3. 闭包的优点
        • 可以减少全局变量的定义，避免全局变量的污染
        • 能够读取函数内部的变量
        • 在内存中维护一个变量，可以用作缓存
     4. 闭包的缺点
        • 造成内存泄漏：变量驻留内存，会影响性能，在IE中，可能造成内存泄漏，解决办法：使用完变量，再赋值给该变量null。
        • 造成性能损失：闭包涉及跨作用域的访问，所以会导致性能损失，解决办法：涉及到跨作用域的变量，定义为局部变量，减轻对性能的影响。

     对原型和原型链的认识

     1. 原型的概念
        • 函数定义的时候，自带的prototype对象就是原型，分为显式原型和隐式原型
        • 显式原型：函数的prototype属性
        • 隐式原型：实例对象都会有proto属性 注意：constructor，每个prototype原型都有一个constructor属性，指向它关联的构造函数
     2. 原型链的概念
        • 每个实例化对象都有一个proto属性，而这个proto属性指向构造函数的原型对象，原型对象上也有一个proto属性，就这样一层一层往上找，直到找到object.prototype，就这样查找的过程就叫原型链。 注意：一般应用在继承相关的代码中，比如说jq中定义插件，其核心就是使用原型和原型链。

     对面向对象的理解

     1. 面向对象的概念
        • 通过把属性（变量）和方法（函数）封装起来，通过实例化对象，在类外部可以访问属性和方法，这就是面向对象编程，js中时通过function来进行封装的。
     2. 面向对象的三大特征
        • 封装：把一种事物的方法和属性封装到对象中
        • 继承：子对象可以继承父对象的属性和方法
        • 多态：同一个方法，自定义和父定义的内容不同
     3. 面向对象编程的优势
        • 易维护，易复用，效率高，易扩展（耦合性比较低）
     4. 面向对象编程的实现
        • 创建对象
          • 字面量形式:{}
          • Object构造函数创建
          • 构造函数形式: new XXXX
        • 遍历对象
          • for…in
          • Object.entries()/Object.keys()/Object.values()
        • 对象序列化
          • 可以把对象转换为字符串:JSON.stringfy()
          • 可以把字符串转换为对象:JSON.parse()
     5. 设计模式
        • 单例模式：一个类只能有一个实例，并提供一个访它的全局访问点。
        • 工厂模式：用固定的方式批量创建对象。
        • 观察者模式：设立观察者方法，观察是否有值更新，通过Object.defineProperty，修改其他对象的属性。
        • 订阅模式：发布者内容变化，通过中间层接受并通知订阅者，订阅者收到通知，更新对应的属性以及其他模式。
     6. ES6中的面向对象
        • class定义类
        • static静态属性
        • constructor方法，通过new命令生成对象实例时，自动调用该方法
        • super父类构造函数
        • extends继承关键字

     对设计模式的理解

     1. 设计模式的概念
        • 一套被反复使用的，多数人知晓的，经过分类编目的，代码设计经验的总结，是解决软件设计常见问题的可复用方案。一共有23种设计模式
     2. 前端常用的设计模式
        • 单例模式：一个类只能有一个实例，并提供一个访它的全局访问点。应用：弹窗、ajax封装等
        • 工厂模式：用固定的方式批量创建对象。应用：后台登录鉴权，用工厂模式判断用户的角色和权限列表
        • 观察者模式：设立观察者方法，观察是否有值更新，通过Object.defineProperty，修改其他对象的属性。
        • 订阅模式：发布者内容变化，通过中间层接受并通知订阅者，订阅者收到通知，更新对应的属性以及其他模式。应用;vue2中的v-model双向绑定。

     对继承的看法

     1. 继承的概念
        • 父类的属性和方法可以被子类继承，子类可以调用父类的属性和方法
     2. 前端常用的继承方式

     继承方式	优点	缺点
     原型和原型链继承：把实例的父类给子函数的原型	优点:1、非常纯粹的继承关系，实例是子类的实例，也是父类的实例2、类新增原型方法和属性，子类都能访问到3、简单，易于实现	缺点：1、因为原型对象的属性是共享的，修改一个对象属性，其他对象的该属性也变了2、创建子类实例时，无法向父类构造函数传递参数
     构造函数继承：在子类中调用父类.call()。复制一份父类的属性或者方法给子类	优点:1、 解决了子类实例共享父类引用属性的问题 2、创建子类实例时，可以用父类构造函数传递参数	缺点：1、无法实现复用，每一个子类实例都有一个新的run函数，如果实例对象多了，内存消耗过大。
     组合继承：原型链和构造函数组合继承	优点：1、不存在引用属性共享的问题 2、可传递参数，且方法可以复用	缺点： 1、 子类原型上有一份多余的父类实例的属性。

     对DOM操作的理解

     1. DOM的概念
        • DOM（Document Object Model，文档对象模型），是js为操作html和css，提供的api接口。 注意：HTML中的每个标签元素，属性，文本都可以看做是一个DOM的节点，构成了DOM树。
     2. DOM的常用操作
        • 获取节点
          • getElementById，getElementsByName，getElementsByClassName，getElementsByTagName
          • querySelector(),querySelectorAll()

     数组的遍历方法有哪些

     1. 数组常用的遍历方法
        • for循环、foreach循环
        • map循环：方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值
        • filter遍历：方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素
        • every遍历：每个元素都满足条件则返回true，否则返回false
        • some遍历：只要有一个以上的元素满足条件就返回true，否则返回false，退出循环
        • reduce：对数组中的每个元素执行一个回调函数，将其结果返回值。

     对事件代理(事件委托)的理解

     1. js的事件流 冒泡：当子元素触发某个事件之后，该事件依次向上触发父元素的同类事件。 捕获：和冒泡类似，只不过事件的顺序相反，即是从上级节点传递到下级节点
     2. 事件代理的概念
        • 事件代理：也称为事件委托，是把原本需要绑定在子元素上的事件委托给它的父元素，让父元素来监听子元素的冒泡事件，并在子元素发生事件冒泡时找到这个子元素。
        • 事件代理的实现
          • 确定要添加事件元素的父级元素
          • 给父元素定义事件，监听子元素的冒泡事件
          • 使用event.target来定位触发事件冒泡的子元素。
     3. 事件代理的优点
        • 减少事件的定义，减少内存消耗
        • 可以为DOM操作的元素动态绑定事件。