前端面试题搞起来

学而不思则罔，思而不学则殆。这一篇会将一些看到的面试题作一个总结。之后看到新的面试题也会持续的更新在这个里面。

HTML 和 CSS 面试题

盒子模型

CSS 中盒子模型包括 IE 盒子模型和标准的 W3C 盒子模型。
W3C 盒子模型： width = content （box-sizing: content-box）
IE 盒子模型中： width = content + padding + border （box-sizing: border-box）

块元素和行内元素

块元素	行内元素
块元素会独占一行，默认状况下，其宽度会自动填满父元素宽度，即便设置了宽度也会独占一行	行内元素不会独占一行，没有宽度和和高度属性。
块级元素：div p form ul li h1-h6	行内元素：span img input a i

前端须要注意哪些SEO

• 合理的title、description、keywords：搜索对着三项的权重逐个减少，title值强调重点便可，重要关键词出现不要超过2次，并且要靠前，不一样页面title要有所不一样；description把页面内容高度归纳，长度合适，不可过度堆砌关键词，不一样页面description有所不一样；keywords列举出重要关键词便可
• 语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
• 重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容必定会被抓取
• 重要内容不要用js输出：爬虫不会执行js获取内容
• 少用iframe：搜索引擎不会抓取iframe中的内容
• 非装饰性图片必须加alt
• 提升网站速度：网站速度是搜索引擎排序的一个重要指标

从浏览器地址栏输入url到显示页面的步骤

• 浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；
• 服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；
• 浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，创建相应的内部数据结构（如HTML的DOM）；
• 载入解析到的资源文件，渲染页面，完成。

HTTP状态码及其含义

• 1XX：信息状态码

  • 100 Continue 继续，通常在发送post请求时，已发送了http header以后服务端将返回此信息，表示确认，以后发送具体参数信息

• 2XX：成功状态码

  • 200 OK 正常返回信息
  • 201 Created 请求成功而且服务器建立了新的资源
  • 202 Accepted 服务器已接受请求，但还没有处理

• 3XX：重定向

  • 301 Moved Permanently 请求的网页已永久移动到新位置。
  • 302 Found 临时性重定向。
  • 303 See Other 临时性重定向，且老是使用 GET 请求新的 URI。
  • 304 Not Modified 自从上次请求后，请求的网页未修改过。

• 4XX：客户端错误

  • 400 Bad Request 服务器没法理解请求的格式，客户端不该当尝试再次使用相同的内容发起请求。
  • 401 Unauthorized 请求未受权。
  • 403 Forbidden 禁止访问。
  • 404 Not Found 找不到如何与 URI 相匹配的资源。

• 5XX: 服务器错误

  • 500 Internal Server Error 最多见的服务器端错误。
  • 503 Service Unavailable 服务器端暂时没法处理请求（多是过载或维护）。

浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢

• 在线的状况下，浏览器发现html头部有manifest属性，它会请求manifest文件，若是是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源而且进行离线存储。若是已经访问过app而且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，而后浏览器会对比新的manifest文件与旧的manifest文件，若是文件没有发生改变，就不作任何操做，若是文件改变了，那么就会从新下载文件中的资源并进行离线存储。
• 离线的状况下，浏览器就直接使用离线存储的资源。

Canvas和SVG有什么区别？

• svg绘制出来的每个图形的元素都是独立的DOM节点，可以方便的绑定事件或用来修改。canvas输出的是一整幅画布
• svg输出的图形是矢量图形，后期能够修改参数来自由放大缩小，不会是失真和锯齿。而canvas输出标量画布，就像一张图片同样，放大会失真或者锯齿

CSS 选择器分类

基本选择器：

• id选择器：id = name
• 类选择器：class = "name"
• 标签选择器：body, div, ul
• 全局选择器：*

复杂选择器：

• 组合选择器：.head .head_logo
• 后代选择器：ul li 从父集到子集
• 群组选择器：div span {color: red} 具备相一样式的标签分组显示
• 继承选择器：
• 为类选择器：连接样式 a:hover
• 子选择器：div > p
• css 相邻兄弟选择器： h1 + p

优先级：

• 属性后面加 !import 会覆盖页面内任何位置定义的元素样式
• 做为 style 属性写在元素内的样式
• id 选择器
• 类选择器
• 标签选择器
• 通配符选择器（*）
• 浏览器自定义或继承

为何 CSS 放在顶部而 JS 写在后面

