[关闭]
@ChuckIsReady 2020-08-28T01:33:01.000000Z 字数 36731 阅读 818

前端面试题目综合 X

未分类

面筋问题

socket.io

前端在发送第一个 XHR 的时候就开始了 XHR 长轮询，这个时候如果有收发数据的需求，是通过长轮询实现的。所谓长轮询，是指前端发送一个 request，服务端会等到有数据需要返回时再 response. 前端收到 response 后马上发送下一次 request。这样就可以实现双向通信。前端收到握手的 upgrades 后，EIO 会检测浏览器是否支持 WebSocket，如果支持，就会启动一个 WebSocket 连接，然后通过这个 WebSocket 往服务器发一条内容为 probe, 类型为 ping 的数据。如果这时服务器返回了内容为 probe, 类型为 pong 的数据，前端就会把前面建立的 HTTP 长轮询停掉，后面只使用 WebSocket 通道进行收发数据。EIO Socket 生命周期内，会间隔一段时间 ping - pong 一次，用来测试网络是否正常。

事件代理

此处输入链接的描述

ajax与jsonp

json 是一种数据格式
jsonp 是一种数据调用的方式。

你可以简单的理解为 带callback的json就是jsonp.

ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加标签来调用服务器提供的js脚本

JSONP漏洞点主要有：callback参数注入、资源访问授权设置
b站可以在a站登陆时获取a站的json数据

缓存

<meta http-equiv="pragma" content="no-cache">
为什么有了last-modified还要有etags

某些服务器不能精确得到资源的最后修改时间，这样就无法通过最后修改时间判断资源是否更新

如果资源修改非常频繁，在秒以下的时间内进行修改，而Last-modified只能精确到秒

一些资源的最后修改时间改变了，但是内容没改变，使用ETag就认为资源还是没有修改的
此处输入图片的描述

h5中的离线存储
<html lang="en" manifest="demo.manifest">

本地存储

localstorage和sessionstorage

大数相加问题

js中 大于2的53次方就不能精确到个位，9007199254740992，约等于9后面15个0
大于

$ 基础问题

计算机网络相关 点击这里

堆和栈

堆 先进先出 排队吃饭，系统管理 变量名之类的
栈 先进后出 子弹夹 ，程序员管理，对象体之类的。

因此对于const定义的变量
1.如果是值类型，值不可变 const a =1
2.如果是引用类型，地址不可变 const b = {} b.a = 1;

堆溢出可以循环创建对象或大的对象,栈溢出用递归

高级前端知识补充

浏览器渲染过程

此处输入图片的描述

HTTP2.0

推荐科普1 推荐科普2

  1. 多路复用 (Multiplexing)

    所有的请求都是通过一个 TCP 连接并发完成,同时支持优先级和流量控制

  2. 二进制分帧(Binary Framing)

    将所有传输的信息分割为更小的消息和帧（frame）,并对它们采用二进制格式的编码

  3. 首部压缩（Header Compression）

    HTTP/2 对消息头采用 HPACK 进行压缩传输

  4. 服务端推送（Server Push）

    让服务端预先推送资源给客户端

前端因此产生的变化
1. 减少HTTP请求不一定提升性能，所以雪碧图，合并js文件后单个过大反而影响速度

XSS 和 CSRF

XSS （跨站脚本攻击） Cross Site Scripting
CSRF：跨站请求伪造 Cross-site request forgery

XSS 伤害网站（获得用户权限【比如连接里夹带alert】，存储式的还能获得网站权限【比如微博昵称】）
CSRF 伤害用户（获得的是用户权限【比如get连接请求操作发帖】）

XSS防范

  1. 过滤用户输入
  2. 对不可信输出编码
  3. 安全Cookie（cookie设置HttpOnly）
  4. 多测试

CSRF
1.规范请求类型。
2.检查Referer
3.设置请求Token
4.防住第一道防线-XSS

$javascript编程部分

自己理解的深拷贝对象

  1.       function deepCopy(obj){
  2.             var o;
  3.             switch(typeof obj){
  4.             case 'undefined': break;
  5.             case 'string'   : o = obj + '';break;
  6.             case 'number'   : o = obj - 0;break;
  7.             case 'boolean'  : o = obj;break;
  8.             case 'object'   :
  9.                 if(obj === null){
  10.                     o = null;
  11.                 }
  12.                 else if (obj.nodeType && 'cloneNode' in obj) {
  13.                     return obj.cloneNode(true);
  14.                 }
  15.                 else{
  16.                     var Constructor = obj.constructor;
  17.                     switch (Constructor) {
  18.                         case RegExp:
  19.                           o = new Constructor(obj);
  20.                           break;
  21.                         case Date:
  22.                           o = new Constructor(obj.getTime());
  23.                           break;
  24.                         default:
  25.                           o = new Constructor();
  26.                     }   
  27.                     if(obj instanceof Array){
  28.                         for(var i = 0, len = obj.length; i < len; i++){
  29.                             o.push(deepCopy(obj[i]));
  30.                         }
  31.                     }else{
  32.                         for(var k in obj){
  33.                             o[k] = deepCopy(obj[k]);
  34.                         }
  35.                     }
  36.                 }
  37.                 break;
  38.             default:
  39.                 o = obj;break;
  40.             }
  41.             return o;
  42.         }

存在问题：无法拷贝Arguments，Error，Blob、File、FileList、ImageData，还有es6的Map、Set、WeakMap、WeakSet、ArrayBuffer对象、TypedArray视图和DataView视图、Float32Array、Float64Array、Int8Array
我觉得不需要更加复杂的了，那种情况下需要针对专门编程。

$HTML， HTTP，web综合问题

常见排序算法的时间复杂度,空间复杂度

排序算法比较

前端需要注意哪些SEO

  1. 合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可
  2. 语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
  3. 重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
  4. 重要内容不要用js输出：爬虫不会执行js获取内容
  5. 少用iframe：搜索引擎不会抓取iframe中的内容
  6. 非装饰性图片必须加alt
  7. 提高网站速度：网站速度是搜索引擎排序的一个重要指标

web开发中会话跟踪的方法有哪些

  1. cookie
  2. session
  3. url重写
  4. 隐藏input
  5. ip地址

<img>的title和alt有什么区别

  1. title是global attributes之一，用于为元素提供附加的advisory information。通常当鼠标滑动到元素上的时候显示。
  2. alt是<img>的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。

doctype是什么,举例常见doctype及特点

  1. <!doctype html>声明必须处于HTML文档的头部，在<html>标签之前，HTML5中不区分大小写
  2. <!doctype html>声明不是一个HTML标签，是一个用于告诉浏览器当前HTMl版本的指令
  3. 现代浏览器的html布局引擎通过检查doctype决定使用兼容模式还是标准模式对文档进行渲染，一些浏览器有一个接近标准模型。
  4. 在HTML4.01中<!doctype html>声明指向一个DTD，由于HTML4.01基于SGML，所以DTD指定了标记规则以保证浏览器正确渲染内容
  5. HTML5不基于SGML，所以不用指定DTD

