总结一些常用面试题，简单版，希望对刚毕业找工作的小伙伴有用
HTML
1、输入完网址按下回车，到看到网页这个过程中发生了什么？
答案：
1. 域名解析
2. 发起TCP的3次握手(ACK ACK+SYN ACK)x
3. 建立TCP连接后发起http请求
4. 服务器端响应http请求，浏览器得到html代码
5. 浏览器解析html代码，并请求html代码中的资源
6. 浏览器对页面进行渲染呈现给用户
2、Doctype作用？标准模式与兼容模式各有什么区别?
答案：
1. <!DOCTYPE>声明位于位于HTML文档中的第一行，处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。
2. 标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。
3. 在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
4. DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
3、HTML5 为什么只需要写 ？
答案：
1. HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；
2. 而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
4、你知道多少种Doctype文档类型？
答案：
1. 标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
2. HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
3. XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
4. Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页。
5. Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。
5、HTML与XHTML——二者有什么区别？
答案：
1. XHTML 元素必须被正确地嵌套。
2. XHTML 元素必须被关闭。
3. 标签名必须用小写字母。
4. XHTML 文档必须拥有根元素。
6、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
答案：
首先：CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素。
1. 行内元素有：a b span img input select strong（强调的语气）；
2. 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4 p
3. 常见的空元素：br hr img input link meta
7、页面导入样式时，使用link和@import有什么区别？
答案：
1. link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
2. 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
3. import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;
8、介绍一下你对浏览器内核的理解？
答案：
1. 主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
2. 渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
3. JS引擎则：解析和执行javascript来实现网页的动态效果。
4. 最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。
9、浏览器的内核有哪些?
答案：
1. IE内核为Trident、
2. Mozilla内核为Gecko、
3. Chrome内核为Blink（WebKit的分支）、
4. Opera内核原为Presto，现为Blink、
5. safari内核为webkit。
10、语义化的理解？
答案：
1. 用正确的标签做正确的事情！
2. html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
3. 在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。
4. 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
5. 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
11、什么叫优雅降级和渐进增强？
答案：
1. 渐进增强 progressive enhancement：
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
2. 优雅降级 graceful degradation：
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：
3. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给
4. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要
5. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带
12、请你谈谈Cookie的弊端？
答案：
1. 每个特定的域名下最多生成的cookie个数有限制, 超出的会被截掉：
IE6或更低版本最多20个cookie
IE7和之后的版本最后可以有50个cookie。
Firefox最多50个cookie
chrome和Safari没有做硬性限制
2. IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie；
3. cookie的最大大约为4096字节，为了兼容性，一般不能超过4095字节；
4. 安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。
5. 有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。
6. IE提供了一种存储可以持久化用户数据，叫做userdata，从IE5.0就开始支持。每个数据最多128K，每个域名下最多1M。这个持久化数据放在缓存中，如果缓存没有清理，那么会一直存在。
7. 优点：极高的扩展性和可用性：
通过良好的编程，控制保存在cookie中的session对象的大小。
通过加密和安全传输技术（SSL），减少cookie被破解的可能性。
只在cookie中存放不敏感数据，即使被盗也不会有重大损失。
控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。
13、什么是HTML5的离线储存，工作原理，以及怎么使用？
答案：
1. 在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。
2. 原理：
在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
离线的情况下，浏览器就直接使用离线存储的资源。
3. 如何使用：
页面头部像下面一样加入一个manifest的属性；
在cache.manifest文件的编写离线存储的资源；
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
在离线状态时，操作window.applicationCache进行需求实现。
14、什么是web storage？
答案：
1. localStorage：长期存储数据，浏览器关闭后数据不丢失；
2. sessionStorage：数据在浏览器关闭后自动删除；
3. localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等。
15、web storage和cookie的区别？
答案：
1. Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽；
2. 另外cookie还需要指定作用域，不可以跨域调用。
3. Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie；
4. 但是cookie也是不可以或缺的：cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生；
5. 浏览器除了IE７及以下不支持外，其他标准浏览器都完全支持(ie及FF需在web服务器里运行)，值得一提的是IE总是办好事，例如IE7、IE6中的userData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。
16、请描述一下 cookies，sessionStorage 和 localStorage 的区别？
答案：
1. cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
2. cookie数据始终在同源的http请求中携带（即使不需要），即会在浏览器和服务器间来回传递。
3. sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
4. sessionStorage和localStorage有更多丰富易用的接口；
5. sessionStorage和localStorage各自独立的存储空间；
存储大小：
6. cookie数据大小不能超过4k；sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
7. localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
8. sessionStorage 数据在当前浏览器窗口关闭后自动删除。
9. cookie设置的过期时间之前一直有效，即使窗口或浏览器关闭
10. 所以个人建议：将登陆信息等重要信息存放为SESSION；其他信息如果需要保留，可以放在COOKIE中
17、iframe有哪些缺点？
答案：
1. iframe会阻塞主页面的Onload事件；
2. iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
3. 使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以可以绕开以上两个问题。
18、HTML5的form如何关闭自动完成功能？
答案：
给不想要提示的 form 或下某个input 设置为 autocomplete=off。
19、如何实现浏览器内多个标签页之间的通信?
答案：
1. WebSocket、SharedWorker；
2. 也可以调用localstorge、cookies等本地存储方式。
3. 如：localstorge另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，通过监听事件，控制它的值来进行页面信息通信；
4. 注意quirks：Safari 在无痕模式下设置localstorge值时会抛出 QuotaExceededError 的异常；
20、webSocket如何兼容低浏览器？
答案：
Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基于 multipart 编码发送 XHR 、 基于长轮询的 XHR
21、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和HTML5？
答案：
1. HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加：
绘画 canvas
用于媒介回放的
video 和 audio 元素
本地离线存储
语意化更好的内容元素，比如 article、footer、header、nav、section
表单控件，calendar、date、time、email、url、search
新的技术webworker, websockt, Geolocation
2. 移除的元素
纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；
3. IE8/IE7/IE6支持通过document.createElement方法产生的标签， 可以利用这一特性让这些浏览器支持HTML5新标签，
浏览器支持新标签后，还需要添加标签默认的样式；当然最好的方式是直接使用成熟的框架、使用最多的是html5shiv框架
<!--[if lt IE 9]>
<script> src="html5shiv.js"</script>
<![endif]-->
4. 如何区分： DOCTYPE声明\新增的结构元素\功能元素
22、请阐述table的缺点？
答案：
1. 太深的嵌套，比如table>tr>td>h3，会导致搜索引擎读取困难，而且，最直接的损失就是大大增加了冗余代码量。
2. 灵活性差，比如要将tr设置border等属性，是不行的，得通过td
3. 代码臃肿，当在table中套用table的时候，阅读代码会显得异常混乱
4. 混乱的colspan与rowspan，用来布局时，频繁使用他们会造成整个文档顺序混乱。
5. table需要多次计算才能确定好其在渲染树中节点的属性，通常要花3倍于同等元素的时间。
6. 不够语义
23、简述一下src与href的区别？
答案：
1. src用于替换当前元素；href用于在当前文档和引用资源之间确立联系。
2. src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置
3. href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接。
CSS
1、 什么是CSS的盒子模型？
答案：
1. 有两种， IE 盒子模型、标准 W3C 盒子模型；
2. IE盒模型的content（包含了 border 和 padding）、边界（margin）;
3. 盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).
2、样式继承？
答案：
1. 可继承的样式： font-size font-family color等;
2. 不可继承的样式：border padding margin width height等;
3、选择器的优先级？
答案：
1. !important > id > class > tag
2. important 比 内联优先级高
4、一个满屏 品 字布局 如何设计?
答案：
简单的方式：
上面的div宽100%，
下面的两个div分别宽50%，
然后用float或者inline使其不换行即可
5、为什么要初始化CSS样式？
答案：
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
6、对BFC规范的理解？
答案：
1. （W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关 系和相互作用。）
2. 一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。
3. 不同类型的 Box,会参与不同的 Formatting Context（决定如何渲染文档的容器）,因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响。
7、如果需要手动写动画，你认为最小时间间隔是多久，为什么？
答案：
1000/60 = 16.7ms
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms
8、position的值relative和absolute定位原点是？
答案：
relative absolute fixed static inherit
1. absolute：生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。
2. fixed （老IE不支持）：生成绝对定位的元素，相对于浏览器窗口进行定位。
3. relative：生成相对定位的元素，相对于其正常位置进行定位。
4. static： 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。
5. inherit：规定从父元素继承 position 属性的值。
9、用纯CSS创建一个三角形的原理是什么？
答案：
把上、左、右三条边隐藏掉（颜色设为 transparent）
#demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
10、请列举几种可以清除浮动的方法（至少两种）？
答案：
浮动会漂浮于普通流之上，像浮云一样，但是只能左右浮动。正是这种特性，导致框内部由于不存在其他普通流元素了，表现出高度为0（高度塌陷）。
1. 添加额外标签，例如<div style="clear:both"></div>
2. 使用br标签和其自身的html属性，例如<br clear="all" />
3. 父元素设置 overflow：hidden；在IE6中还需要触发hasLayout，例如zoom：1；
4. 父元素设置 overflow：auto 属性；同样IE6需要触发hasLayout
5. 父元素也设置浮动
6. 父元素设置display:table
7. 使用:after 伪元素；由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
11、请列举几种隐藏元素的方法？
答案：
1. visibility: hidden；这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在；
2. opacity: 0；一个CSS3属性，设置0可以使一个元素完全透明，制作出和visibility一样的效果。与visibility相比，它可以被transition和animate；
3. position: absolute；使元素脱离文档流，处于普通文档之上，给它设置一个很大的left负值定位，使元素定位在可见区域之外；
4. display: none；元素会变得不可见，并且不会再占用文档的空间；
5. transform: scale(0)；将一个元素设置为无限小，这个元素将不可见。这个元素原来所在的位置将被保留；
6. HTML5的hidden属性；hidden属性的效果和display:none;相同，这个属性用于记录一个元素的状态；
7. height: 0; overflow: hidden；将元素在垂直方向上收缩为0,使元素消失。只要元素没有可见的边框，该技术就可以正常工作；
8. filter: blur(0)；将一个元素的模糊度设置为0，从而使这个元素“消失”在页面中。
12、CSS伪类与CSS伪对象的区别？
答案：
1. CSS 引入伪类和伪元素的概念是为了描述一些现有CSS无法描述的东西；根本区别在于：它们是否创造了新的元素（抽象）；
2. 伪类：一开始用来表示一些元素的动态状态，随后CSS2标准扩展了其概念范围，使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类；
3. 伪对象：代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。
13、请写出多种等高布局？
答案：
1. 假等高列：使用背景图片，在列的父元素上使用这个背景图进行Y轴的铺放，从而实现一种等高列的假像；
2. 给容器div使用单独的背景色（固定布局）（流体布局）：用<div>元素中的最大高度撑大其他的<div>容器高度；
3. 创建带边框的两列等高布局：用border-left来做，只能使用两列；
4. 使用正padding和负margin对冲实现多列布局方法：在所有列中使用正的上、下padding和负的上、下margin，并在所有列外面加上一个容器，设置overflow:hiden把溢出背景切掉；
5. 使用边框和定位模拟列等高：但不能使用在多列；
6. 模仿表格布局等高列效果：兼容性不好，在ie6-7无法正常运行。
14、不定宽度块状元素如何水平居中？
答案：
1.
Element_father{
float: left; /* 自适应内容宽度 */
position: relative; left: 50%;
}
Element_children{
position: relative; left: -50%;
}
2. 利用表格
15、如何实现左右两列布局，左边自适应，右边固定宽度？
答案：
左侧自适应外包裹{width:100%;float:left;}
左侧自适应{margin-right:width}
右侧固定{width+float:right+margin-left:-width;}
16、在CSS样式中常使用px、em，各有什么优劣，在表现上有什么区别？
答案：
1. px是相对长度单位，相对于显示器屏幕分辨率而言的。
2. em是相对长度单位，相对于当前对象内文本的字体尺寸。
3. px定义的字体，无法用浏览器字体放大功能。
4. em的值并不是固定的，会继承父级元素的字体大小，1 ÷ 父元素的font-size × 需要转换的像素值 = em值。
17、什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？
答案：
如果使用import方法对CSS进行导入，会导致某些页面在Windows下的IE出现一些奇怪的现象：
以无样式显示页面内容的瞬间闪烁，这种现象称之为文档样式短暂失效(Flash of Unstyled Content)，简称为FOUC。
原理：当样式表晚于结构性html加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。
解决方法：使用LINK标签将样式表放在文档HEAD中。
18、line-height三种赋值方式有何区别？（带单位、纯数字、百分比）？
答案：
1. 带单位：px不用计算；
2. em则会使元素以其父元素font-size值为参考来计算自己的行高；
3. 纯数字：把比例传递给后代，例如父级行高为1.5，子元素字体为18px，则子元素行高为1.5*18=27px；
4. 百分比：将计算后的值传递给后代。
19、:link、:visited、:hover、:active的执行顺序是怎么样的？
答案：
L-V-H-A，l(link)ov(visited)e h(hover)a(active)te，即用喜欢和讨厌两个词来概括
20、雪碧图原理？
答案：
1. CSS图像拼接技术英文成为css sprite是一种比较流行的网页图片处理方式，即将所有零碎的网页背景图片整合到一起，这样做可以有效的减少http对图片的请求次数，而不需要加载多次加载零碎的背景图片，所以合理的利用好它可以有效的提高网页的加载速度。
2. CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位。
常见兼容性问题
1、png24位的图片在iE6浏览器上出现背景。
解决方案：
将图片做成PNG8格式。
2、浏览器默认的margin和padding不同?
解决方案：
进行样式重置。
3、IE6双边距bug？
原因：块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
解决方案：
在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)
。
4、min-height在IE6下不起作用。
解决方案：
{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
5、透明性IE用filter:Alpha(Opacity=60)，而其他主流浏览器用 opacity:0.6。
6、z-index问题。
解决办法：
1. 在IE6、7（混杂模式IE8）下的层级高低不仅要看本身，还要看自己的父元素是否给力：
父元素的 position 属性为 relative或absolute 时，子元素的 absolute 属性是相对于父元素而言的。而在IE6下的层级的表现有时候不是看子元素的 z-index 多高，而要看它们的父元素的 z-index 谁高谁低。
2. 当父元素设置relative，子元素设置float后，z-index会失效；所以要将relative更改为absolute或者去掉浮动。
JavaScript
1、如何使用严格模式？
答案：
"use strict";
2、介绍js的基本数据类型？
答案：
Number、String、Boolean、Object、Undefined、Null、新增一个Symbol
3、js有哪些内置对象？
答案：
1. Object 是 JavaScript 中所有对象的父对象；
2. 数据封装类对象：Object、Array、Boolean、Number 和 String；
3. 其他对象：Function、Arguments、Math、Date、RegExp、Error。
4ate Array function argument math string boolean error
4、说几条写JavaScript的基本规范？
答案：
1. 不要在同一行声明多个变量。
2. 请使用 ===/!==来比较true/false或者数值
3. 使用对象字面量替代new Array这种形式
4. 不要使用全局函数。
5. Switch语句必须带有default分支
6. 函数不应该有时候有返回值，有时候没有返回值。
7. For循环必须使用大括号
8. If语句必须使用大括号
9. for-in循环中的变量 应该使用var关键字明确限定作用域，从而避免作用域污染。
5、null，undefined 的区别？
答案：
1. null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。
2. 当声明的变量还未被初始化时，变量的默认值为undefined。
null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。
3. undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是：
变量被声明了，但没有赋值时，就等于undefined。
调用函数时，应该提供的参数没有提供，该参数等于undefined。
对象没有赋值的属性，该属性的值为undefined。
函数没有返回值时，默认返回undefined。
4. null表示"没有对象"，即该处不应该有值。典型用法是：
作为函数的参数，表示该函数的参数不是对象。
作为对象原型链的终点。
6、document.write和 innerHTML的区别？
答案：
1. document.write只能重绘整个页面
2. innerHTML可以重绘页面的一部分
7、谈谈This对象的理解？
答案：
1. this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。但是有一个总原则，那就是this指的是调用函数的那个对象。
2. this一般情况下：是全局对象Global。 作为方法调用，那么this就是指这个对象。
8、new操作符具体干了什么呢?
答案：
1. 创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
2. 属性和方法被加入到 this 引用的对象中。
3. 新创建的对象由 this 所引用，并且最后隐式的返回 this 。
9、eval是做什么的？
答案：
1. 它的功能是把对应的字符串解析成JS代码并运行；
2. 应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。
3. 由JSON字符串转换为JSON对象的时候可以用eval，var obj =eval('('+ str +')');
10、什么是闭包（closure），为什么要用它？
答案：
1. 闭包是一种特殊的对象。它由两部分构成：函数，以及创建该函数的环境。
2. 可以把闭包简单理解成 "定义在一个函数内部的函数"，闭包就是将函数内部和函数外部连接起来的一座桥梁。
3. 使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。在js中，函数即闭包，只有函数才会产生作用域的概念。
11、js如何判断一个数组？
答案：
1、利用 instanceof
比如： arr instanceof Array
2、typeof只会会将Array和null都监测为Object
3、自己写一个函数监测类型，
如下：
function isArrayFn(value){
// 首先判断浏览器是否支持Array.isArray这个方法
if (typeof Array.isArray === "function") {
return Array.isArray(value);
}else{
return Object.prototype.toString.call(value) === "[object Array]";
// return obj.__proto__ === Array.prototype;
}
}
4、使用Object.prototype.toString.call()原型链上进行操作
比如：Object.prototype.toString.call( [] ) === '[object Array]' // true
5、利用Array.isArray()
比如：Array.isArray([)
12、.call() 和 .apply() 的区别？
答案：
例子中用 add 来替换 sub，add.call(sub,3,1) == add(3,1) ，所以运行结果为：alert(4);
注意：js 中的函数其实是对象，函数名是对 Function 对象的引用。
function add (a,b) {
alert(a+b);
}
function sub (a,b) {
alert(a-b);
}
add.call(sub,3,1);
13、Javascript如何实现继承？
答案：
通过原型和构造器
14、JavaScript原型，原型链 ? 有什么特点？
答案：
每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去，也就是我们平时所说的原型链的概念。
特点：JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。
当我们需要一个属性的时，Javascript引擎会先看当前对象中是否有这个属性， 如果没有的话，就会查找他的Prototype对象是否有这个属性，如此递推下去，一直检索到 Object 内建对象。
15、Javascript作用链域?
答案：
全局函数无法查看局部函数的内部细节，但局部函数可以查看其上层的函数细节，直至全局细节。当需要从局部函数查找某一属性或方法时，如果当前作用域没有找到，就会上溯到上层作用域查找，直至全局函数，这种组织形式就是作用域链。
16、如何判断一个对象是否属于某个类？
答案：
if(a instanceof Person){
alert('yes');
}
17、Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？
答案：
hasOwnProperty：是用来判断一个对象是否有你给出名称的属性或对象。不过需要注意的是，此方法无法检查该对象的原型链中是否具有该属性，该属性必须是对象本身的一个成员
比如：. object.hasOwnProperty(proName);
判断proName的名称是不是object对象的一个属性或对象。
18、JSON 的了解？
答案：
1. JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
2. 它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小。
{"age":"12", "name":"back"}
19、XML和JSON的区别？
答案：
1. JSON相对于XML来讲，数据的体积小，传递的速度更快些。
2. JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。
3. JSON对数据的描述性比XML较差。
4. JSON的速度要远远快于XML。
20、js延迟加载的方式有哪些？
答案：
defer和async、动态创建DOM方式（用得最多）、按需异步载入js。
21、异步加载的方式有哪些？
答案：
1. defer，只支持IE
2. async：
3. 创建script，插入到DOM中，加载完毕后callBack
22、那些操作会造成内存泄漏？
答案：
1. 内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
2. 垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。
3. setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
4. 闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）
23、ajax 是什么?
答案：
1. ajax的全称：Asynchronous Javascript And XML。
1. 异步传输+js+xml。
所谓异步，在这里简单地解释就是：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果它自己会根据设定进行后续操作，与此同时，页面是不会发生整页刷新的，提高了用户体验。
3. 创建过程：
创建XMLHttpRequest对象,也就是创建一个异步调用对象;
创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息;
设置响应HTTP请求状态变化的函数;
发送HTTP请求;
获取异步调用返回的数据;
使用JavaScript和DOM实现局部刷新。
24、Ajax各自的优缺点，在使用中如何取舍？
答案：
1. Flash：
Flash适合处理多媒体、矢量图形、访问机器
对CSS、处理文本上不足，不容易被搜索
2. Ajax：
Ajax对CSS、文本支持很好，支持搜索;
多媒体、矢量图形、机器访问不足.
3. 共同点：
与服务器的无刷新传递消息
可以检测用户离线和在线状态
操作DOM
25、同步和异步的区别?
答案：
1. 同步的概念应该是来自于OS中关于同步的概念:不同进程为协同完成某项工作而在先后次序上调整(通过阻塞,唤醒等方式).同步强调的是顺序性.谁先谁后.异步则不存在这种顺序性。
同步：浏览器访问服务器请求，用户看得到页面刷新，重新发请求,等请求完，页面刷新，新内容出现，用户看到新内容,进行下一步操作。
2. 异步：浏览器访问服务器请求，用户正常操作，浏览器后端c、进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容。
26、请解释一下 JavaScript 的同源策略。
答案：
是指协议，域名，端口相同，同源策略是一种安全协议。指一段脚本只能读取来自同一来源的窗口和文档的属性。
27、如何解决跨域问题?
答案：
jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面
28、写一个通用的事件侦听器函数。
答案：
// event(事件)工具集
markyun.Event = {
// 页面加载完成后
readyEvent : function(fn) {
if (fn==null) {
fn=document;
}
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = fn;
} else {
window.onload = function() {
oldonload();
fn();
};
}
},
// 视能力分别使用dom0||dom2||IE方式 来绑定事件
// 参数： 操作的元素,事件名称 ,事件处理程序
addEvent : function(element, type, handler) {
if (element.addEventListener) {
//事件类型、需要执行的函数、是否捕捉
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, function() {
handler.call(element);
});
} else {
element['on' + type] = handler;
}
},
// 移除事件
removeEvent : function(element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.datachEvent) {
element.detachEvent('on' + type, handler);
} else {
element['on' + type] = null;
}
},
// 阻止事件 (主要是事件冒泡，因为IE不支持事件捕获)
stopPropagation : function(ev) {
if (ev.stopPropagation) {
ev.stopPropagation();
} else {
ev.cancelBubble = true;
}
},
// 取消事件的默认行为
preventDefault : function(event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
// 获取事件目标
getTarget : function(event) {
return event.target || event.srcElement;
},
// 获取event对象的引用，取到事件的所有信息，确保随时能使用event；
getEvent : function(e) {
var ev = e || window.event;
if (!ev) {
var c = this.getEvent.caller;
while (c) {
ev = c.arguments[0];
if (ev && Event == ev.constructor) {
break;
}
c = c.caller;
}
}
return ev;
}
};
29、AMD、CMD、Common js规范区别？
答案：
1. AMD 提前执行依赖 - 尽早执行，requireJS 是它的实现
2. CMD 按需执行依赖 - 懒执行，seaJS 是它的实现
3. CommonJS是服务器端模块的规范，Node.js采用了这个规范。CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。AMD规范则是非同步加载模块，允许指定回调函数。
nodejs
1、对Node的优点和缺点提出了自己的看法？
答案：
优点:
因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求，因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。
此外，与Node代理服务器交互的客户端代码是由javascript语言编写的，因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情。
缺点：
Node是一个相对新的开源项目，所以不太稳定，它总是一直在变，
而且缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子。
2、如何判断当前脚本运行在浏览器还是node环境中？
答案：
通过判断Global对象是否为window，如果不为window，当前脚本没有运行在浏览器中。
经典面试题
1、实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果？
答案：<div style="height:1px;overflow:hidden;background:red"></div>
2、如下代码会在控制台打印出什么？
(function () { var a = b = 5; })(); console.log(b);
答案：5
原理分析： 这个问题的陷阱就是，在立即执行函数表达式中，有两个命名，但是其中变量是通过关键词var来声明的。这就意味着a是这个函数的局部变量。与此相反，b是在全局作用域下的。
3、执行以下代码会有什么结果？
function test () {
console.log(a);
console.log(foo());
var a = 1;
function foo() {
return 2;
}
}
test();
答案：undefined 和 2
原理分析：这个结果的原因是，变量和函数都被提升了（hoisted）。因此，在a被打印的时候，它已经在函数作用域中存在（即它已经被声明了），但是它的值依然是 undefined。
4、以下代码结果是多少？
var fullname = 'John Doe';
var obj = {
fullname:'Colin Ihrig',
prop: {
fullname:'Aurelio De Rose',
getFullname: function () {
return this.fullname;
}
}
};
console.log(obj.prop.getFullname());
var test = obj.prop.getFullname;
console.log(test());
答案：Aurelio De Rosa 和 John Doe
原理分析：原因是在 JavaScript 中，一个函数的上下文环境，也就是this关键词所引用对象，是依赖于函数是如何被调用的，而不是依赖于函数如何被定义的。 在第一个 console.log() 调用中， getFullname() 是作为 obj.prop 的函数被调用的。因此，这里的上下文环境指向后者并且函数返回this对象的 fullname 属性。相反，当 getFullname() 被赋为test变量的值时，那个语境指向全局对象(window)。这是因为，test 被隐式设置为全局对象的属性。因此，函数调用返回 window 的 fullname 属性值，在此段代码中，这个值是通过第一行赋值语句设置的。
5、["1", "2", "3"].map(parseInt) 答案是多少？
答案：[1, NaN, NaN]
原理分析：因为 parseInt 需要两个参数 (val, radix)，其中 radix 表示解析时用的基数。map 传了 3 个 (element, index, array)，对应的 radix 不合法导致解析失败。
6、实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制？
答案：
Object.prototype.clone = function(){
var o = this.constructor === Array ? [] : {};
for(var e in this) {
o[e] = typeof this[e] === "object" ? this[e].clone() : this[e];
}
return o;
}
7、如何删除一个cookie？
答案：
1. 将时间设为当前时间往前一点。
var date = new Date();
date.setDate(date.getDate() - 1);//真正的删除
2. expires的设置
document.cookie = 'user='+ encodeURIComponent('name') + ';expires = ' + new Date(0)
面试问题
1、页面重构怎么操作？
答案：
1. 网站重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。也就是说是在不改变UI的情况下，对网站进行优化，在扩展的同时保持一致的UI。
2. 对于传统的网站来说重构通常是：
表格(table)布局改为DIV+CSS；
使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)；
对于移动平台的优化；
针对于SEO进行优化；
3. 深层次的网站重构应该考虑的方面：
减少代码间的耦合；
让代码保持弹性；
严格按规范编写代码；
设计可扩展的API；
代替旧有的框架、语言(如VB)；
增强用户体验；
4. 通常来说对于速度的优化也包含在重构中：
压缩JS、CSS、image等前端资源(通常是由服务器来解决)；
程序的性能优化(如数据读写)；
采用CDN来加速资源加载；
对于JS DOM的优化；
HTTP服务器的文件缓存；
2、列举IE 与其他浏览器不一样的特性？
答案：
事件不同之处：
触发事件的元素被认为是目标（target）。而在 IE 中，目标包含在 event 对象的 srcElement 属性；
获取字符代码、如果按键代表一个字符（shift、ctrl、alt除外），IE 的 keyCode 会返回字符代码（Unicode），DOM 中按键的代码和字符是分离的，要获取字符代码，需要使用 charCode 属性；
阻止某个事件的默认行为，IE 中阻止某个事件的默认行为，必须将 returnValue 属性设置为 false，Mozilla 中，需要调用 preventDefault() 方法；
停止事件冒泡，IE 中阻止事件进一步冒泡，需要设置 cancelBubble 为 true，Mozzilla 中，需要调用 stopPropagation()；
3、99%的网站都需要被重构是那本书上写的？
答案：
网站重构：应用web标准进行设计（第2版）
4、是否了解公钥加密和私钥加密？
答案：
1. 一般情况下是指私钥用于对数据进行签名，公钥用于对签名进行验证;
2. HTTP网站在浏览器端用公钥加密敏感数据，然后在服务器端再用私钥解密。
5、WEB应用从服务器主动推送Data到客户端有那些方式？
答案：
1. html5提供的Websocket；
2. 不可见的iframe；
3. WebSocket通过Flash；
4. XHR长时间连接；
5. XHR Multipart Streaming；
6. <script>标签的长时间连接(可跨域)。
6、你有哪些性能优化的方法？
答案：
1. 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
2. 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
3. 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
4. 当需要设置的样式很多时设置className而不是直接操作style。
5. 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
6. 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
7. 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
8. 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。
9. 对普通的网站有一个统一的思路，就是尽量向前端优化、减少数据库操作、减少磁盘IO。向前端优化指的是，在不影响功能和体验的情况下，能在浏览器执行的不要在服务端执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取得的结果不要到外部取得，本机内能取得的数据不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询。减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成（例如join查询），减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分，换语言是无法“优化”的。
7、对前端界面工程师这个职位是怎么样理解的？
答案：
1. 前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好
2. 参与项目，快速高质量完成实现效果图，精确到1px；
3. 与团队成员，UI设计，产品经理的沟通；
4. 做好的页面结构，页面重构和用户体验；
5. 处理hack，兼容、写出优美的代码格式；
6. 针对服务器的优化、拥抱最新前端技术。
8、平时如何管理你的项目？
答案：
1. 先期团队必须确定好全局样式（globe.css），编码模式(utf-8) 等；
2. 编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；
3. 标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；
4. 页面进行标注（例如 页面 模块 开始和结束）；
5. CSS跟HTML 分文件夹并行存放，命名都得统一（例如style.css）；
6. JS 分文件夹存放 命名以该JS功能为准的英文翻译。
7. 图片采用整合的 images.png png8 格式文件使用 尽量整合在一起使用方便将来的管理
另外可能问到的题目，准备一下总没错啦
除了前端以外还了解什么其它技术么？你最最厉害的技能是什么？
你常用的开发工具是什么，为什么？
CSS优化、提高性能的方法有哪些？
浏览器是怎样解析CSS选择器的？
在网页中的应该使用奇数还是偶数的字体？为什么呢？
margin和padding分别适合什么场景使用？
抽离样式模块怎么写，说出思路，有无实践经验？
元素竖向的百分比设定是相对于容器的高度吗？
全屏滚动的原理是什么？用到了CSS的那些属性？
什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
视差滚动效果，如何给每页做不同的动画？（回到顶部，向下滑动要再次出现，和只出现一次分别怎么做？）
::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用？
如何修改chrome记住密码后自动填充表单的黄色背景 ？
你对line-height是如何理解的？
设置元素浮动后，该元素的display值是多少？（自动变成display:block）？
让页面里的字体变清晰，变细用CSS怎么做？（-webkit-font-smoothing: antialiased;）？
font-style属性可以让它赋值为"oblique" oblique是什么意思？
position:fixed;在android下无效怎么处理？
overflow: scroll时不能平滑滚动的问题怎么处理？
完整概述一个你感觉最你自己做过最棒的项目？
原来公司工作流程是怎么样的，如何与其他人协作的？如何夸部门合作的？
关于公司你有什么想问的或者说是想了解的？
你遇到过比较难的技术问题是？你是如何解决的？
常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？
加班的看法？
你怎么看待Web App 、hybrid App、Native App？
说说最近最流行的一些东西吧？常去哪些网站？
简单描述一下你做过的移动APP项目研发流程？
你在现在的团队处于什么样的角色，起到了什么明显的作用？
你认为怎样才是全端工程师（Full Stack developer）？
介绍一个你最得意的作品吧？
你的优点是什么？缺点是什么？
如何管理前端团队?
你有自己的技术博客吗，用了哪些技术？
最近在学什么？能谈谈你未来3，5年给自己的规划吗？
对前端安全有什么看法？
是否了解Web注入攻击，说下原理，最常见的两种攻击（XSS 和 CSRF）了解到什么程度？
项目中遇到国哪些印象深刻的技术难题，具体是什么问题，怎么解决？
最近在学什么东西？
进阶篇
1、线程与进程的区别？
答案：
1. 一个程序至少有一个进程，一个进程至少有一个线程
2. 线程的划分尺度小于进程，使得多线程程序的并发性高
3. 进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率
4. 每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制
5. 多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。
2、一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验？
答案：
1. 图片懒加载，滚动到相应位置才加载图片。
2. 图片预加载，如果为幻灯片、相册等，将当前展示图片的前一张和后一张优先下载。
3. 使用CSSsprite，SVGsprite，Iconfont、Base64等技术，如果图片为css图片的话。
4. 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
3、哪些地方会出现css阻塞，哪些地方会出现js阻塞？
答案：
js 的阻塞特性：所有浏览器在下载 JS 的时候，会阻止一切其他活动，比如其他资源的下载，内容的呈现等等。直到 JS 下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。为了提高用户体验，新一代浏览器都支持并行下载 JS，但是 JS 下载仍然会阻塞其它资源的下载（例如.图片，css文件等）。
由于浏览器为了防止出现 JS 修改 DOM 树，需要重新构建 DOM 树的情况，所以就会阻塞其他的下载和呈现。
嵌入 JS 会阻塞所有内容的呈现，而外部 JS 只会阻塞其后内容的显示，2 种方式都会阻塞其后资源的下载。也就是说外部样式不会阻塞外部脚本的加载，但会阻塞外部脚本的执行。
4、CSS 怎么会阻塞加载？CSS 本来是可以并行下载的，在什么情况下会出现阻塞加载了(在测试观察中，IE6 下 CSS 都是阻塞加载)？
答案：
当 CSS 后面跟着嵌入的 JS 的时候，该 CSS 就会出现阻塞后面资源下载的情况。而当把嵌入 JS 放到 CSS 前面，就不会出现阻塞的情况了。
根本原因：因为浏览器会维持 html 中 css 和 js 的顺序，样式表必须在嵌入的 JS 执行前先加载、解析完。而嵌入的 JS 会阻塞后面的资源加载，所以就会出现上面 CSS 阻塞下载的情况。
5、Javascript无阻塞加载具体方式。
答案：
1. 将脚本放在底部。<link>还是放在head中，用以保证在js加载前，能加载出正常显示的页面。<script>标签放在</body>前。
2. 阻塞脚本：由于每个<script>标签下载时阻塞页面解析过程，所以限制页面的<script>总数也可以改善性能。适用于内联脚本和外部脚本。
3. 非阻塞脚本：等页面完成加载后，再加载js代码。也就是，在 window.onload 事件发出后开始下载代码。
4. defer属性：支持IE4和fierfox3.5更高版本浏览器
5. 动态脚本元素：文档对象模型（DOM）允许你使用js动态创建HTML的几乎全部文档内容。
<script>
var script=document.createElement("script");
script.type="text/javascript";
script.src="file.js";
document.getElementsByTagName("head")[0].appendChild(script);
</script>
6、如何做好移动端性能优化？
答案：
1. 尽量使用css3动画，开启硬件加速。
2. 适当使用touch事件代替click事件。
3. 避免使用css3渐变阴影效果。
4. 可以用transform: translateZ(0)来开启硬件加速。
5. 不滥用Float。Float在渲染时计算量比较大，尽量减少使用
6. 不滥用Web字体。Web字体需要下载，解析，重绘当前页面，尽量减少使用。
7. 合理使用requestAnimationFrame动画代替setTimeout
8. CSS中的属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）会触发GPU渲染，请合理使用。过渡使用会引发手机过耗电增加
9. PC端的在移动端同样适用
7、谈谈以前端角度出发做好SEO需要考虑什么？
答案：
1. 了解搜索引擎如何抓取网页和如何索引网页
2. meta标签优化
3. 关键词分析
4. 付费给搜索引擎
5. 链接交换和链接广泛度（Link Popularity）
6. 合理的标签使用
8、常见web安全及防护原理？
答案：
1. sql注入原理：
就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。
总的来说有以下几点：
永远不要信任用户的输入，要对用户的输入进行校验，可以通过正则表达式，或限制长度，对单引号和双"-"进行转换等。
永远不要使用动态拼装SQL，可以使用参数化的SQL或者直接使用存储过程进行数据查询存取。
永远不要使用管理员权限的数据库连接，为每个应用使用单独的权限有限的数据库连接。
不要把机密信息明文存放，请加密或者hash掉密码和敏感的信息。
2. XSS原理及防范：
Xss(cross-site scripting)攻击指的是攻击者往Web页面里插入恶意 html标签或者javascript代码。比如：攻击者在论坛中放一个看似安全的链接，骗取用户点击后，窃取cookie中的用户私密信息；或者攻击者在论坛中加一个恶意表单，当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户原本以为的信任站点。
3. XSS防范方法：
首先代码里对用户输入的地方和变量都需要仔细检查长度和对”<”,”>”,”;”,”’”等字符做过滤；
其次任何内容写到页面之前都必须加以encode，避免不小心把html tag 弄出来。这一个层面做好，至少可以堵住超过一半的XSS 攻击。
避免直接在cookie 中泄露用户隐私，例如email、密码等等。
通过使cookie 和系统ip 绑定来降低cookie 泄露后的危险。这样攻击者得到的cookie 没有实际价值，不可能拿来重放。
如果网站不需要再浏览器端对cookie 进行操作，可以在Set-Cookie 末尾加上HttpOnly 来防止javascript 代码直接获取cookie 。
尽量采用POST 而非GET 提交表单
4. XSS与CSRF有什么区别吗？
XSS是获取信息，不需要提前知道其他用户页面的代码和数据包。CSRF是代替用户完成指定的动作，需要知道其他用户页面的代码和数据包。
要完成一次CSRF攻击，受害者必须依次完成两个步骤：
登录受信任网站A，并在本地生成Cookie。
在不登出A的情况下，访问危险网站B。
5. CSRF的防御：
服务端的CSRF方式方法很多样，但总的思想都是一致的，就是在客户端页面增加伪随机数。
通过验证码的方法
9、什么是HTTP和HTTPS？
答案：
1. HTTP协议通常承载于TCP协议之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了我们常说的HTTPS。
2. 默认HTTP的端口号为80，HTTPS的端口号为443。
3. 为什么HTTPS安全：
因为网络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息，而如果使用HTTPS，密钥在你和终点站才有。https之所以比http安全，是因为他利用ssl/tls协议传输。它包含证书，卸载，流量转发，负载均衡，页面适配，浏览器适配，refer传递等。保障了传输过程的安全性。
