前端面试题补充二

Doctype的作用

声明位于位于HTML文档中的第一行，处于

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

标准模式和兼容模式的区别

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

行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

• 行内元素： a span img input select strong
• 块级元素:： div ul ol li dl dd dt p h1- h6
• 空元素： <br> <hr> <img> <input> <link> <meta> 以及不常见的 <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

引入样式时link和import的区别？

（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;

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

（3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

浏览器内核是什么？

分为渲染引擎(layout engineer或Rendering Engine)和JS引擎。

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

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

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

常用浏览器及内核

1. IE 浏览器 – Trident内核
2. Opera浏览器 – Presto内核 ，现为Blink内核
3. Safari浏览器 – Webkit内核
4. Chrome浏览器 – WebKit内核
5. 火狐浏览器 – Gecko内核

浏览器存储方式有三种，及区别

1. Cookie 数据大小不能超过4k，窗口或浏览器关闭 cookie在过期时间之前一直有效
2. sessionStorage 只能存储字符串 数据在浏览器窗口关闭后自动删除
3. Localstorage 只能存储字符串 存储持久数据，浏览器关闭后数据不会丢失，除非主动删除数据。

iframe的缺点

• 阻塞页面的onload事件
• 不利于seo，搜索引擎的检索程序无法解读这种页面
• 影响页面并行加载，减慢页面加载速度

CSS3新增伪类有哪些？

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

元素的每个

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

元素的每个

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

元素的每个

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

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

元素。

:after          在元素之前添加内容,也可以用来做清除浮动。
:before         在元素之后添加内容
:enabled        
:disabled       控制表单控件的禁用状态。
:checked        单选框或复选框被选中。

用纯css创建一个三角形

#demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

优雅降级和渐进增强？

优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会针对旧版本的IE进行降级处理了,使之在旧式浏览器上以某种形式降级体验却不至于完全不能用。
如：border-shadow

渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新版本浏览器才支持的功能,向页面增加不影响基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。
如：默认使用flash上传，但如果浏览器支持 HTML5 的文件上传功能，则使用HTML5实现更好的体验；

性能优化

（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布局慢。

http状态码

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

跨域是什么？

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

跨域的解决方法

1. 设置document.domain解决无法读取非同源网页的 Cookie问题
2. 跨文档通信 API：window.postMessage()
3. JSONP
4. CORS跨域资源分享

前后端分离的理解？

在前后端分离的应用模式中，后端仅返回前端所需的数据，不再渲染HTML页面，不再控制前端的效果。至于前端用户看到什么效果，从后端请求的数据如何加载到前端中，都由前端自己决定，网页有网页的处理方式，App有App的处理方式，但无论哪种前端，所需的数据基本相同，后端仅需开发一套逻辑对外提供数据即可。

在前后端分离的应用模式中 ，前端与后端的耦合度相对较低。

媒体查询是什么？

媒体指的就是各种设备 (移动设备, PC设备) 查询指的是要检测属于哪种设备
媒体查询: 通过查询当前属于哪种设备, 让网页能够在不同的设备下正常的预览使用

 @media only screen  and (max-width: 420px) {
      	body {
      		background-color: red;
      	}
      }