行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。

告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS.link写在html页面中，@import写在CSS页面中

页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

(1)绘画 canvas;

(2)用于媒介回放的 video 和 audio 元素;

(3)本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;

(4)sessionStorage 的数据在浏览器关闭后自动删除;

(5)语意化更好的内容元素，比如 article、footer、header、nav、section;

(6)表单控件，calendar、date、time、email、url、search;

(7)新的技术webworker, websocket, Geolocation;

this总是指向函数的直接调用者（而非间接调用者）；如果有new关键字，this指向new出来的那个对象；

null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。

性能优化的方法：

（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） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。

cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

cookie数据大小不能超过4k。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。有期时间：

(1)localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；

(2)sessionStorage 数据在当前浏览器窗口关闭后自动删除。

(3)cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

如何在页面上实现一个圆形的可点击区域？

（1）map+area或者svg

（2）border-radius

（3）纯js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等

CSS优先级为: !important > id > class > tag

display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。

absolute浮动定位是相对于父级中设置position为relative或者absolute最近的父级元素，fixed浮动定位是相对于浏览器视窗的；

ajax过程：

(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.

(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.

(3)设置响应HTTP请求状态变化的函数.

(4)发送HTTP请求.

(5)获取异步调用返回的数据.

(6)使用JavaScript和DOM实现局部刷新

一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

（1）查找浏览器缓存

（2）DNS解析、查找该域名对应的IP地址、重定向（301）、发出第二个GET请求

（3）进行HTTP协议会话

（4）客户端发送报头(请求报头)

（5）服务器回馈报头(响应报头)

（6）html文档开始下载

（7）文档树建立，根据标记请求所需指定MIME类型的文件

（8）文件显示

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

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性；

清除浮动的几种方式，各自的优缺点

1.使用空标签清除浮动 clear:both（理论上能清除任何标签，增加无意义的标签）

2.使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,使用zoom:1用于兼容IE）

3.是用afert伪元素清除浮动(用于非IE浏览器)

javascript的typeof返回哪些数据类型

Object number function boolean underfind

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

absolute :生成绝对定位的元素， 相对于最近一级的 定位不是 static 的父元素来进行定位。

fixed （老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。

relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。

static 默认值。没有定位，元素出现在正常的流中

sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出

如何解决跨域问题？

jsonp，原理是：动态插入script标签，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。

优点是兼容性好，简单易用，支持浏览器与服务器双向通信。缺点是只支持GET请求。

JSONP：json+padding（内填充），顾名思义，就是把JSON填充到一个盒子里。

创建ajax过程

(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.

(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.

(3)设置响应HTTP请求状态变化的函数.

(4)发送HTTP请求.

(5)获取异步调用返回的数据.

(6)使用JavaScript和DOM实现局部刷新.

谈谈你对webpack的看法

WebPack 是一个模块打包工具，你可以使用WebPack管理你的模块依赖，并编绎输出模块们所需的静态文件。它能够很好地管理、打包Web开发中所用到的HTML、JavaScript、CSS以及各种静态文件（图片、字体等），让开发过程更加高效。对于不同类型的资源，webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系，最后 生成了优化且合并后的静态资源。

常见web安全及防护原理

1.sql注入原理

就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。

永远不要信任用户的输入，要对用户的输入进行校验，可以通过正则表达式，或限制长度，对单引号和双"-"进行转换等。

永远不要使用动态拼装SQL，可以使用参数化的SQL或者直接使用存储过程进行数据查询存取。

永远不要使用管理员权限的数据库连接，为每个应用使用单独的权限有限的数据库连接。

不要把机密信息明文存放，请加密或者hash掉密码和敏感的信息。

2.XSS原理及防范

Xss(cross-site scripting)攻击指的是攻击者往Web页面里插入恶意 html标签或者JavaScript代码。比如：攻击者在论坛中放一个看似安全的链接，骗取用户点击后，窃取cookie中的用户私密信息；或者攻击者在论坛中加一个恶意表单，当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户原本以为的信任站点。

首先代码里对用户输入的地方和变量都需要仔细检查长度和对”<”,”>”,”;”,”’”等字符做过滤；其次任何内容写到页面之前都必须加以encode，避免不小心把html tag 弄出来。这一个层面做好，至少可以堵住超过一半的XSS 攻击。首先，避免直接在cookie 中泄露用户隐私，例如email、密码等等。其次，通过使cookie 和系统ip 绑定来降低cookie 泄露后的危险。这样攻击者得到的cookie 没有实际价值，不可能拿来重放。如果网站不需要再浏览器端对cookie 进行操作，可以在Set-Cookie 末尾加上HttpOnly 来防止javascript 代码直接获取cookie 。尽量采用POST 而非GET 提交表单。

3.CSRF

XSS是获取信息，不需要提前知道其他用户页面的代码和数据包。CSRF是代替用户完成指定的动作，需要知道其他用户页面的代码和数据包。要完成一次CSRF攻击，受害者必须依次完成两个步骤：

登录受信任网站A，并在本地生成Cookie。

在不登出A的情况下，访问危险网站B。

服务端的CSRF方式方法很多样，但总的思想都是一致的，就是在客户端页面增加伪随机数。

HTTP和HTTPS

HTTP协议通常承载于TCP协议之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了我们常说的HTTPS。

默认HTTP的端口号为80，HTTPS的端口号为443。

为什么HTTPS更安全

因为网络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息，而如果使用HTTPS，密钥在你和终点站才有。https之所以比http安全，是因为他利用ssl/tls协议传输。它包含证书，卸载，流量转发，负载均衡，页面适配，浏览器适配，refer传递等。保障了传输过程的安全性。

对前端模块化的认识

模块化是指在解决某一个复杂问题或者一系列的杂糅问题时，依照一种分类的思维把问题进行系统性的分解以之处理。模块化是一种处理复杂系统分解为代码结构更合理，可维护性更高的可管理的模块的方式。可以想象一个巨大的系统代码，被整合优化分割成逻辑性很强的模块时，对于软件是一种何等意义的存在。对于软件行业来说：解耦软件系统的复杂性，使得不管多么大的系统，也可以将管理，开发，维护变得“有理可循”。

AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。

CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。

AMD 是提前执行，CMD 是延迟执行。

代码层面的性能优化

1.少用全局变量

2.避免全局查询

3.多个变量声明合并

4.尽量避免写在HTML标签中写Style属性

移动端性能优化

1.尽量使用css3动画，开启硬件加速。

2.CSS中的属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）会触发GPU渲染，请合理使用。过渡使用会引发手机过耗电增加

3.不滥用Float。Float在渲染时计算量比较大，尽量减少使用

ES6的了解

1.新增模板字符串（为JavaScript提供了简单的字符串插值功能）

2.箭头函数（操作符左边为输入的参数，而右边则是进行的操作以及返回的值Inputs=>outputs。）

3.for-of（用来遍历数据—例如数组中的值。）arguments对象可被不定参数和默认参数完美代替。

4.ES6将promise对象纳入规范，提供了原生的Promise对象。

5.增加了let和const命令，用来声明变量。增加了块级作用域。let命令实际上就增加了块级作用域。

6.ES6规定，var命令和function命令声明的全局变量，属于全局对象的属性；let命令、const命令、class命令声明的全局变量，不属于全局对象的属性

7.还有就是引入module模块的概念

你觉得jQuery或zepto源码有哪些写的好的地方?

(function( window, undefined ) {

//用一个函数域包起来，就是所谓的沙箱

//在这里边var定义的变量，属于这个函数域内的局部变量，避免污染全局

//把当前沙箱需要的外部变量通过函数参数引入进来

//只要保证参数对内提供的接口的一致性，你还可以随意替换传进来的这个参数

window.jQuery = window.$ = jQuery;

})( window );

defer和async

<script src="script.js"></script>

没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之 下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。

<script async src="script.js"></script>

有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。

<script defer src="myscript.js"></script>

有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。

然后从实用角度来说呢，首先把所有脚本都丢到 之前是最佳实践，因为对于旧浏览器来说这是唯一的优化选择，此法可保证非脚本的其他一切元素能够以最快的速度得到加载和解析。

用过哪些设计模式？

1.工厂模式

主要好处就是可以消除对象间的耦合，通过使用工程方法而不是new关键字。将所有实例化的代码集中在一个位置防止代码重复。

function createObject(name,age,profession){//集中实例化的函数var obj = new Object();

obj.name = name;

obj.age = age;

obj.profession = profession;

obj.move = function () {

return this.name + ' at ' + this.age + ' engaged in ' + this.profession;

};

return obj;

}

var test1 = createObject('trigkit4',22,'programmer');//第一个实例var test2 = createObject('mike',25,'engineer');//第二个实例

2.构造函数模式

使用构造函数的方法，即解决了重复实例化的问题 ，又解决了对象识别的问题，该模式与工厂模式的不同之处在于：

1).构造函数方法没有显示的创建对象 (new Object());

2).直接将属性和方法赋值给 this 对象;

3).没有 renturn 语句。

说说你对闭包的理解

使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。在js中，函数即闭包，只有函数才会产生作用域的概念.

闭包的三个特性：

1.函数嵌套函数

2.函数内部可以引用外部的参数和变量

3.参数和变量不会被垃圾回收机制回收

浏览器本地存储的问题

在较高版本的浏览器中，js提供了sessionStorage和globalStorage。

Html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

web storage和cookie的区别

1.Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

2.除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

3.但是cookie也是不可以或缺的：cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生

4.浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持(ie及FF需在web服务器里运行)，值得一提的是IE总是办好事，例如IE7、IE6中的userData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。

5.localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等

cookie 和session 的区别

1.cookie数据存放在客户的浏览器上，session数据放在服务器上。

2.cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗，考虑到安全应当使用session。

3.session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能。考虑到减轻服务器性能方面，应当使用COOKIE。

4.单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。

5.个人建议：

将登陆信息等重要信息存放为SESSION

其他信息如果需要保留，可以放在COOKIE中

position:absolute和float属性的异同?

共同点：对内联元素设置float和absolute属性，可以让元素脱离文档流，并且可以设置其宽高。

不同点：float仍会占据位置，absolute会覆盖文档流中的其他元素。

介绍一下box-sizing属性？

box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box；

content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高。

CSS选择符？

1.id选择器（ # myid）

2.类选择器（.myclassname）

3.标签选择器（div, h1, p）

4.相邻选择器（h1 + p）

5.子选择器（ul > li）：作用于子元素的第一代后代

6.后代选择器（li a)：作用于所有子后代元素

