前端面试总

1、从输入网址到显示网页的过程分析

http://www.cnblogs.com/huansky/p/5953202.html

1、应用层DNS解析域名：客户端先检查本地是否有对应的IP地址，若找到则返回响应的IP地址。若没找到则请求上级DNS服务器，直至找到或到根节点。

2、浏览器与服务器建立TCP连接（默认端口80）(详细点可以说下三次握手的过程)

3、应用层客户端发送HTTP请求。

4、服务器响应请求：查找客户端请求的资源，并返回响应报文，响应报文中包括一个重要的信息——状态码（200-300，成功；304使用缓存）。

5、服务器返回相应文件给浏览器。

6、Tcp连接释放(可以说下四次挥手的过程)。

  7、浏览器对HTML文件进行解析构建DOM树 ，构建渲染树 ，js根据DomAPI操作执行绑定事件等，页面显示完成。

2、两栏分布

第一种采用calc；

第二种采用:都设置position:absolute; 然后设置右边的left:309px;  width:auto;

3、Cookie的读取，set,以及删除

 

 

4、前端存在哪些安全问题？

CSRF

CSRF（Cross-site request forgery），中文名称：跨站请求伪造，也被称为：one click attack/session riding，缩写为：CSRF/XSRF。

你这可以这么理解CSRF攻击：攻击者盗用了你的身份，以你的名义发送恶意请求。CSRF能够做的事情包括：以你名义发送邮件，发消息，盗取你的账号，甚至于购买商品，虚拟货币转账......造成的问题包括：个人隐私泄露以及财产安全。

1. 检查报头中的Referer参数确保请求发自正确的网站（但XHR请求可调用setRequestHeader方法来修改Referer报头）；

2. 对于任何重要的请求都需要重新验证用户的身份；

3. 创建一个唯一的令牌（Token），将其存在服务端的session中及客户端的cookie中，对任何请求，都检查二者是否一致。

XSS的预防可以从多方面着手：

xss表示Cross Site Scripting(跨站脚本攻击)，它与SQL注入攻击类似，SQL注入攻击中以SQL语句作为用户输入，从而达到查询/修改/删除数据的目的，而在xss攻击中，通过插入恶意脚本，实现对用户游览器的控制。

（1）如前面所述，浏览器自身可以识别简单的XSS攻击字符串，从而阻止简单的XSS攻击；

（2）从根本上说，解决办法是消除网站的XSS漏洞，这就需要网站开发者运用转义安全字符等手段，始终把安全放在心上；

（3）对于普通网民，需要注意尽量抵挡诱惑，别去点击非知名网站的链接。

5、跨域的实现方式

由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。

JSONP

　　这种方式主要是通过动态插入一个script标签。浏览器对script的资源引用没有同源限制，同时资源加载到页面后会立即执行（没有阻塞的情况下）。

 

通过修改document.domain来跨子域

浏览器都有一个同源策略，其限制之一就是第一种方法中我们说的不能通过ajax的方法去请求不同源中的文档。 它的第二个限制是浏览器中不同域的框架之间是不能进行js的交互操作的。有一点需要说明，不同的框架 之间（父子或同辈），是能够获取到彼此的window对象的，但蛋疼的是你却不能使用获取到的window对象的属性和方法(html5中的 postMessage方法是一个例外，还有些浏览器比如ie6也可以使用top、parent等少数几个属性)，总之，你可以当做是只能获取到一个几乎 无用的window对象。比如，有一个页面，它的地址是http://www.example.com/a.html  ， 在这个页面里面有一个iframe，它的src是http://example.com/b.html, 很显然，这个页面与它里面的iframe框架是不同域的，所以我们是无法通过在页面中书写js代码来获取iframe中的东西的：

在页面 http://www.example.com/a.html 中设置document.domain:

 

在页面 http://example.com/b.html 中也设置document.domain，而且这也是必须的，虽然这个文档的domain就是example.com,但是还是必须显示的设置document.domain的值：

 

这样我们就可以通过js访问到iframe中的各种属性和对象了。

 

使用HTML5中新引进的window.postMessage方法来跨域传送数据

window.postMessage(message,targetOrigin)  方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、 FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。

调用postMessage方法的window对象是指要接收消息的那一个window对象，该方法的第一个参数message为要发送的消息，类 型只能为字符串；第二个参数targetOrigin用来限定接收消息的那个window对象所在的域，如果不想限定域，可以使用通配符 *  。

需要接收消息的window对象，可是通过监听自身的message事件来获取传过来的消息，消息内容储存在该事件对象的data属性中。

上面所说的向其他window对象发送消息，其实就是指一个页面有几个框架的那种情况，因为每一个框架都有一个window对象。在讨论第二种方法 的时候，我们说过，不同域的框架间是可以获取到对方的window对象的，而且也可以使用window.postMessage这个方法。下面看一个简单 的示例，有两个页面

 

图片ping

图片可以从任何URL中加载，所以将img的src设置成其他域的URL，即可以实现简单的跨域，可以使用onload和onerror事件来确定是否接受到了响应。

 

这里新建了一个img对象，给出的url是博客地址，这里是个error事件，所以弹出error；如果将URL改为一张图片http://images.jb51.net//710118/o_MacBook%20Air.png，就会弹出onload加载信息success，从而实现了简单的跨域。

使用图片ping跨域只能发送get请求，并且不能访问响应的文本，只能监听是否响应而已，可以用来追踪广告点击。

 

6、php包含文件有哪些？