常见dotype：

  1. HTML4.01 strict：不允许使用表现性、废弃元素（如font）以及frameset。声明：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. HTML4.01 Transitional:允许使用表现性、废弃元素（如font），不允许使用frameset。声明：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. HTML4.01 Frameset:允许表现性元素，废气元素以及frameset。声明：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
  4. XHTML1.0 Strict:不使用允许表现性、废弃元素以及frameset。文档必须是结构良好的XML文档。声明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  5. XHTML1.0 Transitional:允许使用表现性、废弃元素，不允许frameset，文档必须是结构良好的XMl文档。声明： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  6. XHTML 1.0 Frameset:允许使用表现性、废弃元素以及frameset，文档必须是结构良好的XML文档。声明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
  7. HTML 5: <!doctype html>

HTML全局属性(global attribute)有哪些

参考资料：MDN: html global attribute或者W3C HTML global-attributes

什么是web语义化,有什么好处

web语义化是指通过HTML标记表示页面包含的信息，包含了HTML标签的语义化和css命名的语义化。
HTML标签的语义化是指：通过使用包含语义的标签（如h1-h6）恰当地表示文档结构
css命名的语义化是指：为html标签添加有意义的class，id补充未表达的语义，如Microformat通过添加符合规则的class描述信息
为什么需要语义化：

HTTP method

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

从浏览器地址栏输入url到显示页面的步骤(以HTTP为例)

  1. 在浏览器地址栏输入URL
  2. 浏览器查看缓存，如果请求资源在缓存中并且新鲜，跳转到转码步骤
    1. 如果资源未缓存，发起新请求
    2. 如果已缓存，检验是否足够新鲜，足够新鲜直接提供给客户端，否则与服务器进行验证。
    3. 检验新鲜通常有两个HTTP头进行控制Expires和Cache-Control：
      • HTTP1.0提供Expires，值为一个绝对时间表示缓存新鲜日期
      • HTTP1.1增加了Cache-Control: max-age=,值为以秒为单位的最大新鲜时间
  3. 浏览器解析URL获取协议，主机，端口，path
  4. 浏览器组装一个HTTP（GET）请求报文
  5. 浏览器获取主机ip地址，过程如下：
    1. 浏览器缓存
    2. 本机缓存
    3. hosts文件
    4. 路由器缓存
    5. ISP DNS缓存
    6. DNS递归查询（可能存在负载均衡导致每次IP不一样）
  6. 打开一个socket与目标IP地址，端口建立TCP链接，三次握手如下：
    1. 客户端发送一个TCP的SYN=1，Seq=X的包到服务器端口
    2. 服务器发回SYN=1， ACK=X+1， Seq=Y的响应包
    3. 客户端发送ACK=Y+1， Seq=Z
  7. TCP链接建立后发送HTTP请求
  8. 服务器接受请求并解析，将请求转发到服务程序，如虚拟主机使用HTTP Host头部判断请求的服务程序
  9. 服务器检查HTTP请求头是否包含缓存验证信息如果验证缓存新鲜，返回304等对应状态码
  10. 处理程序读取完整请求并准备HTTP响应，可能需要查询数据库等操作
  11. 服务器将响应报文通过TCP连接发送回浏览器
  12. 浏览器接收HTTP响应，然后根据情况选择关闭TCP连接或者保留重用，关闭TCP连接的四次握手如下：
    1. 主动方发送Fin=1， Ack=Z， Seq= X报文
    2. 被动方发送ACK=X+1， Seq=Z报文
    3. 被动方发送Fin=1， ACK=X， Seq=Y报文
    4. 主动方发送ACK=Y， Seq=X报文
  13. 浏览器检查响应状态吗：是否为1XX，3XX， 4XX， 5XX，这些情况处理与2XX不同
  14. 如果资源可缓存，进行缓存
  15. 对响应进行解码（例如gzip压缩）
  16. 根据资源类型决定如何处理（假设资源为HTML文档）
  17. 解析HTML文档，构件DOM树，下载资源，构造CSSOM树，执行js脚本，这些操作没有严格的先后顺序，以下分别解释
  18. 构建DOM树：
    1. Tokenizing：根据HTML规范将字符流解析为标记
    2. Lexing：词法分析将标记转换为对象并定义属性和规则
    3. DOM construction：根据HTML标记关系将对象组成DOM树
  19. 解析过程中遇到图片、样式表、js文件，启动下载
  20. 构建CSSOM树：
    1. Tokenizing：字符流转换为标记流
    2. Node：根据标记创建节点
    3. CSSOM：节点创建CSSOM树
  21. 根据DOM树和CSSOM树构建渲染树:
    1. 从DOM树的根节点遍历所有可见节点，不可见节点包括：1）script,meta这样本身不可见的标签。2)被css隐藏的节点，如display: none
    2. 对每一个可见节点，找到恰当的CSSOM规则并应用
    3. 发布可视节点的内容和计算样式
  22. js解析如下：
    1. 浏览器创建Document对象并解析HTML，将解析到的元素和文本节点添加到文档中，此时document.readystate为loading
    2. HTML解析器遇到没有async和defer的script时，将他们添加到文档中，然后执行行内或外部脚本。这些脚本会同步执行，并且在脚本下载和执行时解析器会暂停。这样就可以用document.write()把文本插入到输入流中。同步脚本经常简单定义函数和注册事件处理程序，他们可以遍历和操作script和他们之前的文档内容
    3. 当解析器遇到设置了async属性的script时，开始下载脚本并继续解析文档。脚本会在它下载完成后尽快执行，但是解析器不会停下来等它下载。异步脚本禁止使用document.write()，它们可以访问自己script和之前的文档元素
    4. 当文档完成解析，document.readState变成interactive
    5. 所有defer脚本会按照在文档出现的顺序执行，延迟脚本能访问完整文档树，禁止使用document.write()
    6. 浏览器在Document对象上触发DOMContentLoaded事件
    7. 此时文档完全解析完成，浏览器可能还在等待如图片等内容加载，等这些内容完成载入并且所有异步脚本完成载入和执行，document.readState变为complete,window触发load事件
  23. 显示页面（HTML解析过程中会逐步显示页面）

HTTP request报文结构是怎样的

