面试准备

html

doctype

作用

位于文档最前面，用于告知浏览器用何种文档类型规范来解析这个文档

混杂模式和严格模式

严格模式的排版和js运作按照w3c浏览器标准来 运行
混杂模式则采用向后兼容的方式运行，模拟老式浏览器的行为防止站点无法工作

意义

doctype不存在或者格式不正确则以混杂模式呈现

doctype文档类型

1. 该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
2. HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
3. XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
4. Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

HTML和XHTML的区别

1. 所有的标记都必须要有一个相应的结束标记
2. 所有标签的元素和属性的名字都必须使用小写
3. 所有的 XML 标记都必须合理嵌套
4. 所有的属性必须用引号 “” 括起来
5. 把所有 < 和 & 特殊符号用编码表示
6. 给所有属性赋一个值
7. 不要在注释内容中使用 “–”
8. 图片必须有说明文字

优雅降级和渐进增强的区别

优雅降级

一开始就构建完整功能，然后再根据低版本浏览器进行兼容。

渐进增强

针对低版本浏览器进行进行页面构建，保证最基本的功能，再对高级浏览器进行效果，交互等改进和追加功能达到更好的用户体验

浏览器内核

trident

IE,MaxThon，TT，The World，360，搜狗

gecko

FF,MozillaSuite/SeaMonkey

webkit

Safari

Blink（基于webkit）

Chrome，Opera以前是presto内核，现改用Blink

h5

新特性

• 用于绘画的 canvas 元素
• 用于媒介回放的 video 和 audio 元素
• 对本地离线存储的更好的支持
• 新的特殊内容元素，比如 article、footer、header、nav、section
• 新的表单控件，比如 calendar、date、time、email、url、search

优点

• 网络标准统一、HTML5本身是由W3C推荐出来的。
• 多设备、跨平台
• 即时更新。
• 提高可用性和改进用户的友好体验；
• 有几个新的标签，这将有助于开发人员定义重要的内容；
• 可以给站点带来更多的多媒体元素(视频和音频)；
• 可以很好的替代Flash和Silverlight；
• 涉及到网站的抓取和索引的时候，对于SEO很友好；
• 被大量应用于移动应用程序和游戏。

缺点

• 安全：像之前Firefox4的web socket和透明代理的实现存在严重的安全问题，同时web storage、web socket 这样的功能很容易被黑客利用，来盗取用户的信息和资料。
• 完善性：许多特性各浏览器的支持程度也不一样。
• 技术门槛：HTML5简化开发者工作的同时代表了有许多新的属性和API需要开发者学习，像web worker、web socket、web storage 等新特性，后台甚至浏览器原理的知识，机遇的同时也是巨大的挑战
• 性能：某些平台上的引擎问题导致HTML5性能低下。
• 浏览器兼容性：最大缺点，IE9以下浏览器几乎全军覆没。

对HTML5认识?（是什么,为什么）

• 是什么： HTML5指的是包括 HTML 、 CSS 和 JavaScript 在内的一套技术组合。它希望能够减少网页浏览器对于需要插件的丰富性网络应用服务（ Plug-in-Based Rich Internet Application ， RIA ），例如： AdobeFlash 、 Microsoft Silverlight 与 Oracle JavaFX 的需求，并且提供更多能有效加强网络应用的标准集。 HTML5 是 HTML 最新版本， 2014 年 10 月由万维网联盟（ W3C ）完成标准制定。目标是替换 1999 年所制定的 HTML 4.01 和 XHTML 1.0 标准，以期能在互联网应用迅速发展的时候，使网络标准达到匹配当代的网络需求。
• 为什么： HTML4陈旧不能满足日益发展的互联网需要，特别是移动互联网。为了增强浏览器功能 Flash 被广泛使用，但安全与稳定堪忧，不适合在移动端使用（耗电、触摸、不开放）。
  HTML5增强了浏览器的原生功能，符合 HTML5 规范的浏览器功能将更加强大，减少了 Web 应用对插件的依赖，让用户体验更好，让开发更加方便，另外 W3C 从推出 HTML4.0 到 5.0 之间共经历了 17 年， HTML 的变化很小，这并不符合一个好产品的演进规则。

对WEB标准以及W3C的理解与认识

• 标签闭合
• 标签小写
• 不乱嵌套
• 提高搜索机器人搜索几率
• 使用外链js和css脚本
• 结构行为表现的分离
• 文件下载与页面速度更快
• 内容能被更多的用户所访问
• 内容更广泛的设备所访问

行内，块级，空元素

行内元素

<span>，<a>，<b>，<i>，<u>，<em>，<strong>，<label>，<input>

块级元素

<div>,<h1>-<h6>,<ul>,<table>,<p>

空元素

<br>

替换元素

替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。

比如：<input /> type="text"的是，这是一个文本输入框，换一个其他的时候，浏览器显示就不一样