• 浏览器预先加载 CSS 后，能够没必要等待 HTML 加载完毕就能够渲染页面了。
• HTML 渲染并不会等到彻底加载完在渲染页面，而是一边解析 DOM 一边渲染。
• JS 写在尾部，主要是由于 JS主要扮演事件处理的功能，一方面不少操做是在页面渲染后才执行的。另外一方面，能够节省加载时间，是页面可以更好的加载，提升用户的良好体验。

position 的值有哪些， relative 和 absolute 分别是相对于谁进行定位的？

• relative： 相对定位，相对于本身自己在正常文档流中的位置进行定位。
• absolute：生成绝对定位，相对于最近一级定位不为 static 的父元素进行定位。
• fixed： 生成绝对定位，相对于浏览器窗口或者 iframe 进行定位。
• static：默认值，没有定位，元素出如今正常文档流中。
• stricky：生成粘性定位元素，容器的位置根据正常文档流计算得出。

css sprite是什么,有什么优缺点

• 概念：将多个小图片拼接到一个图片中。经过background-position和元素尺寸调节须要显示的背景图案。

• 优势：

  • 减小HTTP请求数，极大地提升页面加载速度
  • 增长图片信息重复度，提升压缩比，减小图片大小
  • 更换风格方便，只需在一张或几张图片上修改颜色或样式便可实现

• 缺点：

  • 图片合并麻烦
  • 维护麻烦，修改一个图片可能须要重新布局整个图片，样式

display:inline-block 何时不会显示间隙？

• 移除空格
• 使用margin负值
• 使用font-size:0
• letter-spacing
• word-spacing

PNG,GIF,JPG的区别及如何选

• GIF

  • 8位像素，256色
  • 无损压缩
  • 支持简单动画
  • 支持boolean透明
  • 适合简单动画

• JPEG

  • 颜色限于256
  • 有损压缩
  • 可控制压缩质量
  • 不支持透明
  • 适合照片

• PNG

  • 有PNG8和truecolor PNG
  • PNG8相似GIF颜色上限为256，文件小，支持alpha透明度，无动画
  • 适合图标、背景、按钮

若是须要手动写动画，你认为最小时间间隔是多久，为何？

• 多数显示器默认频率是60Hz，即1秒刷新60次，因此理论上最小间隔为1/60＊1000ms ＝ 16.7ms

CSS不一样选择器的权重

• !important规则最重要，大于其它规则
• 行内样式规则，加1000
• 对于选择器中给定的各个ID属性值，加100
• 对于选择器中给定的各个类属性、属性选择器或者伪类选择器，加10
• 对于选择其中给定的各个元素标签选择器，加1
• 若是权值同样，则按照样式规则的前后顺序来应用，顺序靠后的覆盖靠前的规则

JS 面试题

setTimeout和setInterval的机制

由于js是单线程的。浏览器遇到etTimeout和setInterval会先执行完当前的代码块，在此以前会把定时器推入浏览器的待执行时间队列里面，等到浏览器执行完当前代码以后会看下事件队列里有没有任务，有的话才执行定时器里的代码。

一些检验数据类型的方法

千万不要使用typeof来判断对象和数组，由于这种类型都会返回object。

• typeOf()是判断基本类型的Boolean,Number，symbol, undefined, String。 对于引用类型：除function，都返回object null返回object。
• installOf() 用来判断A是不是B的实例，installof检查的是原型。
• toString() 是Object的原型方法，对于 Object 对象，直接调用 toString() 就能返回 [Object Object] 。而对于其余对象，则须要经过 call / apply 来调用才能返回正确的类型信息。
• hasOwnProperty()方法返回一个布尔值，指示对象自身属性中是否具备指定的属性，该方法会忽略掉那些从原型链上继承到的属性。
• isProperty()方法测试一个对象是否存在另外一个对象的原型链上。
• valueof：全部对象都有valueof，若是存在任意原始值，他就默认将对象转化为表示它的原始值。若是对象是复合值，而却大部分对象没法真正表示一个原始值，所以默认的valueof()方法简单的返回对象自己，而不是返回原始值。

GET 和 POST 的区别，何时使用 POST ？

GET 和 POST 的区别以下：

• GET：通常用于查询数据，使用 URL 传递参数，因为浏览器对地址栏长度有限制，因此使用 GET 方式所发送信息的数量有限制，同时浏览器记录（历史记录，缓存）会保留请求地址的信息，包括地址后面的数据。GET 只能发送普通格式（URL 编码格式）的数据。
• POST：通常用于向服务器发送数据，对所发送的数据的大小理论上是没有限制，浏览器会缓存记录地址，但不会记录 POST 提交的数据。POST 能够发送纯文本、URL 编码格式、二进制格式的字符串，形式多样。