7.通配符选择器（ * ）

8.属性选择器（a[rel = "external"]）

9.伪类选择器（a: hover, li:nth-child）

优先级为:!important > id > class > tag

CSS3新增伪类举例？

p:first-of-type 选择属于其父元素的首个P元素的每个P元素。

p:last-of-type 选择属于其父元素的最后P元素的每个P元素。

p:only-of-type 选择属于其父元素唯一的P元素的每个P元素。

p:only-child 选择属于其父元素的唯一子元素的每个P元素。

p:nth-child(2) 选择属于其父元素的第二个子元素的每个P元素。

:enabled :disabled 控制表单控件的禁用状态。

:checked 单选框或复选框被选中。

CSS3有哪些新特性？

CSS3实现圆角（border-radius），阴影（box-shadow），

对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）

transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜

在CSS3中唯一引入的伪元素是::selection.（匹配被用户鼠标选取的部分。）

CSS3中新增了一种盒模型计算方式：box-sizing：

盒模型默认的值是content-box, 新增的值是padding-box和border-box，几种盒模型计算元素宽高的区别如下：

1.content-box（默认）

布局所占宽度Width：

Width = width + padding-left + padding-right + border-left + border-right

布局所占高度Height:

Height = height + padding-top + padding-bottom + border-top + border-bottom