(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素，这些元素都没有实际的内容。

html语义化

如标题（h1-h6），列表（li），强调（strong em）
根据内容的结构化，选择合适的标签，便于开发者阅读，写出更优雅的代码的同时让浏览器的爬虫和机器更好的解析。

为什么语义化

• 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构 : 为了裸奔时好看
• 用户体验： 例如title、 alt 用于解释名词或解释图片信息、 label 标签的活用
• 有利于SEO： 和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重
• 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页
• 便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化

语义化标签

<header></header>
<footer></footer>
<nav></nav>
<section></section>
<article></article> 
<aslde></aside>
<datalist></datalist>

说说你对SVG理解

SVG可缩放矢量图形（ Scalable Vector Graphics ）是基于可扩展标记语言（ XML ），用于描述二维矢量图形的一种图形格式。
特点：
1. 任意放缩
用户可以任意缩放图像显示，而不会破坏图像的清晰度、细节等。
2. 文本独立
SVG图像中的文字独立于图像，文字保留可编辑和可搜寻的状态。也不会再有字体的限制，用户系统即使没有安装某一字体，也会看到和他们制作时完全相同的画面。
3. 较小文件
总体来讲，SVG文件比那些 GIF 和 JPEG 格式的文件要小很多，因而下载也很快。
4. 超强显示效果
SVG图像在屏幕上总是边缘清晰，它的清晰度适合任何屏幕分辨率和打印分辨率。
5. 超级颜色控制
SVG图像提供一个 1600 万种颜色的调色板，支持 ICC 颜色描述文件标准、 RGB 、线 X 填充、渐变和蒙版。
6. 交互 X 和智能化。 SVG 面临的主要问题一个是如何和已经占有重要市场份额的矢量图形格式 Flash 竞争的问题，另一个问题就是 SVG 的本地运行环境下的厂家支持程度。
浏览器支持：
Internet Explorer9，火狐，谷歌 Chrome ， Opera 和 Safari 都支持 SVG 。
IE8和早期版本都需要一个插件 - 如 Adobe SVG 浏览器，这是免费提供的。

全局属性

HTML 5 全局属性

属性 描述

• accesskey 规定访问元素的键盘快捷键
• class 规定元素的类名（用于规定样式表中的类）。
• contenteditable 规定是否允许用户编辑内容。
• contextmenu 规定元素的上下文菜单。
• dir 规定元素中内容的文本方向。
• draggable 规定是否允许用户拖动元素。
• dropzone 规定当被拖动的项目/数据被拖放到元素中时会发生什么。
• hidden 规定该元素是无关的。被隐藏的元素不会显示。
• id 规定元素的唯一 ID。
• lang 规定元素中内容的语言代码。
• spellcheck 规定是否必须对元素进行拼写或语法检查。
• style 规定元素的行内样式。
• tabindex 规定元素的 tab 键控制次序。
• title 规定有关元素的额外信息。

超链接target属性的取值和作用？

target这个属性指定所链接的页面在浏览器窗口中的打开方式。

• _blank 在新窗口中打开被链接文档。
• _self 默认。在相同的框架中打开被链接文档。
• _parent 在父框架集中打开被链接文档。
• _top 在整个窗口中打开被链接文档。
• framename 在指定的框架中打开被链接文档。

data-属性的作用是什么？

data-为前端开发者提供自定义的属性，这些属性集可以通过对象的 dataset 属性获取，不支持该属性的浏览器可以通过 getAttribute

getAttribute('data-pic')
dataset.pic

介绍一下你对浏览器内核的理解？

主要分成两部分：渲染引擎(layout engineer或 Rendering Engine) 和 JS 引擎。
渲染引擎：负责取得网页的内容（HTML、 XML 、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
JS引擎则：解析和执行 javascript 来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。

iframe

优点：

1. 解决加载缓慢的第三方内容如图标和广告等的加载问题
2. Security sandbox
3. 并行加载脚本

缺点：

• iframe会阻塞主页面的 Onload 事件；
• 搜索引擎的检索程序无法解读这种页面，不利于 SEO;
• 使用iframe之前需要考虑这两个缺点。如果需要使用 iframe ，最好是通过 javascript
  动态给iframe添加 src 属性值，这样可以绕开以上两个问题。

Label的作用是什么，是怎么用的？

label标签来定义表单控制间的关系 , 当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
<label for="male">male</label><input type="radio" id="male"/>

title与h3的区别、b与strong的区别、i与em的区别？

title属性没有明确意义只表示是个标题， H1 则表示层次明确的标题，对页面信息的抓取也有很大的影响；
strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时： <strong> 会重读，而<b> 是展示强调内容。
i内容展示为斜体， em 表示强调的文本；

简述一下src与href的区别？

src用于替换当前元素， href 用于在当前文档和引用资源之间确立联系。
src是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本， img 图片和 frame 等元素。
<script src ='js.js'></script>
当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
href是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加
<link href='common.css' rel='stylesheet'/>
那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加载 css ，而不是使用@import方式。

img的title和alt有什么区别？

Alt 用于图片无法加载时显示 Title 为该属性提供信息，通常当鼠标滑动到元素上的时候显示

谈谈你对canvas的理解？

canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API，它可以实现在网页中完成动态的2D与3D图像技术。标记和 SVG以及 VML 之间的一个重要的不同是，有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。SVG 绘图很容易编辑与生成，但功能明显要弱一些。 canvas可以完成动画、游戏、图表、图像处理等原来需要Flash完成的一些功能。

HTML5标签的作用?(用途)

a、使Web页面的内容更加有序和规范
b、使搜索引擎更加容易按照HTML5规则识别出有效的内容
c、使Web页面更接近于一种数据字段和表

表单提交

1. 通用提交按钮
   　　<input type="submit" value="提交">
2. 自定义提交按钮
   　　<button type="Submit">提交</button>
3. 图像按钮
   　　<input type="image" src = "btn.png">

css

link和@import的区别

<link rel='stylesheet' rev='stylesheet' href='CSS文件 ' type='text/css' media='all' />

<style type='text/css' media='screen'>
@import url('CSS文件 ');
</style>

1. link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事务； @import 属于 CSS 范畴，只能加载 CSS 。
2. link 引用 CSS 时，在页面载入时同时加载； @import 需要页面网页完全载入以后加载。
3. link 是 XHTML 标签，无兼容问题； @import 是在 CSS2.1 提出的，低版本的浏览器不支持。
4. link 支持使用 Javascript 控制 DOM 去改变样式；而 @import 不支持。

：nth-child(n)与：nth-of-type(n)的区别

• 使用p:nth-child(n)得满足两个条件

  1. 它的位置必须在它父元素的第n个，从1开始计数
  2. 它必须是P元素（相对于p:nth-child(n)来举例）

• 使用p:nth-of-type(n)

  1. 只要它是第n个P元素就行了

简述readyonly与disabled的区别

1、Readonly只针对input(text/password)和textarea有效，而disabled对于所有的表单元素有效，包括select,radio,checkbox,button等。
2、在表单元素使用了disabled后，我们将表单以POST或者GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去

盒子模型

Block Formatting Context(块级格式化上下文)

如果一个元素符合了成为BFC的条件，那么该元素就成为一个隔离的容器，元素的内部元素会垂直的沿着父元素的边框排列，和外部元素互不影响。比如浮动元素会触发BFC，浮动元素的子元素主要受该浮动元素的影响，二两个浮动元素之间是互不影响的。

如何触发BFC

1、float属性是除‘none’以外的其他值(left, right)
2、overflow属性值是‘visible’以外的值(hidden, auto, scroll)
3、position属性为absolute或者fixed
4、display为以下值之一inline-block，table-cell，table-caption

BFC的常见应用

1、通过边缘不和浮动元素重叠的特性，实现两栏布局
如果一个浮动元素后面跟着一个非浮动元素，那么就会产生一个覆盖的现象，通过触发BFC来清除覆盖，很多自适应的两栏布局就是这么做的。

2、清除元素内部浮动
只要把父元素设为BFC就可以清除子元素的浮动了，同样因为IE6、7不支持BFC，因此需要设置zoom：1来触发hasLayout。

3、解决外边距叠加的问题
在CSS当中，相邻的两个盒子（可能是兄弟，也可能是父子）的外边距可以叠加成一个单独的外边距。这种叠加外边距的方式叫折叠，因此所结合成的外边距叫做折叠外边距。

stacking context,布局规则

z轴上的默认层叠顺序如下（从下到上）：

根元素的边界和背景
常规流中的元素按照html中顺序
浮动块
positioned元素按照html中出现顺序

如何创建stacking context：

根元素
z-index不为auto的定位元素
a flex item with a z-index value other than ‘auto’
opacity小于1的元素
在移动端webkit和chrome22+，z-index为auto，position: fixed也将创建新的stacking context

js

var和function定义方法的区别

在JS中有两种定义函数的方式，
1. 是var aaa=function(){…} 函数表达式
2. 是function aaa(){…} 函数声明
3. var foo3 = new Function('var temp = 100; this.temp = 200; return temp + this.temp;');
var 方式定义的函数，不能先调用函数，后声明，只能先声明函数，然后调用。
function方式定义函数可以先调用，后声明。请看代码：
Js代码

<script language="JavaScript" type="text/javascript">   
   //aaa();这样调用就会出错   
   var aaa = function(){   
        alert("A");   
    }   
    aaa();//这样就不会出错   

   //先调用后声明   
    bbb();   
   function bbb(){   
        alert("bb");   
    }   
</script>  

DOMContentLoaded

先触发DOMContentLoaded事件，后触发load事件。

DOM文档加载的步骤为

1. 解析HTML结构。
2. 加载外部脚本和样式表文件。
3. 解析并执行脚本代码。
4. DOM树构建完成。//DOMContentLoaded
5. 加载图片等外部文件。
6. 页面加载完毕。//load

DOM元素e的e.getAttribute(propName)和e.propName有什么区别和联系

• e.getAttribute()，是标准DOM操作文档元素属性的方法，具有通用性可在任意文档上使用，返回元素在源文件中设置的属性
• e.propName通常是在HTML文档中访问特定元素的特性，浏览器解析元素后生成对应对象（如a标签生成HTMLAnchorElement），这些对象的特性会根据特定规则结合属性设置得到，对于没有对应特性的属性，只能使用getAttribute进行访问
• e.getAttribute()返回值是源文件中设置的值，类型是字符串或者null（有的实现返回”“）
• e.propName返回值可能是字符串、布尔值、对象、undefined等
• 大部分attribute与property是一一对应关系，修改其中一个会影响另一个，如id，title等属性
• 一些布尔属性的检测设置需要hasAttribute和removeAttribute来完成，或者设置对应property
• 像<a href="../index.html">link</a>中href属性，转换成property的时候需要通过转换得到完整URL
• 一些attribute和property不是一一对应如：form控件中对应的是defaultValue，修改或设置value property修改的是控件当前值，setAttribute修改value属性不会改变value property

对象到字符串的转换步骤

1. 如果对象有toString()方法，javascript调用它。如果返回一个原始值（primitive value如：string number boolean）,将这个值转换为字符串作为结果
2. 如果对象没有toString()方法或者返回值不是原始值，javascript寻找对象的valueOf()方法，如果存在就调用它，返回结果是原始值则转为字符串作为结果
3. 否则，javascript不能从toString()或者valueOf()获得一个原始值，此时throws a TypeError

对象到数字的转换步骤

1. 如果对象有valueOf()方法并且返回元素值，javascript将返回值转换为数字作为结果
2. 否则，如果对象有toString()并且返回原始值，javascript将返回结果转换为数字作为结果
3. 否则，throws a TypeError

网络相关

cookies，sessionStorage 和 localStorage 的区别?

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
cookie有path概念，子路径可以访问父路径cookie，父路径不能访问子路径cookie

• 存储大小：
  cookie数据大小不能超过4k。
  sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
• 有期时间：
  localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
  sessionStorage 数据在当前浏览器窗口关闭后自动删除。
  cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

• seessionStorage
  会话级别的存储
  临时性的，页面打开有，页面关闭没有
  数据不共享
  通过a标签来跳出一个页面，则sessionStorage共享

• localStorage
  持久化的本地存储
  永久性的存储
  不能跨域
  数据共享

• cookie
  cookie在同源且符合path规则的文档之间共享
  max-age用秒来设置cookie的生存期。
  如果max-age为0，则表示删除该cookie。
  如果max-age为负数，则表示该cookie仅在本浏览器窗口以及本窗口打开的子窗口内有效，关闭窗口后该cookie即失效。

如何实现浏览器内多个标签页之间的通信?

WebSocket、 SharedWorker ；postMessage
也可以调用localstorge、 cookies 等本地存储方式；
localstorge另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，
我们通过监听事件，控制它的值来进行页面信息通信；
注意quirks： Safari 在无痕模式下设置 localstorge 值时会抛出 QuotaExceededError 的异常；

get和post的区别

http报文

• 起始行： HTTP/1.0 200 OK
• 首部：Content-type:text/plain
  Content-length:19
• 主体：HI IM A MESSAGE

http方法

GET： 请求指定的页面信息，并返回实体主体。
HEAD： 只从服务器获取文档的的首部。
POST： 向服务器发送需要处理的数据
PUT： 将请求的主体部分存储在服务器上
DELETE： 请求服务器删除指定的页面。
OPTIONS： 允许客户端查看服务器的性能。
TRACE：对可能经过代理服务器传送到服务器上去的报文进行追踪

状态码

① 客户方错误
100　 继续
101　 交换协议
② 成功
200 　OK
201 　已创建
202　 接收
203　 非认证信息
204　 无内容
205 　重置内容
206　 部分内容
③ 重定向
300 　多路选择
301　 永久转移
302　 暂时转移
303　 参见其它
304 　未修改（Not Modified）
305　 使用代理
④ 客户方错误
400　 错误请求（Bad Request）
401 　未认证
402 　需要付费
403　 禁止（Forbidden）
404　 未找到（Not Found）
405　 方法不允许
406　 不接受
407　 需要代理认证
408　 请求超时
409　 冲突
410 　失败
411 　需要长度
412　 条件失败
413 　请求实体太大
414 　请求URI太长
415 　不支持媒体类型
⑤ 服务器错误
500　 服务器内部错误
501　 未实现（Not Implemented）
502　 网关失败
504 　网关超时
505 HTTP版本不支持

css和js引入位置

• 浏览器解析html页面首先浏览器先下载html，然后在内存中把html代码转化成Dom Tree，然后浏览器根据Dom Tree上的Node分析css和Images，当文档下载遇到js时，js独立下载。
• js是阻塞加载，会影响页面加载的速度，如果js文件比较大，算法也比较复杂的话，影响更大。CSS放在前端是页面渲染时首先是根据DOM结构生成一个DOM树然后加上CSS样式生成一个渲染树，如果CSS放在后面可能页面会出现闪跳的感觉，或者是白屏或者布局混乱样式很丑直到CSS加载完成。

js异步加载

• 动态创建dom

<script>(function(d,s,id){
    var js,fjs = d.getElementByTagName(s)[0];
    if(d.getElementById(id)) return;
    js = d.createElement(s);
    js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js,fjs);
}(document,'script','facebook-jssdk'));</script>