rfc2616中进行了定义：

  1. 首行是Request-Line包括：请求方法，请求URI，协议版本，CRLF
  2. 首行之后是若干行请求头，包括general-header，request-header或者entity-header，每个一行以CRLF结束
  3. 请求头和消息实体之间有一个CRLF分隔
  4. 根据实际请求需要可能包含一个消息实体
    一个请求报文例子如下：
  1. GET /Protocols/rfc2616/rfc2616-sec5.html HTTP/1.1
  2. Host: www.w3.org
  3. Connection: keep-alive
  4. Cache-Control: max-age=0
  5. Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
  6. User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36
  7. Referer: https://www.google.com.hk/
  8. Accept-Encoding: gzip,deflate,sdch
  9. Accept-Language: zh-CN,zh;q=0.8,en;q=0.6
  10. Cookie: authorstyle=yes
  11. If-None-Match: "2cc8-3e3073913b100"
  12. If-Modified-Since: Wed, 01 Sep 2004 13:24:52 GMT
  14. name=qiu&age=25

HTTP response报文结构是怎样的

rfc2616中进行了定义：

  1. 首行是状态行包括：HTTP版本，状态码，状态描述，后面跟一个CRLF
  2. 首行之后是若干行响应头，包括：通用头部，响应头部，实体头部
  3. 响应头部和响应实体之间用一个CRLF空行分隔
  4. 最后是一个可能的消息实体
    响应报文例子如下：
  1. HTTP/1.1 200 OK
  2. Date: Tue, 08 Jul 2014 05:28:43 GMT
  3. Server: Apache/2
  4. Last-Modified: Wed, 01 Sep 2004 13:24:52 GMT
  5. ETag: "40d7-3e3073913b100"
  6. Accept-Ranges: bytes
  7. Content-Length: 16599
  8. Cache-Control: max-age=21600
  9. Expires: Tue, 08 Jul 2014 11:28:43 GMT
  10. P3P: policyref="http://www.w3.org/2001/05/P3P/p3p.xml"
  11. Content-Type: text/html; charset=iso-8859-1
  13. {"name": "qiu", "age": 25}

如何进行网站性能优化

雅虎Best Practices for Speeding Up Your Web Site：

什么是渐进增强

渐进增强是指在web设计时强调可访问性、语义化HTML标签、外部样式表和脚本。保证所有人都能访问页面的基本内容和功能同时为高级浏览器和高带宽用户提供更好的用户体验。核心原则如下:

HTTP状态码及其含义

参考RFC 2616

$CSS部分

CSS选择器有哪些

  1. *通用选择器：选择所有元素，不参与计算优先级，兼容性IE6+
  2. #X id选择器：选择id值为X的元素，兼容性：IE6+
  3. .X 类选择器： 选择class包含X的元素，兼容性：IE6+
  4. X Y后代选择器： 选择满足X选择器的后代节点中满足Y选择器的元素，兼容性：IE6+
  5. X 元素选择器： 选择标所有签为X的元素，兼容性：IE6+
  6. :link，：visited，：focus，：hover，：active链接状态： 选择特定状态的链接元素，顺序LoVe HAte，兼容性: IE4+
  7. X + Y直接兄弟选择器：在X之后第一个兄弟节点中选择满足Y选择器的元素，兼容性： IE7+
  8. X > Y子选择器： 选择X的子元素中满足Y选择器的元素，兼容性： IE7+
  9. X ~ Y兄弟： 选择X之后所有兄弟节点中满足Y选择器的元素，兼容性： IE7+
  10. [attr]：选择所有设置了attr属性的元素，兼容性IE7+
  11. [attr=value]：选择属性值刚好为value的元素
  12. [attr~=value]：选择属性值为空白符分隔，其中一个的值刚好是value的元素
  13. [attr|=value]：选择属性值刚好为value或者value-开头的元素
  14. [attr^=value]：选择属性值以value开头的元素
  15. [attr$=value]：选择属性值以value结尾的元素
  16. [attr*=value]：选择属性值中包含value的元素
  17. [:checked]：选择单选框，复选框，下拉框中选中状态下的元素，兼容性：IE9+
  18. X:after, X::after：after伪元素，选择元素虚拟子元素（元素的最后一个子元素），CSS3中::表示伪元素。兼容性:after为IE8+，::after为IE9+
  19. :hover：鼠标移入状态的元素，兼容性a标签IE4+， 所有元素IE7+
  20. :not(selector)：选择不符合selector的元素。不参与计算优先级，兼容性：IE9+
  21. ::first-letter：伪元素，选择块元素第一行的第一个字母，兼容性IE5.5+
  22. ::first-line：伪元素，选择块元素的第一行，兼容性IE5.5+
  23. :nth-child(an + b)：伪类，选择前面有an + b - 1个兄弟节点的元素，其中n
    >= 0， 兼容性IE9+
  24. :nth-last-child(an + b)：伪类，选择后面有an + b - 1个兄弟节点的元素
    其中n >= 0，兼容性IE9+
  25. X:nth-of-type(an+b)：伪类，X为选择器，解析得到元素标签，选择前面有an + b - 1个相同标签兄弟节点的元素。兼容性IE9+
  26. X:nth-last-of-type(an+b)：伪类，X为选择器，解析得到元素标签，选择后面有an+b-1个相同标签兄弟节点的元素。兼容性IE9+
  27. X:first-child：伪类，选择满足X选择器的元素，且这个元素是其父节点的第一个子元素。兼容性IE7+
  28. X:last-child：伪类，选择满足X选择器的元素，且这个元素是其父节点的最后一个子元素。兼容性IE9+
  29. X:only-child：伪类，选择满足X选择器的元素，且这个元素是其父元素的唯一子元素。兼容性IE9+
  30. X:only-of-type：伪类，选择X选择的元素，解析得到元素标签，如果该元素没有相同类型的兄弟节点时选中它。兼容性IE9+
  31. X:first-of-type：伪类，选择X选择的元素，解析得到元素标签，如果该元素
    是此此类型元素的第一个兄弟。选中它。兼容性IE9+

css sprite是什么,有什么优缺点

概念：将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案。

优点：

  1. 减少HTTP请求数，极大地提高页面加载速度
  2. 增加图片信息重复度，提高压缩比，减少图片大小
  3. 更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现

缺点：

  1. 图片合并麻烦
  2. 维护麻烦，修改一个图片可能需要从新布局整个图片，样式

display: none;与visibility: hidden;的区别

联系：它们都能让元素不可见

区别：

  1. display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见
  2. display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility: hidden;是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式
  3. 修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘。
  4. 读屏器不会读取display: none;元素内容；会读取visibility: hidden;元素内容

css hack原理及常用hack