2.padding-box：

布局所占宽度Width：

Width = width(包含padding-left + padding-right) + border-top + border-bottom

布局所占高度Height:

Height = height(包含padding-top + padding-bottom) + border-top + border-bottom

3.border-box：

布局所占宽度Width：

Width = width(包含padding-left + padding-right + border-left + border-right)

布局所占高度Height:

Height = height(包含padding-top + padding-bottom + border-top + border-bottom)

浮动元素引起的问题和解决办法？

浮动元素引起的问题：

（1）父元素的高度无法被撑开，影响与父元素同级的元素

（2）与浮动元素同级的非浮动元素（内联元素）会跟随其后

（3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

清除浮动的解决方法：

1.额外标签法，

（缺点：不过这个办法会增加额外的标签使HTML结构看起来不够简洁。）2.使用after伪类

#parent:after{

content:".";

height:0;

visibility:hidden;

display:block;

clear:both;

}

3.浮动外部元素

4.设置overflow为hidden或者auto

DOM操作——怎样添加、移除、移动、复制、创建和查找节点?

1）创建新节点

createDocumentFragment() //创建一个DOM片段

createElement() //创建一个具体的元素

createTextNode() //创建一个文本节点

2）添加、移除、替换、插入

appendChild()

removeChild()

replaceChild()