• async和defer属性
  defer是严格顺序加载，async是哪个先加载完加载哪个
• 通过Ajax获取脚本内容，然后再创建

懒加载

1. 第一种是纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟.

2. 第二种是条件加载，符合某些条件，或触发了某些事件才开始异步下载。

3. 第三种是可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片。

   • 图片的延迟加载
     在页面的load没有触发之前，把所有的指定id的元素内的img放入到imgs中，将所有的图片的src值放入到一个新建的_src属性中，把src设置为指定的显示图片。
     然后，在document.body的scroll事件触发时，循环计算imgs中的img元素位置是否正好在浏览器显示框范围内，如果是，则将img元素的_src属性的值赋给src，这样图片就能显示出来。

预加载

• 用CSS和JavaScript实现预加载:backgrond
• 仅使用JavaScript实现预加载
• 使用Ajax实现预加载

WebSocket与消息推送？

HTTP协议决定了服务器与客户端之间的连接方式，无法直接实现消息推送（ F5 已坏） , 一些变相的解决办法：
双向通信与消息推送

• 短轮询：客户端定时向服务器发送Ajax请求，服务器接到请求后马上返回响应信息并关闭连接。
  优点：后端程序编写比较容易。
  缺点：请求中有大半是无用，浪费带宽和服务器资源。
  实例：适于小型应用。