include_once()语句的语法和include()语句类似，主要区别也是避免多次包含一个文件而引起函数或变量的重复定义。

require_once语句有一个引用链，它可以保证文件加入你的程序仅仅只有一次，而且会避开变量值和函数名之间的冲突。

和require_once语句一样，include_once语句把include的功能扩展了。在程序执行期间，将指定的文 件包含进来，如果从文件引用进来的程序先前已经包含过的时候，include_once()就不会把它再包含进来。也就是仅仅可以引用同一个文件一次！

require()所包含的文件中不能包含控制结构，而且不能使用return这样的语句。在require()所包含的文件中使用return语句会产生处理错误。

不象include()语句，require()语句会无条件地读取它所包含的文件的内容，而不管这些语句是否执行。所以如果你 想按照不同的条件包含不同的文件，就必须使用include()语句。当然，如果require()所在位置的语句不被执行，require()所包含的 文件中的语句也不会被执行。

 

7、php有哪些安全问题？

1、SQL注入

所谓SQL注入，就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。具体来说，它是利用现有应用程序，将(恶意)的SQL命令注入到后台数据库引擎执行的能力，它可以通过在Web表单中输入(恶意)SQL语句得到一个存在安全漏洞的网站上的数据库，而不是按照设计者意图去执行SQL语句。

2、Xss

3、Csrf

 

8、jquery绑定click的方法有几种

bind()函数只能针对已经存在的元素进行事件的设置；但是live(),on(),delegate()均支持未来新添加元素的事件设置；

bind()函数在jquery1.7版本以前比较受推崇，1.7版本出来之后，官方已经不推荐用bind()，替代函数为on(),这也是1.7版本新添加的函数，同样，可以用来代替live()函数，live()函数在1.9版本已经删除；

live()函数和delegate()函数两者类似，但是live()函数在执行速度，灵活性和CSS选择器支持方面较delegate()差些。

on()方法绑定事件可以提升效率

on()方法可以绑定动态添加到页面元素的事件

10、css3新特性（最熟悉的）

1: CSS3选择器部分

　　   E[att^="val"]            匹配具有att属性、且值以val开头的E元素

         E[att$="val"]            匹配具有att属性、且值以val结尾的E元素

         E[att*="val"]            匹配具有att属性、且值中含有val的E元素

         E:root                匹配文档的根元素。在HTML中，根元素永远是HTML

         E:nth-child(n)           匹配父元素中的第n个子元素E

         E:nth-last-child(n)     匹配父元素中的倒数第n个结构子元素E

         E:nth-of-type(n)        匹配同类型中的第n个同级兄弟元素E

         E:nth-last-of-type(n)     匹配同类型中的倒数第n个同级兄弟元素E

         E:last-child            匹配父元素中最后一个E元素

         E:first-of-type          匹配同级兄弟元素中的第一个E元素

         E:only-child            匹配属于父元素中唯一子元素的E

         E:only-of-type         匹配属于同类型中唯一兄弟元素的E

         E:empty              匹配没有任何子元素（包括text节点）的元素E

         :target            匹配相关URL指向的E元素

         E:enabled          匹配所有用户界面（form表单）中处于可用状态的E元素

         E:disabled          匹配所有用户界面（form表单）中处于不可用状态的E元素

         E:checked          匹配所有用户界面（form表单）中处于选中状态的元素E

         E::selection        匹配E元素中被用户选中或处于高亮状态的部分

         E:not(s)           匹配所有不匹配简单选择符s的元素E

         E ~ F              匹配E元素之后的F元素

2、 CSS3特效部分1：圆角，阴影，渐变

　　   border-radius

         box-shadow

         text-shadow

         -webkit-gradient

3、 CSS3特效部分2：背景，边框背景

　　   background-origin

　　   background-clip

　　   background-size

　　   multiple backgrounds

　　   border-image

4、 CSS3特效部分3： 变形

　　   rotate

　　   X/Y/Z

         scale

         translate

　　   transform-origin,transition-property,transition-duration,

　　   transition-timing-function,transition-delay'

         skew

         matrix

5、 CSS3特效部分4：动画

　　　animation-name

         animation-duration

         animation-timing-function

         animation-delay

         animation-iteration-count

         -webkit-animation-direction

 

11、移动端适配问题

下面这段代码，做过移动端项目的同学一定不会陌生。

 

假设你已经见过上面的代码，并有所应用，对响应式设计如何工作有大概的了解，但不一定清楚一些细节。最近在做一个移动端的项目，要求做到精确还原设计稿，像素级。

12、盒模型

 

 

13、http1.1 和http2之间的区别

 

14、HTTP最常见的响应头如下所示

 Allow：服务器支持哪些请求方法（如GET、POST等）；

• Content-Encoding： 文档的编码（Encode）方法。只有在解码之后才可以得到Content-Type头指定的内容类型。利用gzip压缩文档能够显著地减少HTML文档 的下载时间。Java的GZIPOutputStream可以很方便地进行gzip压缩，但只有Unix上的Netscape和Windows上的IE 4、IE 5才支持它。因此，Servlet应该通过查看Accept-Encoding头（即request.getHeader("Accept- Encoding")）检查浏览器是否支持gzip，为支持gzip的浏览器返回经gzip压缩的HTML页面，为其他浏览器返回普通页面；