insertBefore() //并没有insertAfter()

3）查找

getElementsByTagName() //通过标签名称

getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)

getElementById() //通过元素Id，唯一性

html5有哪些新特性、移除了那些元素？

HTML5主要是关于图像，位置，存储，多任务等功能的增加。

1.拖拽释放(Drag and drop) API

2.语义化更好的内容标签（header,nav,footer,aside,article,section）

3.音频、视频API(audio,video)

4.画布(Canvas) API

5.地理(Geolocation) API

6.本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

7.sessionStorage 的数据在浏览器关闭后自动删除

8.表单控件，calendar、date、time、email、url、search

9.新的技术webworker, websocket, Geolocation

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

调用localstorge、cookies等本地存储方式。

null和undefined的区别？

null是一个表示”无”的对象，转为数值时为0；undefined是一个表示”无”的原始值，转为数值时为NaN。

当声明的变量还未被初始化时，变量的默认值为undefined。

null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。

undefined表示”缺少值”，就是此处应该有一个值，但是还没有定义。典型用法是：

（1）变量被声明了，但没有赋值时，就等于undefined。

（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。

（3）对象没有赋值的属性，该属性的值为undefined。

（4）函数没有返回值时，默认返回undefined。

null表示”没有对象”，即该处不应该有值。典型用法是：

（1） 作为函数的参数，表示该函数的参数不是对象。

（2） 作为对象原型链的终点。

new操作符具体干了什么呢?

1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。

2、属性和方法被加入到 this 引用的对象中。

3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。

js延迟加载的方式有哪些？

1.defer：如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行；如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本

2.async：如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）

3.动态创建DOM方式（创建script，插入到DOM中，加载完毕后callBack）

4.按需异步载入js

哪些操作会造成内存泄漏？

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。

1.意外的全局变量

js中如果不用 var 声明变量,该变量将被视为 window 对象(全局对象)的属性,也就是全局变量，调用完了函数以后,变量仍然存在,导致泄漏.

如果不注意 this 的话,还可能会这么漏:

function foo() {

this.variable = "potential accidental global";

}

// 没有对象调用foo, 也没有给它绑定this, 所以this是window

foo();

可以通过加上 'use strict' 启用严格模式来避免这类问题, 严格模式会阻止你创建意外的全局变量.

2.被遗忘的定时器或者回调

3.没有清理的DOM元素引用

4.闭包

异步加载和延迟加载？

1.异步加载的方案： 动态插入script标签

2.通过ajax去获取js代码，然后通过eval执行

3.script标签上添加defer或者async属性

4.创建并插入iframe，让它异步执行js