原理：利用不同浏览器对CSS的支持和解析结果不一样编写针对特定浏览器样式。常见的hack有1）属性hack。2）选择器hack。3）IE条件注释

  1. <!--[if IE 6]>
  2. Special instructions for IE 6 here
  3. <![endif]-->
  1. /***** Selector Hacks ******/
  3. /* IE6 and below */
  4. * html #uno  { color: red }
  6. /* IE7 */
  7. *:first-child+html #dos { color: red }
  9. /* IE7, FF, Saf, Opera  */
  10. html>body #tres { color: red }
  12. /* IE8, FF, Saf, Opera (Everything but IE 6,7) */
  13. html>/**/body #cuatro { color: red }
  15. /* Opera 9.27 and below, safari 2 */
  16. html:first-child #cinco { color: red }
  18. /* Safari 2-3 */
  19. html[xmlns*=""] body:last-child #seis { color: red }
  21. /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
  22. body:nth-of-type(1) #siete { color: red }
  24. /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
  25. body:first-of-type #ocho {  color: red }
  27. /* saf3+, chrome1+ */
  28. @media screen and (-webkit-min-device-pixel-ratio:0) {
  29.  #diez  { color: red  }
  30. }
  32. /* iPhone / mobile webkit */
  33. @media screen and (max-device-width: 480px) {
  34.  #veintiseis { color: red  }
  35. }
  37. /* Safari 2 - 3.1 */
  38. html[xmlns*=""]:root #trece  { color: red  }
  40. /* Safari 2 - 3.1, Opera 9.25 */
  41. *|html[xmlns*=""] #catorce { color: red  }
  43. /* Everything but IE6-8 */
  44. :root *> #quince { color: red  }
  46. /* IE7 */
  47. *+html #dieciocho {  color: red }
  49. /* Firefox only. 1+ */
  50. #veinticuatro,  x:-moz-any-link  { color: red }
  52. /* Firefox 3.0+ */
  53. #veinticinco,  x:-moz-any-link, x:default  { color: red  }
  1. /* IE6 */
  2. #once { _color: blue }
  4. /* IE6, IE7 */
  5. #doce { *color: blue; /* or #color: blue */ }
  7. /* Everything but IE6 */
  8. #diecisiete { color/**/: blue }
  10. /* IE6, IE7, IE8 */
  11. #diecinueve { color: blue\9; }
  13. /* IE7, IE8 */
  14. #veinte { color/*\**/: blue\9; }
  16. /* IE6, IE7 -- acts as an !important */
  17. #veintesiete { color: blue !ie; } /* string after ! can be anything */

specified value,computed value,used value计算方法

link与@import的区别

  1. link是HTML方式， @import是CSS方式
  2. link最大限度支持并行下载，@import过多嵌套导致串行下载，出现FOUC
  3. link可以通过rel="alternate stylesheet"指定候选样式
  4. 浏览器对link支持早于@import，可以使用@import对老浏览器隐藏样式
  5. @import必须在样式规则之前，可以在css文件中引用其他文件
  6. 总体来说：link优于@import

display: block;和display: inline;的区别

block元素特点：

1.处于常规流中时，如果width没有设置，会自动填充满父容器
2.可以应用margin/padding
3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素
4.处于常规流中时布局时在前后元素位置之间（独占一个水平空间）
5.忽略vertical-align

inline元素特点

1.水平方向上根据direction依次布局
2.不会在元素前后进行换行
3.受white-space控制
4.margin/padding在竖直方向上无效，水平方向上有效
5.width/height属性对非替换行内元素无效，宽度由元素内容决定
6.非替换行内元素的行框高由line-height确定，替换行内元素的行框高由height,margin,padding,border决定
6.浮动或绝对定位时会转换为block
7.vertical-align属性生效

PNG,GIF,JPG的区别及如何选

参考资料： 选择正确的图片格式
GIF:

  1. 8位像素，256色
  2. 无损压缩
  3. 支持简单动画
  4. 支持boolean透明
  5. 适合简单动画

JPEG：

  1. 颜色限于256
  2. 有损压缩
  3. 可控制压缩质量
  4. 不支持透明
  5. 适合照片

PNG：

  1. 有PNG8和truecolor PNG
  2. PNG8类似GIF颜色上限为256，文件小，支持alpha透明度，无动画
  3. 适合图标、背景、按钮

CSS有哪些继承属性

IE6浏览器有哪些常见的bug,缺陷或者与标准不一致的地方,如何解决

  1. .target {
  2.     min-height: 100px;
  3.     height: auto !important;
  4.     height: 100px;   // IE6下内容高度超过会自动扩展高度
  5. }
  1. <style type="text/css">
  2. .outer {
  3.     width: 215px;
  4.     height: 100px;
  5.     border: 1px solid red;
  6.     overflow: auto;
  7.     position: relative;  /* 修复bug */
  8. }
  9. .inner {
  10.     width: 100px;
  11.     height: 200px;
  12.     background-color: purple;
  13.     position: relative;
  14. }
  15. </style>
  17. <div class="outer">
  18.     <div class="inner"></div>
  19. </div>
  1. <style type="text/css">
  2. .p:hover,
  3. .hover {
  4.     background: purple;
  5. }
  6. </style>
  8. <p class="p" id="target">aaaa bbbbb<span>DDDDDDDDDDDd</span> aaaa lkjlkjdf j</p>
  10. <script type="text/javascript">
  11. function addClass(elem, cls) {
  12.     if (elem.className) {
  13.         elem.className += ' ' + cls;
  14.     } else {
  15.         elem.className = cls;
  16.     }
  17. }
  18. function removeClass(elem, cls) {
  19.     var className = ' ' + elem.className + ' ';
  20.     var reg = new RegExp(' +' + cls + ' +', 'g');
  21.     elem.className = className.replace(reg, ' ').replace(/^ +| +$/, '');
  22. }
  24. var target = document.getElementById('target');
  25. if (target.attachEvent) {
  26.     target.attachEvent('onmouseenter', function () {
  27.         addClass(target, 'hover');
  28.     });
  29.     target.attachEvent('onmouseleave', function () {
  30.         removeClass(target, 'hover');
  31.     })
  32. }
  33. </script>
  1. .opacity {
  2.     opacity: 0.4
  3.     filter: alpha(opacity=60); /* for IE5-7 */
  4.     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/
  5. }
  1.     display: inline-block;
  2.     *display: inline;
  3.     *zoom: 1;

容器包含若干浮动元素时如何清理(包含)浮动

  1. 容器元素闭合标签前添加额外元素并设置clear: both
  2. 父元素触发块级格式化上下文(见块级可视化上下文部分)
  3. 设置容器元素伪元素进行清理推荐的清理浮动方法
  1. /**
  2. * 在标准浏览器下使用
  3. * 1 content内容为空格用于修复opera下文档中出现
  4. *   contenteditable属性时在清理浮动元素上下的空白
  5. * 2 使用display使用table而不是block：可以防止容器和
  6. *   子元素top-margin折叠,这样能使清理效果与BFC，IE6/7
  7. *   zoom: 1;一致
  8. **/
  10. .clearfix:before,
  11. .clearfix:after {
  12.     content: " "; /* 1 */
  13.     display: table; /* 2 */
  14. }
  16. .clearfix:after {
  17.     clear: both;
  18. }
  20. /**
  21. * IE 6/7下使用
  22. * 通过触发hasLayout实现包含浮动
  23. **/
  24. .clearfix {
  25.     *zoom: 1;
  26. }

