前端面试题（一）

浏览器内核

谷歌 blink内核

火狐 gecko内核

ie trident内核

opera presto内核

js中定义一个类

DOM元素.classList.add（“类名”）

js中的数据类型

初始数据类型：null undefined number boolean symbol string

引用数据类型：数组 对象 函数

装箱和拆箱

装箱：把具体的之转化成对象

拆箱：把具体的值装化成对象

web跨域问题的解决方法

jsonp

​ 需要远程的服务器返回响应的数据符合格式

​ 1.创建script标签对 src 给地址，把参数传过去 传一个回调函数

url=“http：8080/a=fn”

get fn+”（”+fdaf+”)”

代理

webpack开发环境和生产环境配置

开发环境的依赖放在devdependencies下

生产环境放在dependencies

git里面hook（钩子）的用法

git-am执行的时候钩子调用

声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令

1+null=1 1+undefined=NAN

判断浏览器对象

navigator

怎样判断一个对象属于某一个类

instanceof——

虚拟dom

直接用js实现dom树，组件中html结构并不会生成dom元素，而是映射生成虚拟的js Dom’结构，再通过diff算法计算出最小变更，将变更写入到文件中，由于减少了实际操作dom的次数，性能会大大提升

diff算法就是用来算出要更新的最小的部分

call（）和apply的区别

call可以传多个参数

apply只能接受两个参数（thisobj，【1,2,3】）

json的理解

json的结构有两种 对象或数组

src 与 href 的区别

src 引入一个东西 是必不可少的一部分

href 关联一个东西

3次握手 4次挥手

this的理解

this是函数在运行时自动生成的一个内部对象

iframe的优缺点

• 浏览器的后退按钮失败
• 页面中出现滚动条
• 调出麻烦
• 小型设备无法显示完全

node的优缺点

采用事件驱动异步编程

采用了非阻塞式IO

轻量高效

缺点：可靠性低，单进程单线程只支持单核CPU

列举三种强制类型转化和2中隐式类型转换

parseInt parseFloat number

+-

普通的事件和事件绑定有什么区别‘

普通的事件会被覆盖，时间绑定完全不用担心

怎样兼容安卓和ios

​

盒子模型和弹性布局

盒子模型有两种 IE的盒模型的宽高包括了margin padding 标准的 盒模型不包括这些

大div包含2个div要水平居中

​ 1.设置父元素 弹性布局 2.弹性布局主轴设置成竖直方向flex-de：column

3.水平方向居中align center

js延迟加载的方式

settimeout

js放在最后执行

ajax的工作原理

创建ajax对象：XMLHTTPRequest/ActiveXObject(Microsoft.XMLHttp)

open

send

状态码有5种：0 已经初始化未调用open 1地表已调用open 2代表调用send 3代表应该继续返回，4代表成功，响应完毕

js的继承方式

原型 构造函数

什么是前端路由？有什么优缺点？

前端路由主要用在spa应用中，大部分的页面结构不变，只改变部分内容

优点：用户体验ing好，不许需要每次都要从服务器全部获取，快速展现给用户

缺点：浏览器前进后退会重新发送请求，没有合理的利用缓存

​ 无法记录滚动条的位置，无法再前进后退的时候记录滚动条的位置

vue的特性

1.轻量级框架

2.双向数据绑定

3.指令

4.插件

5.组件化开发

v-show和v-if的区别

vshow是通过控制display来控制显隐

vif是通过添加删除元素

vif运行的条件不可大的改变

vshow适合频繁的切换

vif是惰性的初始条件为假，什么也不坐

v-show首次条件为真就会被编译，然后缓存

es6新语法

箭头函数：主要解决了this.的指向问题

模板字符串“

参数的默认值：

let const

for of

symols

解构

promise的理解

是一个对象，用来传递异步操作的消息

函数式编程包括闭包，递归等

​ 在函数式编程中函数作为一等公民，可以作为参数传递给其他函数

​ var print = function(i){ console.log(i);};

　　 [1,2,3].forEach(print)

​ 只用表达式，只是一个单纯的运算过程，总是有返回值

​ 没有副作用，没有函数内部与外部的互动，不改变外部全局变量的值

Promise是一个对象，用来传递异步操作的消息

​ 无法取消

promise是es6的新特性 async/await是es7的新特性

then表示上一个promise执行完后执行，如果出错就会出现catch里

async中才能用await的操作符

es6的新特性

类 class

箭头函数（）=> 主要解决了this的指向问题

对象解构

模板字符串“ ${}识别变量

promise

变量的命名方式let const（常量） 与var相比，let

函数的参数中可以给默认值

装箱和拆箱

装箱：将一个值封装成为一个对象的过程

拆箱：将对象解析为一个值

delegate和on