5.延迟加载：有些 js 代码并不是页面初始化的时候就立刻需要的，而稍后的某些情况才需要的。

一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

分为4个步骤：

（1）当发送一个URL请求时，不管这个URL是Web页面的URL还是Web页面上每个资源的URL，浏览器都会开启一个线程来处理这个请求，同时在远程DNS服务器上启动一个DNS查询。这能使浏览器获得请求对应的IP地址。

（2）浏览器与远程Web服务器通过TCP三次握手协商来建立一个TCP/IP连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。

（3）一旦TCP/IP连接建立，浏览器会通过该连接向远程服务器发送HTTP的GET请求。远程服务器找到资源并使用HTTP响应返回该资源，值为200的HTTP响应状态表示一个正确的响应。

（4）此时，Web服务器提供资源服务，客户端开始下载资源。

请解释一下 JavaScript 的同源策略？

概念:同源策略是客户端脚本（尤其是Javascript）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。

这里的同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议。

指一段脚本只能读取来自同一来源的窗口和文档的属性。

为什么要有同源限制？

我们举例说明：比如一个黑客程序，他利用Iframe（行内框架）把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过Javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。

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

GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符

POST：一般用于修改服务器上的资源，对所发送的信息没有限制。

GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值，也就是说Get是通过地址栏来传值，而Post是通过提交表单来传值。

然而，在以下情况中，请使用 POST 请求：

1.无法使用缓存文件（更新服务器上的文件或数据库）

2.向服务器发送大量数据（POST 没有数据量限制）

3.发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

对重构的理解？

网站重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。也就是说是在不改变UI的情况下，对网站进行优化。

对于传统的网站来说重构通常是：

1.表格(table)布局改为DIV+CSS

2.使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)

3.对于移动平台的优化

4.针对于SEO（搜索引擎）进行优化

深层次的网站重构应该考虑的方面：

1.减少代码间的耦合

2.让代码保持弹性

3.严格按规范编写代码

4.设计可扩展的API

5.代替旧有的框架、语言(如VB)

6.增强用户体验

网页速度的优化：

1.压缩JS、CSS、image等前端资源(通常是由服务器来解决)

2.程序的性能优化(如数据读写)

3.采用CDN来加速资源加载

4.对于JS DOM的优化

5.HTTP服务器的文件缓存

HTTP状态码

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

200 OK 正常返回信息

201 Created 请求成功并且服务器创建了新的资源

202 Accepted 服务器已接受请求，但尚未处理

301 Moved Permanently 请求的网页已永久移动到新位置。

302 Found 临时性重定向。

303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。

304 Not Modified 自从上次请求后，请求的网页未修改过。

400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。

401 Unauthorized 请求未授权。

403 Forbidden 禁止访问。

404 Not Found 找不到如何与 URI 相匹配的资源。

500 Internal Server Error 最常见的服务器端错误。

503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。

严格模式主要有哪些限制？

1.变量必须声明后再使用

2.函数的参数不能有同名属性，否则报错

3.不能使用with语句

4.不能对只读属性赋值，否则报错

5.不能使用前缀0表示八进制数，否则报错

6.不能删除不可删除的属性，否则报错

7.不能删除变量delete prop，会报错，只能删除属性delete global[prop]8.eval不会在它的外层作用域引入变量

9.eval和arguments不能被重新赋值

10.arguments不会自动反映函数参数的变化

11.不能使用arguments.callee

12.不能使用arguments.caller

13.禁止this指向全局对象

14.不能使用fn.caller和fn.arguments获取函数调用的堆栈

15.增加了保留字（比如protected、static和interface）

设立”严格模式”的目的，主要有以下几个：

1.消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;

2.消除代码运行的一些不安全之处，保证代码运行的安全；

3.提高编译器效率，增加运行速度；

4.为未来新版本的Javascript做好铺垫。

document.write()的用法

document.write()方法可以用在两个方面：页面载入过程中用实时脚本创建页面内容，以及用延时脚本创建本窗口或新窗口的内容。