什么是FOUC?如何避免

Flash Of Unstyled Content：用户定义样式表加载之前浏览器使用默认样式显示文档，用户样式加载渲染之后再从新显示文档，造成页面闪烁。解决方法：把样式表放到文档的head

如何创建块级格式化上下文(block formatting context),BFC有什么用

创建规则：

  1. 根元素
  2. 浮动元素（float不是none）
  3. 绝对定位元素（position取值为absolute或fixed）
  4. display取值为inline-block,table-cell, table-caption,flex, inline-flex之一的元素
  5. overflow不是visible的元素

作用：

  1. 可以包含浮动元素
  2. 不被浮动元素覆盖
  3. 阻止父子元素的margin折叠

display,float,position的关系

  1. 如果display为none，那么position和float都不起作用，这种情况下元素不产生框
  2. 否则，如果position值为absolute或者fixed，框就是绝对定位的，float的计算值为none，display根据下面的表格进行调整。
  3. 否则，如果float不是none，框是浮动的，display根据下表进行调整
  4. 否则，如果元素是根元素，display根据下表进行调整
  5. 其他情况下display的值为指定值
    总结起来：绝对定位、浮动、根元素都需要调整display

外边距折叠(collapsing margins)

毗邻的两个或多个margin会合并成一个margin，叫做外边距折叠。规则如下：

  1. 两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠
  2. 浮动元素/inline-block元素/绝对定位元素的margin不会和垂直方向上的其他元素的margin折叠
  3. 创建了块级格式化上下文的元素，不会和它的子元素发生margin折叠
  4. 元素自身的margin-bottom和margin-top相邻时也会折叠

如何确定一个元素的包含块(containing block)

  1. 根元素的包含块叫做初始包含块，在连续媒体中他的尺寸与viewport相同并且anchored at the canvas origin；对于paged media，它的尺寸等于page area。初始包含块的direction属性与根元素相同。
  2. position为relative或者static的元素，它的包含块由最近的块级（display为block,list-item, table）祖先元素的内容框组成
  3. 如果元素position为fixed。对于连续媒体，它的包含块为viewport；对于paged media，包含块为page area

  4. 如果元素position为absolute，它的包含块由祖先元素中最近一个position为relative,absolute或者fixed的元素产生，规则如下：

    • 如果祖先元素为行内元素，the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element.
    • 其他情况下包含块由祖先节点的padding edge组成

    如果找不到定位的祖先元素，包含块为初始包含块

stacking context,布局规则

z轴上的默认层叠顺序如下（从下到上）：

  1. 根元素的边界和背景
  2. 常规流中的元素按照html中顺序
  3. 浮动块
  4. positioned元素按照html中出现顺序

如何创建stacking context：

  1. 根元素
  2. z-index不为auto的定位元素
  3. a flex item with a z-index value other than 'auto'
  4. opacity小于1的元素
  5. 在移动端webkit和chrome22+，z-index为auto，position: fixed也将创建新的stacking context

如何水平居中一个元素

  1. <body>
  2.     <div class="content">
  3.     aaaaaa aaaaaa a a a a a a a a
  4.     </div>
  5. </body>
  7. <style>
  8.     body {
  9.         background: #DDD;
  10.         text-align: center; /* 3 */
  11.     }
  12.     .content {
  13.         width: 500px;      /* 1 */
  14.         text-align: left;  /* 3 */
  15.         margin: 0 auto;    /* 2 */
  17.         background: purple;
  18.     }
  19. </style>
  1. <body>
  2.     <div class="content">
  3.     aaaaaa aaaaaa a a a a a a a a
  4.     </div>
  5. </body>
  7. <style>
  8.     body {
  9.         background: #DDD;
  10.     }
  11.     .content {
  12.         width: 500px;         /* 1 */
  13.         float: left;
  15.         position: relative;   /* 2 */
  16.         left: 50%;            /* 3 */
  17.         margin-left: -250px;  /* 4 */
  19.         background-color: purple;
  20.     }
  21. </style>
  1. <body>
  2.     <div class="content">
  3.     aaaaaa aaaaaa a a a a a a a a
  4.     </div>
  5. </body>
  7. <style>
  8.     body {
  9.         background: #DDD;
  10.         position: relative;
  11.     }
  12.     .content {
  13.         width: 800px;
  15.         position: absolute;
  16.         left: 50%;
  17.         margin-left: -400px;
  19.         background-color: purple;
  20.     }
  21. </style>
  1. <body>
  2.     <div class="content">
  3.     aaaaaa aaaaaa a a a a a a a a
  4.     </div>
  5. </body>
  7. <style>
  8.     body {
  9.         background: #DDD;
  10.         position: relative;
  11.     }
  12.     .content {
  13.         width: 800px;
  15.         position: absolute;
  16.         margin: 0 auto;
  17.         left: 0;
  18.         right: 0;
  20.         background-color: purple;
  21.     }
  22. </style>

如何竖直居中一个元素

盘点8种CSS实现垂直居中(这个特别靠谱)

  1. <p class="text">center text</p>
  3. <style>
  4. .text {
  5.     line-height: 200px;
  6. }
  7. </style>

$javascript概念部分

DOM元素e的e.getAttribute(propName)和e.propName有什么区别和联系

offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别

Measuring Element Dimension and Location with CSSOM in Windows Internet Explorer 9

XMLHttpRequest通用属性和方法

  1. readyState:表示请求状态的整数，取值：
    • UNSENT（0）：对象已创建
    • OPENED（1）：open()成功调用，在这个状态下，可以为xhr设置请求头，或者使用send()发送请求
    • HEADERS_RECEIVED(2)：所有重定向已经自动完成访问，并且最终响应的HTTP头已经收到
    • LOADING(3)：响应体正在接收
    • DONE(4)：数据传输完成或者传输产生错误
  2. onreadystatechange：readyState改变时调用的函数
  3. status：服务器返回的HTTP状态码（如，200， 404）
  4. statusText:服务器返回的HTTP状态信息（如，OK，No Content）
  5. responseText:作为字符串形式的来自服务器的完整响应
  6. responseXML: Document对象，表示服务器的响应解析成的XML文档
  7. abort():取消异步HTTP请求
  8. getAllResponseHeaders(): 返回一个字符串，包含响应中服务器发送的全部HTTP报头。每个报头都是一个用冒号分隔开的名/值对，并且使用一个回车/换行来分隔报头行
  9. getResponseHeader(headerName):返回headName对应的报头值
  10. open(method, url, asynchronous [, user, password]):初始化准备发送到服务器上的请求。method是HTTP方法，不区分大小写；url是请求发送的相对或绝对URL；asynchronous表示请求是否异步；user和password提供身份验证
  11. setRequestHeader(name, value):设置HTTP报头
  12. send(body):对服务器请求进行初始化。参数body包含请求的主体部分，对于POST请求为键值对字符串；对于GET请求，为null