• Content-Length： 表示内容长度。只有当浏览器使用持久HTTP连接时才需要这个数据。如果你想要利用持久连接的优势，可以把输出文档写入 ByteArrayOutputStram，完成后查看其大小，然后把该值放入Content-Length头，最后通过 byteArrayStream.writeTo(response.getOutputStream()发送内容；

• Content-Type： 表 示后面的文档属于什么MIME类型。Servlet默认为text/plain，但通常需要显式地指定为text/html。由于经常要设置 Content-Type，因此HttpServletResponse提供了一个专用的方法setContentTyep。 可在web.xml文件中 配置扩展名和MIME类型的对应关系；

• Date：当前的GMT时间。你可以用setDateHeader来设置这个头以避免转换时间格式的麻烦；

• Expires：指明应该在什么时候认为文档已经过期，从而不再缓存它。

• Last-Modified：文档的最后改动时间。客户可以通过If-Modified-Since请求头提供一个日期，该请求将被视为一个条件GET，只有改动时间迟于指定时间的文档才会返回，否则返回一个304（Not Modified）状态。Last-Modified也可用setDateHeader方法来设置；

• Location：表示客户应当到哪里去提取文档。Location通常不是直接设置的，而是通过HttpServletResponse的sendRedirect方法，该方法同时设置状态代码为302；

• Refresh：表示浏览器应该在多少时间之后刷新文档，以秒计。除了刷新当前文档之外，你还可以通过setHeader("Refresh", "5; URL=http://host/path")让浏览器读取指定的页面。注意这种功能通常是通过设置HTML页面HEAD区的 实现，这是因为，自动刷新或重定向对于那些不能使用CGI或Servlet的HTML编写者十分重要。但是，对于Servlet来说，直接设置 Refresh头更加方便。注意Refresh的意义是“N秒之后刷新本页面或访问指定页面”，而不是“每隔N秒刷新本页面或访问指定页面”。因此，连续 刷新要求每次都发送一个Refresh头，而发送204状态代码则可以阻止浏览器继续刷新，不管是使用Refresh头还是。注意Refresh头不属于HTTP 1.1正式规范的一部分，而是一个扩展，但Netscape和IE都支持它。

 

csdn，本网站的截图如下：

 

15、Flex布局是什么？

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。Webkit内核的浏览器，必须加上-webkit前缀。子元素的float、clear和vertical-align属性将失效。采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。

以下6个属性设置在容器上。

1、flex-direction： row | row-reverse | column | column-reverse;

属性决定主轴的方向（即项目的排列方向）。

2、flex-wrap： nowrap | wrap | wrap-reverse;

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

3、flex-flow： || ;

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

4、justify-content：     flex-start | flex-end | center | space-between | space-around;

属性定义了项目在主轴上的对齐方式。

5、align-items：flex-start | flex-end | center | baseline |stretch;

属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

6、align-content： flex-start | flex-end | center | space-between | space-around |

属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

项目的属性

以下6个属性设置在项目上。

1、order：order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

2、flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

3、flex-shrink: 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

4、flex-basis:  | auto; /* default auto */;

属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

5、Flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。该属性有两个快捷值：auto (11 auto) 和 none (0 0 auto)。

6、align-self: auto | flex-start | flex-end | center | baseline | stretch;

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

16、柯里化

 

17、Bind函数

 

18、Js继承

 

缺点：属性共享；

借用构造函数：函数复用问题无从谈起。

 

组合模式

 

19、深拷贝

 

20、浅复制

 

21、垃圾回收的两种方法

标记清除：进入环境标记，离开环境，标记为离开

在引用计数中，每一个对象负责维护对象所有引用的计数值。当一个新的引用指向对象时，引用计数器就递增，当去掉一个引用时，引用计数就递减。当引用计数到零时，该对象就将释放占有的资源。

22、判断类型的方法：

 

 

 

 

23、正则和字符串

 

 

24、Prototype，construtor

Parent.prototype指向了原型对象，而Parent.prototype.construtor又指回了Parent；Parent的每一 个实例都包含一个内部属性__proto__，该属性指向Parent.prototype。实例虽然不包含方法和属性，但却可以通过查找获得。

25、链式调用

 

26、事件委托

优点：通过上面的介绍，大家应该能够体会到使用事件委托对于web应用程序带来的几个优点：

1.可以大量节省内存占用，减少事件注册。

2.可以方便地动态添加和修改元素，不需要因为元素的改动而修改事件绑定

3.JavaScript和DOM节点之间的关联变少了，这样也就减少了因循环引用而带来的内存泄漏发生的概率。

缺点：不是所有的事件都能冒泡的。blur、focus、load和unload不能像其它事件一样冒泡。事实上blur和focus可以用事件捕获而非事件冒泡的方法获得（在IE之外的其它浏览器中）。

在管理鼠标事件的时候有些需要注意的地方。如果你的代码处理mousemove事件的话你遇上性能瓶颈的风险可就大了，因为mousemove事件触发非常频繁。而mouseout则因为其怪异的表现而变得很难用事件代理来管理。

27、常用的正则总结

验证数字：^[0-9]*$

验证n位的数字：^\d{n}$

验证至少n位数字：^\d{n,}$

验证m-n位的数字：^\d{m,n}$

验证零和非零开头的数字：^(0|[1-9][0-9]*)$

验证有两位小数的正实数：^[0-9]+(.[0-9]{2})?$

验证有1-3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$

验证非零的正整数：^\+?[1-9][0-9]*$

验证非零的负整数：^\-[1-9][0-9]*$

验证非负整数（正整数 + 0）  ^\d+$

验证非正整数（负整数 + 0）  ^((-\d+)|(0+))$

验证长度为3的字符：^.{3}$

验证由26个英文字母组成的字符串：^[A-Za-z]+$

验证由26个大写英文字母组成的字符串：^[A-Z]+$

验证由26个小写英文字母组成的字符串：^[a-z]+$

验证由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$

验证由数字、26个英文字母或者下划线组成的字符串：^\w+$

验证用户密码:^[a-zA-Z]\w{5,17}$ 正确格式为：以字母开头，长度在6-18之间，只能包含字符、数字和下划线。

验证是否含有 ^%&',;=?$\" 等字符：[^%&',;=?$\x22]+