document.write只能重绘整个页面。innerHTML可以重绘页面的一部分

git fetch和git pull的区别

git pull：相当于是从远程获取最新版本并merge到本地

git fetch：相当于是从远程获取最新版本到本地，不会自动merge

对MVC和MVVM的理解

MVC:View 传送指令到 Controller;Controller 完成业务逻辑后，要求 Model 改变状态;Model 将新的数据发送到 View，用户得到反馈.

MVVC：View：UI界面;ViewModel：它是View的抽象，负责View与Model之间信息转换，将View的Command传送到Model；Model：数据访问层.

什么是事件代理？

事件代理（Event Delegation），又称之为事件委托。是 JavaScript 中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务。

事件代理的原理是DOM元素的事件冒泡。使用事件代理的好处是可以提高性能。

attribute和property的区别是什么？

attribute是dom元素在文档中作为html标签拥有的属性；

property就是dom元素在js中作为对象拥有的属性。

所以：对于html的标准属性来说，attribute和property是同步的，是会自动更新的，但是对于自定义的属性来说，他们是不同步的。

什么样的前端代码是好的

高复用低耦合，这样文件小，好维护，而且好扩展。

H5常见问题和注意事项

Meta基础知识

1.H5页面窗口自动调整到设备宽度，并禁止用户缩放页面：

html标签：

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

// width 设置viewport宽度，为一个正整数，或字符串‘device-width’

// height 设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置

// initial-scale 默认缩放比例，为一个数字，可以带小数

// minimum-scale 允许用户最小缩放比例，为一个数字，可以带小数

// maximum-scale 允许用户最大缩放比例，为一个数字，可以带小数

// user-scalable 是否允许手动缩放

js方法：

var phoneWidth = parseInt(window.screen.width);

var phoneScale = phoneWidth/640;

var ua = navigator.userAgent;

if (/Android (\d+\.\d+)/.test(ua)){

var version = parseFloat(RegExp.$1);

if(version>2.3){

document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">');

}else{

document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');

}

} else {

document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');

}

空白页基本meta标签

打电话发短信写邮件的实现

1.打电话

<a href="tel:0755-10086">打电话给:0755-10086</a>

2.发短信

<a href="sms:10086">发短信给: 10086</a>

3.发邮件

<a href="mailto:863139978@qq.com;384900096@qq.com?cc=zhangqian0406@yeah.net&bcc=993233461@qq.com&subject=[邮件主题]&body=腾讯诚邀您参与%0A%0A;img src='images/1.jpg' />">点击我发邮件</a>

点击元素产生背景或边框怎么去掉？

ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0去除灰色半透明遮罩；

android用户点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果；

winphone系统,点击标签产生的灰色半透明背景，能通过设置<meta name="msapplication-tap-highlight" content="no">去掉；

特殊说明：有些机型去除不了，如小米2。对于按钮类还有个办法，不使用a或者input标签，直接用div标签

a,button,input,textarea {

-webkit-tap-highlight-color: rgba(0,0,0,0);

-webkit-user-modify:read-write-plaintext-only; //-webkit-user-modify有个副作用，就是输入法不再能够输入多个字符

}

也可以

{ -webkit-tap-highlight-color: rgba(0,0,0,0); }

Rentina显示屏原理及设计方案

retina屏是一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina显示屏中，像素点1个变为4个。

在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍。

前端的应对方案是：设计稿切出来的图片长宽保证为偶数，并使用backgroud-size把图片缩小为原来的1/2。

例如图片宽高为：200px*200px，那么写法如下

.css{width:100px;height:100px;background-size:100px 100px;}

其它元素的取值为原来的1/2，例如视觉稿40px的字体，使用样式的写法为20px

.css{font-size:20px}

image-set设计Rentina背景图

image-set,webkit私有属性，也是CSS4的属性，为解决Rentina屏幕下的图像而生。