focus/blur与focusin/focusout的区别与联系

  1. focus/blur不冒泡，focusin/focusout冒泡
  2. focus/blur兼容性好，focusin/focusout在除FireFox外的浏览器下都保持良好兼容性，如需使用事件托管，可考虑在FireFox下使用事件捕获elem.addEventListener('focus', handler, true)
  3. 可获得焦点的元素：
    1. window
    2. 链接被点击或键盘操作
    3. 表单空间被点击或键盘操作
    4. 设置tabindex属性的元素被点击或键盘操作

mouseover/mouseout与mouseenter/mouseleave的区别与联系

  1. mouseover/mouseout是标准事件，所有浏览器都支持；mouseenter/mouseleave是IE5.5引入的特有事件后来被DOM3标准采纳，现代标准浏览器也支持
  2. mouseover/mouseout是冒泡事件；mouseenter/mouseleave**不冒泡。需要为多个元素监听鼠标移入/出事件时，推荐mouseover/mouseout托管，提高性能**
  3. 标准事件模型中event.target表示发生移入/出的元素,vent.relatedTarget对应移出/如元素；在老IE中event.srcElement表示发生移入/出的元素，event.toElement表示移出的目标元素，event.fromElement表示移入时的来源元素

例子：鼠标从div#target元素移出时进行处理，判断逻辑如下：

<div id="target"><span>test</span></div>

<script type="text/javascript">
var target = document.getElementById('target');
if (target.addEventListener) {
  target.addEventListener('mouseout', mouseoutHandler, false);
} else if (target.attachEvent) {
  target.attachEvent('onmouseout', mouseoutHandler);
}

function mouseoutHandler(e) {
  e = e || window.event;
  var target = e.target || e.srcElement;

  // 判断移出鼠标的元素是否为目标元素
  if (target.id !== 'target') {
    return;
  }

  // 判断鼠标是移出元素还是移到子元素
  var relatedTarget = event.relatedTarget || e.toElement;
  while (relatedTarget !== target
    && relatedTarget.nodeName.toUpperCase() !== 'BODY') {
    relatedTarget = relatedTarget.parentNode;
  }

  // 如果相等，说明鼠标在元素内部移动
  if (relatedTarget === target) {
    return;
  }

  // 执行需要操作
  //alert('鼠标移出');

}
</script>

sessionStorage,localStorage,cookie区别

  1. 都会在浏览器端保存，有大小限制，同源限制
  2. cookie会在请求时发送到服务器，作为会话标识，服务器可修改cookie；web storage不会发送到服务器
  3. cookie有path概念，子路径可以访问父路径cookie，父路径不能访问子路径cookie
  4. 有效期：cookie在设置的有效期内有效，默认为浏览器关闭；sessionStorage在窗口关闭前有效，localStorage长期有效，直到用户删除
  5. 共享：sessionStorage不能共享，localStorage在同源文档之间共享，cookie在同源且符合path规则的文档之间共享
  6. localStorage的修改会促发其他文档窗口的update事件
  7. cookie有secure属性要求HTTPS传输
  8. 浏览器不能保存超过300个cookie，单个服务器不能超过20个，每个cookie不能超过4k。web storage大小支持能达到5M

javascript跨域通信

同源：两个文档同源需满足

  1. 协议相同
  2. 域名相同
  3. 端口相同

跨域通信：js进行DOM操作、通信时如果目标与当前窗口不满足同源条件，浏览器为了安全会阻止跨域操作。跨域通信通常有以下方法

javascript有哪几种数据类型

六种基本数据类型

一种引用类型

什么闭包,闭包有什么用

闭包是在某个作用域内定义的函数，它可以访问这个作用域内的所有变量。闭包作用域链通常包括三个部分：

  1. 函数本身作用域。
  2. 闭包定义时的作用域。
  3. 全局作用域。

闭包常见用途：

  1. 创建特权方法用于访问控制
  2. 事件处理程序及回调

javascript有哪几种方法定义函数

  1. 函数声明表达式
  2. function操作符
  3. Function 构造函数
  4. ES6:arrow function

重要参考资料：MDN:Functions_and_function_scope

应用程序存储和离线web应用

HTML5新增应用程序缓存，允许web应用将应用程序自身保存到用户浏览器中，用户离线状态也能访问。
1.为html元素设置manifest属性:<html manifest="myapp.appcache">，其中后缀名只是一个约定，真正识别方式是通过text/cache-manifest作为MIME类型。所以需要配置服务器保证设置正确
2.manifest文件首行为CACHE MANIFEST，其余就是要缓存的URL列表，每个一行，相对路径都相对于manifest文件的url。注释以#开头
3.url分为三种类型：CACHE:为默认类型。NETWORK：表示资源从不缓存。 FALLBACK:每行包含两个url，第二个URL是指需要加载和存储在缓存中的资源， 第一个URL是一个前缀。任何匹配该前缀的URL都不会缓存，如果从网络中载入这样的URL失败的话，就会用第二个URL指定的缓存资源来替代。以下是一个文件例子：

  1. CACHE MANIFEST
  3. CACHE:
  4. myapp.html
  5. myapp.css
  6. myapp.js
  8. FALLBACK:
  9. videos/ offline_help.html
  11. NETWORK:
  12. cgi/