验证汉字：^[\u4e00-\u9fa5],{0,}$

验证Email地址：^\w+[-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$

验证InternetURL：^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$ ；^[a-zA-z]+://(w+(-w+)*)(.(w+(-w+)*))*(?S*)?$

验证电话号码：^(\d3,4|\d{3,4}-)?\d{7,8}$：--正确格式为：XXXX-XXXXXXX，XXXX-XXXXXXXX，XXX-XXXXXXX，XXX-XXXXXXXX，XXXXXXX，XXXXXXXX。

验证身份证号（15位或18位数字）：^\d{15}|\d{}18$

验证一年的12个月：^(0?[1-9]|1[0-2])$ 正确格式为：“01”-“09”和“1”“12”

验证一个月的31天：^((0?[1-9])|((1|2)[0-9])|30|31)$    正确格式为：01、09和1、31。

整数：^-?\d+$

非负浮点数（正浮点数 + 0）：^\d+(\.\d+)?$

正浮点数   ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$

非正浮点数（负浮点数 + 0） ^((-\d+(\.\d+)?)|(0+(\.0+)?))$

负浮点数  ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$

浮点数  ^(-?\d+)(\.\d+)?$

28、CDN

CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。

29、CSS hack

由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、 解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS 样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!

CSS hack的原理

由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样，以及CSS优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景来应用不同的CSS。

CSS hack分类

CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。

• 属性前缀法(即类内部Hack)：例如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，IE6~IE10都认识"\9"，但firefox前述三个都不能认识。
• 选择器前缀法(即选择器Hack)：例如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。
• IE条件注释法(即HTML条件注释Hack)： 针对所有IE(注：IE10+已经不再支持条件注释)： ，针对IE6及以下版本： 。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

CSS hack利弊

一般情况下，我们尽量避免使用CSS hack，但是有些情况为了顾及用户体验实现向下兼容，不得已才使用hack。比如由于IE8及以下版本不支持CSS3,而我们的项目页面使用了大量 CSS3新属性在IE9/Firefox/Chrome下正常渲染，这种情况下如果不使用css3pie或htc或条件注释等方法时,可能就得让IE8- 的专属hack出马了。使用hack虽然对页面表现的一致性有好处，但过多的滥用会造成html文档混乱不堪，增加管理和维护的负担。相信只要大家一起努力，少用、慎用hack，未来一定会促使浏览器厂商的标准越来越趋于统一，顺利过渡到标准浏览器的主流时代。抛弃那些陈旧的IE hack，必将减轻我们编码的复杂度，少做无用功。

30、@import和link之间的区别

两者都是外部引用CSS的方式，但是存在一定的区别：

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

@import url(style.css) 和@import url("style.css")是最优的选择，兼容的浏览器最多。

31、web页面重构怎么操作？

页面重构就是根据原有页面内容和结构的基础上，通过div+css写出符合web标准的页面结构。

具体实现要达到以下三点：

• 结构完整，可通过标准验证
• 标签语义化，结构合理
• 充分考虑到页面在站点中的“作用和重要性”，并对其进行有针对性的优化

32、HTML5的离线储存

使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。

HTML5引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。 应用程序缓存为应用带来三个优势：

• 离线浏览 – 用户可在应用离线时使用它们
• 速度 – 已缓存资源加载得更快
• 减少服务器负载 – 浏览器将只从服务器下载更新过或更改过的资源。

33、跨域资源共享 CORS 详解

是一个W3C标准，所有浏览器都支持该功能，IE浏览器不能低于IE10。需要浏览器和服务器同时支持。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。只要同时满足以下两大条件，就属于简单请求。

（1) 请求方法是以下三种方法之一：HEAD，GET，POST

（2）HTTP的头信息不超出以下几种字段：Accept；Accept-Language；Content-Language；Last-Event-ID；Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain；

凡是不同时满足上面两个条件，就属于非简单请求。

简单请求

对于简单请求，浏览器直接发出CORS请求。具体来说，就是在头信息之中，增加一个Origin字段。下面是一个例子，浏览器发现这次跨源AJAX请求是简单请求，就自动在头信息之中，添加一个Origin字段。

GET /cors HTTP/1.1；Origin: http://api.bob.com；Host: api.alice.com；

Accept-Language: en-US；Connection: keep-alive；User-Agent: Mozilla/5.0...

上面的头信息中，Origin字段用来说明，本次请求来自哪个源（协议 + 域名 + 端口）。服务器根据这个值，决定是否同意这次请求。

非简单请求

非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。

浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。下面是一段浏览器的JavaScript脚本。

var url = 'http://api.alice.com/cors';

var xhr = new XMLHttpRequest();

xhr.open('PUT', url, true);

xhr.setRequestHeader('X-Custom-Header', 'value');

xhr.send();

上面代码中，HTTP请求的方法是PUT，并且发送一个自定义头信息X-Custom-Header。

