前端面试题

面试

HTML

什么是BFC,IFC,GFC,FFC?

• BFC：块级格式化上下文

  • 有自己的渲染规则，决定了子元素如何定位，以及和其他元素的关系

  • 可以看作隔离了的独立容器，里面的元素不会在布局上影响外面的元素

  • 触发BFC

    • body根元素
    • 浮动元素：float除none以外的值
    • 绝对定位：postion（absolute，flixed）
    • display为line-block，table-cells,flex
    • overflow(hidden,ayto,scroll)

  • BFC特性及应用

    • 同一个BFC下外边距会折叠
    • BFC可以包含浮动（清除浮动）
    • BFC可以阻止浮动覆盖

• IFC：行内格式化上下文

• GFC：网格格式化上下文

• FFC：自适应格式化上下文

DIV水平垂直居中

• 1.position:absolute;

top:0;

left:0；

right：0；

bottom：0；

margin：auto auto；

• 2.display:flex;

justify-content:center;

align-items:center;

• 3. position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%,-50%);

display，visbility，opacity，rgba的区别

• display：none

  • 浏览器不会渲染display属性为none的元素，不占据空间
  • 事件监听：无法进行DOM事件监听
  • 动态改变此属性会引起重排，性能低
  • transition不支持display

• visbility：hidden

  • DOM解构：被隐藏但会被渲染，不会消失，占据空间
  • 事件监听：无法进行DOM事件监听
  • transition：visbility会立即显示，隐藏会延时
  • 动态改变此属性会引起重绘，性能高

• opacity：0

  • DOM解构：透明度为100%，隐藏，占据空间
  • 事件监听：可以进行DOM事件监听
  • 性能：提升为合成层，不会触发重绘，性能高
  • 继承：会被子元素继承，且子元素不能通过opacity：1来取消隐藏
  • transtion：opacity可以延时显示和隐藏

• rgba()只作用于元素的颜色或其背景色。(设置rgba透明的元素的子元素不会继承透明效果!)

css盒模型

• 1. CSS盒子模型
• IE盒模型 w3c给出的盒模型
• 标准盒模型： margin padding border width 可视宽度： width+margin+padding+border
• 怪异盒模型：可视宽度=margin+ width (width=margin+padding+内容宽度)

前端页面由哪三层构成，分别是什么，作用是什么？

• 结构层：html 负责搭建网页的整体架构

• 样式层css 负责页面添加样式，进行美化

• 行为层； javascript 负责页面与用户的交互

BFC

BFC ：块级格式化上下文 是一个独立的渲染区域，它规定内部如何布局，并且与他之外的区域毫不相干

get请求和post请求的区别？

• get请求会显示在路径上 是从服务器上获取数据，get传送的数据量较小，安全性非常低

post请求不会显示在路径，是向服务器传送数据 ，post传送的数据量较大，post安全性较高。

css hack（浏览器内核）

• chorm 内核： blink

IE 内核 ：Trident

Firefox内核：Gecko

opera内核：blink

safari内核：Webkit

像素问题

• px:相对长度单位。像素px是相对于显示器屏幕分辨率而言的

em：根相对单位 1. em的值并不是固定的；

​ 2. em会继承父级元素的字体大小。``

水平垂直居中的三种方法

• position:absolute;

top:0;

left:0；

right：0；

bottom：0；

margin：auto auto；

• display:flex;

justify-content:center;

align-items:center;

• position:absolute;

top:50%;

left:50%；