.css {

background: url(images/bg.jpg) no-repeat center;

background: -webkit-image-set(

url(images/bg.jpg) 1x, //支持image-set普通屏

url(images/bg-2x.jpg) 2x); //支持image-set的Rentinan

}

美化表单元素

使用appearance改变webkit浏览器的默认外观

input,select { -webkit-appearance:none; appearance: none; }

超实用的CSS样式

去掉webkit的滚动条——display: none;

其他参数

::-webkit-scrollba //滚动条整体部分

::-webkit-scrollbar-thumb //滚动条内的小方块

::-webkit-scrollbar-track //滚动条轨道

::-webkit-scrollbar-button //滚动条轨道两端按钮

::-webkit-scrollbar-track-piece //滚动条中间部分，内置轨道

::-webkit-scrollbar-corner //边角，两个滚动条交汇处

::-webkit-resizer //两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

禁止长按链接与图片弹出菜单

a,img { -webkit-touch-callout: none }

禁止ios和android用户选中文字

html,body {-webkit-user-select:none; user-select: none; }

改变输入框placeholder的颜色值

::-webkit-input-placeholder {

color: #999; }

:-moz-placeholder {

color: #999; }

::-moz-placeholder {

color: #999; }

:-ms-input-placeholder {

color: #999; }

input:focus::-webkit-input-placeholder{ color:#999; }

android上去掉语音输入按钮

input::-webkit-input-speech-button {display: none}

取消input在ios下，输入的时候英文首字母的默认大写

<input autocapitalize="off" autocorrect="off" />

手机拍照和上传图片

IOS有拍照、录像、选取本地图片功能，部分Android只有选择本地图片功能。Winphone不支持

<input type="file" accept="images/*" />

<input type="file" accept="video/*" />

屏幕旋转的事件和样式

JS处理

function orientInit(){

var orientChk = document.documentElement.clientWidth > document.documentElement.clientHeight?'landscape':'portrait';

if(orientChk =='lapdscape'){

//这里是横屏下需要执行的事件

}else{

//这里是竖屏下需要执行的事件

}

}

orientInit();

window.addEventListener('onorientationchange' in window?'orientationchange':'resize', function(){

setTimeout(orientInit, 100);

},false)

CSS处理

//竖屏时样式

@media all and (orientation:portrait){ }

//横屏时样式

@media all and (orientation:landscape){ }

audio元素和video元素在ios和andriod中无法自动播放

音频，写法一

<audio src="music/bg.mp3" autoplay loop controls>你的浏览器还不支持哦</audio>

音频，写法二

<audio controls="controls">

<source src="music/bg.ogg" type="audio/ogg"></source>

<source src="music/bg.mp3" type="audio/mpeg"></source>

优先播放音乐bg.ogg，不支持在播放bg.mp3

</audio>

JS绑定自动播放（操作window时，播放音乐）

$(window).one('touchstart', function(){

music.play();

})

微信下兼容处理

document.addEventListener("WeixinJSBridgeReady", function () {

music.play();

}, false);

小结

1.audio元素的autoplay属性在IOS及Android上无法使用，在PC端正常

2.audio元素没有设置controls时，在IOS及Android会占据空间大小，而在PC端Chrome是不会占据任何空间

重力感应事件

运用HTML5的deviceMotion，调用重力感应事件

if(window.DeviceMotionEvent){

document.addEventListener('devicemotion', deviceMotionHandler, false)

}

var speed = 30;

var x = y = z = lastX = lastY = lastZ = 0;

function deviceMotionHandler(eventData){

var acceleration = event.accelerationIncludingGravity;

x = acceleration.x;

y = acceleration.y;

z = acceleration.z;

if(Math.abs(x-lastX)>speed || Math.abs(y-lastY)>speed || Math.abs(z-lastZ)>speed ){

//这里是摇动后要执行的方法

yaoAfter();

}

lastX = x;

lastY = y;

lastZ = z;

}

function yaoAfter(){

//do something

}

微信浏览器用户调整字体大小后页面矬了，怎么阻止用户调整

以下代码可使Android机页面不再受用户字体缩放强制改变大小，但是会有1S左右延时，期间可以考虑loading来处理

if (typeof(WeixinJSBridge) == "undefined") {

document.addEventListener("WeixinJSBridgeReady", function (e) {

setTimeout(function(){

WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize':0}, function(res){

alert(JSON.stringify(res));

})

}, 0)

});

}else{

setTimeout(function(){

WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize':0}, function(res){

alert(JSON.stringify(res));

})

}, 0)

}

IOS下可使用 -webkit-text-size-adjust禁止用户调整字体大小

body { -webkit-text-size-adjust:100%!important; }

最好的解决方案：最好使用rem或百分比布局

定位的坑

fixed定位

1.ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位

2.android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位

3.ios4下不支持position:fixed

解决方案：使用Iscroll，如：

<div id="wrapper">

<ul>

<li></li>

.....

</ul>

</div>

<script src="iscroll.js"></script>

<script>

var myscroll;

function loaded(){

myscroll=new iScroll("wrapper");

}

window.addEventListener("DOMContentLoaded",loaded,false);

</script>

position定位

Android下弹出软键盘弹出时，影响absolute元素定位

解决方案:

var ua = navigator.userAgent.indexOf('Android');

if(ua>-1){

$('.ipt').on('focus', function(){

$('.css').css({'visibility':'hidden'})

}).on('blur', function(){

$('.css').css({'visibility':'visible'})

})

}

播放视频不全屏

1.ios7+支持自动播放

2.支持Airplay的设备（如：音箱、Apple TV)播放