浏览器发现，这是一个非简单请求，就自动发出一个"预检"请求，要求服务器确认可以这样请求。下面是这个"预检"请求的HTTP头信息。

OPTIONS /cors HTTP/1.1

Origin: http://api.bob.com；      Access-Control-Request-Method: PUT

Access-Control-Request-Headers: X-Custom-Header

Host: api.alice.com；             Accept-Language: en-US

Connection: keep-alive；          User-Agent: Mozilla/5.0...

"预检"请求用的请求方法是OPTIONS，表示这个请求是用来询问的。头信息里面，关键字段是Origin，表示请求来自哪个源。

一旦服务器通过了"预检"请求，以后每次浏览器正常的CORS请求，就都跟简单请求一样，会有一个Origin头信息字段。服务器的回应，也都会有一个Access-Control-Allow-Origin头信息字段。

CORS与JSONP的使用目的相同，但是比JSONP更强大。

JSONP只支持GET请求，CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。

34、Localstrage

判断浏览器是否支持

 

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

 

其他操作方法：点操作和[]

web Storage不但可以用自身的setItem,getItem等方便存取，也可以像普通对象一样用点(.)操作符，及[]的方式进行数据存储。

 

localStorage和sessionStorage的key和length属性实现遍历

storage事件

storage还提供了storage事件，当键值改变或者clear的时候，就可以触发storage事件，如下面的代码就添加了一个storage事件改变的监听：

 

35、Post  Get

在客户机和服务器之间进行请求-响应时，两种最常被用到的方法是：GET 和 POST。

GET - 从指定的资源请求数据；POST - 向指定的资源提交要被处理的数据

GET 方法

请注意，查询字符串（名称/值对）是在 GET 请求的 URL 中发送的：

/test/demo_form.asp?name1=value1&name2=value2；

POST 方法

请注意，查询字符串（名称/值对）是在 POST 请求的 HTTP 消息主体中发送的：

POST /test/demo_form.asp HTTP/1.1；    

Host: w3schools.com；             name1=value1&name2=value2；

比较 GET 与 POST

下面的表格比较了两种 HTTP 方法：GET 和 POST。

	GET	POST
后退按钮/刷新	无害	数据会被重新提交（浏览器应该告知用户数据会被重新提交）。
书签	可收藏为书签	不可收藏为书签
缓存	能被缓存	不能缓存
编码类型	application/x-www-form-urlencoded	application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。
历史	参数保留在浏览器历史中。	参数不会保存在浏览器历史中。
对数据长度的限制	是的。当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。	无限制。
对数据类型的限制	只允许 ASCII 字符。	没有限制。也允许二进制数据。
安全性	与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。在发送密码或其他敏感信息时绝不要使用 GET ！	POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。
可见性	数据在 URL 中对所有人都是可见的。	数据不会显示在 URL 中。

 

其他 HTTP 请求方法

下面的表格列出了其他一些 HTTP 请求方法：

方法	描述
HEAD	与 GET 相同，但只返回 HTTP 报头，不返回文档主体。
PUT	上传指定的 URI 表示。
DELETE	删除指定资源。
OPTIONS	返回服务器支持的 HTTP 方法。
CONNECT	把请求连接转换到透明的 TCP/IP 通道。

36、Cookie、sessionStorage 和 localStrorage

sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，可以方便的在web请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。

sessionStorage 、localStorage 和 cookie 之间的区别：

共同点：都是保存在浏览器端，且同源的。

区别：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。

sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。

userdata，只有ie支持，单个容量64kb，每个域名最多可存10个共计640k数据。默认保存在C:\Documents and Settings\Administrator\UserData\目录下，保存格式为xml。关于userdata更多资料参考

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/behaviors/reference/behaviors/userdata.asp

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

localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

为什么选择Web Storage而不是Cookie？

与Cookie相比，Web Storage存在不少的优势，概括为以下几点：

1. 存储空间更大：IE8下每个独立的存储空间为10M，其他浏览器实现略有不同，但都比Cookie要大很多。

2. 存储内容不会发送到服务器：当设置了Cookie后，Cookie的内容会随着请求一并发送的服务器，这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地，不会与服务器发生任何交互。

3. 更多丰富易用的接口：Web Storage提供了一套更为丰富的接口，使得数据操作更为简便。

4. 独立的存储空间：每个域（包括子域）有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。

37、html5（websocket等）

1. 新的Doctype ：尽管使用，即使浏览器不懂这句话也会按照标准模式去渲染

2. Figure元素

用

和

来语义化地表示带标题的图片

 

3. 重新定义的

已经被重新定义了，现在被用来表示小的排版，如网站底部的版权声明

4. 去掉link和script标签里面的type属性

5. 加/不加 括号 ：HTML5没有严格的要求属性必须加引号，闭合不闭合，但是建议加上引号和闭合标签

6. 让你的内容可编辑，只需要加一个contenteditable属性

7. Email Inputs ：如果我们给Input的type设置为email，浏览器就会验证这个输入是否是email类型，当然不能只依赖前端的校验，后端也得有相应的校验

8. Placeholders ：这个input属性的意义就是不必通过javascript来做placeholder的效果了

9. Local Storage ：使用Local Storage可以永久存储大的数据片段在客户端（除非主动删除），目前大部分浏览器已经支持，在使用之前可以检测一下window.localStorage是否存在

10. 语义化的header和footer

11. 更多的HTML5表单特性

12. IE和HTML5 ：默认的，HTML5新元素被以inline的方式渲染，不过可以通过下面这种方式让 其以block方式渲染

