前端面试题

基础知识

• 延迟脚本（defer）、异步脚步（async）
  defer: 异步加载，HTML渲染完成，再执行；
  async: 异步加载，加载完成后，立即执行，不会等HTML渲染
  defer和async的区别

• 异步编程方法主要有哪些？
  回调函数；事件监听；发布/订阅；Promises对象
  Javascript异步编程的4种方法

• 简单介绍JS的线程机制和异步执行原理?
  JS引擎（单线程执行），GUI线程，事件触发线程
  js事件线程机制和异步执行
  js的单线程和异步

• 函数声明和函数表达式有什么不同
  函数声明在JS解析时进行函数提升，因此在同一个作用域内，不管函数声明在哪里定义，该函数都可以进行调用。（存在函数提升现象）
  函数表达式的值是在JS运行时确定，并且在表达式赋值完成后，该函数才能调用。
  详解Javascript 函数声明和函数表达式的区别

• JavaScript对象的实例属性有哪些数据属性？
  [[Configurable]]：默认为true。表示能否通过delete删除属性从而重新定义属性，能否修改属性特性，或者能否把属性修改为访问器属性；
  [[Enumerable]]：默认为true。表示能否通过for-in循环返回属性；
  [[Writable]]：默认为true。表示能否修改属性的值。
  [[Value]]：默认值为undefined。表示包含属性的数据值。读写属性值都从这个位置进行。
  JavaScript 数据属性和访问器属性

• 跨域问题有哪些解决方案？

（1）document.domain + iframe

（2）动态创建script

（3）window.name + iframe

（4）window.postMessage

（5）CORS

（6）JSONP

（7）nginx代理

前端跨域问题的几种解决方案

JS 跨域问题常见的五种解决方式

• 上传图片和文件有哪些方式？
  前端js实现图片上传预览

• 事件委托

• __proto__和prototype

• 页面的优化有那些策略

• rem和em的区别
  rem: 相对于根元素的大小
  em: 相对于父元素的大小
  何时使用 Em 与 Rem
  css里面的单位：em、rem有什么不同？
  rem和em的区别

• form表单和ajax请求有什么不同

• call、apply、bind

• js如何访问和操作剪切板

• 正则表达式实例的exec()方法和test()方法有什么区别

• this和函数的作用域有关系吗？
  this指的是函数定义时上下文，还是函数执行时的上下文？
  箭头函数在this绑定上面有什么作用？
  参考：this和函数的作用域没有关系
  this指的是函数执行时的上下文
  箭头函数的作用是将this和函数定义时的上下文绑定。

• HTML5新增了哪些内容？

• 媒体查询？

• 弹性盒子？
  引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。即便容器中条目的尺寸未知或是动态变化的，弹性盒布局模型也能正常的工作。在该布局模型中，容器会根据布局的需要，调整其中包含的条目的尺寸和顺序来最好地填充所有可用的空间。当容器的尺寸由于屏幕大小或窗口尺寸发生变化时，其中包含的条目也会被动态地调整。比如当容器尺寸变大时，其中包含的条目会被拉伸以占满多余的空白空间；当容器尺寸变小时，条目会被缩小以防止超出容器的范围。
  

  

  flexbox.png
  
  使用 CSS 弹性盒子
  深入理解 CSS3 弹性盒布局模型

• 过长内容，只显示一部分，后面的用...代替，用样式怎么实现？

• 上下左右居中，怎么用样式实现？

• 懒加载和预加载的原理是什么？
  预加载是指在页面加载完成之前，提前将所需资源下载，之后使用的时候从缓存中调用；懒加载是延迟加载，按照一定的条件或者需求等到满足条件的时候再加载对应的资源。
  预加载增加了服务器压力，换来的是用户体验的提升，典型例子是在一个图片较多的网页中，如果使用了预加载就可以避免网页加载出来是时，图片的位置一片空白（图片可能还没加载出来），造成不好的用户体验；懒加载的作用减少不要的请求，缓解了服务器压力。
  懒加载和预加载
  Javascript图片预加载详解

• ajax有那几个步骤？
  step1. 创建引擎（xmlHttpRequest对象）
  step2：事件处理函数，处理服务器的响应结果。
  step3: 打开一个连接open(method, url, asynch)
  step4：发送数据send(data)
  Ajax使用的四大步骤
  初学者-AJAX实现的四个简单步骤

• less和css有什么不同？
  LESS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。
  less参考

