前端面试题集锦

又一年校招季~这是近来收集的前端面试题，共勉。
这里写的答案有些比较简略，只是给出一个方向吧，大家可以自己去深入去学习探究。

『HTML&CSS基础』

【HTML】

• 行内元素
  关注行内置换元素 类似inline-block方式展现 input textarea img select

• 浏览器内核
  基于Webkit：
  Chrome - blink、腾讯X5、UC U3、华为T9
  基于Gecko：Firefox
  基于Trident：IE
  基于Presto：Opera
  兼备Webkit&Trident：猎豹、360

• W3C标准
  包括结构(xhtml,xml)、表现(css)、行为(ecmascript、dom)的标准。更好地规范浏览器对页面渲染，使得同一套网页方案尽可能在多套浏览器中表现一致。提高开发者开发效率和用户体验

• Doctype
  用来告诉浏览器以什么文档类型解析html，没有的话，会按照向下兼容的怪异模式对文档进行解析
  h4及以下需要引用dtd声明，dtd有标准型和过渡型两种。两者区别可忽略
  h5不急于SGML标准，因此不需要引用dtd

• 标签语义化的重要性
  1.便于浏览器、搜索引擎解析
  2.在没css情况也以一种文档形式展现，便于阅读
  3.有利于SEO
  4.有利于代码的阅读和维护

• strong与em的异同
  同：都是对文本起强调作用
  异：em以斜体显示文本，strong更利于SEO识别语义

• SEO 详细
  可分为白帽SEO和黑帽SEO
  SEO的主要方面：
  1.网站标题、关键字、描述 (meta)
  2.网站结构布局优化：目录层级不要太多，尽量让Spider跳转3次就可以到达网站的任意一个内页
  3.网站代码优化：
  SEO会过滤掉display none的元素、利用<meta description和<meta keywords>、html语义化

• 图片格式
  png-8 256色、png-24、gif、apng(Chrome不支持)、svg、webp(ios不支持)

• link vs @import
  区别：
  1.link无兼容性缺点，@import仅兼容IE5+
  2.link权重高于import
  3.link外链的css与html是并行加载的，而import需等html加载完才加载

【CSS】

• CSS盒模型
  包括 margin padding border content
  IE盒模型 (lt IE8)：content包含padding和border
  如何改变：box-sizing

• CSS可继承属性
  与font有关的属性 如font-size、font-family、font-weight等
  line-height、color、text-align、text-indent等

• BFC
  不同的display会参与不同的环境(formatting context)去渲染，而block参与BFC
  BFC特点
  1.同个BFC内盒子产生margin塌陷
  2.计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算
  3.BFC就是页面上的一个隔离的独立容器，里外互相不影响
  产生新BFC
  1.float属性不为none
  2.position为absolute或fixed
  3.display为inline-block | table-cell | table-caption | flex | inline-flex
  4.overflow不为visible

• 清除浮动
  1.形成新的BFC
  2.新增div 设置clear:both
  3.在父元素添加:after伪类，设置content:"";display:block;clear:both;zoom:1

• position
  absolute | relative | static | sticky | fixed

---

『HTML5』

【新标签】

• 新增的标签
  1.布局，内容 <header> <section> <nav> <article> <aside> <mark> <footer>
  2.表单 <datalist> <keygen> <output>
  3.媒体 <canvas> <video> <audio> <figure> <figcaption> <source>
  4.状态 <progress> <meter>
  5.冷门 <command> <details> <summary>

• 表单新类型
  email url number tel search color DatePicker

• 表单新属性
  autocomplete autofocus require pattern placeholder multiple

【新API】

• 交互
  重力感应 DeviceOrientation
  手机加速传感器 DeviceMotion

• history 详细
  以Pjax方式实现SPA history.pushState history.replaceState 解决ajax不能后退前进问题

• 储存
  客户端储存：localStorage sessionStorage>只存在一个会话周期内

• 跨域
  postMessage

【Web app】

• 常见dpr
  ip6 2、ip6+ 3、nexus5 3

• 移动端适配
  1.自适应方式
  2.viewport方式
  3.rem方式
  4.scale()方式缩放