• 长轮询：客户端向服务器发送Ajax请求，服务器接到请求后 hold 住连接，直到有新消息才返回响应信息并关闭连接，客户端处理完响应信息后再向服务器发送新的请求。
  优点：在无消息的情况下不会频繁的请求，耗费资小。
  缺点：服务器hold连接会消耗资源，返回数据顺序无保证，难于管理维护。 Comet 异步的 ashx ，
  实例：WebQQ、 Hi 网页版、 Facebook IM 。

• 长连接：在页面里嵌入一个隐蔵iframe，将这个隐蔵 iframe 的 src 属性设为对一个长连接的请求或是采用 xhr 请求，服务器端就能源源不断地往客户端输入数据。
  优点：消息即时到达，不发无用请求；管理起来也相对便。
  缺点：服务器维护一个长连接会增加开销。
  实例：Gmail聊天

• Flash Socket：在页面中内嵌入一个使用了 Socket 类的 Flash 程序 JavaScript 通过调用此 Flash 程序提供的 Socket 接口与服务器端的 Socket 接口进行通信， JavaScript 在收到服务器端传送的信息后控制页面的显示。
  优点：实现真正的即时通信，而不是伪即时。
  缺点：客户端必须安装Flash插件；非 HTTP 协议，无法自动穿越防火墙。
  实例：网络互动游戏。