header, footer, article, section, nav, menu, hgroup {

    display: block;

}

不幸的是IE会忽略这些样式，可以像下面这样fix:

 

13. hgroup ：一般在header里面用来将一组标题组合在一起，如

<header>
<hgroup>
<h1> Recall Fan Page h1>
<h2> Only for people who want the memory of a lifetime. h2>
hgroup>
header>

14. Required属性：required属性定义了一个input是否是必须的，你可以像下面这样声明

或者

15. Autofocus属性：正如它的词义，就是聚焦到输入框里面

16. Audio支持：HTML5提供了

<audio autoplay=”autoplay” controls=”controls”>
<source src=”file.ogg” />–FF–>
<source src=”file.mp3″ />–Webkit–>
<a href=”file.mp3″>Download this file.a>
audio>

17. Video支持：和 Audio很像，

18. 预加载视频：preload属性就像它的字面意思那么简单，你需要决定是否需要在页面加载的时候去预加载视频

19. 显示视频控制：

20. 正则表达式：由于pattern属性，我们可以在你的markup里面直接使用正则表达式了

21. 检测属性支持：除了Modernizr之外我们还可以通过javascript简单地检测一些属性是否支持，如：

 

22. Mark元素：把元素看做是高亮的作用，当我选择一段文字的时候，javascript对于HTML的markup效果应该是这样的：

23. 什么时候用

 ：HTML5已经引入了这么多元素，那么div我们还要用吗？div你可以在没有更好的元素的时候去用。

26. Data属性

Bla Bla

CSS中使用：

27. Output元素：

元素用来显示计算结果，也有一个和label一样的for属性

28. 用Range Input来创建滑块：HTML5引用的range类型可以创建滑块，它接受min, max, step和value属性

可以使用css的:before和:after来显示min和max的值

 

38、form表单

action 属性定义在提交表单时执行的动作。如果省略 action 属性，则 action 会被设置为当前页面。如果要正确地被提交，每个输入字段必须设置一个 name 属性。

本例只会提交 "Last name" 输入字段：

实例

用

组合表单数据

元素组合表单中的相关数据

元素为

元素定义标题。

实例

属性	描述
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）。
action	规定向何处提交表单的地址（URL）（提交页面）。
autocomplete	规定浏览器应该自动完成表单（默认：开启）。
enctype	规定被提交数据的编码（默认：url-encoded）。
method	规定在提交表单时所用的 HTTP 方法（默认：GET）。
name	规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate	规定浏览器不验证表单。
target	规定 action 属性中地址的目标（默认：_self）。

39、input type 属性

值	描述
button	定义可点击的按钮（大多与 JavaScript 使用来启动脚本）
checkbox	定义复选框。
color	定义拾色器。
date	定义日期字段（带有 calendar 控件）
datetime	定义日期字段（带有 calendar 和 time 控件）
datetime-local	定义日期字段（带有 calendar 和 time 控件）
month	定义日期字段的月（带有 calendar 控件）
week	定义日期字段的周（带有 calendar 控件）
time	定义日期字段的时、分、秒（带有 time 控件）
email	定义用于 e-mail 地址的文本字段
file	定义输入字段和 "浏览..." 按钮，供文件上传
hidden	定义隐藏输入字段
image	定义图像作为提交按钮
number	定义带有 spinner 控件的数字字段
password	定义密码字段。字段中的字符会被遮蔽。
radio	定义单选按钮。
range	定义带有 slider 控件的数字字段。
reset	定义重置按钮。重置按钮会将所有表单字段重置为初始值。
search	定义用于搜索的文本字段。
submit	定义提交按钮。提交按钮向服务器发送数据。
tel	定义用于电话号码的文本字段。
text	默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符。
url	定义用于 URL 的文本字段。

40、Label for属性

for 属性规定 label 与哪个表单元素绑定。

隐式和显式的联系：标记通常以下面两种方式中的一种来和表单控件相联系：将表单控件作为标记标签的内容，这样的就是隐式形式，或者为 标签下的 for 属性命名一个目标表单 id，这样就是显式形式。

例如，在 XHTML 中：

第一个标记是以显式形式将文本 "Social Security Number:" 和表单的社会安全号码的文本输入控件 ("SocSecNum") 联系起来，它的 for 属性的值和控件的 id 一样，都是 SSN。第二个标记 ("Date of Birth:") 不需要 for 属性，它的相关控件也不需要 id 属性，它们是通过在 标签中放入 标签来隐式地连接起来的。

41、MVC模式

MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。

MVC 模式同时提供了对 HTML、CSS 和 JavaScript 的完全控制。

Model（模型）是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据。

View（视图）是应用程序中处理数据显示的部分。通常视图是依据模型数据创建的。

Controller（控制器）是应用程序中处理用户交互的部分。通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。

MVC 分层有助于管理复杂的应用程序，因为您可以在一个时间内专门关注一个方面。例如，您可以在不依赖业务逻辑的情况下专注于视图设计。同时也让应用程序的测试更加容易。

MVC 分层同时也简化了分组开发。不同的开发人员可同时开发视图、控制器逻辑和业务逻辑。

42、Angular

1、优点

模板功能强大丰富，并且是声明式的，自带了丰富的 Angular 指令；

是一个比较完善的前端MV*框架，包含模板，数据双向绑定，路由，模块化，服务，依赖注入等所有功能