• 常用meta
  IE相关
  避免IE使用兼容模式 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  为不支持viewport的IE Mobile设定宽度 <meta name="MobileOptimized" content="320" />
  是否对手持设备友好 <meta name="HandheldFriendly" content="true" />
  UC浏览器
  强制竖屏 <meta name="screen-orientation" content="portrait" />
  强制全屏 <meta name="full-screen" content="yes" />
  应用模式 <meta name="browsermode" content="application" />
  X5浏览器
  强制竖屏 <meta name="x5-orientation" content="portrait" />
  强制全屏 <meta name="x5-fullscreen" content="yes" />
  应用模式 <meta name="x5-page-mode" content="app" />
  360
  开启极速模式 <meta name="renderer" content="webkit" />

• iphone相关
  启动webapp功能 删除工具栏和菜单栏 <meta name="apple-mobile-web-app-capable" content="yes">
  控制状态栏颜色 <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  开启号码或邮箱检测 <meta name="format-detection" content="telephone=no" />
  添加主屏幕icon <link rel="apple-touch-icon" href="touch-icon-iphone.png">

---

『CSS3』

【新属性】

flex、column、文本换行、媒体查询、待补充……

开启GPU加速

注意启用-webkit-backface-visibility:hidden; -webkit-perspective:1000;解决启用transform3d页面闪烁和抖动问题

【动画】

• CSS3动画性能

---

『Javascript』

【原生】

• js数据类型
  5基本 string number boolean undefined null 储存在栈内存中
  1复杂 object 储存在堆内存中

• this指向
  this总是指向函数的直接调用者（而非间接调用者）

• null和undefined区别
  null表示一个无的对象
  undefined表示一个无的初始值。表示此处应该有值，但还没有定义，即缺少值

• new的具体作用
  如var p = new P();
var p = {}; //创建新对象
p.__proto__ = P.prototype; //继承构造函数的原型
P.call(p); //修改this指向

• 创建对象方式
  对象字面量、工厂模式、构造函数、原型模式、构造函数+原型

• 原型 原型链
  每个对象都有一个属性 prototype 当需要从对象中寻找属性时，如果在当前对象上没有找到就会从原型对象开始找 一直追溯到原型链的最顶端

• 实现继承
  1.构造函数继承 详细

  • 利用call、apply修改this指向

  • 让子元素原型指向父元素实例，注意要修改子元素prototype.constructor指向

  • 将需继承的属性写在父元素的prototype上，让子元素prototype指向父元素prototype，但在修改子元素prototype.constructor指向时会同时修改父元素prototype.constructor

  • 同上方法 利用中介函数

  2.非构造函数继承 详细
  把父对象的属性，全部拷贝给子对象

• 浅拷贝vs深拷贝
  浅拷贝
  深拷贝 递归调用浅拷贝

• 闭包 详细
  用途：读取函数内部变量。变量得不到销毁，一直储存在内存中，可能造成内存泄漏

• 内存泄漏
  指分配的内存既不能使用又得不到回收

  • 如为某元素绑定了一个事件，而该元素又从dom中移除

  • 滥用闭包

  • 两变量互相引用

• 原生Ajax实现过程
  1.获取XMLHttpRequest对象
  2.xhr.open(type,url,ifAsyn)
  3.监听xhr状态改变，xhr.onreadystatechange = function(){} xhr.readyState==4&&xhr.status==200说明请求成功
  【readyState：0=未初始化 1=启动 2=发送 3=接收 4=完成】
  4.xhr.send()

• GET和POST区别
  GET 安全性低 可传内容少 通过url传值
  POST 安全性高 可传内容多 通过表单传值

• 事件处理 详细

  • 事件委托
    利用事件冒泡机制 将事件绑定在父元素上，节省性能

  • 事件处理程序
    DOM0 -> DOM1 -> DOM2 (对比与0，可同时绑定多个事件)

  • mouseover和mouseenter区别
    mouseenter不冒泡

• 数组去重
  hash方式和index方式

  Array.prototype.unique = function(){
  var n = [];
  for(var i=0,len=this.length;i<len;i++){
      if(n.indexOf(this[i])==-1) {
          n.push(this[i])
      }
  }
  return n;
  }
  Array.prototype.unique2 = function(){
      var n = {},a =[];
      for(var i=0,len=this.length;i<len;i++){
          if(!n[this[i]]) {
              a.push(this[i]);
              n[this[i]] = true;
          }
      }
      return a;
  }

• ES5数组新方法