x-webkit-airplay="true"

3.播放视频不全屏

webkit-playsinline="true"

<video x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src="http://"></video>

JS判断设备

function deviceType(){

var ua = navigator.userAgent;

var agent = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];

for(var i=0; i<len,len = agent.length; i++){

if(ua.indexOf(agent[i])>0){

break;

}

}

}

deviceType();

window.addEventListener('resize', function(){

deviceType();

})

JS判断微信浏览器

function isWeixin(){

var ua = navigator.userAgent.toLowerCase();

if(ua.match(/MicroMessenger/i)=='micromessenger'){

return true;

}else{

return false;

}

}

android 2.3 bug

1.@-webkit-keyframes 需要以0%开始100%结束，0%的百分号不能去掉

2.after和before伪类无法使用动画animation

3.border-radius不支持%单位，如要兼容，可以给radius设置一下较大的值

4.translate百分比的写法和scale在一起会导致失效，例如：

-webkit-transform: translate(-50%,-50%) scale(-0.5, 1)

android 4.x bug

1.三星 Galaxy S4中自带浏览器不支持border-radius缩写

2.同时设置border-radius和背景色的时候，背景色会溢出到圆角以外部分

3.部分手机(如三星)，a链接支持鼠标:visited事件，也就是说链接访问后文字变为紫色

4.android无法同时播放多音频audio

消除transition闪屏

.css {

-webkit-transform-style: preserve-3d;

-webkit-backface-visibility: hidden;

-webkit-perspective: 1000;

}

开启硬件加速

目前，像Chrome/Filefox/Safari/IE9+以及最新版本Opera都支持硬件加速，当检测到某个DOM元素应用了某些CSS规则时就会自动开启，从而解决页面闪白，保证动画流畅。

.css {

-webkit-transform: translate3d(0,0,0);

-moz-transform: translate3d(0,0,0);

-ms-transform: translate3d(0,0,0);

transform: translate3d(0,0,0);

}

渲染优化

1.禁止使用iframe（阻塞父文档onload事件）

2.禁止使用gif图片实现loading效果（降低CPU消耗，提升渲染性能）

使用CSS3代码代替JS动画；

开启GPU加速；

使用base64位编码图片(不小图而言，大图不建议使用)

对于一些小图标，可以使用base64位编码，以减少网络请求。但不建议大图使用，比较耗费CPU。小图标优势在于：

1.减少HTTP请求；

2.避免文件跨域；

3.修改及时生效；