transform：translateX（-50%），translateY(-50%）；

ccs sprite 是什么？有什么优缺点？(精灵图技术)

• css sprite 就是将多个小图片拼接到一个图片中，通过background-position和元素尺寸来调节需要显示的背景图案，即我们所说的精灵图。
• 优点：减少服务器请求次数，提供运行速度
• 缺点：不利于维护，拆分

CSS

css优先级之内联覆盖

• 在不改变代码的情况下，是这张图片宽度为300px
  

1.
2.<img src=“1.jpg” style=“width:480px !important”；transfrom:scale(0.625,1);"/>
3.
4.
js方法
document.getElementsByTagName(“img”).setAttribute(“style”,width:300px !important)

兼容性之1px边框变粗问题

• 手机端和电脑端分辨率不一样 在电脑端 1px=手机端2px 所以会变粗 windows.devicePixeratio获取电脑和手机的像素比例
• 解决方法1.使用0.5px边框
  2.border-image
  3.背景图片
  4.viewport+rem布局实现（最常用）rem根据父类比列大小而变，而不是px固定单位

JS

ParsenInt与Map的组合题

• [‘1’,‘2’,‘3’].map((item,index) => {
  return parseInt(item,index);
  });
  // 返回值：
  parseInt(“1”,0)// 1
  parseInt(“2”,1)//NAN 没有1进制
  parseInt(“3”,2)//NAN 2进制里没有3

• parsenInt（string，radix）有两个参数，radix参数是基数，默认代表代表基数10，10进制

  • radix介于2-36之间，radix为undrfined或者0或者没有指定的情况下，如果字符串为‘0x’开头，则是16位进制，为‘0’开头则是8位进制，如果以其他开头则是10进制

• map（）方法创建一个新数组，其结果是该数组中的每一个元素都调用一个提供的函数返回值的结果

函数节流和函数防抖

• 函数节流

  • 所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。

• 函数防抖

  • 所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

三个判断数组的方法 与区别

• Object.prototype.toString.call()

  • 每个Object的对象都有toString方法，如果toString方法里面没有重写的话，会返回[Object type] type是对象类型。 除了Object类型的对象歪，其他类型直接使用toString方法时，会直接返回都是内容的字符串，所以需要call或apply方法来改变toString方法执行上下文

    • call改变this的指向，指向数组，兼容性强

  • call和apply 都是用来修改函数中this的指向问题； 不同点 传参的方式不同

    • call方法可以传给该函数的参数分别作为自己的多个参数
    • apply方法必须将传给该函数的参数合并成一个数组作为自己的一个参数

• instanceof

  • 通过判断对象的原型链中能不能找到类型的prototype

    • 找到为true 没有为flase

  • ex： instanceof 数组名

  • Array.isArray()

    • 用来判断对象是否为数组 ES5新增的方法

事件绑定和事件委托

• 事件绑定

  • 嵌入DOM

    • 缺点：与HTML耦合在一起，不利于维护

  • 直接绑定

    • js btn.click=function{}

  • 事件监听

    • btn。addEventListener（“click”，function{}）可以设置捕获事件，和冒泡事件

• 事件委托

  • e.target
  • 利用事件冒泡，指定一个处理程序，就可以管理某一类所有事件，所有用到的按钮和事件都是采用事件委托
  • 节省内存和执行速度

创建对象的四种方式

• 字面量

  • let a ={}

• 工厂模式

  • function show{ return {}}

• 构造函数

  • let a=new Fn()

• class方式

  • let a=Fn（） Fn为class名

改变this指向的方式

• bind

• call

  • 调用时改变this指向：传入参数为数组形式，
  • 参数是直接放进去的，第二第三第 n 个参数全都用逗号分隔，直接放到后面 obj.myFun.call(db,‘成都’, … ,‘string’ )。

• apply

  • 传入的是一个数组，所有参数都必须放在一个数组里面传进去
  • 所有参数都必须放在一个数组里面传进去 obj.myFun.apply(db,[‘成都’, …, ‘string’ ])。

• 箭头函数

  • 谁声明的箭头函数 this就指向谁

• new

  • this指向实例化对象

谈谈对this的理解

• ①在全局作用域下直接调用函数，this指向window
• ②对象函数调用，哪个对象调用就指向哪个对象
• ③使用 new 实例化对象，在构造函数中的this指向实例化对象。
• ④使用call或apply改变this的指向

冒泡排序

• var num = [12, 11, 25, 29, 5, 9] for (i = 0; i < num.length - 1; i++) {
  for (j = 0; j < num.length - 1 - i; j++) {
  if (num[j] > num[j + 1]) {
  var tem = num[j]
  num[j] = num[j +1]
  num[j + 1] = tem
  }
  } }

原型链

• 在JS对象里都会有portotype属性，当访问一个对象属性的时候，如果没有在该对象上找到，他就会搜索该对象的原型，是否有这个属性，如果没有就在原型的原型上找，知道找到object 这样就叫原型链
• 在对象的原型上设置，对象也相当于拥有了，就=继承

闭包

• 特点

  • ①：让外部访问函数内部变量成为可能；
  • ②：局部变量常驻内存之中
  • ③：可避免使用全局变量，防止全局污染
  • ④：会造成内存泄漏（内存长期被占用，无法释放）
  • ⑤：函数嵌套函数

• 如果一个函数内部访问了外部函数的变量，就是闭包 闭包：会开辟一个新的内存，地址，因为外部函数变量被内部函数引用，形成了私有作用域，从而使得其开辟的内存不会被销毁，

  • 与垃圾回收机制一起理解

• 官方解释：闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。

直观的说就是形成一个不销毁的栈环境

内存泄漏

• 程序的运行需要内存，只要程序提出要求，操作系统或者运行是就必须供给内存。

对于持续运行的服务进程，必须及时释放内存，否则，内存占用越来越高，轻则影响系统性能，重则导致进程崩溃。

不再用到的内存，没有及时释放，就叫做内存泄漏。

• 所有为了更好的管理内存，减轻程序负担，就有了垃圾回收机制

垃圾回收机制

• 解决内存的泄露，垃圾回收机制会定期（周期性）找出那些不再用到的内存（变量），然后释放其内存。

• 两种方法

  • 标记清除

    • 当变量进入执行环境（函数中声明变量）的时候，垃圾回收器将其标记为“进入环境”，当变量离开环境的时候（函数执行结束）将其标记为“离开环境”，标记为离开环境的 被回收

  • 引用计数

    • 跟踪一个值的引用次数，当声明一个变量将一个引用类型赋值给该变量的时候，该值引用次数+1，当这个变量指向其他的时候，引用次数变-1，当值为0的时候就被回收

ES6

class的特性

• ①Class声明会提示，但不会初始化赋值

• ②Class 声明内部会启用严格模式

• ③Class的所有方法（包括静态方法和实例方法）都是不可枚举的

  • 枚举：枚举指对象的属性是否可以遍历出来

• ④Class的所有方法（包括静态方法和实例方法）都没有prototype原型对象，所以也没有[[construct]]，不能用new来调用

• ⑤必须使用new调用class

  • class Foo（）{} const foo=new Foo()

• ⑥class内部无法重写类名

全局定义的Let和Const到哪里去了 ？const和let声明的变量不在window上 去哪里了 怎么获取

• let 和const 在块级作用域之中

Ajax

如何解决请求跨域的问题

• 原因：浏览器的同源策略

  • 如果两个页面的协议，端口（如果有指定）和域名都相同，则两个页面具有相同的源。

• 作用：隔离潜在恶意文件的重要安全机制

• 解决

  • 允许script加载第三方资源
  • 反向代理（ngixn）服务内部配置Access-Control-Allow-orign *）
  • ** cors前后端协作请求头部 Access-Control-Allow-orign等头部信息
  • iframe嵌套通讯，postmessage

前端性能优化

减少HTTP请求次数

减少DOM操作

避免不必要的重绘和重排

CSS JS 等 减少文件体积

CSS放到顶部，js放到尾部

压缩图片，使用精灵图技术

合理控制cookie大小

如何解决前端安全性能问题

XSS

• 是一种经常出现在web应用计算机安全漏洞，允许恶意web用户将代码植入到提供给其他用户的页面中

• 特点：达到cokie资料窃取，会话劫持，钓鱼欺骗等

• 解决：

  • 用正则匹配< 将其 内容去掉
  • 过滤JavaScript标签
  • 将重要cookie标记为HTTP only

CSRF

• 跨站请求伪造

• 解决

  • 对用户修改删除等操作用post操作
  • 避免全站通用cookie，严格设置cookie的域
  • 通过refer口令 判断

浏览器兼容问题

选择技术框架库（jQuery）

更具兼容需求选择工具

渐进增强

优雅降级

Vue

什么是MVVM？

• 是一种设计思想，model代表的数据模型，可以在model中定义数据修改和操作业务逻辑；view代表ui组件，负责将数据模型转化为ui展现出来，viedmodel是一个同步view和model的对象
• 在MVVM架构下，view和model之间并没有直接的关系，而是通过VM进行交互，V和M之间的交互也是双向的，因此view的数据变化会同步到model中。而model的数据变化也会立即反应到view上

v-show和v-if的区别？

• 相同点：都能控制元素的隐藏和显示
• v-show指令是通过修改元素display的css属性让其隐藏，只会编译一次
• v-if指令是动态的向DOM树里删除和添加DOM达到显示隐藏的效果

v-for为什么一定要加key？

• 需要使用key给每一个节点做一个唯一标识，Diff算法就可以正确识别此节点

为什么避免v-if和v-for一起使用？

• v-for优先级更高，通过v-if移动到容器元素，不会再重复遍历列表中的每个值，取而代之的是，我们只检查他一次，而且不会在v-if为否的时候运行v-for

vue的双向绑定（解释原理）

• 采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

虚拟 DOM 是什么？

• “虚拟 DOM”是由 Vue 组件树建立起来的整个 VNode 树的称呼

Vue 是什么？

• vue.js 是一套构建用户界面的渐进式框架，与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动

详尽介绍vue的各个生命周期？

• 总共8个阶段 创建前/创建后 载入前/载入后 更新前/更新后 销毁前/销毁后

• beforeCreate

  • 这是我们遇到的第一个生命周期函数，表示实例完全被创建出来，，会执行它
  • 此时data 和methods还没有初始化

• created

  • 在created中 data和methods都已经被初始化好了

• beforeMount

  • 这是遇到的第三个生命周期，表示模板已经在内存中编辑完成，但是尚未把模板渲染在页面中

• mounted

  • 这是遇到的第四个生命周期函数，表示存的模板，已经真是的挂载到了页面中，用户已经可以看到渲染好的页面了

• beforeUpdate()

  • 此时，表示我们界面还没有更新， 数据肯定更新了

• updated()

  • updated 事件执行时，页面和data数据已经同步，都是最新的

• beforeDestroy

  • 执行时实例就已经从运行阶段进入到销毁阶段

• destroyed

  • 此时组件中所有数据方法都被销毁

vue常用修饰符

• .stop 等于js中event.stopPropagation(),防止事件冒泡
• .prevent 等于js中event.preventDefault();防止 默认行为
• .capture:与事件冒泡方向相反，事件捕获由外向内
• .self 只会出发自己范围内的事件，不包含子元素
• .once 只触发一次

XMind: ZEN - Trial Version