如下状况中，请使用 POST：

• 以提交为目的的请求（相似语义化，get 表示请求，post 表示提交）；
• 发送私密类数据（用户名、密码）（由于浏览器缓存记录特性）；
• 向服务器发送大量数据（数据大小限制区别）；
• 上传文件图片时（数据类型区别）

AJAX 的局限性

• AJAX 不支持浏览器 back 按钮。
• 安全问题 AJAX 暴露了与服务器交互的细节。
• 对搜索引擎的支持比较弱。不会执行你的 JS 脚本，只会操做你的网页源代码；
• 跨域请求有必定限制。解决方式：jsonp；

cookie 和 session 有什么区别和联系

• cookie 数据存放在客户的浏览器上， session 数据存放在服务器上
• session 比 cookie 更安全
• 单个 cookie 保存的数据不能超多 4k ， 不少浏览器限制一个站点最多保存20个 cookie
• 通常用 cookie 来存放 sessionId

那些操做会形成内存泄漏？

• 内存泄漏指任何对象在您再也不拥有或须要它以后仍然存在
• setTimeout 的第一个参数使用字符串而非函数的话，会引起内存泄漏
• 闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

说几条写JavaScript的基本规范？

• 不要在同一行声明多个变量
• 请使用===/!==来比较true/false或者数值
• 使用对象字面量替代new Array这种形式
• 不要使用全局函数
• Switch语句必须带有default分支
• If语句必须使用大括号
• for-in循环中的变量 应该使用var关键字明确限定做用域，从而避免做用域污

null，undefined 的区别？

• undefined 表示不存在这个值。
• undefined :是一个表示"无"的原始值或者说表示"缺乏值"，就是此处应该有一个值，可是尚未定义。当尝试读取时会返回 undefined
• 例如变量被声明了，但没有赋值时，就等于undefined
• null 表示一个对象被定义了，值为“空值”
• null : 是一个对象(空对象, 没有任何属性和方法)
• 例如做为函数的参数，表示该函数的参数不是对象；
• 在验证null时，必定要使用　=== ，由于 ==没法分别null 和　undefined

框架（vue/react）

MVVM （Model-View-ViewModel）优势：

• 低耦合：视图(View)能够独立于Model变化和修改，一个ViewModel能够绑定到不一样的"View"上，当View变化的时候Model能够不变，当Model变化的时候View也能够不变。
• 可重用性：你能够把一些视图逻辑放在一个ViewModel里面，让不少view重用这段视图逻辑。
• 独立开发：开发人员能够专一于业务逻辑和数据的开发(ViewModel)，设计人员能够专一于页面设计，使用Expression Blend能够很容易设计界面并生成xaml代码。
• 可测试：界面素来是比较难于测试的，而如今测试能够针对ViewModel来写。

react 和 vue 有哪些不一样？谈谈你的见解

• 二者都采用了 virtual dom 的方式，性能都很好
• ui 上都采用组件化的写法，开发效率很高。
• vue 采用双向数据绑定， react 是单项数据绑定。当工程规模比较大时，双向数据绑定会很难维护
• vue 适合不会持续的，小型的 web 应用，使用 vue.js 能带来短时间内较高的开发效率， 不然采用 react。

Vue 生命周期

生命周期函数就是组件在初始化或者数据更新时会触发的钩子函数。

• beforeCreate()

在实例初始化以后，数据观测 (data observer) 和 event/watcher 事件配置以前被调用
注意：此时，没法获取 data中的数据、methods中的方法

• created()

注意：这是一个经常使用的生命周期，能够调用methods中的方法、改变data中的数据

• beforeMounted()

在挂载开始以前被调用

• mounted()

此时，vue实例已经挂载到页面中，能够获取到el中的DOM元素，进行DOM操做

• beforeUpdated()

数据更新时调用，发生在虚拟 DOM 从新渲染和打补丁以前。你能够在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
注意：此处获取的数据是更新后的数据，可是获取页面中的DOM元素是更新以前的

• updated()

组件 DOM 已经更新，因此你如今能够执行依赖于 DOM 的操做。

• beforeDestroy()

实例销毁以前调用。在这一步，实例仍然彻底可用。
使用场景：实例销毁以前，执行清理任务，好比：清除定时器等

• destroyed()

Vue 实例销毁后调用。调用后，Vue 实例指示的全部东西都会解绑定，全部的事件监听器会被移除，全部的子实例也会被销毁。