自定义 Directive，比 jQuery 插件还灵活，但是需要深入了解 Directive 的一些特性，简单的封装容易，复杂一点官方没有提供详细的介绍文档，我们可以通过阅读源代码来找到某些我们需要的东西，如：在 directive 使用 $parse

ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助，我们的项目从上线到目前，UI变化很大，在摸索中迭代产品，但是js的代码基本上很少改动

补充：Angular支持单元测试和e2e-testing

2、缺点

验证功能错误信息显示比较薄弱，需要写很多模板标签，没有JQuery Validate方便，所以我们自己封装了验证的错误信息提示，详细参考 why520crazy/w5c-validator-angular · GitHub

ngView只能有一个，不能嵌套多个视图，虽然有 angular-ui/ui-router · GitHub 解决，但是貌似ui-router 对于URL的控制不是很灵活，必须是嵌套式的（也许我没有深入了解或者新版本有改进）

对于特别复杂的应用场景，貌似性能有点问题，特别是在Windows下使用chrome浏览器，不知道是内存泄漏了还是什么其他问题，没有找到好的解决方案，奇怪的是在IE10下反而很快，对此还在观察中

这次从1.0.X升级到1.2.X，貌似有比较大的调整，没有完美兼容低版本，升级之后可能会导致一个兼容性的BUG，具体详细信息参考官方文档 AngularJS ，对应的中文版本：Angular 1.0到1.2 迁移指南

ng提倡在控制器里面不要有操作DOM的代码，对于一些JQuery 插件的使用，如果想不破坏代码的整洁性，需要写一些directive去封装一下JQ插件，但是现在有很多插件的版本已经支持Angular了，如：jQuery File Upload Demo

Angular 太笨重了，没有让用户选择一个轻量级的版本，当然1.2.X后，Angular也在做一些更改，比如把route，animate等模块独立出去，让用户自己去选择

43、排序算法总结

 

44、循环遍历

1、For in

枚举过程中将会列出所有的属性。所以中间可以用hasOwnProperty，确定对象是否有自己的属性。

45、定义不可修改属性

46、清除浮动

1、使用空标签清除浮动

空标签可以是div标签，也可以是P标签。也有很多人用

---

，只是需要另外 为其清除边框，但理论上可以是任何标签。对于使用额外标签清除浮动（闭合浮动元素），是W3C推荐的 做法。

这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动，并为其定义CSS代 码：clear:both。此方法的弊端在于增加了无意义的结构元素。

 

2、使用overflow属性。

此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性：overflow:auto，即可！”zoom:1″用于兼容IE6,也可以用width:100%。

不过使用overflow的时候，可能会对页面表现带来影响，而且这种影响是不确定的，你最好是能在多个浏览器上测试你的页面；

 

3、使用after伪对象清除浮动。

 该方法只适用于非IE浏览器 。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像 素；二、content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值设为”.”，但我发现为空亦是可以的。

 

 

47、浏览器内核

JavaScript引擎是SpiderMonkey。

1、Trident

内核的常见浏览器有IE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）；^[1]  360安全浏览器（1.0-5.0为Trident，6.0为Trident+Webkit，7.0为Trident+Blink）猎豹极轻浏览器，360极速浏览器（7.5之前为Trident+Webkit，7.5为Trident+Blink）

2、Gecko

Gecko内核常见的浏览器：^[1]  Mozilla Firefox、Mozilla SeaMonkey、waterfox（Firefox的64位开源版）、Iceweasel、Epiphany（早期版本）、Flock（早期版本）、K-Meleon；

3、Presto

Presto(Opera前内核) (已废弃)： Opera12.17及更早版本曾经采用的内核，现已停止开发并废弃，该内核在2003年的Opera7中首次被使用，该款引擎的特点就是渲染速度的优化达到了极致，然而代价是牺牲了网页的兼容性。

4、WebKit

WebKit内核常见的浏览器：傲游浏览器3、^[1]  Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器，

5、Blink

Blink是一个由Google和Opera Software开发的浏览器排版引擎，Google计划将这个渲染引擎作为Chromium计划的一部分，并且在2013年4月的时候公布了这一消息。 这一渲染引擎是开源引擎WebKit中WebCore组件的一个分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）和 Yandex浏览器中使用。

48、获取url后面的参数并变为对象

 

 

49、 常用那几种浏览器测试？有哪些内核(Layout Engine)?

　　(Q1) 浏览器：IE，Chrome，FireFox，Safari，Opera。

　　(Q2) 内核：Trident，Gecko，Presto，Webkit。

50. 说下行内元素和块级元素的区别？行内块元素的兼容性使用？（IE8 以下）

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

块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行。

　　(Q2) 兼容性：display:inline-block;*display:inline;*zoom:1;

51.box-sizing常用的属性有哪些？分别有什么作用？

　　(Q1)box-sizing: content-box|border-box|inherit;

　　(Q2)content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。

border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

52. Doctype作用？标准模式与兼容模式各有什么区别?

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

　　(Q2) 标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

53. HTML5 为什么只需要写 ？

　　HTML5不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。

而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

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

　　主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和js引擎。

　　渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。

　　浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

　　JS引擎则：解析和执行javascript来实现网页的动态效果。

　　最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

55. html5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

(Q1)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;

 

(Q2)IE8/IE7/IE6支持通过document.createElement方法产生的标签，

　　可以利用这一特性让这些浏览器支持HTML5新标签，

　　浏览器支持新标签后，还需要添加标签默认的样式。

　　当然也可以直接使用成熟的框架、比如html5shim，

　　