• Websocket:
  WebSocket是 HTML5 开始提供的一种浏览器与服务器间进行全双工(双向同时通信)通讯的网络技术。依靠这种技术可以实现客户端和服务器端的长连接，双向实时通信。
  特点:
  a、事件驱动
  error，message，close，open
  b、异步
  c、使用 ws 或者 wss 协议的客户端 socket
  d、能够实现真正意义上的推送功能
  缺点：少部分浏览器不支持，浏览器支持的程度与方式有区别

长连接短连接

• 长连接: 指在一个TCP连接上可以连续发送多个数据包，
  在TCP连接保持期间，如果没有数据包发送，需要双方发检测包以维持此连接;
  一般需要自己做在线维持。
• 短连接: 指通信双方有数据交互时，就建立一个TCP连接，数据发送完成后，则断开此TCP连接;
  一般银行都使用短连接。
  它的优点是：管理起来比较简单，存在的连接都是有用的连接，不需要额外的控制手段

通常的短连接操作步骤是：
连接→数据传输→关闭连接；

而长连接通常就是：
连接→数据传输→保持连接(心跳)→数据传输→保持连接(心跳)→……→关闭连接；

跨域

同源：两个文档同源需满足

1. 协议相同
2. 域名相同
3. 端口相同

跨域通信：js进行DOM操作、通信时如果目标与当前窗口不满足同源条件，浏览器为了安全会阻止跨域操作。跨域通信通常有以下方法

• 如果是log之类的简单单项通信，新建<img>,<script>,<link>,<iframe>元素，通过src，href属性设置为目标url。实现跨域请求
• 如果请求json数据，使用<script>进行jsonp请求
• 现代浏览器中多窗口通信使用HTML5规范的targetWindow.postMessage(data, origin);其中data是需要发送的对象，origin是目标窗口的origin。window.addEventListener(‘message’, handler, false);handler的event.data是postMessage发送来的数据，event.origin是发送窗口的origin，event.source是发送消息的窗口引用
• 内部服务器代理请求跨域url，然后返回数据
• 跨域请求数据，现代浏览器可使用HTML5规范的CORS功能，只要目标服务器返回HTTP头部Access-Control-Allow-Origin: *即可像普通ajax一样访问跨域资源

缓存