• 事件冒泡，事件捕获，事件委托有什么不同？
  事件捕获是从外层元素到目标元素的过程，事件冒泡是从目标元素到外层元素的过程。
  JavaScript 事件冒泡、事件捕获和事件委托
  利用冒泡的原理，把事件加到父级上，触发执行效果。这样可以减少减少监听函数的个数，提升性能。
  冒泡事件流的应用——事件委托

• position属性共有四种不同的定位方法，分别是static、fixed、relative、absolute,sticky。有什么不同？
  深入理解css中position属性及z-index属性

ES6新特性

• var, let, const有什么区别？
  var是申明变量，有变量提升，for循环变量i结果都一样等问题
  let是申明变量，块级作用域，不存在变量提升，for循环变量i能正确显示
  const是定义常量，块级作用域。地址是常量，当定义对象的时候，内容可变，但不能指向其他对象。
  let 和 const 命令

• 什么是变量的解构赋值？主要有哪些作用？
  ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。
  比如交换两个变量的值，让函数返回多个值等。
  变量的解构赋值

let x = 1;
let y = 2;

[x, y] = [y, x];

// 返回一个数组
function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();

// 返回一个对象
function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();

• 如何表示一个码点超过0xffff的Unicode字符？
  ES6 对这一点做出了改进，只要将码点放入大括号，就能正确解读该字符。\u{码点}
  字符的 Unicode 表示法

• ES6 引入 rest 参数（形式为...变量名），有什么作用？
  获取多余的参数，收集之后放在一个数组之中。这个是真正的数组，传统的arguments只是类数组对象。用这个特性，可以更加方便地处理函数参数
  rest 参数

function add(...values) {
  let sum = 0;

  for (let val of values) {
    sum += val;
  }

  return sum;
}

add(2, 5, 3) // 10

• ES6,如何将一个字符串转化为数组？如何方便地合并两个数组？
  扩展运算符（spread）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。
  扩展运算符

[...'hello'];
// [ "h", "e", "l", "l", "o" ]

var arr1 = ['a', 'b'];
var arr2 = ['c'];
var arr3 = ['d', 'e'];

// ES6的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]

• ES6何定义类，继承，静态成员的关键字是什么？
  class，extends，static

• ES6中，模块的输入输出的关键字是什么？

// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export {firstName, lastName, year};

// main.js
import {firstName, lastName, year} from './profile';

function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

• Promise对象有哪三种状态，分别表示什么意思？
  Pending（进行中）
  Resolved（已完成，又称 Fulfilled）
  Rejected（已失败）

• 简要说说下列函数的作用：
  Promise.prototype.then() === 回调执行
  Promise.prototype.catch() === 错误捕捉
  Promise.all() === 多个异步过程都完成，才往下执行。
  Promise.race() === 多个异步过程只要有一个完成，就往下执行。
  Promise

• 简单介绍一下async/await的作用？
  可以将异步过程按照同步的代码风格书写。
  阮一峰 async 函数

常用框架

1. 页面什么时候做的？使用到了什么技术？选择了什么库？JQ SWIPER等

2. 什么时候开始接触到vue开发？

3. 有哪些项目用到了前端框架？

4. 有没有做过代码的优化？

5. 浏览器兼容问题

6. vue生命周期

7. 数据双向绑定原理有没有查过？

8. vue的属性 methods和 计算属性 computed

9. React 使用React.createClass和class关键字创建的类，this指针的绑定有什么不同？
   React.createClass创建的类，this自动bind在当前对象；
   class关键字创建的类，没有这种自动绑定功能，需要自己手动绑定；
   React绑定this的三种方式
   理解React中es6方法创建组件的this
   React中使用ES6 class的this指向？

React Native

1. 请介绍一下React Native中的flexbox布局；和web中的flexbox有什么区别？
   使用Flexbox布局
   React Native中的FlexBox 和Web CSSS上FlexBox的不同之处

2. ScrollView和listView有什么区别？
   ScrollView

3. TouchableHighlight中包含两个子元素时的解决方法
   使用View标签进行嵌套
   TouchableHighlight

工具和环境

• webstorm，visual studio code，subline用过哪个？喜欢哪个？为什么？
  根据选择追问：
  sublime装过哪些插件？
  webstorm安装node_modules卡死问题怎么解决？
  webstorm 打开后，底部一直出现 scanning files to index。
  在node_modules文件夹上右键，选择Mark Directory as =》 Excluded
  webstorm自动保存导致监听不到代码的变化从而不能自动刷新怎么解决？

• git和svn的区别是什么？用过哪种？喜欢用哪种？为什么？

经历与作品

• 你印象最深的一个经历是什么？

• 有没有遇到过难题？当时是怎么解决的？