56. 简述一下你对HTML语义化的理解？

• 用正确的标签做正确的事情。
• html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
• 即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
• 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于seo;
• 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

57. 介绍js的基本数据类型

　　Undefined、Null、Boolean、Number、String

58. js有哪些内置对象？

　　数据封装类对象：Object、Array、Boolean、Number 和 String

　　其他对象：Function、Arguments、Math、Date、RegExp、Error

59. this对象的理解

　　this总是指向函数的直接调用者（而非间接调用者）；

　　如果有new关键字，this指向new出来的那个对象；

　　在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window。

60. eval是做什么的？

　　它的功能是把对应的字符串解析成JS代码并运行；

　　应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。

　　由JSON字符串转换为JSON对象的时候可以用eval，var obj =eval('('+ str +')')。

61. DOM怎样添加、移除、移动、复制、创建和查找节点

• 创建新节点

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

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

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

• 添加、移除、替换、插入

　　　　appendChild()

　　　　removeChild()

　　　　replaceChild()

　　　　insertBefore() //在已有的子节点前插入一个新的子节点

• 查找

　　　　getElementsByTagName() //通过标签名称

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

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

62. null和undefined的区别？

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

undefined：

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

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

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

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

null：

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

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

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

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

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

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

64. JSON 的了解？

　　JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小。

　　格式：采用键值对，例如：{'age':'12', 'name':'back'}

65. call() 和 apply() 的区别和作用？

　　apply()函数有两个参数：第一个参数是上下文，第二个参数是参数组成的数组。如果上下文是null，则使用全局对象代替。

　　　　如：function.apply(this,[1,2,3]);

　　call()的第一个参数是上下文，后续是实例传入的参数序列。

　　　　如：function.call(this,1,2,3);

66. 如何获取UA？

 

67. 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 服务器端暂时无法处理请求（可能是过载或维护）。

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

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

69. 什么叫优雅降级和渐进增强？

　　优雅降级：web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。

由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。

　　渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。

70. 哪些常见操作会造成内存泄漏？

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

　　垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。

　　setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。

　　闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）。

 

71. 线程与进程的区别

　　一个程序至少有一个进程,一个进程至少有一个线程。

　　线程的划分尺度小于进程，使得多线程程序的并发性高。

　　另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。

　　线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。

　　从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。

72、JavaScript 运行机制详解

具体可以参考阮一峰的博文《JavaScript 运行机制详解：再谈Event Loop》

一、JavaScript是单线程？

　　JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？

所以，为了避免复杂性，从一诞生，JavaScript就是单线程，这已经成了这门语言的核心特征，将来也不会改变。

二、任务队列

　　JavaScript语言的设计者意识到，这时主线程完全可以不管IO设备，挂起处于等待中的任务，先运行排在后面的任务。等到IO设备返回了结果，再回过头，把挂起的任务继续执行下去。于是，所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务

三、事件和回调函数

　　"任务队列"是一个事件的队列（也可以理解成消息的队列），IO设备完成一项任务，就在"任务队列"中添加一个事件，表示相关的异步任务可以进入"执行栈"了。主线程读取"任务队列"，就是读取里面有哪些事件。

　　"任务队列"中的事件，除了IO设备的事件以外，还包括一些用户产生的事件（比如鼠标点击、页面滚动等等）。只要指定过回调函数，这些事件发生时就会进入"任务队列"，等待主线程读取。

四、Event Loop

　　主线程从"任务队列"中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）

五、定时器

　　除了放置异步任务的事件，"任务队列"还可以放置定时事件，即指定某些代码在多少时间之后执行。这叫做"定时器"（timer）功能，也就是定时执行的代码。

73、Css渲染机制

　　当我们的浏览器获得html文件后，会自上而下的加载，并在加载过程中进行解析和渲染。

　　加载说的就是获取资源文件的过程，如果在加载的过程中，遇到外部css文件和图片，浏览器会另外发出一个请求，来获取css文件和相应的图片，这个请求是异步的，并不会影响html文件。

　　但是如果遇到JavaScript文件，html文件会挂起渲染的线程，等待javascript加载完毕后，html文件再继续渲染。

　　为什么html需要等待javascript呢？因为javascript可能会修改DOM，导致后续的html资源白白加载，所以html必须等待javascript文件加载完毕后，再继续渲染。这也就是为什么javascript文件要写在底部body标签前的原因。

　　好了，接下来我们介绍渲染的细节，html的渲染过程就是将html代码按照深度优先遍历来生成DOM树。

　　css文件下载完后也会进行渲染，生成相应的CSSOM。

　　当所有的css文件下载完且所有的CSSOM构建结束后，就会和DOM一起生成Render Tree。

　　接下来，浏览器就会进入Layout环节，将所有的节点位置计算出来。

　　最后，通过Painting环节将所有的节点内容呈现到屏幕上。

　　我们理解的重排和重绘也就是分别触发了Layout环节和Painting环节。

74、在网页中的应该使用奇数还是偶数的字体？为什么呢？

• 偶数字号相对更容易和 web 设计的其他部分构成比例关系。比如：当我用了 14 px 的正文字号，我可能会在一些地方用 14 × 0.5 = 7 px 的 margin，在另一些地方用 14 × 1.5 = 21 px 的标题字号。
• Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px 时用的是小一号的点阵（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。

75、水平竖直居中的方法

1、使用flex

 

2、使用transform

 

3、块的大小都知道

前面两种在不知道容器的大小可以使用，下面这种事需要知道大小的