应用程序缓存是 HTML5  的重要特性之一，提供了离线使用的功能，让应用程序可以获取本地的网站内容，例如 HTML 、 CSS 、图片以及JavaScript 。这个特性可以提高网站性能，它的实现借助于 manifest 文件，如下：

<!doctype html>
<html manifest=”example.appcache”>
…..
</html>

//CACHE MANIFEST
第一行，CACHE MANIFEST，是必需的：
CACHE MANIFEST
/theme.css
/logo.gif
/main.js

与传统浏览器缓存相比，它不强制用户访问的网站内容被缓存。

从浏览器地址栏输入url到显示页面的步骤(以HTTP为例)

1. 在浏览器地址栏输入URL
2. 浏览器查看缓存，如果请求资源在缓存中并且新鲜，跳转到转码步骤
   
   1. 如果资源未缓存，发起新请求
   2. 如果已缓存，检验是否足够新鲜，足够新鲜直接提供给客户端，否则与服务器进行验证。
   3. 检验新鲜通常有两个HTTP头进行控制Expires和Cache-Control：
      
      • HTTP1.0提供Expires，值为一个绝对时间表示缓存新鲜日期
      • HTTP1.1增加了Cache-Control: max-age=,值为以秒为单位的最大新鲜时间
3. 浏览器解析URL获取协议，主机，端口，path
4. 浏览器组装一个HTTP（GET）请求报文
5. 浏览器获取主机ip地址，过程如下：
   
   1. 浏览器缓存
   2. 本机缓存
   3. hosts文件
   4. 路由器缓存
   5. ISP DNS缓存
   6. DNS递归查询（可能存在负载均衡导致每次IP不一样）
6. 打开一个socket与目标IP地址，端口建立TCP链接，三次握手如下：
   
   1. 客户端发送一个TCP的SYN=1，Seq=X的包到服务器端口
   2. 服务器发回SYN=1， ACK=X+1， Seq=Y的响应包
   3. 客户端发送ACK=Y+1， Seq=Z
7. TCP链接建立后发送HTTP请求
8. 服务器接受请求并解析，将请求转发到服务程序，如虚拟主机使用HTTP Host头部判断请求的服务程序
9. 服务器检查HTTP请求头是否包含缓存验证信息如果验证缓存新鲜，返回304等对应状态码
10. 处理程序读取完整请求并准备HTTP响应，可能需要查询数据库等操作
11. 服务器将响应报文通过TCP连接发送回浏览器
12. 浏览器接收HTTP响应，然后根据情况选择关闭TCP连接或者保留重用，关闭TCP连接的四次握手如下：
    
    1. 主动方发送Fin=1， Ack=Z， Seq= X报文
    2. 被动方发送ACK=X+1， Seq=Z报文
    3. 被动方发送Fin=1， ACK=X， Seq=Y报文
    4. 主动方发送ACK=Y， Seq=X报文
13. 浏览器检查响应状态吗：是否为1XX，3XX， 4XX， 5XX，这些情况处理与2XX不同
14. 如果资源可缓存，进行缓存
15. 对响应进行解码（例如gzip压缩）
16. 根据资源类型决定如何处理（假设资源为HTML文档）
17. 解析HTML文档，构件DOM树，下载资源，构造CSSOM树，执行js脚本，这些操作没有严格的先后顺序，以下分别解释
18. 构建DOM树：
    
    1. Tokenizing：根据HTML规范将字符流解析为标记
    2. Lexing：词法分析将标记转换为对象并定义属性和规则
    3. DOM construction：根据HTML标记关系将对象组成DOM树
19. 解析过程中遇到图片、样式表、js文件，启动下载
20. 构建CSSOM树：
    
    1. Tokenizing：字符流转换为标记流
    2. Node：根据标记创建节点
    3. CSSOM：节点创建CSSOM树
21. 根据DOM树和CSSOM树构建渲染树:
    
    1. 从DOM树的根节点遍历所有可见节点，不可见节点包括：1）script,meta这样本身不可见的标签。2)被css隐藏的节点，如display: none
    2. 对每一个可见节点，找到恰当的CSSOM规则并应用
    3. 发布可视节点的内容和计算样式
22. js解析如下：
    
    1. 浏览器创建Document对象并解析HTML，将解析到的元素和文本节点添加到文档中，此时document.readystate为loading
    2. HTML解析器遇到没有async和defer的script时，将他们添加到文档中，然后执行行内或外部脚本。这些脚本会同步执行，并且在脚本下载和执行时解析器会暂停。这样就可以用document.write()把文本插入到输入流中。同步脚本经常简单定义函数和注册事件处理程序，他们可以遍历和操作script和他们之前的文档内容
    3. 当解析器遇到设置了async属性的script时，开始下载脚本并继续解析文档。脚本会在它下载完成后尽快执行，但是解析器不会停下来等它下载。异步脚本禁止使用document.write()，它们可以访问自己script和之前的文档元素
    4. 当文档完成解析，document.readState变成interactive
    5. 所有defer脚本会按照在文档出现的顺序执行，延迟脚本能访问完整文档树，禁止使用document.write()
    6. 浏览器在Document对象上触发DOMContentLoaded事件
    7. 此时文档完全解析完成，浏览器可能还在等待如图片等内容加载，等这些内容完成载入并且所有异步脚本完成载入和执行，document.readState变为complete,window触发load事件