• 斐波纳挈数列高效递归 详细
  附斐波纳挈数列

  function getNthFibonacci(count) {
      var fibonacci = [1,1];
      for(var i=2;i<=count;i++){
          fibonacci[i] = fibonacci[i-1]+ fibonacci[i-2];
      }
      return fibonacci[count];
  };
  var a = getNthFibonacci(5);
  console.log(a)

• getComputedStyle和style区别
  getC 只读 可获取未被style定义的样式
  style 读写 只可获取含style的样式

• DOM
  插入新节点
  document:createElement()、createDocumentFragment()、createTextNode()
  insertBefore(new,old)
  获取节点
  childNodes、parentNode、previousSibling、nextSibling、firstChild、lastChild、children
  节点操作
  appendChild、removeChild、replaceChild、cloneNode、normalize
  获取位置

  • 浏览器宽高 window.innerWidth document.documentElement.clientWidth

  • 文档宽高 document.documentElement.offsetHeight、 document.documentElement.scrollHeight

  • 到文档的最端处距离 offsetTop、offsetLeft

• BOM
  浏览器内核 navigator.appVersion

• 异步编程方法
  1.回调函数，这是异步编程最基本的方法。
  2.事件监听，另一种思路是采用事件驱动模式。任务的执行不取决于代码的顺序，而取决于某个事件是否发生。
  3.发布/订阅，上一节的"事件"，完全可以理解成"信号"。
  4.Promises对象，Promises 对象是CommonJS 工作组提出的一种规范，目的是为异步编程提供统一接口。

【jQuery】

• 操作DOM

• ajax

【模块化】

【MV*】详细

【虚拟DOM】详细

以对象树的方式储存在内存中

---

『性能优化』

• 雅虎14条 详细

• 移动端优化

• 16毫秒的优化 详细

  1. google提出1s完成终端首屏渲染：网络消耗+js执行与页面渲染

  2. 浏览器渲染频率1s 60帧，确保每一帧能在16ms内执行与渲染，尽可能避免重排与重绘

  3. 使用RAF控制渲染频率，减少重复渲染，避免事件重复执行

  4. 让js操作读写分离

• 渲染路径优化

  1. 最小化关键资源数量

  2. 最小化关键资源字节

  3. 最小化关键路径长度

• 页面直出 详细

  1. server上获取数据并将数据与页面模板结合，在服务端渲染成最终的 HTML

  2. 返回最终的 HTML 展示

---

『跨域与前端安全』

• 跨域的方式

  1. JSONP：强行执行不同域下的JS文件，需要外部JS配合。只能用GET方式

  2. CORS：服务器端设置Access-Control-Allow-Origin，使其能被其他域使用AJAX访问到

  3. domain+iframe：只适用主域相同子域不同的两个站。需要将两个站的document.domain设成同一个主域

  4. window.postMessage(msg,targetOrgin)

• 跨域攻击 详细

  1. 跨域脚本

  2. 跨域请求伪造

---

『HTTP 』

• HTTP报文

• HTTP/1 HTTP/2 HTTPS 详细
  建立在TCP基础上

• 状态码

• 缓存
  设置缓存 服务器返回Cache-Control:max-age=xxx；expires:Thu, 03 Jan 2019 04:24:16 GMT、设置etag、last-modified

实际上浏览器输入 url 之后敲下回车就是先看本地 cache-control、expires 的情况，刷新(F5)就是忽略先看本地
cache-control、expires 的情况，带上条件
If-None-Match、If-Modified-Since，强制刷新(Ctrl + F5)就是不带条件的访问。

• 描述从输入url到一个页面展示在你面前的全部过程

1. DNS Lookup

2. 建立TCP连接

3. 发送http请求

4. 服务器发送响应

5. 浏览器加载解析DOM&CSS

6. 生成DOM Tree&CSS RuleTree

7. DOMTree和CSS RuleTree结合生成RenderTree

8. 对RenderTree上的每一个元素计算其坐标>称为布局

9. 对RenderTree的元素进行绘制和展示>称为『painting』

• 引申-当页面渲染时，浏览器发生了什么

---

『工具』

【前端自动化工具】

• grunt

• glup

【CSS预处理】

优势：

1. 用嵌套方式写CSS，结构更加的清晰

2. 可使用变量、函数，更类似编程的方式

3. 可将一整套CSS拆分成若干个组件，粒子性、可组合的特点更加明显

• sass

• less

• compass

---

『数据结构』

• 排序 详细
  不稳定的排序 快速排序、选择排序、希尔排序、堆排序

• 二叉树原理与实现