客户端存储localStorage和sessionStorage

  1. localStorage.setItem('x', 1); // storge x->1
  2. localStorage.getItem('x); // return value of x
  4. // 枚举所有存储的键值对
  5. for (var i = 0, len = localStorage.length; i < len; ++i ) {
  6.     var name = localStorage.key(i);
  7.     var value = localStorage.getItem(name);
  8. }
  10. localStorage.removeItem('x'); // remove x
  11. localStorage.clear();  // remove all data

cookie及其操作

  1. document.cookie = 'name=qiu; max-age=9999; path=/; domain=domain; secure';
  3. document.cookie = 'name=aaa; path=/; domain=domain; secure';
  4. // 要改变cookie的值，需要使用相同的名字、路径和域，新的值
  5. // 来设置cookie，同样的方法可以用来改变有效期
  7. // 设置max-age为0可以删除指定cookie
  9. //读取cookie，访问document.cookie返回键值对组成的字符串，
  10. //不同键值对之间用'; '分隔。通过解析获得需要的值

cookieUtil.js：自己写的cookie操作工具

javascript有哪些方法定义对象

  1. 对象字面量： var obj = {};
  2. 构造函数： var obj = new Object();
  3. Object.create(): var obj = Object.create(Object.prototype);

===运算符判断相等的流程是怎样的

  1. 如果两个值不是相同类型，它们不相等
  2. 如果两个值都是null或者都是undefined，它们相等
  3. 如果两个值都是布尔类型true或者都是false，它们相等
  4. 如果其中有一个是NaN，它们不相等
  5. 如果都是数值型并且数值相等，他们相等， -0等于0
  6. 如果他们都是字符串并且在相同位置包含相同的16位值，他它们相等；如果在长度或者内容上不等，它们不相等；两个字符串显示结果相同但是编码不同==和===都认为他们不相等
  7. 如果他们指向相同对象、数组、函数，它们相等；如果指向不同对象，他们不相等

==运算符判断相等的流程是怎样的

  1. 如果两个值类型相同，按照===比较方法进行比较
  2. 如果类型不同，使用如下规则进行比较
    1. 如果其中一个值是null，另一个是undefined，它们相等
    2. 如果一个值是数字另一个是字符串，将字符串转换为数字进行比较
    3. 如果有布尔类型，将true转换为1，false转换为0，然后用==规则继续比较
    4. 如果一个值是对象，另一个是数字或字符串，将对象转换为原始值然后用==规则继续比较
    5. 其他所有情况都认为不相等

对象到字符串的转换步骤

  1. 如果对象有toString()方法，javascript调用它。如果返回一个原始值（primitive value如：string number boolean）,将这个值转换为字符串作为结果
  2. 如果对象没有toString()方法或者返回值不是原始值，javascript寻找对象的valueOf()方法，如果存在就调用它，返回结果是原始值则转为字符串作为结果
  3. 否则，javascript不能从toString()或者valueOf()获得一个原始值，此时throws a TypeError

对象到数字的转换步骤

1. 如果对象有valueOf()方法并且返回元素值，javascript将返回值转换为数字作为结果
2. 否则，如果对象有toString()并且返回原始值，javascript将返回结果转换为数字作为结果
3. 否则，throws a TypeError

<,>,<=,>=的比较规则

所有比较运算符都支持任意类型，但是比较只支持数字和字符串，所以需要执行必要的转换然后进行比较，转换规则如下:
1. 如果操作数是对象，转换为原始值：如果valueOf方法返回原始值，则使用这个值，否则使用toString方法的结果，如果转换失败则报错
2. 经过必要的对象到原始值的转换后，如果两个操作数都是字符串，按照字母顺序进行比较（他们的16位unicode值的大小）
3. 否则，如果有一个操作数不是字符串，将两个操作数转换为数字进行比较

+运算符工作流程

  1. 如果有操作数是对象，转换为原始值
  2. 此时如果有一个操作数是字符串，其他的操作数都转换为字符串并执行连接
  3. 否则：所有操作数都转换为数字并执行加法

函数内部arguments变量有哪些特性,有哪些属性,如何将它转换为数组

DOM事件模型是如何的,编写一个EventUtil工具类实现事件管理兼容

  1. /**
  2.  * 跨浏览器事件处理工具。只支持冒泡。不支持捕获
  3.  * @author  (qiu_deqing@126.com)
  4.  */
  6. var EventUtil = {
  7.     getEvent: function (event) {
  8.         return event || window.event;
  9.     },
  10.     getTarget: function (event) {
  11.         return event.target || event.srcElement;
  12.     },
  13.     // 返回注册成功的监听器，IE中需要使用返回值来移除监听器
  14.     on: function (elem, type, handler) {
  15.         if (elem.addEventListener) {
  16.             elem.addEventListener(type, handler, false);
  17.             return handler;
  18.         } else if (elem.attachEvent) {
  19.             var wrapper = function () {
  20.               var event = window.event;
  21.               event.target = event.srcElement;
  22.               handler.call(elem, event);
  23.             };
  24.             elem.attachEvent('on' + type, wrapper);
  25.             return wrapper;
  26.         }
  27.     },
  28.     off: function (elem, type, handler) {
  29.         if (elem.removeEventListener) {
  30.             elem.removeEventListener(type, handler, false);
  31.         } else if (elem.detachEvent) {
  32.             elem.detachEvent('on' + type, handler);
  33.         }
  34.     },
  35.     preventDefault: function (event) {
  36.         if (event.preventDefault) {
  37.             event.preventDefault();
  38.         } else if ('returnValue' in event) {
  39.             event.returnValue = false;
  40.         }
  41.     },
  42.     stopPropagation: function (event) {
  43.         if (event.stopPropagation) {
  44.             event.stopPropagation();
  45.         } else if ('cancelBubble' in event) {
  46.             event.cancelBubble = true;
  47.         }
  48.     },
  49.     /**
  50.      * keypress事件跨浏览器获取输入字符
  51.      * 某些浏览器在一些特殊键上也触发keypress，此时返回null
  52.      **/
  53.      getChar: function (event) {
  54.         if (event.which == null) {
  55.             return String.fromCharCode(event.keyCode);  // IE
  56.         }
  57.         else if (event.which != 0 && event.charCode != 0) {
  58.             return String.fromCharCode(event.which);    // the rest
  59.         }
  60.         else {
  61.             return null;    // special key
  62.         }
  63.      }
  64. };

评价一下三种方法实现继承的优缺点,并改进

  1. function Shape() {}
  3. function Rect() {}
  5. // 方法1
  6. Rect.prototype = new Shape();
  8. // 方法2
  9. Rect.prototype = Shape.prototype;
  11. // 方法3
  12. Rect.prototype = Object.create(Shape.prototype);
  14. Rect.prototype.area = function () {
  15.   // do something
  16. };

方法1：

  1. 优点：正确设置原型链实现继承
  2. 优点：父类实例属性得到继承，原型链查找效率提高，也能为一些属性提供合理的默认值
  3. 缺点：父类实例属性为引用类型时，不恰当地修改会导致所有子类被修改
  4. 缺点：创建父类实例作为子类原型时，可能无法确定构造函数需要的合理参数，这样提供的参数继承给子类没有实际意义，当子类需要这些参数时应该在构造函数中进行初始化和设置
  5. 总结：继承应该是继承方法而不是属性，为子类设置父类实例属性应该是通过在子类构造函数中调用父类构造函数进行初始化

方法2：

  1. 优点：正确设置原型链实现继承
  2. 缺点：父类构造函数原型与子类相同。修改子类原型添加方法会修改父类

方法3：

  1. 优点：正确设置原型链且避免方法1.2中的缺点
  2. 缺点：ES5方法需要注意兼容性

改进：

  1. 所有三种方法应该在子类构造函数中调用父类构造函数实现实例属性初始化
  1. function Rect() {
  2.     Shape.call(this);
  3. }
  1. 用新创建的对象替代子类默认原型，设置Rect.prototype.constructor = Rect;保证一致性
  2. 第三种方法的polyfill：
  1. function create(obj) {
  2.     if (Object.create) {
  3.         return Object.create(obj);
  4.     }
  6.     function f() {};
  7.     f.prototype = obj;
  8.     return new f();
  9. }

$ vue相关

vue vue-router路由实现

vue-router路由实现

双向绑定

双向绑定

6、v-model是什么？怎么使用？ vue中标签怎么绑定事件？

答：可以实现双向绑定，指令（v-class、v-for、v-if、v-show、v-on）。vue的model层的data属性。绑定事件：

10、vuex是什么？怎么使用？哪种功能场景使用它？

答：vue框架中状态管理。在main.js引入store，注入。新建了一个目录store，….. export 。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

11、mvvm框架是什么？它和其它框架（jquery）的区别是什么？哪些场景适合？

答：一个model+view+viewModel框架，数据模型model，viewModel连接两个

区别：vue数据驱动，通过数据来显示视图层而不是节点操作。

场景：数据操作比较多的场景，更加便捷

13、说出至少4种vue当中的指令和它的用法？

答：v-if：判断是否隐藏；v-for：数据循环出来；v-bind:class：绑定一个属性；v-model：实现双向绑定

16、Vue的双向数据绑定原理是什么？

答：vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

具体步骤：

第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter
这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化

第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。

第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

ps：16题答案同样适合”vue data是怎么实现的？”此面试题。

17、请详细说下你对vue生命周期的理解？

答：总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

创建前/后： 在beforeCreated阶段，vue实例的挂载元素和数据对象都为，还未初始化。在阶段，实例的数据对象有了，el还没有。

载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。

更新前/后：当data变化时，会触发beforeUpdate和updated方法。

销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

18、请说下封装 vue 组件的过程？

答：首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性等问题。

然后，使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。子组件需要数据，可以在props中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用emit方法。

23、聊聊你对Vue.js的template编译的理解？

答：简而言之，就是先转化成AST树，再得到的render函数返回VNode（Vue的虚拟DOM节点）

详情步骤：

首先，通过compile编译器把template编译成AST语法树（abstract syntax tree 即 源代码的抽象语法结构的树状表现形式），compile是createCompiler的返回值，createCompiler是用以创建编译器的。另外compile还负责合并option。

然后，AST会经过generate（将AST语法树转化成render funtion字符串的过程）得到render函数，render的返回值是VNode，VNode是Vue的虚拟DOM节点，里面有（标签名、子节点、文本等等）

下面这段代码想要循环延时输出结果0 1 2 3 4,请问输出结果是否正确,如果不正确,请说明为什么,并修改循环内的代码使其输出正确结果

  1. for (var i = 0; i < 5; ++i) {
  2.   setTimeout(function () {
  3.     console.log(i + ' ');
  4.   }, 100);
  5. }

不能输出正确结果，因为循环中setTimeout接受的参数函数通过闭包访问变量i。javascript运行环境为单线程，setTimeout注册的函数需要等待线程空闲才能执行，此时for循环已经结束，i值为5.五个定时输出都是5
修改方法：将setTimeout放在函数立即调用表达式中，将i值作为参数传递给包裹函数，创建新闭包

  1. for (var i = 0; i < 5; ++i) {
  2.   (function (i) {
  3.     setTimeout(function () {
  4.       console.log(i + ' ');
  5.     }, 100);
  6.   }(i));
  7. }

如何判断一个对象是否为数组

如果浏览器支持Array.isArray()可以直接判断否则需进行必要判断

  1. /**
  2.  * 判断一个对象是否是数组，参数不是对象或者不是数组，返回false
  3.  *
  4.  * @param {Object} arg 需要测试是否为数组的对象
  5.  * @return {Boolean} 传入参数是数组返回true，否则返回false
  6.  */
  7. function isArray(arg) {
  8.     if (typeof arg === 'object') {
  9.         return Object.prototype.toString.call(arg) === '[object Array]';
  10.     }
  11.     return false;
  12. }

请评价以下事件监听器代码并给出改进意见

  1. if (window.addEventListener) {
  2.   var addListener = function (el, type, listener, useCapture) {
  3.     el.addEventListener(type, listener, useCapture);
  4.   };
  5. }
  6. else if (document.all) {
  7.   addListener = function (el, type, listener) {
  8.     el.attachEvent('on' + type, function () {
  9.       listener.apply(el);
  10.     });
  11.   };
  12. }

作用：浏览器功能检测实现跨浏览器DOM事件绑定

优点：

  1. 测试代码只运行一次，根据浏览器确定绑定方法
  2. 通过listener.apply(el)解决IE下监听器this与标准不一致的地方
  3. 在浏览器不支持的情况下提供简单的功能，在标准浏览器中提供捕获功能

缺点：

  1. document.all作为IE检测不可靠，应该使用if(el.attachEvent)
  2. addListener在不同浏览器下API不一样
  3. listener.apply使this与标准一致但监听器无法移除
  4. 未解决IE下listener参数event。 target问题

改进:

  1. var addListener;
  3. if (window.addEventListener) {
  4.   addListener = function (el, type, listener, useCapture) {
  5.     el.addEventListener(type, listener, useCapture);
  6.     return listener;
  7.   };
  8. }
  9. else if (window.attachEvent) {
  10.   addListener = function (el, type, listener) {
  11.     // 标准化this，event，target
  12.     var wrapper = function () {
  13.       var event = window.event;
  14.       event.target = event.srcElement;
  15.       listener.call(el, event);
  16.     };
  18.     el.attachEvent('on' + type, wrapper);
  19.     return wrapper;
  20.     // 返回wrapper。调用者可以保存，以后remove
  21.   };
  22. }

如何判断一个对象是否为函数

  1. /**
  2.  * 判断对象是否为函数，如果当前运行环境对可调用对象（如正则表达式）
  3.  * 的typeof返回'function'，采用通用方法，否则采用优化方法
  4.  *
  5.  * @param {Any} arg 需要检测是否为函数的对象
  6.  * @return {boolean} 如果参数是函数，返回true，否则false
  7.  */
  8. function isFunction(arg) {
  9.     if (arg) {
  10.         if (typeof (/./) !== 'function') {
  11.             return typeof arg === 'function';
  12.         } else {
  13.             return Object.prototype.toString.call(arg) === '[object Function]';
  14.         }
  15.     } // end if
  16.     return false;
  17. }
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注