23. 显示页面（HTML解析过程中会逐步显示页面）

http缓存

缓存规则解析

ETag的值，默认是对文件的索引节（INode），大小（Size）和最后修改时间（MTime）进行Hash后得到的。
强制缓存如果生效，不需要再和服务器发生交互，而对比缓存不管是否生效，都需要与服务端发生交互。
对于强制缓存，服务器通知浏览器一个缓存时间，在缓存时间内，下次请求，直接用缓存，不在时间内，执行比较缓存策略。
对于比较缓存，将缓存信息中的Etag和Last-Modified通过请求发送给服务器，由服务器校验，返回304状态码时，浏览器直接使用缓存。

判断是否失效

Expires

Expires的值为服务端返回的到期时间，即下一次请求时，请求时间小于服务端返回的到期时间，直接使用缓存数据。
不过Expires 是HTTP 1.0的东西，现在默认浏览器均默认使用HTTP 1.1，所以它的作用基本忽略。
另一个问题是，到期时间是由服务端生成的，但是客户端时间可能跟服务端时间有误差，这就会导致缓存命中的误差。
所以HTTP 1.1 的版本，使用Cache-Control替代。

Cache-Control

Cache-Control 是最重要的规则。常见的取值有private、public、no-cache、max-age，no-store，默认为private。

• private: 客户端可以缓存
• public: 客户端和代理服务器都可缓存（前端的同学，可以认为public和private是一样的）
• max-age=xxx: 缓存的内容将在 xxx 秒后失效
• no-cache: 需要使用对比缓存来验证缓存数据（后面介绍）
• no-store: 所有内容都不会缓存，强制缓存，对比缓存都不会触发（对于前端开发来说，缓存越多越好，so…基本上和它说886）

http2.0新特性

原文

增加二进制分帧

HTTP 2.0在应用层跟传送层之间增加了一个二进制分帧层，从而能够达到在不改动HTTP的语义，HTTP方法，状态码，URI以及首部字段的情况下，突破HTTP 1.1的性能限制，改进传输性能，实现低延迟和高吞吐量

压缩头部

HTTP 2.0在客户端和服务端使用首部表来跟踪和存储之间发送的键-值对，对相同请求而言不需要再次发送请求和相应发送，通信期间几乎不会改变的通用键值,如user-Agent和content-Type值发送一次，相当于做了一层缓存。

• 如果请求不包含首部，如：对同一资源的轮询请求，那首部开销为零字节
• 如果首部发生变化，那只需发送变化的数据在Headers帧里面，新增或修改的首部帧会被追加到首部表

多路复用

对HTTP 1.1而言，浏览器通常有并行连接的限制，即最多几个并行链接。而多路复用允许通过单一的HTTP 2.0连接发起多重的请求-相应消息
这意味着HTTP 2.0的通信都在一个连接上完成了，这个连接可以承载任意数量的双向数据流，直观来说，就是上面我们所做的优化已经不需要了。

请求优先级

所有资源可以并行交错发送， 那想要优先拿到CSS和JS而不是图片怎么办，在每个HTTP 2.0的流里面有个优先值，这个优先值确定着客户端跟服务器处理不同的流采取不同的优先级策略，高优先级优先发送，但这不是绝对的(绝对等待会导致首队阻塞问题)

服务器提示

HTTP 2.0新增加服务器提示，可以先于客户端检测到将要请求的资源，提前通知客户端，服务器不发送所有资源的实体，只发送资源的URL，客户端接到提示后会进行验证缓存，如果真需要这些资源，则正式发起请求（服务器主动更新静态资源）
服务器可以对一个客户端请求发送多个响应。换句话说，服务器除了对最初请求的响应外，还可以额外向客户端推送资源，而无需客户端明确地请求

性能优化

你有哪些性能优化的方法？

（1）、减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。合理设置 HTTP缓存
（2）、前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
（3）、用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
（4）、当需要设置的样式很多时设置className而不是直接操作style。
（5）、少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
（6）、避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
（7）、图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。

操作系统

死锁:

定义

如果一个进程集合中的每个进程都在等待只能由该进程集合中的其他进程才能引发的事件，那么该进程集合就是死锁

资源死锁的条件

• 互斥:每个资源要么已经分配给一个进程，要么没有
• 占有和等待条件:已经得到某个资源的进程可以再请求新的资源
• 不可抢占条件:已经分配给一个进程的资源不能强制性地被抢占，它只能被占有它的进程显式的释放
• 环路等待条件:死锁发生时，系统中一定有由两个或者两个以上的进程组成一条环路，该环路中的每个进程都在等待下一个进程时所占有的资源
  安全序列，银行家算法

死锁预防:

• 破坏互斥条件
• 破坏占有和等待:资源预先分配，所有的进程在开始前请求所需的全部资源，如果全部资源可用。那么就将它们分配给这个进程，于是该进程肯定能够运行结束。如果有一个或者多个资源正被使用，那么不进行分配，进程等待
• 破坏不可抢占条件:
• 破坏环路等待条件:资源统一编号

解决死锁的方法：

1. 不管
2. 管：
   
   1. 不允许发生
      {
      静态：事先预防
      动态：过程中避免
      }
   2. 管不了，还是发生-》检测-》解除

进程

定义：

1. 进程是程序作用在一组数据上的一次执行过程（一次计算）
2. 进程是操作系统中一个可独立调度和资源分配的基本单位
3. 进程是可以和别的计算并发执行的计算

创建进程

4种方法

1. 系统初始化
2. 执行了正在执行的进程所调用的进程创建系统调用
3. 用户请求创建一个新进程
4. 一个批处理作业的初始化

线程

线程是进程的一个实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位.线程自己基本上不拥有系统资源,只拥有一点在运行中必不可少的资源(如程序计数器,一组寄存器和栈),但是它可与同属一个进程的其他的线程共享进程所拥有的全部资源.

进程和线程的联系

• 同一个进程中的多个线程之间可以并发执行.
• 一个程序至少有一个进程,一个进程至少有一个线程.
• 线程的划分尺度小于进程，使得多线程程序的并发性高。
• 进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。

进程间通信

• 共享内存
• 消息机制：消息队列，信箱

• 管道

  1. 管道：是一种半双工的通信方式,数据只能单向流动,而且只能在具有亲缘关系的进程间使用.进程的亲缘关系一般指的是父子关系.管道一般用于两个不同进程之间的通信.当一个进程创建了一个管道,并调用fork创建自己的一个子进程后,父进程关闭读管道端,子进程关闭写管道端,这样提供了两个进程之间数据流动的一种方式.
  2. 消息队列( message queue ) ： 消息队列是由消息的链表，存放在内核中并由消息队列标识符标识。消息队列克服了信号传递信息少、管道只能承载无格式字节流以及缓冲区大小受限等缺点。
  3. 共享内存( shared memory ) ：共享内存就是映射一段能被其他进程所访问的内存，这段共享内存由一个进程创建，但多个进程都可以访问。共享内存是最快的 IPC 方式，它是针对其他进程间通信方式运行效率低而专门设计的。它往往与其他通信机制，如信号两，配合使用，来实现进程间的同步和通信。
  4. 套接字( socket ) ： 套解口也是一种进程间通信机制，与其他通信机制不同的是，它可用于不同机器间的进程通信。
  5. 信号量：是一个计数器,可以用来控制多个线程对共享资源的访问.,它不是用于交换大批数据,而用于多线程之间的同步.它常作为一种锁机制,防止某进程在访问资源时其它进程也访问该资源.因此,主要作为进程间以及同一个进程内不同线程之间的同步手段.

cpu调度

• 选择内存上的处于就绪状态的进程，并分配CPU给它们使用（依照算法）。
  通过多道程序设计可以尽可能高的提高CPU利用率，但道数不可能无限增加。

同时：　宏观－程序进入内存，被操作系统调度； 微观－进程正在CPU上运行(Running)

调度：切换的过程中，切换越多，系统消耗越多，故道数不可能无限增加（另外还有内存方面的考虑）

调度准则(Scheduling Criteria)

• CPU利用率(CPU utilization)

  • 吞吐量(Throughout)：单位时间内执行作业的数量。
  • 周转时间(Turnaround time)：提交完毕->执行结束所需时间。
  • 等待时间(Waiting time)：在就绪队列内等待的时间，多次等待时间做和。
  • 响应时间(Response time)：提交完成->首次给出相应所需时间。

• 调度算法(Scheduling Algorithms)

  • First-Come,First-Served(FCFS)：先来先服务的调度原则
  • Shortest-Job-First(SJF) Scheduling：短作业优先调度原则
  • Priority Scheduling：优先级调度原则
  • Round-Robin Scheduling：时间块调度原则
  • Multilevel Queue Scheduling：多级队列调度原则
  • Multilevel Feedback Queue：多级反馈队列调度原则

工具

webpack

作用

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

优点

模块化

在webpack看来一切都是模块！这就是它不可不说的优点，包括你的JavaScript代码，也包括CSS和fonts以及图片等等等，只有通过合适的loaders，它们都可以被当做模块被处理。
CSS

1. css
   webpack提供两个工具处理样式表，css-loader 和 style-loader，二者处理的任务不同，css-loader使你能够使用类似@import 和 url(…)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。
2. css modules
   CSS modules 的技术就意在把JS的模块化思想带入CSS中来，通过CSS模块，所有的类名，动画名默认都只作用于当前模块。Webpack从一开始就对CSS模块化提供了支持，在CSS loader中进行配置后，你所需要做的一切就是把”modules“传递都所需要的地方，然后就可以直接把CSS的类名传递到组件的代码中，且这样做只对当前组件有效，不必担心在不同的模块中具有相同的类名可能会造成的问题。
3. CSS预编译
4. webpack-pulgins
5. 热更新