唉，毕业了，找份工作真难，现在才发现浪费了大学空闲的学习时光。不多说，记录自己面试问到的问题！面试一家，更新一家....
第一家
如何进入严格模式？严格模式和混淆模式的区别？
进入”严格模式”的标志，是下面这行语句：
"use strict";
老版本的浏览器会把它当作一行普通字符串，加以忽略。
严格模式相对于混淆模式的区别：
语法和行为改变
严格模式对Javascript的语法和行为，都做了一些改变
1. 全局变量显式声明
在正常模式中，如果一个变量没有声明就赋值，默认是全局变量。严格模式禁止这种用法，全局变量必须显式声明。
2. 静态绑定
Javascript语言的一个特点，就是允许”动态绑定”，即某些属性和方法到底属于哪一个对象，不是在编译时确定的，而是在运行时（runtime）确 定的。
严格模式不允许动态绑定，只允许静态绑定。也就是说，属性和方法到底归属哪个对象，必须在编译阶段就确定。这样做有利于编译效率的提高，也 使得代码更容易阅读，更少出现意外。
具体来说，涉及以下几个方面。
2.1 禁止使用with语句
因为with语句无法在编译时就确定，属性到底归属哪个对象。
2.2 创设eval作用域
正常模式下，Javascript语言有两种变量作用域（scope）：全局作用域和函数作用域。严格模式创设了第三种作用域：eval作用域。
正常模式下，eval语句的作用域，取决于它处于全局作用域，还是函数作用域。严格模式下，eval语句本身就是一个作用域，不再能够生成全局变 量了，它所生成的变量只能用于eval内部。
3 增强的安全措施
3.1 禁止this关键字指向全局对象，使用构造函数时，如果忘了加new，this不再指向全局对象，而是报错
3.2 禁止在函数内部遍历调用栈
4 禁止删除变量
严格模式下无法删除变量。只有configurable设置为true的对象属性，才能被删除。
5 显式报错
正常模式下，对一个对象的只读属性进行赋值，不会报错，只会默默地失败。严格模式下，将报错。
严格模式下，对一个使用getter方法读取的属性进行赋值，会报错。
严格模式下，对禁止扩展的对象添加新属性，会报错。
严格模式下，删除一个不可删除的属性，会报错。
6 重名错误
严格模式新增了一些语法错误。
6.1 对象不能有重名的属性
正常模式下，如果对象有多个重名属性，最后赋值的那个属性会覆盖前面的值。严格模式下，这属于语法错误。
6.2 函数不能有重名的参数
正常模式下，如果函数有多个重名的参数，可以用arguments[i]读取。严格模式下，这属于语法错误。
7 禁止八进制表示法
正常模式下，整数的第一位如果是0，表示这是八进制数，比如0100等于十进制的64。严格模式禁止这种表示法，整数第一位为0，将报错。
8 arguments对象的限制
arguments是函数的参数对象，严格模式对它的使用做了限制。
8.1 不允许对arguments赋值
8.2 arguments不再追踪参数的变化
8.3 禁止使用arguments.callee
9 函数必须声明在顶层
将来Javascript的新版本会引入”块级作用域”。为了与新版本接轨，严格模式只允许在全局作用域或函数作用域的顶层声明函数。也就是说，不允 许在非函数的代码块内声明函数。
10 保留字
为了向将来Javascript的新版本过渡，严格模式新增了一些保留字：implements, interface, let, package, private, protected, public, static, yield。
使用这些词作为变量名将会报错。
link和@import的区别
link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
link是用于加载一个css文件,而@import是用于在css文件中加载其他的css文件，主要是用在大型项目中，可以通过@import来管理这些css文件。
主要区别就是: link是一个标签，写在html文档中的，而@import是写在css样式表中的
对于http的理解
a)HTTP 是基于 TCP/IP 协议的应用层协议。它不涉及数据包（packet）传输，主要规定了客户端和服务器之间的通信格式，默认使用80端口。
b)http使得互联网不仅可以传输文字，还能传输图像、视频、二进制文件,其次是规定了许多动词方法(命令)：get,post,head,put,patch,options,delete.
c)在http1.1中还采用了分块传输编码的方式进行数据传输，在node中就是stream流
http做的工作是：
i.接收客户端的请求，允许的请求命令是：get,post,head,put,patch,options,delete
ii.对客户端的请求做出回应，可以发送文字、图像、视频、二进制文件
iii.通过头信息，描述了一些元数据，比如：状态码（status code）、多字符集支持、多部分发送（multi-part type）、权限（authorization）、缓存（cache）、内容编码（content encoding）等，例子：
1.Content-Encoding: gzip
2.Content-Encoding: compress
3.Content-Encoding: deflate
iv.而且可以将数据压缩后再发送Content-Encoding字段说明数据的压缩方法，在客户端中，我们也可以通过Accept-Encoding字段说明自己可以接受哪些压缩方法：例子：Accept-Encoding: gzip, deflate
允许持久连接，对于同一个域名，大多数浏览器允许同时建立6个持久连接
a.域名解析
b.发起TCP的三次握手
c.建立TCP连接后发起http请求
d.服务器端响应http请求，浏览器得到html码
e.浏览器解析html代码，并请求html代码中的资源
f.浏览器对页面进行渲染并呈现给客户
cookie跨越问题
Ajax如何同步操作
原生Ajax中，请求XMLHttpReques对象事例中
调用open方法携带三个参数，请求方式，URL，是否异步
请求方式中分为：get/post
获取数据的地址：URL
是否异步：true为异步，false为同步
写几个IE6常见的BUG以及解决方法
IE6下，块元素，同时有浮动和横向margin时，横向margin会变成两倍。
加设一个display:inline；
IE6下li里的子元素如果都浮动，每个li之间会产生4px的缝隙。
加设一个vertical:top；
IE6下量浮动元素间注释或存在内联元素时显示异常。
删除内联元素/注释，或者与父级元素宽度相差3px以上；
IE6下父级元素的overflow:hidden包不住子级元素的relative。
给父级元素也增加一个relative。
IE6下绝对定位元素的父级元素宽高是奇数的，显示异常。
不要使用奇数。
IE6下浮动元素和绝对定位元素同级且并列时，绝对定位元素消失。
使两者不要同级存在。
IE6下input有间隙。
给input增加一个float
IE6下输入类型表单控件背景图片，在输入框被写满时会把图片推走。
增加background:fixed
<!DOCTYPE HTML>文档类型的声明。IE6浏览器，当我们没有书写这个文档声明的时候，会触发IE6浏览器的怪异解析现象；
书写文档声明。
不同浏览器当中，很多的标签的默认样式不同，如默认的外部丁内补丁。
利用[CSS reset]进行样式的清除，然后再根据需要进行设置。
横向双倍外边距，在IE6中块元素浮动后，会出现[横向双倍margin]现象。
在float标签的样式控制中加入display：inline
默认行高，IE6、IE7、遨游浏览器；设置的文字高度超出盒模型内容区域设置的高度时会影响布局。
给超出高度的标签设置overflow：hidden；或者将文字的行高line-height设置为小于块的高度。
img标签有链接时外部的border
设置img边框border:0;
图片默认有间距。img标签（每个img之后敲了回车）
为img设置float的浮动布局方式。
经典3像素bug。IE6浏览器，浮动块元素与未浮动块元素处于同一行，有默认的3px间距。
设置非浮动元素浮动。
默认行高，清除浮动的时候，有些人会采取一种[清浮动的方法]。使用一个空的div，然后为这个div设置{clear：both}。在大部分浏览器当中，这样做是没有任何问题的，但是在IE6浏览器当中，div即使是空的，也会存在默认行高。
设置其高度为0，并设置overflow:hidden。{height:0;overflow:hidden;clear:both;}
a标签hover不适用于所有标签。IE6浏览器中hover只支持a标签的使用，不支持一切其它标签使用；
合理用a标签嵌套其他行内标签或者用javascript模拟a的hover效果；
IE6中table设置属性border-color无效；
运用CSS样式进行控制，而不是使用属性进行样式的处理。
IE6浏览器，不支持透明；
使用javascript进行处理；或者使用gif、jpg图像替代掉png图片的使用。
IE6不支持透明rgba与opacity此两种透明的设置方法；
使用IE6当中的滤镜filter替代掉，如：opacity:0.6;filter:alpha(opacity=60)。
子选择器在IE6中不能使用
采用其他选择器或者采用后代选择器进行控制，如：div
p{margin:10px;} div p p{margin:0;}替代掉 div>p{margin:10px;}。
IE6浏览器，标签的最低高度/宽度设置（min/max-height）
为IE6单独设置hack，即_height:最小高度值；_width：最小宽度值（对于IE6，当实际宽高超出定义的宽高时，元素会自动调整宽高）。对于最 大高度和最大宽度，没有必要设置兼容，当前对于开发者来说，只需要保证IE6下正常显示即可，无需在它身上花费太多功夫。
纵向居中，IE6不支持display:table-cell。IE6浏览器，设置一个元素在另一个元素中垂直方向上居中对齐，不能够支持以单元格的方式来显示元素；
如果是单行文本，采用line-height和height的配合使得文本垂直居中，
如果中间是其他元素或者多行文本，采用其他方法进行居中处理，处理方法有多种。
input 聚焦框颜色与样式不同
使用outline:none，清除默认样式之后再统一设置。
鼠标移上小手效果产生条件：IE6，
cursor:hand ：IE完全支持。但是在firefox是不支持的，没有效果。
cursor:pointer ：是CSS2.0的标准。所以firefox是支持的，但是IE5.0既之前版本不支持。IE6开始支持。
cursor:pointer ; cursor:hand。
子标签无法撑开父标签的高度。产生条件：父标签内部含一个或多个子标签，父标签没有设置浮动，而子标签发生浮动；
方法1：在子标签最后添加清除浮动的设置<div style='height:0;clear:both'></div>;
方法2：为父标签添加{overflow:hidden;}的样式；
方法3：为父标签设置固定高度。
li的间距问题。IE6浏览器 li标签设置宽高，且li里面的元素发生了浮动；
方法1：li不设置宽高；
方法2：li内部的标签不进行浮动。
多个浮动元素中间夹杂HTML注释语句，浮动元素宽度设置为100%；则在下一行多显示一个上一行的最后一个字符；
果断删掉注释！
CSS优先级 ！important。IE6当中，在同一组CSS属性中，!important不起作用；
单独设置。
微信公众号开发流程
写出内联、块、空标签
内联：
* a - 锚点
* abbr - 缩写
* acronym - 首字
* b - 粗体(不推荐)
* bdo - bidi override
* big - 大字体
* br - 换行
* cite - 引用
* code - 计算机代码(在引用源码的时候需要)
* dfn - 定义字段
* em - 强调
* font - 字体设定(不推荐)
* i - 斜体
* img - 图片
* input - 输入框
* kbd - 定义键盘文本
* label - 表格标签
* q - 短引用
* s - 中划线(不推荐)
* samp - 定义范例计算机代码
* select - 项目选择
* small - 小字体文本
* span - 常用内联容器，定义文本内区块
* strike - 中划线
* strong - 粗体强调
* sub - 下标
* sup - 上标
* textarea - 多行文本输入框
* tt - 电传文本
* u - 下划线
* var - 定义变量
块标签：
* address - 地址
* blockquote - 块引用
* center - 举中对齐块
* dir - 目录列表
* div - 常用块级容易，也是css layout的主要标签
* dl - 定义列表
* fieldset - form控制组
* form - 交互表单
* h1 - 大标题
* h2 - 副标题
* h3 - 3级标题
* h4 - 4级标题
* h5 - 5级标题
* h6 - 6级标题
* hr - 水平分隔线
* isindex - input prompt
* menu - 菜单列表
* noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
* noscript - ）可选脚本内容（对于不支持script的浏览器显示此内容）
* ol - 排序表单
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表
空标签：
<br />
<hr />
<input />
<img />
<isindex />
<area />
<base />
<basefont />
<bgsound />
<col />
<embed />
<frame />
<keygen />
<link />
<meta />
<nextid />
<param />
<plaintext />
<spacer />
<wbr />
<!DOCTYPE>
<!-- -->
第二家
如何判断null,undefined, Array？typeof和instanceof安全吗？
1.typeof（null和Array返回一个object）
typeof有局限性，只能判断对象或原始值，一般只能返回如下几个结果：
number、boolean、string、function、object、undefined、symbol(ES6新增)
2.instanceof
instanceof运算符会返回一个 Boolean 类型的值，指出对象是否是特定类的一个实例
判断undefined:
使用typeof即可
判断null:
var exp = null;
if (!exp && typeof(exp)!="undefined" && exp!=0){
alert("is null");
}
判断Array:
var array = [1, 2 ,3]
1.typeof
typeof array // 结果打出来的是object
2.instanceof
array instanceof Array // 结果true 其实instanceof还是有一定的局限性的，一想到这，不是验证正确了吗？没毛病啊！
//事实上在多个frame中穿梭就会产生大问题了
3.Object.prototype.toString( )
toString.apply(array) === '[object Array]'
4.JQ中$.isArray()
$.isArray(array)
disply和position的属性？
1.display属性:
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row 此元素会作为一个表格行显示（类似 <tr>）。
table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column 此元素会作为一个单元格列显示（类似 <col>）
table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption 此元素会作为一个表格标题显示（类似 <caption>）
inherit 规定应该从父元素继承 display 属性的值。
2.position属性
2.1 absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
2.2 fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
2.3 relative
生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
2.4 static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
2.5 inherit 规定应该从父元素继承 position 属性的值。
display:inline-block和display:inline的区别？
inline元素
1）可以设置margin-left,padding-left,padding-right,margin-right，不能设置margin-top,padding-top,padding-bottom,margin- bottom。
2）不能设置宽高
3）允许其它元素在其左右
4）在这儿查看其它非常重要的旁注
block元素
1）inline元素能设置和不能设置的属性，block都能设置
2）在block元素后强制换行
inline-block元素
1）允许其它元素在其左右
2）可以设置margin-top,padding-top,padding-bottom,margin-bottom
3）可以设置宽高
relative和absolute相对于谁定位？
absolute 生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位。
relative 生成相对定位的元素，相对于其在普通流中的位置进行定位
absolute 在子div，它的父div必须有个position属性不是默认static的。这样它就可以以父类为参照进行定位
relative 是以自身为参照，意思就是它原本该在什么位置，加上relative属性后，会以它原本按照文档流应该在的位置为参照进行定位
absolute和float的区别？
都可以将元素display：inline-block化，所有说他们可以使不支持宽高的元素重新支持宽高
两者都会使元素脱离文档流， 但是，float与absolute不同的是：
float 的元素还会在文档流上占据一个位置,
举个文字环绕的例子，
元素设置float，文字会环绕该元素，所以float的元素在文档流还是占有有一席之位的。
元素设置absolute，文字被该元素遮挡，说明absolute的元素已经完全脱离文档流，文字可以无视它的存在。
为何浏览器可以鉴别css中写的对应样式？
一个网站图片很多，你如何做优化？
1. 懒加载
localstorage和sessionstorge的区别？
共同点：都是保存在浏览器端，且同源的，一样都是用来存储客户端临时信息的对象。他们均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）
sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；
localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；
sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；
localStorage 在所有同源窗口中都是共享的；
localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。
sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。
不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标 签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的
http://www.jianshu.com/p/4649f35690d0
如何做页面缓存？
<html manifest="XXX.manifest">
其中XXX.manifest文件中更改版本号，当版本号发生改变，页面随着修改后的代码改变，否则代码修改后用户刷新网页依然无效。
你以前网站如何做兼容？兼容到什么版本？
你做过响应式布局吗？
http://blog.csdn.net/gertyy/article/details/52764527
css3新增样式？
https://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/
第三家
说下跨域
自古以来（1995年起），为了用户的信息安全，浏览器就引入了同源策略。那么同源策略是如何保证用户的信息安全的呢？
栗子1：如果没有同源策略，你打开了你的银行账户页面A，又打开了另一个不相关的页面B，这时候如果B是恶意网站，B可以通过Javascript轻松访问和修改A页面中的内容。
栗子2：现在我们广泛的使用cookie来维护用户的登录状态，而如果没有同源策略，这些cookie信息就会泄露，其他网站就可以冒充这个登录用户。
由此可以看出，同源策略确实是必不可少的，那么它会带来哪些限制呢？
1、Cookie、LocalStorage和IndexDB无法读取。
2、DOM无法获得。
3、AJAX请求不能发送。
有时候我们需要突破上述限制，就需要用跨域的方法来解决。
什么叫做不同的域？比如：
http://www.a.com:8000/a.js
协议（http）、域名（www.a.com）、端口（8000）三者中有一个不同就叫不同的域。
跨域就是不同的域间相互访问时使用某些方法来突破上述限制。
【注意：协议或者端口的不同，只能通过后台来解决。】
一、解决1、2两点限制：
==========================================================================================================================
方法1、通过document.domain跨子域
【
适用范围：
（1）两个域只是子域不同；
（2）只适用于iframe窗口与父窗口之间互相获取cookie和DOM节点，不能突破LocalStorage和IndexDB的限制。
】
当两个不同的域只是子域不同时，可以通过把document.domain设置为他们共同的父域来解决。
==========================================================================================================================
方法2、通过window.name跨域
【
适用范围：
（1）可以是两个完全不同源的域；
（2）同一个窗口内：即同一个标签页内先后打开的窗口。
】
pre-condition：
window.name属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的。
基于这个思想，我们可以在某个页面设置好 window.name 的值，然后在本标签页内跳转到另外一个域下的页面。在这个页面中就可以获取到我们刚刚设置的 window.name 了。
==========================================================================================================================
方法3、使用HTML5的window.postMessage跨域
window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。
otherWindow.postMessage(message, targetOrigin);
otherWindow:接受消息页面的window的引用。可以是页面中iframe的contentWindow属性；window.open的返回值；通过name或下标从window.frames取到的值。
message:所要发送的数据，string类型。
targetOrigin:用于限制otherWindow，*表示不做限制。
二、解决第3点限制：
==========================================================================================================================
方法4、通过JSONP跨域
【
适用范围：
（1）可以是两个完全不同源的域；
（2）只支持HTTP请求中的GET方式；
（3）老式浏览器全部支持；
（4）需要服务端支持
】
JSONP(JSON with Padding)是资料格式JSON的一种使用模式，可以让网页从别的网域要资料。
由于浏览器的同源策略，在网页端出现了这个“跨域”的问题，然而我们发现，所有的 src 属性并没有受到相关的限制，比如 img / script 等。
JSONP的基本思想是：先在网页上添加一个script标签，设置这个script标签的src属性用于向服务器请求JSON数据 ，需要注意的是，src属性的查询字符串一定要加一个callback函数，用来指定回调函数的名字 。而这个函数是在资源加载之前就已经在前端定义好的，这个函数接受一个参数并利用这个参数做一些事情。向服务器请求后，服务器会将JSON数据放在一个指定名字的回调函数里作为其参数传回来。这时，因为函数已经在前端定义好了，所以会直接调用。
==========================================================================================================================
方法5、通过CORS跨域
【
适用范围：
（1）可以是两个完全不同源的域；
（2）支持所有类型的HTTP请求；
（3）被绝大多数现代浏览器支持，老式浏览器不支持；
（4）需要服务端支持
】
对于前端开发者来说，跨域的CORS通信与同源的AJAX通信没有差别，代码完全一样。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。
浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。
cookie和web storage的区别
共同点：都是保存在浏览器端，且同源的。
区别：
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 接口使用更方便。
注意：（这里面考虑到安全因素，必要突出安全性方面的信息，比如：敏感信息如用户信息—银行账户、其它登录账户或密码）
说下浏览器内核
Trident内核代表产品Internet Explorer，又称其为IE内核。Trident（又称为MSHTML），是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器包括：IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等
Gecko内核代表作品Mozilla FirefoxGecko是一套开放源代码的、以C++编写的网页排版引擎。Gecko是最流行的排版引擎之一，仅次于Trident。使用它的最著名浏览器有Firefox、Netscape6至9
WebKit内核代表作品Safari、Chromewebkit 是一个开源项目，包含了来自KDE项目和苹果公司的一些组件，主要用于Mac OS系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示。主要代表作品有Safari和Google的浏览器Chrome,国内的360极速版，猎豹也是用webkit作为内核,移动端ios和android主流用的也都是webkit内核的
Presto内核代表作品OperaPresto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版，现在这个内核已被opera放弃，opera现在的内核是webkit的
遇到过哪些兼容性问题
公司的开发模式
前端配合后端
说下float
说下闭包
闭包简单理解就是：函数内部有嵌套定义里一个函数，内部函数调用外部函数的局部变量的时候就构成闭包。能保存局部变量，函数执行完不销毁。消耗内存资源。
闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量，利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。
闭包特性：
(1)函数内再嵌套函数
(2)内部函数可以引用外层的参数和变量
(3)参数和变量不会被垃圾回收机制回收
闭包的好处有：
1.缓存
2.面向对象中的对象
3.实现封装，防止变量跑到外层作用域中，发生命名冲突
4.匿名自执行函数，匿名自执行函数可以减小内存消耗
闭包的坏处：
1.内存消耗
2.性能差
笔试题
1.求当box1样式中position属性分别为static、relative、absolute、fixed时，box3距离body的top实际值为多少？
<style type="text/css">
body,html{
margin: 0;
/*height: 1000px;*/
}
.box1{
/*position: static;*/
/*position: relative;*/
/*position: absolute;*/
/*position: fixed;*/
top: 30px;
width: 200px;
height: 200px;
margin-top: 100px;
background: red;
}
.box3{
position: absolute;
top: 30px;
width: 200px;
height: 200px;
background: yellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div>
</div>
</body>
1.一个div定宽300px，另一个div宽度自适应，有几种布局方式？
<style type="text/css">
body,html{
height: 100%;
margin: 0;
}
/*第一种float*/
/*.box1{
float: left;
width: 300px;
height: 100%;
background: red;
}
.box2{
float: right;
width: calc(100% - 300px);
height: 100%;
background: pink;
}*/
/*第二种position*/
/*.box1{
width: 300px;
height: 100%;
position: relative;
background: red;
}
.box2{
position: absolute;
left: 300px;
top: 0;
width: calc(100% - 300px);
height: 100%;
background: pink;
}*/
/*第三种display:flex*/
body{
display: flex;
justify-content: flex-start;
}
.box1{
width: 300px;
height: 100%;
background: red;
}
.box2{
width: 100%;
height: 100%;
background: pink;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">1</div>
</body>
3.点击box3，以下js中最后console.log输出什么？
<style type="text/css">
.box1{
position: relative;
width: 200px;
height: 200px;
background: pink;
}
.box2{
position: absolute;
width: 150px;
height: 150px;
background: red;
left: calc(50% - 75px);
top: calc(50% - 75px);
}
.box3{
position: inherit;
width: 100px;
height: 100px;
background: yellow;
left: calc(50% - 50px);
top: calc(50% - 50px);
}
</style>
<script type="text/javascript">
window.onload = function () {
var box = document.getElementsByTagName("div");
var box1 = box[0];
var box2 = box[1];
var box3 = box[2];
box1.onclick = function () {
console.log(1)
}
box2.onclick = function () {
console.log(2)
}
box3.onclick = function () {
console.log(3)
}
}
</script>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div>
</div>
</body>
3.以下console.log最后输出什么？
window.onload = function () {
var data = [
{a:1,b:2},
{a:3,b:4},
{a:5,b:6}
];
data[0].a = 99;
data[1].a = 99;
console.log(data)
}
网友评论