jquery1.7中delegate已经被on取代，但在早期版本中delegate仍然是事件委托和绑定的有效手段，一般情况下二者是等价的。

热加载的核心原理

热加载的基础是模块热替换（HMR）HMR的更新消息包含js中产生变化的代码块，能使用新代码替换就得代码

双向数据绑定的原理

vue通过Object.defineProperty实现数据劫持

• 数据劫持：简单来说就是通过Object.defineProperty（）来劫持对象属性的setter和getter，在数据变动的时候做想要做的事情

react路径的用法

‘路由路径是匹配一个或部分url的字符串模式，大部分路径可以直接按照字面量的方式理解，除了以下几个特殊符号：

• ：parame 匹配一段位于/ ？ 或者#之后的url。命中的部分将被当作一个参数
• （） 在它内部的内容认为是可选的
• *匹配任意字符直到命中下一个字符或者整个url的末尾

优先级路由算法会根据定义的顺序自顶向下匹配路由

路由React-Router，适用于小型网站

React Router是建立在history之上的，简而言之，就是history知道如何去监听浏览器地址的变化，并且将url转化为location对象，然后router使用它匹配到路由，最后正确的渲染组件

react+webpack脚手架generator-react-webpack

https://www.npmjs.com/package/generator-react-webpack

需要先全局npm install -g yo

无状态组件的特点

• 组件不会被实例化，整体渲染性得到提升
• 组件不能访问this对象
  
  • 没有实例化过程，所以无法访问组件中this中的对象
• 组件无法访问生命周期的方法
  
  • 无状态组件是不需要组件生命周期管理和状态管理的
• 无状态组件只能访问输入的props，同样的props会得到相同的渲染结果，不会有副作用

React中组件的props的使用

首先定义一个组件：

import React from "react";

class Img extends React.Component{
    render(){
        return(
            <img src={this.props.src} alt=""/>
        )
    }
}

export default Img;

然后在另一个组件中使用

<div className="PintSon" style={{height:200+'px'}}>
    <Img src="../images/tone.jpg"/>
</div>

通过自定义的方法使react实现双向数据绑定

1.父组件：

import React from "react";
import ChildC from "./ChildC";

class ParC extends React.Component{
    constructor(){
        super();
        this.state={
            email:''
        }
    }
    change(e){
        this.setState({
            email:e.target.value
        })
    }
    render(){
        return(
            <div className="ParC">
                <span>邮箱：{this.state.email}</span><br/>
                <ChildC name="email" change={this.change.bind(this)}/>
            </div>
        )
    }
}
export  default ParC;

2.子组件

import React from "react";

class ChildC extends React.Component{
    render(){
        return(
            <input onChange={this.props.change}/>
        )
    }
}

export default ChildC;

box-sizing常用的属性值有哪些？分别有哪些作用

border-box：不改变设定的宽高

content-box:在宽度高度之外绘制边距和边框

inherit：从父元素继承box-sizing属性的值

js数组中的sort（）如何使用

对原数组进行排序，不生成副本

• 如果不传参数，按照字符编码进行排序
• 参数可传可不传，必须是函数

web跨域问题解决方案（同源策略）

• jsonp：需要服务器端进行配合
  
  • 通过script标签对实现跨域请求，然后服务端输出json并执行回调函数
• 代理：通过构建一个中间的服务器，代替自己发起请求，实现跨域

闭包

形成的原因

一个函数嵌套另一个函数，当里层函数需要调用外层函数的值的时候就产生了闭包的问题

js的内置对象

string对象

array对象

math对象

data对象

event对象

window对象

Doctype作用？是不是一个标签

指定用什么版本的HTML去编写以下代码

不是一个标签

js如何判断浏览器类型

navigator对象

eval

把疑似JS代码的字符串当做js代码去执行

web前端的优化机制有哪些

• 减少http请求
• 压缩代码
• 样式表放在头部
• 避免css表达式（sass lass）
• js放在底部

null和undefined的区别

null表示没有对象，即该处不应该有值

undefined表示缺少值，即此处应该有着一个值，但是还没有被定义

call和apply的区别

参数不同

call()

apply()

哪些常见操作会造成内存泄漏

内存泄漏：值一块被分配的内存既不能用，又不能回收，知道程序结束

• 意外的全局变量

• function a(){
  a=100//a成为一个全局变量，不会被回收
  }

• 闭包也会引起内存泄漏

• 没有清理掉的DOM元素的引用

• 被遗忘的定时器，或者回调

线程与进程的区别

一个程序只能有一个进程，但能有多个线程

进程是CPU分配的基本单位

一个程序至少有一个进程，一个进程至少有一个线程

线程的内存共享，而进程有自己独立的内存单元

css hack

目的就是让你的css兼容不同的浏览器