2017.10.15面试问题难点总结

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

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

常见的浏览器内核有哪些？

现在的内核原来是有五种的 webkit（谷歌） trident（ie） gecko（火狐） presto（已废弃） blink（Opera）

HTML5的离线储存怎么使用，工作原理能不能解释一下？

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件
原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示
如何使用：

1、页面头部像下面一样加入一个manifest的属性
2、在cache.manifest文件的编写离线存储的资源
3、在离线状态时，操作window.applicationCache进行需求实现

CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html

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

label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上

姓名

HTML5的form如何关闭自动完成功能？

给不想要提示的form或者某个input设置

autocomplete = off

网页验证码是干嘛的，是为了解决什么安全问题

区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水
有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试

移动端的布局用过媒体查询吗？

假设你现在正用一台显示设备来阅读这篇文章，同时你也想把它投影到屏幕上，或者打印出来，而显示设备、屏幕投影和打印等这些媒介都有自己的特点，CSS就是为文档提供在不同媒介上展示的适配方法
当媒体查询为真时，相关的样式表或样式规则会按照正常的级联规被应用。
当媒体查询返回假，标签上带有媒体查询的样式表仍将被下载（只不过不会被应用）
包含了一个媒体类型和至少一个使用宽度、高度和颜色等媒体属性来限制样式表范围的表达式
CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围

HTTP 方法

一台服务器要与HTTP1.1兼容，只要为资源实现GET和HEAD方法即可
GET是最常用的方法，通常用于请求服务器发送某个资源。
HEAD与GET类似，但服务器在响应中值返回首部，不返回实体的主体部分
PUT让服务器用请求的主体部分来创建一个由所请求的URL命名的新文档，或者，如果那个URL已经存在的话，就用干这个主体替代它
POST起初是用来向服务器输入数据的。实际上，通常会用它来支持HTML的表单。表单中填好的数据通常会被送给服务器，然后由服务器将其发送到要去的地方。
TRACE会在目的服务器端发起一个环回诊断，最后一站的服务器会弹回一个TRACE响应并在响应主体中携带它收到的原始请求报文。TRACE方法主要用于诊断，用于验证请求是否如愿穿过了请求/响应链。
OPTIONS方法请求web服务器告知其支持的各种功能。可以查询服务器支持哪些方法或者对某些特殊资源支持哪些方法。
DELETE请求服务器删除请求URL指定的资源

使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）

可以分为两大类

基于传统的margin和position等属性进行布局

这种方法又分为以下三种方法

position绝对定位法
绝对定位法原理是将左右两边使用absolute定位，因为绝对定位使其脱离文档流，后面的center会自然流动到他们上面，然后使用margin属性，留出左右元素的宽度，既可以使中间元素自适应屏幕宽度。
html

  
  
      
          
        layout_box  
          
      
      
        实现三列宽度自适应布局  
        我是左边  
        我是右边  
        我是中间

css

html,body{ margin: 0px;width: 100%; }  
h3{height: 100px;margin:20px 0 0;}  
#left,#right{width: 200px;height: 200px; background-color: #ffe6b8;position: absolute;top:120px;}  
#left{left:0px;}  
#right{right: 0px;}  
#center{margin:2px 210px ;background-color: #eee;height: 200px; }

自身浮动法
原理就是使用对左右分别使用float:left和float:right,float把左右两个文档脱离文档流，中间元素在正常的文档流中，使用margin指定左右外边距进行定位。
圣杯布局（margin负值法）
使用该方法需要注意的点，第一就是需要在center的外部再多加一层div，第二就是要给外层div设置float属性，使其形成一个BFC，并设置其宽度100%。第三，左右可以使用float进行浮动，然后左边可以设置margin负值为-100%，右边可以设置margin负值为它的宽度。具体实现代码如下：

使用margin负值法进行布局

#wrap{ width: 100%;height: 100px; background-color: #fff;float: left;}  
#wrap #center{ margin:0 210px; height: 100px;background-color: #ffe6b8; }  
#left_margin,#right_margin{ float: left;width: 200px;height: 100px;background-color: darkorange }  
#left_margin {margin-left: -100%; background-color: lightpink}  
#right_margin{margin-left: -200px;}

使用CSS3新特性

使用flex布局
首先，应该先给外层包裹一层div，并设置display:flex，中间层设置flex:1。具体的代码实现如下所示，这部分可以详细参考flex布局

HTML

CSS

#box{width:100%;display: flex; height: 100px;margin: 10px;}  
#left_box,#right_box{width: 200px;height: 100px; margin: 10px; background-color: lightpink}  
#center_box{ flex:1; height: 100px;margin: 10px; background-color: lightgreen}