一些面试题

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

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 数据存放在服务器上
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 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。