2019面试题

HTML

1.浏览器兼容问题

IE6图片有蓝色边框，有背景解决方案：border:0; background: rgba(0,0,0,0)
盒子模型 html{box-sizing：border-box}
每个浏览器边距和间距显示不一样解决方案*{margin:0;padding:0}
一个块级元素float，再使用横向margin会有双倍边距，margin：0，0，0，100px，实际会有200px，解决方案：加样式{dispay:inline}
IE6,IE7,其他浏览器样式hacker设置使用, 解决方案：div{height:200px; _height:100px; *height:50px} IE6识别 _ * ,IE7识别 *
设置较小高度的标签，IE6，IE7，遨游会超出固定的高度解决方案overflow：hidden

CSS

1. css3新特性

答：

选择器 id选择器，class选择器，标签选择器
圆角和背景
渐变
旋转
动画

2. 写一段动画代码

animation：myDiv 5s infinite

@keyframes myDiv{

　　from{left:0px}

　　to{left: 200px}

}

3. 一个div如何水平垂直居中

答：有很多种方法，面试官最想听到的答案是transfrom，display：flex也可以实现，但因display对于IE兼容性的问题，所以选择position: absolte定位

position: absolte top: 50% left:50% bottom:0 right:0 transfrom: translate(-50%,-50%)
display: flex justify-content: center align-item:center

4. 1px等于多少rem

答：body{ font-size:12px }

　　12px = 1rem

5. less与sass的区别

答：

变量符不同 sass是$,less是@
编译环境不同 sass需要安装Ruby环境，less是需要引入less.js来处理less代码来输出css到浏览器上
工具库不同 sass工具库是compass，
引入外部css文件 sass用_text.css引入
sass比less强大很多但sass需要Ruby环境，国内不能使用，所以个人选择是less

6.如何提高性能，优化

答：

减少使用position，float
尽量使用父级继承
css可写在一个单独答文件夹，便于维护
css不用代码删除保留用的
减少使用!important
css文件压缩，js，图片压缩
CSS Sprites 将很多图片合并到一张图片上用，减少浏览器到请求

7.怎么让Chrome支持小于12px 的文字？

答：

-webkit-transfrom: scale(0.8)
-webkit-text-size-adjust: 10px;

ES6

1. ES6新特性

答：

const let
默认赋值
模版文本
多行字符串
解构赋值
箭头函数
promise
classes 类
modules 模块

2.var const let的区别

答：ES5中只有全局作用域，函数作用域，没有块级作用域，

　　ES6新增了块级作用域，块级作用域是 { } 形成的，if与for的{}也被称为作用域

　　var 是全局变量，可以跨块访问，但不可以跨函数访问

　　let 局部变量，只能在块级作用域中，不能跨块访问，也不能跨函数访问

　　const 局部变量，只能在块级作用域中，不能跨块访问，必须初始化（赋值），否则报错，并且赋值后不能修改

3.变量提升，函数提升

答：变量提升是变量声明提升到它所在的作用域最开始的位置

//变量提升
console.log(a)
var a = 1;
console.log(a)
//只有函数声明才能变量提升
function t() {
　　console.log(a)
　　var a = 1;
　　console.log(a)
}
t()
//函数提升
console.log(t)
console.log(8)
function t() {
　　console.log(10)
}

4.箭头函数与普通函数有什么区别

答：普通函数this的指向是调用者本身，而箭头函数会用上下文的this去拿来当作自己的this

5. bind, call, apply 有什么区别

答：这三者都是改变函数this对象的指向的

　　call跟apply不同的是参数的传值方式不同 call是(this, a, b) apply(this, [a, b])

　　call跟bind写法相同，但call是立即执行，bind是等待执行

6.Promise是什么？

答：promise是异步编程答一种解决方案，从语法上讲，他是一个对象，可以通过reslove，reject，获取异步返回的结果，从本意上讲，他是一种承诺，承诺过一段时间会给你返回消息，promise有三个状态，pending等待态，fulfiled成功态，rejected失败态，

promise与回调函数类似，请求拿到值以后，将值传到函数中处理，但跟回调函数不同的就是，回调函数再写回调函数，数据很容易出问题，但promise可以执行多个.then,将返回但值再次处理

promise是链式调用，每次调用.than,catch都会返回一个新的promise

7.process.nextTick、setTimeout、setImmediate的区别

答：不同类型的观察者，处理的优先级不同，idle观察者最先，I/O观察者其次，check观察者最后

　　nextTick【idle】，setTimeout【check】，setImmediate【check】

　　setTimeout、setImmediate的区别：第一是如果在主模块中（node.js）中，是顺序随机主要看性能。第二是如果不在主模块中，那setImmediate的顺序大于setTimeout

8.class在ES6中是什么？讲一下class

答：

class被称为类，用类实例化对象，
定义一个class会默认增加一个constructor函数，其中constructor中放入的是显性对象
class中除了constructor还有get，set函数可以获取和设置对象的值，
类只能用new去实例化，否则会报错

9.ES6中class与ES5中function有什么区别？有什么相同之处

答：相同：语法相同，ES6能实现的绝大多数功能，ES5都能实现

　　区别：class只是让对象原型的写法更加的清晰，更像面向对象编程的语法，使代码编程中不易出错

10.什么是原型链，portotype与_porto_有什么区别？

答：原型链就是通过一层一层的链接关系组合而成

　　class list {

　　}

　　let listObj = new list()

　　list.portotype = listObj._porto_

　　每个函数都有一个portotype对象，凡是对象都有一个属性_porto_。

　　portotype对象可以增加或修改属性和方法

11. Map与Set的区别与相同点？

答：相同：属性中都有，set，get，has，delect，clear，方法相同

　　区别：Set类似于数组，但它的值是唯一的，没有重复的值。Set是本身是构造函数，用来生成数据结构

　　　　　Map遍历数组

4.数组方法有哪些

答：push，pop，

1.jsonp是如何跨域的，实现原理是什么？

跨域是浏览器从一个页面获取得到另一个页面的数据，如域名，端口，协议不一致可导致跨域。

jsonp是在需要一个script的基础上，从页面传一个callback到服务器，服务器会将一个携带callback的参数，callback中包裹着我们想要的JSON数据