前端面试题_前端面试题库 - CSDN
精华内容
参与话题
  • 2020年前端面试题及答案

    万次阅读 多人点赞 2020-08-14 17:56:24
    前端面试汇总(2020年) 一 大纲 1、前言 2、前端工程化 3、前端设计模式 4、前端安全性问题 5、前端跨域问题 6、前端数据加密 7、前端http相关问题 8、*前端基础知识点面试题 9...

     

    前端面试汇总(2020年)

     

     

    大纲

     

    1、前言

     

    2、前端工程化

     

    3、前端设计模式

     

    4、前端安全性问题

     

    5、前端跨域问题

     

    6、前端数据加密

     

    7、前端http相关问题

     

    8、*前端基础知识点面试题

     

    9、前端技术栈问题

    前言

     

    由于新冠肺炎疫情,现在成天呆在家里,加上也要准备面试,就在家里看面试题,看着网上一堆面试题,决定收集常见题目汇总一下。关于面试大纲,我认为每个人都是千差万别的。因为面试官都是对简历所写的项目经验进行深挖或者对你所掌握的基本技能进行考察。

    前端工程化

     

    1

    什么是"前端工程化"?

    前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化,其主要目的为了提高效率和降低成本,即提高开发过程中的开发效率,减少不必要的重复工作时间,而前端工程本质上是软件工程的一种,因此我们应该从软件工程的角度来研究前端工程。

    2

    如何做"前端工程化"?

    前端工程化就是为了让前端开发能够“自成体系”,个人认为主要应该从模块化组件化规范化自动化四个方面思考。

    前端设计模式

     

     

    前端常见的设计模式主要有以下几种,具体设计模式查看这篇文章
    1. 单例模式
    2. 工厂模式
    3. 策略模式
    4. 代理模式
    5. 观察者模式
    6. 模块模式
    7. 构造函数模式
    8. 混合模式

     

    前端安全性问题

     

     

    这个是老的话题,有的在初中级前端面试中可能不会提到。但是在高级面试的时候,你要说出前端安全性问题防御,及前端常见安全性问题的攻击原理是什么。

    1

    xss跨站脚本攻击原理?如何进行?防御手段?

    如何进行:如何XSS是指恶意攻击者利用网站没有对用户提交数据进行转义处理或者过滤不足的缺点,进而添加一些代码,嵌入到web页面中去。使别的用户访问都会执行相应的嵌入代码。从而盗取用户资料、利用用户身份进行某种动作或者对访问者进行病毒侵害的一种攻击方式。

    主要原理:过于信任客户端提交的数据!

    防御手段:不信任任何客户端提交的数据,只要是客户端提交的数据就应该先进行相应的过滤处理然后方可进行下一步的操作。

    2

    CSRF跨站请求伪造原理?如何进行?防御手段?

    如何进行:当你在某网页登录之后,在没有关闭网页的情况下,收到别人的链接。例如:http://127.0.0.1/dvwa/vulnerabilities/csrf/?password_new=1&password_conf=1&Change=Change#

    点击链接,会利用浏览器的cookie把密码改掉。

    主要原理:在没有关闭相关网页的情况下,点击其他人发来的CSRF链接,利用客户端的cookie直接向服务器发送请求。

    防御手段:

    检测Referer

    Anti-CSRF token机制

    业务上要求用户输入原始密码(简单粗暴),攻击者在不知道原始密码的情况下,无论如何都无法进行CSRF攻击。

    3

    Sql脚本注入原理?如何进行?防御手段?  

    如何进行:利用现有应用程序,将(恶意)的SQL命令注入到后台数据库引擎执行的能力,它可以通过在Web表单中输入(恶意)SQL语句得到一个存在安全漏洞的网站上的数据库,而不是按照设计者意图去执行SQL语句。

    主要原理:通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令

    防御手段:

    使用预编译,绑定变量(推荐)。

    检查数据类型。

    过滤特殊字符和语句。

    页面不错误回显。

    4

    web上传漏洞原理?如何进行?防御手段?  

    如何进行:用户上传了一个可执行的脚本文件,并通过此脚本文件获得了执行服务器端命令的能力。

    主要原理:当文件上传时没有对文件的格式和上传用户做验证,导致任意用户可以上传任意文件,那么这就是一个上传漏洞。

    防御手段:

    1. 最有效的,将文件上传目录直接设置为不可执行,对于Linux而言,撤销其目录的'x'权限;实际中很多大型网站的上传应用都会放置在独立的存储上作为静态文件处理,一是方便使用缓存加速降低能耗,二是杜绝了脚本执行的可能性;
    2. 文件类型检查:强烈推荐白名单方式,结合MIME Type、后缀检查等方式;此外对于图片的处理可以使用压缩函数或resize函数,处理图片的同时破坏其包含的HTML代码;
    3. 使用随机数改写文件名和文件路径,使得用户不能轻易访问自己上传的文件;
    4. 单独设置文件服务器的域名;

    前端跨越问题

     

    1

    什么是跨域?  

    由浏览器同源策略限制的一类请求场景,当不同地址,不同端口,不同级别,不同协议就会构成跨域。

     

    2

    什么是同源策略?  

    所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。

    它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。

    3

    如何解决跨域? 能说1,2,7,8就行。

    1、 通过jsonp跨域

    2、CORS

    3、 document.domain + iframe跨域

    4、 location.hash + iframe

    5、 window.name + iframe跨域

    6、 postMessage跨域

    7、 nginx代理跨域

    8、 nodejs中间件代理跨域

    9、 WebSocket协议跨域

    前端数据加密问题

     

    1

    一般如何处理用户敏感信息?  

    前端一般使用md5、base64加密、sha1加密,想要了解详情请自行百度。

    前端http相关问题

     

    1

    HTTP常用状态码及其含义?  

    1xx:指示信息--表示请求已接收,继续处理

    100 Continue 初始的请求已经接受,客户应当继续发送请求的其余部分。(HTTP 1.1新)

    101 Switching Protocols 服务器将遵从客户的请求转换到另外一种协议(HTTP 1.1新)

    2xx:成功--表示请求已被成功接收、理解、接受

    200 OK 一切正常,对GET和POST请求的应答文档跟在后面。

    201 Created 服务器已经创建了文档,Location头给出了它的URL。

    202 Accepted 已经接受请求,但处理尚未完成。

    203 Non-Authoritative Information 文档已经正常地返回,但一些应答头可能不正确,因为使用的是文档的拷贝(HTTP 1.1新)。

    204 No Content 没有新文档,浏览器应该继续显示原来的文档。如果用户定期地刷新页面,而Servlet可以确定用户文档足够新,这个状态代码是很有用的。

    205 Reset Content 没有新的内容,但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容(HTTP 1.1新)。

    206 Partial Content 客户发送了一个带有Range头的GET请求,服务器完成了它(HTTP 1.1新)。

    3xx:重定向--要完成请求必须进行更进一步的操作

    300 Multiple Choices 客户请求的文档可以在多个位置找到,这些位置已经在返回的文档内列出。如果服务器要提出优先选择,则应该在Location应答头指明。

    301 Moved Permanently 客户请求的文档在其他地方,新的URL在Location头中给出,浏览器应该自动地访问新的URL。

    302 Found 类似于301,但新的URL应该被视为临时性的替代,而不是永久性的。注意,在HTTP1.0中对应的状态信息是“Moved Temporatily”。出现该状态代码时,浏览器能够自动访问新的URL,因此它是一个很有用的状态代码。注意这个状态代码有时候可以和301替换使用。例如,如果浏览器错误地请求http://host/~user(缺少了后面的斜杠),有的服务器返回301,有的则返回302。严格地说,我们只能假定只有当原来的请求是GET时浏览器才会自动重定向。请参见307。

    303 See Other 类似于301/302,不同之处在于,如果原来的请求是POST,Location头指定的重定向目标文档应该通过GET提取(HTTP 1.1新)。

    304 Not Modified 客户端有缓冲的文档并发出了一个条件性的请求(一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档)。服务器告诉客户,原来缓冲的文档还可以继续使用。

    305 Use Proxy 客户请求的文档应该通过Location头所指明的代理服务器提取(HTTP 1.1新)。

    307 Temporary Redirect 和302(Found)相同。许多浏览器会错误地响应302应答进行重定向,即使原来的请求是POST,即使它实际上只能在POST请求的应答是303时 才能重定向。由于这个原因,HTTP 1.1新增了307,以便更加清除地区分几个状态代码:当出现303应答时,浏览器可以跟随重定向的GET和POST请求;如果是307应答,则浏览器只能跟随对GET请求的重定向。(HTTP 1.1新)

    4xx:客户端错误--请求有语法错误或请求无法实现

    400 Bad Request 请求出现语法错误。

    401 Unauthorized 客户试图未经授权访问受密码保护的页面。应答中会包含一个WWW-Authenticate头,浏览器据此显示用户名字/密码对话框,然后在填写合适的Authorization头后再次发出请求。

    403 Forbidden 资源不可用。服务器理解客户的请求,但拒绝处理它。通常由于服务器上文件或目录的权限设置导致。

    404 Not Found 无法找到指定位置的资源。这也是一个常用的应答。

    405 Method Not Allowed 请求方法(GET、POST、HEAD、DELETE、PUT、TRACE等)对指定的资源不适用。(HTTP 1.1新)

    406 Not Acceptable 指定的资源已经找到,但它的MIME类型和客户在Accpet头中所指定的不兼容(HTTP 1.1新)。

    407 Proxy Authentication Required 类似于401,表示客户必须先经过代理服务器的授权。(HTTP 1.1新)

    408 Request Timeout 在服务器许可的等待时间内,客户一直没有发出任何请求。客户可以在以后重复同一请求。(HTTP 1.1新)

    409 Conflict 通常和PUT请求有关。由于请求和资源的当前状态相冲突,因此请求不能成功。(HTTP 1.1新)

    410 Gone 所请求的文档已经不再可用,而且服务器不知道应该重定向到哪一个地址。它和404的不同在于,返回407表示文档永久地离开了指定的位置,而404表示由于未知的原因文档不可用。(HTTP 1.1新)

    411 Length Required 服务器不能处理请求,除非客户发送一个Content-Length头。(HTTP 1.1新)

    412 Precondition Failed 请求头中指定的一些前提条件失败(HTTP 1.1新)。

    413 Request Entity Too Large 目标文档的大小超过服务器当前愿意处理的大小。如果服务器认为自己能够稍后再处理该请求,则应该提供一个Retry-After头(HTTP 1.1新)。

    414 Request URI Too Long URI太长(HTTP 1.1新)。

    416 Requested Range Not Satisfiable 服务器不能满足客户在请求中指定的Range头。(HTTP 1.1新)

    5xx:服务器端错误--服务器未能实现合法的请求

    500 Internal Server Error 服务器遇到了意料不到的情况,不能完成客户的请求。

    501 Not Implemented 服务器不支持实现请求所需要的功能。例如,客户发出了一个服务器不支持的PUT请求。

    502 Bad Gateway 服务器作为网关或者代理时,为了完成请求访问下一个服务器,但该服务器返回了非法的应答。

    503 Service Unavailable 服务器由于维护或者负载过重未能应答。例如,Servlet可能在数据库连接池已满的情况下返回503。服务器返回503时可以提供一个Retry-After头。

    504 Gateway Timeout 由作为代理或网关的服务器使用,表示不能及时地从远程服务器获得应答。(HTTP 1.1新)505 HTTP Version Not Supported 服务器不支持请求中所指明的HTTP版本。(HTTP 1.1新)

    2

    websocket和轮询及长轮询区别  

    轮询如下:

    客户端:啦啦啦,有没有新信息(Request)服务端:没有(Response)客户端:啦啦啦,有没有新信息(Request)服务端:没有。。(Response)客户端:啦啦啦,有没有新信息(Request)服务端:你好烦啊,没有啊。。(Response)客户端:啦啦啦,有没有新消息(Request)服务端:好啦好啦,有啦给你。(Response)客户端:啦啦啦,有没有新消息(Request)服务端:。。。。。没。。。。没。。。没有(Response) ---- loop

    长轮询如下:

    客户端:啦啦啦,有没有新信息,没有的话就等有了才返回给我吧(Request)服务端:额。。 等待到有消息的时候。。来 给你(Response)客户端:啦啦啦,有没有新信息,没有的话就等有了才返回给我吧(Request) -loop

    websocket如下:

    websocket解决了HTTP的这几个难题。 首先,被动性,当服务器完成协议升级后(HTTP->Websocket),服务端就可以主动推送信息给客户端啦。

    所以上面的情景可以做如下修改。

    客户端:啦啦啦,我要建立Websocket协议,需要的服务:chat,Websocket协议版本:17(HTTP Request)服务端:ok,确认,已升级为Websocket协议(HTTP Protocols Switched)客户端:麻烦你有信息的时候推送给我噢。。服务端:ok,有的时候会告诉你的。服务端:balabalabalabala服务端:balabalabalabala服务端:哈哈哈哈哈啊哈哈哈哈服务端:笑死我了哈哈哈哈哈哈哈

     

    3

    Http和Https的区别?  

    1、https协议需要到ca申请证书,一般免费证书较少,因而需要一定费用。

    2、http是超文本传输协议,信息是明文传输,https则是具有安全性的ssl加密传输协议。

    3、http和https使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443。

    4、http的连接很简单,是无状态的;HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,比http协议安全。

    *前端基础知识点面试题

     

    1

    HTML/5、CSS/3相关  

    一、html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?

      新特性:

      HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。
      拖拽释放(Drag and drop) API
      语义化更好的内容标签(header,nav,footer,aside,article,section)
      音频、视频API(audio,video)
      画布(Canvas) API
      地理(Geolocation) API
      本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;
      sessionStorage 的数据在浏览器关闭后自动删除
      表单控件,calendar、date、time、email、url、search
      新的技术webworker, websocket, Geolocation

      移除元素:
      纯表现的元素:basefont,big,center,font, s,strike,tt,u;
      对可用性产生负面影响的元素:frame,frameset,noframes;
      h5新标签兼容:
      IE8/IE7/IE6支持通过document.createElement方法产生的标签,
      可以利用这一特性让这些浏览器支持HTML5新标签,
      当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
     
      如何区分:
      DOCTYPE声明\新增的结构元素\功能元素

    二、CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?

      CSS 选择符:

      1.id选择器( # myid)

       2.类选择器(.myclassname)

      3.标签选择器(div, h1, p)

      4.相邻选择器(h1 + p)

      5.子选择器(ul > li)

      6.后代选择器(li a)

      7.通配符选择器( * )

      8.属性选择器(a[rel = "external"])

      9.伪类选择器(a: hover, li:nth-child)

      可以继承的属性:

      可继承的样式: font-size font-family color, UL LI DL DD DT;

      不可继承的样式:border padding margin width height ;

      优先级:

      !important > id > class > tag

      important 比 内联优先级高,但内联比 id 要高

      CSS3新增伪类举例:

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

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

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

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

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

      :enabled :disabled 控制表单控件的禁用状态。

      :checked 单选框或复选框被选中。

    三、CSS3有哪些新特性?

    更详细的请见:https://www.cnblogs.com/qianduantuanzhang/p/7793638.html

      CSS3实现圆角(border-radius),阴影(box-shadow),

      对文字加特效(text-shadow、),线性渐变(gradient),旋转(transform)

      transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜

      增加了更多的CSS选择器 多背景 rgba

      在CSS3中唯一引入的伪元素是::selection.

      媒体查询,多栏布局

      border-image

    四、解释盒模型宽高值得计算方式,边界塌陷,负值作用,box-sizing概念? 

      1. 盒模型:IE 678 下(不添加doctype) 使用ie盒模型,宽度 = 边框 + padding + 内容宽度; chrom、IE9+、(添加doctype) 使用标准盒模型, 宽度 = 内容宽度。 
      2. box-sizing : 为了解决标准黑子和IE盒子的不同,CSS3增添了盒模型属性box-sizing,content-box(默认),border-box 让元素维持IE传统盒子模型, inherit 继承 父盒子模型; 
      3. 边界塌陷:块元素的 top 与 bottom 外边距有时会合并(塌陷)为单个外边距(合并后最大的外边距),这样的现象称之为 外边距塌陷。 
      4. 负值作用:负margin会改变浮动元素的显示位置,即使我的元素写在DOM的后面,我也能让它显示在最前面。

    五、BFC(Block Formatting Context) 是什么?应用? 

      1. BFC 就是 ‘块级格式上下文’ 的格式,创建了BFC的元素就是一个独立的盒子,不过只有BLock-level box可以参与创建BFC,它规定了内部的Bloc-level Box 如何布局,并且与这个独立盒子里的布局不受外部影响,当然它也不会影响到外面的元素。 
      2. 应用场景: 
      1. 解决margin叠加的问题 
      2. 用于布局(overflow: hidden),BFC不会与浮动盒子叠加。 
      3. 用于清除浮动,计算BFC高度。

    六、如何实现浏览器内多个标签页之间的通信?

      调用localstorge、cookies等本地存储方式

    七、简要说一下CSS的元素分类

      块级元素:div,p,h1,form,ul,li;
      行内元素 : span,a,label,input,img,strong,em;

    八、解释下浮动和它的工作原理?清除浮动的方法

      浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

      1.使用空标签清除浮动。

      这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。

      2.使用after伪对象清除浮动

     该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0,否则该元素会比实际高出若干像素;

        #parent:after{

      content:".";

      height:0;

      visibility:hidden;

      display:block;

      clear:both;

     }

      3.设置overflow为hidden或者auto

      4.浮动外部元素

    九、CSS隐藏元素的几种方法(至少说出三种)

      Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;
      Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外,元素在读屏软件中也会被隐藏;
      Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外,读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;
      Position:不会影响布局,能让元素保持可以操作;
      Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件,浏览器支持度还要低;

    十、如何让一个盒子水平垂直居中

    复制代码

    复制代码

    //已知宽高<div class="div1"></div><style>
        .div1{
            width:400px;
            height:400px;
            position:absolute;
            left:50%;
            top:50% 
            margin:-200px 0 0 -200px;    }   
    </style>//未知宽高<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>
            .div1{
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                right: 0;
                margin: auto;
                border: 1px solid #000;
                width: 400px;
                height: 400px;        }    </style></head><body>    <div class="div1"></div></body></html>//未知宽高方法二:<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>
            .div1{
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                border: 1px solid #000;
                width: 400px;
                height: 400px;        }    </style></head><body>    <div class="div1"></div></body></html>

     

    2

    JS部分

    1、cookie、localStorage、sessionStorage的区别和使用?

    cookie:是存储在本地的数据,有时候也用cookies,通常经过加密,应用最经典的就是判断注册用户是否已经登录过该网站。   localStorage:仅在客户端保存(即浏览器),不参与和服务器的通信;没有时间限制,即使浏览器关闭,数据依然存在;
       创建和访问localStorage:
            1)、设置数据:
            var forgetData = {phone:vm.phone};        localStorage.setItem("forgetData",JSON.Stringfy(forgetData));    //forgetData是存储在localStorage里边的本地数据;JSON.Stringfy(forgetData)是将数据转化为字符串格式;
                获取数据:
            vm.forgetData=JSON.parse(localStorage.getItem("forgetData"));  //将字符串转化为JSON化;
            2)、设置:localStorage.name = "zhao";
                 获取:localStorage.name    //zhao        localStorage.setItem(key,value);//设置数据        localStorage.getItem(key);//获取数据        localStorage.removeItem(key);//删除单个数据        localStorage.clear();//清除所有localStorage的数据
    
        sessionStorage:当用户的浏览器窗口关闭时,数据会被清除;
        
        共同点:都是保存在浏览器端,且同源的。
        区别:
            cookie数据始终在同源的http请求中携带9即使不需要),即cookie在浏览器和服务器之间来回传递;cookie数据还有路径的概念,可以限制cookie只属于某个路径下。存储大小限制也不同,cookie数据大小不能超过4K,同时因为每次http请求都会携带cookie,所以cookie只能保存很小的数据。
            sessionStorage和localStorage不会自动把数据发给服务器,只在本地保存,虽然也有大小限制,但是要比cookie大得多,可以达到5M或者更大。
            数据有效期不同,sessionStorage仅在当前浏览器窗口关闭前有效,不能持久保存;localStorage:始终有效,浏览器窗口关闭也一直保存;cookie:只在cookie设置的过期时间之前保存,即使浏览器窗口关闭。
            作用域不同,sessionStorage在不同浏览器窗口的数据不能共享,即使是同一个页面;localStorage在所有的同源窗口中都是共享的;cookie也是在同源窗口中共享的,

    2、如何实现浏览器多标签页之间的通信?

        调用localStorage、cookie本地存储方式。

    3、JavaScript的typeof返回类型有哪些?

    Object(null和Array)、number、undefined、string、Boolean、function

    4、类型转换

    强制转换:parseInt();parseFloat();number();

    5、数组的方法

    var list = [1,2,3];list.pop();//删除数组的最后一个元素 var list = [1,2];list.unshift(0,1);//头部添加  var list = [0,1,1,2,3];list.push(4,5);//尾部添加   var list = [1,2,3,4,5];var arr = list.concat(4,[5,6]);//把两个数组连接起来 //var arr = [1,2,3,4,5];  //var list = [1,2,3];list.join("-");    //1-2-3list.reverse();//3,2,1list.slice(1);//var list = [2,3];list.slice(1,2);//var list = [2];list.slice(1,-2);//设置了两个参数,终止下标为负数,当出现负数时,将负数加上数组长度的值来替换该位置的数。var arr = list.splice(0,1);//删除 var list = [2,3];  var arr = [1];可以删除任意数量的项,只需指定2个参数;要删除的第一项的位置和要删除的项数。例如splice(0,2);会删除当前数组的前两项list.splice(2,0,4,6);//插入,var list = [1,2,4,6,3]; 可以向指定位置插入任意数量的项,需要3个参数,起始位置、0(要删除的项数)、要插入的任意数量的项。例如splice(2,0,4,6);会从第二个位置插入4和6;list.splice(2,1,4,6);//替换,var list = [1,2,6,3]; 可以向指定位置插入任意数量的项,同时删除任意数量的项,需要3个参数,起始位置、要删除的项数、要插入的任意数量的项。例如splice(2,1,4,6);会从位置 2 开始插入4和6。list.sort();//按照第一个数字大小进行排序;function compare(a,b){
        return a-b;//正序;
        return b-a;//倒序;}list.sort(compare);

    6、ajax请求时get和post的区别?

    get:从服务器上获取数据,传送数据量小,安全性低,请求会被缓存,缓存是针对URL进行缓存的,get请求参数直接加在URL地址后面,一种参数组合就会产生一种URL的缓存,重复的请求结果是相同的;post:向服务器发送数据;传送数据量大,请求不会被缓存,参数封装在二进制的数据体中,服务器也不会记录参数,相对安全,所以涉及用户隐私的数据都要用post传送;

    7、ajax请求时,如何解释json数据?

    使用eval方法解析的时候,eval();不会去判断该字符串是否合法,而且json对象里的js方法也会被执行,这是非常危险的;推荐使用JSON.parse(); JSON.parse();把字符串转化成json。

    8、call和apply的区别?

    共同点:
        都可以用来代替另一个对象调用一个方法,将一个函数的对象上下文从初始的上下文改变为由thisObj指定的新对象。
        另一种说法,都能够改变方法的执行上下文(执行环境),将一个对象的方法交给另一个对象来执行,并且是立即执行。
    不同点:
        apply();//最多只能有两个参数--新this对象和一个数组argArray,如果给该方法传递多个参数,则把参数都写进这个数组里边,当然,即使只有一个参数,也要写进数组里边。
        call();//可以接收多个参数,第一个参数apply()一样,后面则是一串参数列表。
        实际上,apply和call的功能是一样的,只是传入的参数列表的形式不同。

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

    10.你有哪些性能优化的方法?

        (详情请看雅虎14条性能优化原则)。
    
          (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) 图片预加载,将样式表放在顶部,将脚本放在底部  加上时间戳。

    11.深拷贝和浅拷贝

        基本类型指的是简单的数据段,引用类型指的是多个值构成的对象;    var name = "John"; // 基本类型值
    
        var obj = new Object(); 
        obj.name = "John"; 
        // obj 为引用类型值
        
        在复制变量中,对于基本类型来说,两者互不影响,    var num = 1;    var num1 = num; // num1 = 1;
    
        var num1 = 3; // num还是1,不会变
        
        浅拷贝和深拷贝的区别:
        对于浅拷贝来说,对于一个数组(数组是一个对象),只要我们修改了一个拷贝数组,原数组也会跟着改变。
        因为他们引用的是同一个地址的数据,拷贝的时候并没有给b数组创造独立的内存,只是把a数组指向数据的指针拷贝给了b;
        而深拷贝就与其相反,将会给b数组创造独立的内存,并且将a数组的内容一一拷贝进来,两者互不影响。
        
        实现深拷贝:
        一:层级拷贝,用递归实现;
        二:JSON解析        var b = JSON.parse(JSON.stringify(a));        

     

    3

    其他  

    一、怎么让Chrome支持小于12px 的文字?

    这个我们在做移动端的时候,设计师图片上的文字假如是10px,我们实现在网页上之后。往往设计师回来找我们,这个字体能小一些吗?我设计的是10px?为啥是12px?其实我们都知道,谷歌Chrome最小字体是12px,不管你设置成8px还是10px,在浏览器中只会显示12px,那么如何解决这个坑爹的问题呢?

    我们的做法是:

    针对谷歌浏览器内核,加webkit前缀,用transform:scale()这个属性进行缩放!

    <style>pspan{font-size:10px;-webkit-transform:scale(0.8);display:block;}</style><p><span>haorooms博客测试10px</span></p>

    二、IOS手机浏览器字体齿轮

    修改-webkit-font-smoothing属性,结果是:-webkit-font-smoothing:none:无抗锯齿-webkit-font-smoothing: antialiased | subpixel-antialiased |default:灰度平滑

    三、如何修改chrome记住密码后自动填充表单的黄色背景?

    大体可以通过input : -webkit-autofill来进行修改!

    input:-webkit-autofill {background-color:#FAFFBD;background-image: none;color:#000;}

    四、谷歌浏览器运行下面代码,并解释!

    [].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})

    运行上面代码之后,会发现HTML层都被使用不同的颜色添加了一个高亮的边框。为什么会这样呢?

    首先我们来看

    [].forEach.call(),关于call()和apply(),我前面有文章也写过,具体可以看http://www.haorooms.com/post/js_constructor_pro

    [].forEach.call()等价于Array.prototype.forEach.call()

    其次我们来看$$("*")

    你可以在你的Chrome浏览器控制台中输入$$('a'),然后你就能得到一个当前页面中所有锚元素的列表。

    $$函数是许多现代浏览器命令行API中的一个部分,它等价于document.querySelectorAll,你可以将一个CSS选择器作为这个函数的参数,然后你就能够获得当前页面中所有匹配这个CSS选择器的元素列表。如果你在浏览器控制台以外的地方,你可以使用document.querySelectorAll('')来代替$$('')

    为元素添加颜色

    为了让元素都有一个漂亮的边框,我们在上面的代码中使用了CSS属性outline。outline属性位于CSS盒模型之外,因此它并不影响元素的属性或者元素在布局中的位置,这对于我们来说非常有用。这个属性和修改border属性非常类似,因此下面的代码应该不会很难理解:

    a.style.outline="1px solid #"+ color

    真正有趣的地方在于定义颜色部分:

    (~~(Math.random()*(1<<24))).toString(16)

    ~~的作用相当于parseInt,和我前面讲解的“|”功能类似,关于运算符“I” ,可以去看看!

    通过上面代码可以获取到一个随机的颜色值!

    五、input [type=search] 搜索框右侧小图标如何美化?

    美化效果如下图:

    enter image description here

    右侧默认的比较难看的按钮,美化成右侧效果。

    input[type="search"]::-webkit-search-cancel-button{-webkit-appearance: none;height:15px;width:15px;border-radius:8px;background:url("images/searchicon.png")no-repeat 00;background-size:15px15px;}

    用到的是伪元素::-webkit-search-cancel-button,关于什么是伪类和为元素,请看:http://www.haorooms.com/post/css_wl_wys

    六、iOS safari 如何阻止“橡皮筋效果”?

    可以参考一下知乎上的回答 https://www.zhihu.com/question/22256539 。

    但是,我们遇到的问题不是这样,我是要解决弹跳导致弹出层(position:absolute)的覆盖层高度小于100%;

    针对这个问题,我想到的解决方案如下:

    方法一: 把position:absolute改成position:fixed,并在弹出层之后,设置body的高度是100%;overflow是hidden。

    方法二:

    思路是获取苹果浏览器导航栏的高度。然后滚动的时候,重新获取其高度。在导航栏高度变小的时候,给弹出层增加高度的百分比!

    代码如下:

    //ios safari 伸缩判断var topbarHeight=window.outerHeight-window.innerHeight,agent=navigator.userAgent,globleflag=true;
            $(window).scroll(function(){if(agent.indexOf("iPhone")!=-1|| agent.indexOf("iPad")!=-1){var topbarHeightNow=window.outerHeight-window.innerHeight;if(topbarHeightNow<topbarHeight){
                        globleflag=false//此处写处理逻辑}else{
                     globleflag=true//此处写处理逻辑}}});

    七、实现点击文字,文字后面radio选中效果

    这个效果是前端很经常用到和遇到的效果了,实现这个效果的方式也很多,很多朋友用js和jquery来实现,但是最简单的,我们可以直接用lable标签的 for 属性来实现。

    看下下面例子:

    <form><labelfor="male">Male</label><inputtype="radio"name="sex"id="male"/><br/><labelfor="female">Female</label><inputtype="radio"name="sex"id="female"/></form>

    label 的for属性后面跟着input的id,就可以点击label,来触发input效果了,大家可以试一试!

    八、网站中,图片文件(jpg,png,gif),如何点击下载?而非点击预览?

    我们平时在网站中的图片,假如我们要下载,如下写:

    <ahref="haorooms博客.jpg">下载</a>

    我们点击下载按钮,只会预览“haorooms博客.jpg”这张图片,并不会出现下载框,另存为那种?那么我们如何做呢?

    我们只需要如下写

    <ahref="haorooms博客.jpg"download>下载</a>

    就可以下载了。点击如下进行尝试吧!下载

    不但如次,我们还可以指定文件名称,如下写法:

    <ahref="haorooms博客.jpg"download="haoroom前端博客图片下载">下载</a>

    测试如下:下载

    上面就是指定下载的写法!

    九、Math.min()比Math.max()大

    Math.min()<Math.max()// falseMath.min()>Math.max()// true

    因为Math.min() 返回 Infinity, 而 Math.max()返回 -Infinity。

     

    前端技术栈问题

     

    1

    vue相关问题?  

     

    更多前端技能请关注公众号”极致简文“

     

    往期精彩回顾

    React组件与生命周期

    React函数组件和Class组件以及Hooks

    2020年最火爆的Vue.js面试题

    Redux使用之我要买个女朋友(入门篇)

     

     

     

    关注公众号,精彩不间断

     

     

    展开全文
  • 文档描述 本文是关注微信小程序的开发和面试问题, 由基础到困难循序渐进, 适合面试和开发小程序。 并有热点框架(vue react node.js 全栈)前端资源以及后端视频资源和源码 ...生命周期函数面试题 1.什么是...

    文档描述

    本文是关注微信小程序的开发和面试问题,
    由基础到困难循序渐进,
    适合面试和开发小程序。
    并有热点框架(vue react node.js 全栈)前端资源以及后端视频资源和源码
    并基于前端进阶和面试的需求 总结了常用插件和js算法
    以及html/css 和js热点面试题

    因为csdn不可以有外链 所以答案链接在评论区!!!

    Vue面试题

    生命周期函数面试题


        1.什么是 vue 生命周期
        2.vue生命周期的作用是什么
        3.第一次页面加载会触发哪几个钩子
        4.简述每个周期具体适合哪些场景
        5.created和mounted的区别
        6.vue获取数据在哪个周期函数
        7.请详细说下你对vue生命周期的理解?


    vue路由面试题


        1.mvvm 框架是什么?
        2.vue-router 是什么?它有哪些组件
        3.active-class 是哪个组件的属性?
        4.怎么定义 vue-router 的动态路由? 怎么获取传过来的值
        5.vue-router 有哪几种导航钩子?
        6.$route 和 $router 的区别
        7.vue-router响应路由参数的变化
        8.vue-router传参
        9.vue-router的两种模式
        10.vue-router实现路由懒加载( 动态加载路由 )


    vue常见面试题


        1.vue优点
        2.vue父组件向子组件传递数据?
        3.子组件像父组件传递事件
        4.v-show和v-if指令的共同点和不同点
        5.如何让CSS只在当前组件中起作用
        6.<keep-alive></keep-alive>的作用是什么?
        7.如何获取dom
        8.说出几种vue当中的指令和它的用法?
        9. vue-loader是什么?使用它的用途有哪些?
        10.为什么使用key
        11.axios及安装
        12.axios解决跨域
        13.v-modal的使用
        14.scss的安装以及使用
        15. 请说出vue.cli项目中src目录每个文件夹和文件的用法?
        16.分别简述computed和watch的使用场景
        17.v-on可以监听多个方法吗
        18.$nextTick的使用
        19.vue组件中data为什么必须是一个函数
        20.vue事件对象的使用
        21 组件间的通信
        22.渐进式框架的理解
        23.Vue中双向数据绑定是如何实现的
        24.单页面应用和多页面应用区别及优缺点
        25.vue中过滤器有什么作用及详解
        26.v-if和v-for的优先级
        27.assets和static的区别
        28.列举常用的指令
        29.vue常用的修饰符
        30.数组更新检测
        31.Vue.set视图更新
        32.自定义指令详解
        33.vue的两个核心点
        34.vue和jQuery的区别
        35 引进组件的步骤
        36.Vue-cli打包命令是什么?打包后悔导致路径问题,应该在哪里修改
        37.三大框架的对比
        38. 跨组件双向数据绑定
        39.delete和Vue.delete删除数组的区别
        40.SPA首屏加载慢如何解决
        41.Vue-router跳转和location.href有什么区别
        42. vue slot
        43.你们vue项目是打包了一个js文件,一个css文件,还是有多个文件?
        44.vue遇到的坑,如何解决的?
        45.Vue里面router-link在电脑上有用,在安卓上没反应怎么解决?
        46.Vue2中注册在router-link上事件无效解决方法
        47.RouterLink在IE和Firefox中不起作用(路由不跳转)的问题
        48.axios的特点有哪些
        49.请说下封装 vue 组件的过程?
        50.vue 各种组件通信方法(父子 子父 兄弟 爷孙 毫无关系的组件)
        51.params和query的区别
        52. vue mock数据
        53 vue封装通用组件
        54.vue初始化页面闪动问题
        55.vue禁止弹窗后的屏幕滚动
        56.vue更新数组时触发视图更新的方法
        57.vue常用的UI组件库
        58. vue如何引进本地背景图片
        59. vue如何引进sass
        60.vue修改打包后静态资源路径的修改


    vuex常见面试题


        1.vuex是什么?怎么使用?哪种功能场景使用它?
        2.vuex有哪几种属性
        3.不使用Vuex会带来什么问题
        4.Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中?
        5.vuex一个例子方法
        6.Vuex中如何异步修改状态
        7.Vuex中actions和mutations的区别


    vue项目实战


        1.顶部悬停效果
        2.电话本列表效果( 右边字母分类 上下滑动 旁边字母显示高亮)
        3.vue做代理
        4.Vue路由切换时的左滑和右滑效果示例

    ES6面试题

     

    ES6新增方法面试题


        1.let const var比较
        2.反引号(`)标识
        3.函数默认参数
        4.箭头函数
        5.属性简写
        6.方法简写
        7.Object.keys()方法,获取对象的所有属性名或方法名
        8.Object.assign ()原对象的属性和方法都合并到了目标对象
        9.for...of 循环
        10.import和export
        11.Promise对象
        12.解构赋值
        13.set数据结构(可用于快速去重)
        14.Spread Operator 展开运算符(...)
        15.字符串新增方法


    ES6数组面试题


        1.forEach()
        2.map()
        3.filter()
        4.reduce()
        5.some()
        6.every()
        7.all()方法


    ES6编程题


        1.使用解构,实现两个变量的值的交换
        2.利用数组推导,计算出数组 [1,2,3,4] 每一个元素的平方并组成新的数组。
        3.使用ES6改下面的模板
        4.把以下代码使用两种方法,来依次输出0到9?

    react面试题

    react生命周期面试题


        1.react 生命周期函数
        2.react生命周期中,最适合与服务端进行数据交互的是哪个函数
        3.运行阶段生命周期调用顺序
        4.shouldComponentUpdate 是做什么的,(react 性能优化是哪个周期函数?)
        5.指出(组件)生命周期方法的不同


    react 基础面试题


        1.React 中 keys 的作用是什么?
        2.React 中 refs 的作用是什么?
        3.React 中有三种构建组件的方式
        4.调用 setState 之后发生了什么?
        5.react diff 原理(常考,大厂必考)
        6.为什么建议传递给 setState 的参数是一个 callback 而不是一个对象
        7.除了在构造函数中绑定 this,还有其它方式吗
        8.setState第二个参数的作用
        9.(在构造函数中)调用 super(props) 的目的是什么
        10.简述 flux 思想
        11.在 React 当中 Element 和 Component 有何区别?
        12.描述事件在 React 中的处理方式。
        13.createElement 和 cloneElement 有什么区别?
        14.如何告诉 React 它应该编译生产环境版本?
        15.Controlled Component 与 Uncontrolled Component 之间的区别是什么?


    react组件面试题


        1.展示组件(Presentational component)和容器组件(Container component)之间有何不同
        2.类组件(Class component)和函数式组件(Functional component)之间有何不同
        3.(组件的)状态(state)和属性(props)之间有何不同
        4.何为受控组件(controlled component)
        5.何为高阶组件(higher order component)
        6.应该在 React 组件的何处发起 Ajax 请求
        7.react中组件传值
        8.什么时候在功能组件( Class Component )上使用类组件( Functional Component )?
        9.受控组件( controlled component )与不受控制的组件( uncontrolled component )有什么区别?
        10.react 组件的划分业务组件技术组件?


    redux面试题


        1.redux中间件
        2.redux有什么缺点
        3.了解 redux 么,说一下 redux 把


    react性能比较面试题


        1.vue和react的区别
        2.react性能优化的方案
        3.React 项目用过什么脚手架
        4.介绍一下webpack webpack
        5.如果你创建了类似于下面的 Twitter 元素,那么它相关的类定义是啥样子的?
        6.为什么我们需要使用 React 提供的 Children API 而不是 JavaScript 的 map?
     

    js面试题

     

    1.简述同步和异步的区别
    2.怎么添加、移除、复制、创建、和查找节点
    3.实现一个函数clone 可以对Javascript中的五种主要数据类型(Number、string、Object、Array、Boolean)进行复制
    4.如何消除一个数组里面重复的元素
    5.写一个返回闭包的函数
    6.使用递归完成1到100的累加
    7.Javascript有哪几种数据类型
    8.如何判断数据类型
    9.console.log(1+'2')和console.log(1-'2')的打印结果
    10.Js的事件委托是什么,原理是什么
    11.如何改变函数内部的this指针的指向
    12.列举几种解决跨域问题的方式,且说明原理
    13.谈谈垃圾回收机制的方式及内存管理
    14.写一个function ,清除字符串前后的空格
    15.js实现继承的方法有哪些
    16.判断一个变量是否是数组,有哪些办法
    17.let ,const ,var 有什么区别
    18.箭头函数与普通函数有什么区别
    19.随机取1-10之间的整数
    20.new操作符具体干了什么
    21.Ajax原理
    22.模块化开发怎么做
    23.异步加载Js的方式有哪些
    24.xml和 json的区别
    25.webpack如何实现打包的
    26.常见web安全及防护原理
    27.用过哪些设计模式
    28.为什么要同源限制
    29.offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别
    30.javascript有哪些方法定义对象
    31.说说你对promise的了解
    32.谈谈你对AMD、CMD的理解
    33.web开发中会话跟踪的方法有哪些
    34.介绍js有哪些内置对象?
    35.说几条写JavaScript的基本规范?
    36.javascript创建对象的几种方式?
    37.eval是做什么的?
    38.null,undefined 的区别?
    39.[“1”, “2”, “3”].map(parseInt) 答案是多少?
    40.javascript 代码中的”use strict”;是什么意思 ? 使用它区别是什么?
    41.js延迟加载的方式有哪些?
    42.defer和async
    43.说说严格模式的限制
    44.attribute和property的区别是什么?
    45.ECMAScript6 怎么写class么,为什么会出现class这种东西?
    46.常见兼容性问题
    47.函数防抖节流的原理
    48.原始类型有哪几种?null是对象吗?
    49.为什么console.log(0.2+0.1==0.3) //false
    50.说一下JS中类型转换的规则?
    51.深拷贝和浅拷贝的区别?如何实现
    52.如何判断this?箭头函数的this是什么
    53.== 和 ===的区别
    54.什么是闭包
    55.JavaScript原型,原型链 ? 有什么特点?
    56.typeof()和instanceof()的用法区别
    57.什么是变量提升
    58.all、apply以及bind函数内部实现是怎么样的
    59.为什么会出现setTimeout倒计时误差?如何减少
    60.谈谈你对JS执行上下文栈和作用域链的理解
    61.new的原理是什么?通过new的方式创建对象和通过字面量创建有什么区别?
    62.prototype 和 proto 区别是什么?
    63.使用ES5实现一个继承?
    64.取数组的最大值(ES5、ES6)
    65.ES6新的特性有哪些?
    66.promise 有几种状态, Promise 有什么优缺点 ?
    67.Promise构造函数是同步还是异步执行,then呢 ?promise如何实现then处理 ?
    68.Promise和setTimeout的区别 ?
    69.如何实现 Promise.all ?
    70.如何实现 Promise.finally ?
    71.如何判断img加载完成
    72.如何阻止冒泡?
    73.如何阻止默认事件?
    74.ajax请求时,如何解释json数据
    75.json和jsonp的区别?
    76.如何用原生js给一个按钮绑定两个onclick事件?
    77.拖拽会用到哪些事件
    78.document.write和innerHTML的区别
    79.jQuery的事件委托方法bind 、live、delegate、on之间有什么区别?
    80.浏览器是如何渲染页面的?
    81.$(document).ready()方法和window.onload有什么区别?
    82. jquery中$.get()提交和$.post()提交有区别吗?
    83.对前端路由的理解?前后端路由的区别?
    84.手写一个类的继承
    85.XMLHttpRequest:XMLHttpRequest.readyState;状态码的意思
    86.正则表达式常见面试题

      1.给一个连字符串例如:get-element-by-id转化成驼峰形式。
      2.匹配二进制数字
      3.非零的十进制数字 (有至少一位数字, 但是不能以0开头)
      4.匹配一年中的12个月
      5.匹配qq号最长为13为
      6.匹配常见的固定电话号码
      7.匹配ip地址
      8.匹配用尖括号括起来的以a开头的字符串
      9.分割数字每三个以一个逗号划分
      10.判断字符串是否包含数字
      11.判断电话号码
      12.判断是否符合指定格式
      13.判断是否符合USD格式
      14.JS实现千位分隔符
      15.获取 url 参数
      16.验证邮箱
      17.验证身份证号码
      18.匹配汉字
      19.去除首尾的'/'
      20.判断日期格式是否符合 '2017-05-11'的形式,简单判断,只判断格式
      21.判断日期格式是否符合 '2017-05-11'的形式,严格判断(比较复杂)
      22.IPv4地址正则
      23.十六进制颜色正则
      24.车牌号正则
      25.过滤HTML标签
      26.密码强度正则,最少6位,包括至少1个大写字母,1个小写字母,1个数字,1个特殊字符
      27.URL正则
      28.匹配浮点数

    浏览器/html/css面试题

     

    1.什么是盒模型
    2.行内元素有哪些?块级元素有哪些? 空(void)元素有那些?行内元素和块级元素有什么区别?
    3.简述src和href的区别
    4.什么是css Hack
    5.什么叫优雅降级和渐进增强
    6.px和em的区别
    7.HTML5 为什么只写
    8.Http的状态码有哪些
    9.一次完整的HTTP事务是怎么一个过程
    10.HTTPS是如何实现加密
    11.浏览器是如何渲染页面的
    12.浏览器的内核有哪些?分别有什么代表的浏览器
    13.页面导入时,使用link和@import有什么区别
    14.如何优化图像,图像格式的区别
    15.列举你了解Html5. Css3 新特性
    16.可以通过哪些方法优化css3 animation渲染
    17.列举几个前端性能方面的优化
    18.如何实现同一个浏览器多个标签页之间的通信
    19.浏览器的存储技术有哪些
    20.css定位方式
    21.尽可能多的写出浏览器兼容性问题
    22.垂直上下居中的方法
    23.响应式布局原理
    25.清除浮动的方法
    26.http协议和tcp协议
    27.刷新页面,js请求一般会有哪些地方有缓存处理
    28.如何对网站的文件和资源进行优化
    29.你对网页标准和W3C重要性的理解
    30.Http和https的区别
    31.data-属性的作用
    32.如何让Chrome浏览器显示小于12px的文字
    33.哪些操作会引起页面回流(Reflow)
    34.CSS预处理器的比较less sass
    35.如何实现页面每次打开时清除本页缓存
    36.什么是Virtual DOM,为何要用Virtual DOM
    37.伪元素和伪类的区别
    38.http的几种请求方法和区别
    39.前端需要注意哪些SEO
    40.的title和alt有什么区别
    41.从浏览器地址栏输入url到显示页面的步骤
    42.如何进行网站性能优化
    43.语义化的理解
    44.HTML5的离线储存怎么使用,工作原理能不能解释一下?
    45.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢
    46.iframe有那些缺点?
    47.WEB标准以及W3C标准是什么?
    48.Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?
    49.HTML全局属性(global attribute)有哪些
    50.Canvas和SVG有什么区别?
    51.如何在页面上实现一个圆形的可点击区域?
    52.网页验证码是干嘛的,是为了解决什么安全问题
    53.请描述一下 cookies,sessionStorage 和 localStorage 的区别?
    54. CSS选择器有哪些?哪些属性可以继承?
    55.CSS优先级算法如何计算?
    56.CSS3有哪些新特性?
    57.请解释一下CSS3的flexbox(弹性盒布局模型),以及适用场景?
    58.用纯CSS创建一个三角形的原理是什么?
    59.常见的兼容性问题?
    60.为什么要初始化CSS样式
    61.absolute的containing block计算方式跟正常流有什么不同?
    62.CSS里的visibility属性有个collapse属性值?在不同浏览器下以后什么区别?
    63.display:none与visibility:hidden的区别?
    64.position跟display、overflow、float这些特性相互叠加后会怎么样?
    65.对BFC规范(块级格式化上下文:block formatting context)的理解?
    66.为什么会出现浮动和什么时候需要清除浮动?清除浮动的方式?
    67.上下margin重合的问题
    68. 设置元素浮动后,该元素的display值是多少?
    69.移动端的布局用过媒体查询吗?
    70.CSS优化、提高性能的方法有哪些?
    71.浏览器是怎样解析CSS选择器的?
    72.在网页中的应该使用奇数还是偶数的字体?为什么呢?
    73.margin和padding分别适合什么场景使用?
    74.元素竖向的百分比设定是相对于容器的高度吗?
    75.全屏滚动的原理是什么?用到了CSS的哪些属性?
    76.什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?
    77. 视差滚动效果?
    78.::before 和 :after中双冒号和单冒号有什么区别?解释一下这2个伪元素的作用
    79.让页面里的字体变清晰,变细用CSS怎么做?
    80. position:fixed;在android下无效怎么处理?
    81.如果需要手动写动画,你认为最小时间间隔是多久,为什么?
    82.li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?
    83.display:inline-block 什么时候会显示间隙?
    84. 有一个高度自适应的div,里面有两个div,一个高度100px,希望另一个填满剩下的高度
    85.png、jpg、gif 这些图片格式解释一下,分别什么时候用。有没有了解过webp?
    86.style标签写在body后与body前有什么区别?
    87.CSS属性overflow属性定义溢出元素内容区的内容会如何处理?
    88.阐述一下CSS Sprites
    89. 一行或多行文本超出隐藏

     

    微信小程序开发(持续更新)

    初识小程序


        1.注册小程序
        2.微信开发者工具
        3.小程序与普通网页开发的区别
        4.小程序尺寸单位rpx
        5.样式导入(WeUI for)
        6.选择器
        7.小程序image高度自适应及裁剪问题
        8.微信小程序长按识别二维码
        9.给页面加背景色
        10.微信小程序获取用户信息
        11.代码审核和发布
        12.小程序微信认证
        13.小程序申请微信支付
        14.小程序的目录解构及四种文件类型
        15.小程序文件的作用域
        16.小程序常用组件
            1.view
            2.scroll-view
            3.swiper组件
            4.movable-view
            5.cover-view
            6.cover-image


    小程序基础


        17.授权得到用户信息
        18.数据绑定
        19.列表渲染
        20.条件渲染
        21.公共模板建立
        22.事件及事件绑定
        23.引用
        24.页面跳转
            1.wx.switchTab
            2.wx.reLaunch
            3.wx.redirectTo
            4.wx.navigateTo
            5.wx.navigateBack
        25.设置tabBar
        26.页面生命周期
        27.转发分享


    小程序高级


        28.request请求后台接口
        29.http-promise 封装
        30.webview
        31.获取用户收货地址
        32.获取地里位置
        33.自定义组件
        34.微信小程序支付问题


    小程序项目实战


        35.微信小程序本地数据缓存
        36.下拉刷新和下拉加载
        37.列表页向详情页跳转(动态修改title)
        38.客服电话
        39.星级评分组件
        40.小程序插槽的使用slot
        41.模糊查询
        42.wxs过滤
        43.小程序动画
        44.列表根据索引值渲染
        45.小程序动态修改class
        46.小程序常用框架
        47.参数传值的方法
        48.提高小程序的应用速度
        49.微信小程序的优劣势
        50.小程序的双向绑定和vue的区别
        51.微信小程序给按钮添加动画
        52.微信小程序的tab按钮的转换
        53.微信小程序引进echarts
        54.APP打开小程序流程
        55.小程序解析富文本编辑器


    小程序常见bug


        1.域名必须是HTTPS
        2. input组件placeholder字体颜色
        3. wx.navigateTo无法跳转到带tabbar的页面
        4. tabbar在切换时页面数据无法刷新
        5.如何去掉自定义button灰色的圆角边框
        6.input textarea是APP的原生组件,z-index层级最高
        7.一段文字如何换行
        8.设置最外层标签的margin-bottom在IOS下不生效
        9.小程序中canvas的图片不支持base64格式
        10.回到页面顶部
        11.wx.setStorageSync和wx.getStorageSync报错问题
        12.如何获取微信群名称?
        13.new Date跨平台兼容性问题
        14.wx.getSystemInfoSync获取windowHeight不准确
        15.图片本地资源名称,尽量使用小写命名
        

    移动端热点问题

        1. 1px border问题
        2.2X图 3X图适配
        3.图片在安卓上,有些设备模糊问题
        4.固定定位布局 键盘挡住输入框内容
        5.click的300ms延迟问题和点击穿透问题
        6.phone及ipad下输入框默认内阴影
        7.防止手机中页面放大和缩小
        8.flex布局
        9.px、em、rem、%、vw、vh、vm这些单位的区别
        10. 移动端适配- dpr浅析
        11.移动端扩展点击区域
        12 上下拉动滚动条时卡顿、慢
        13 长时间按住页面出现闪退
        14. ios和android下触摸元素时出现半透明灰色遮罩
        15. active兼容处理 即 伪类:active失效
        16.webkit mask兼容处理
        17. pc端与移动端字体大小的问题
        18. transiton闪屏
        19.圆角bug
        20.如何解决禁用表单后移动端样式不统一问题?   

     

    js常用插件

     

    •  轮播图插件
    • 二级城市插件
    • 三级城市插件
    • 文字滑动效果
    • 手风琴效果
    • 视频播放插件
    • 弹层插件
    • 百度编辑器
    • ACE编辑器(轻巧)
    • 上传图片(裁剪)
    • 页面加载效果
    • 全选反选各种效果
    • 京东楼层效果
    • 懒加载
       

    快速建站(全栈)

    • dedecms(文章累)
    • discuz(论坛)
    • ecshop(电商)
    • PHPEMS(考试)

     

    前端资源


        a.vue教学视频


        b.微信小程序教学视频
      
        c.Linux教学视频
        
        d.349套自适应模板
        e.黑马Python全讲解
        
        f.你不知道的电子书
        
        g.PHP课程全讲解
        
        h.珠峰培训视频
       
        i.小甲鱼pythhon视频
        
        j.机器学习
       

     

    k.React教学视频

     


     

    展开全文
  • 【前端面试】前端面试题300道~~熬夜吐血整理

    万次阅读 多人点赞 2018-03-09 00:12:30
    人生也有涯 而知也无涯 以有涯随无涯 殆已! –庄子 部分内容转载自网络,侵立删!如有错误,请指正! 1、手写jsonp的实现 参考自: ...先说说JSONP是怎么产生的: ...其实网上关于JSON...

    人生也有涯 而知也无涯 以有涯随无涯 殆已! –庄子

    部分内容转载自网络,侵立删!如有错误,请指正!

    1、手写jsonp的实现

    参考自:    http://www.qdfuns.com/notes/16738/1b6ad6125747d28592a53a960b44c6f4.html
    

    先说说JSONP是怎么产生的:

    其实网上关于JSONP的讲解有很多,但却千篇一律,而且云里雾里,对于很多刚接触的人来讲理解起来有些困难,着用自己的方式来阐释一下这个问题,看看是否有帮助。

    1、一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面、动态网页、web服务、WCF,只要是跨域请求,一律不准。

    2、不过我们又发现,Web页面上调用js文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力,比如script、img、iframe)。

    3、于是可以判断,当前阶段如果想通过纯web端(ActiveX控件、服务端代理、属于未来的HTML5之Websocket等方式不算)跨域访问数据就只有一种可能,那就是在远程服务器上设法把数据装进js格式的文件里,供客户端调用和进一步处理。

    4、恰巧我们已经知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据,更妙的是JSON还被js原生支持,所以在客户端几乎可以随心所欲的处理这种格式的数据。

    5、这样子解决方案就呼之欲出了,web客户端通过与调用脚本一模一样的方式,来调用跨域服务器上动态生成的js格式文件(一般以JSON为后缀),显而易见,服务器之所以要动态生成JSON文件,目的就在于把客户端需要的数据装入进去。

    6、客户端在对JSON文件调用成功之后,也就获得了自己所需的数据,剩下的就是按照自己需求进行处理和展现了,这种获取远程数据的方式看起来非常像AJAX,但其实并不一样。

    7、为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。

    JSONP的客户端具体实现:
    1、我们知道,哪怕跨域js文件中的代码(当然指符合web脚本安全策略的),web页面也是可以无条件执行的。
    远程服务器remoteserver.com根目录下有个remote.js文件代码如下:

    alert('我是远程文件');

    本地服务器localserver.com下有个jsonp.html页面代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript" src="http://remoteserver.com/remote.js"></script>
    </head>
    <body>
    
    </body>
    </html>

    毫无疑问,页面将会弹出一个提示窗体,显示跨域调用成功。

    2、现在我们在jsonp.html页面定义一个函数,然后在远程remote.js中传入数据进行调用。

    jsonp.html页面代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript">
        var localHandler = function(data){
            alert('我是本地函数,可以被跨域的remote.js文件调用,远程js带来的数据是:' + data.result);
        };
        </script>
        <script type="text/javascript" src="http://remoteserver.com/remote.js"></script>
    </head>
    <body>
    
    </body>
    </html>

    remote.js文件代码如下:

    localHandler({"result":"我是远程js带来的数据"});

    运行之后查看结果,页面成功弹出提示窗口,显示本地函数被跨域的远程js调用成功,并且还接收到了远程js带来的数据。
    很欣喜,跨域远程获取数据的目的基本实现了,但是又一个问题出现了,我怎么让远程js知道它应该调用的本地函数叫什么名字呢?毕竟是jsonp的服务者都要面对很多服务对象,而这些服务对象各自的本地函数都不相同啊?我们接着往下看。

    3、聪明的开发者很容易想到,只要服务端提供的js脚本是动态生成的就行了呗,这样调用者可以传一个参数过去告诉服务端 “我想要一段调用XXX函数的js代码,请你返回给我”,于是服务器就可以按照客户端的需求来生成js脚本并响应了。

    看jsonp.html页面的代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript">
        // 得到航班信息查询结果后的回调函数
        var flightHandler = function(data){
            alert('你查询的航班结果是:票价 ' + data.price + ' 元,' + '余票 ' + data.tickets + ' 张。');
        };
        // 提供jsonp服务的url地址(不管是什么类型的地址,最终生成的返回值都是一段javascript代码)
        var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
        // 创建script标签,设置其属性
        var script = document.createElement('script');
        script.setAttribute('src', url);
        // 把script标签加入head,此时调用开始
        document.getElementsByTagName('head')[0].appendChild(script); 
        </script>
    </head>
    <body>
    </body>
    </html>

    这次的代码变化比较大,不再直接把远程js文件写死,而是编码实现动态查询,而这也正是jsonp客户端实现的核心部分,本例中的重点也就在于如何完成jsonp调用的全过程。
    我们看到调用的url中传递了一个code参数,告诉服务器我要查的是CA1998次航班的信息,而callback参数则告诉服务器,我的本地回调函数叫做flightHandler,所以请把查询结果传入这个函数中进行调用。
    OK,服务器很聪明,这个叫做flightResult.aspx的页面生成了一段这样的代码提供给jsonp.html

    (服务端的实现这里就不演示了,与你选用的语言无关,说到底就是拼接字符串):
    HTML 代码

    flightHandler({
        "code": "CA1998",
        "price": 1780,
        "tickets": 5
    });

    我们看到,传递给flightHandler函数的是一个json,它描述了航班的基本信息。运行一下页面,成功弹出提示窗口,jsonp的执行全过程顺利完成!

    4、到这里为止的话,相信你已经能够理解jsonp的客户端实现原理了吧?剩下的就是如何把代码封装一下,以便于与用户界面交互,从而实现多次和重复调用。

    jQuery如何实现jsonp调用?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
         <title>Untitled Page</title>
          <script type="text/javascript" src=jquery.min.js"></script>
          <script type="text/javascript">
         jQuery(document).ready(function(){ 
            $.ajax({
                 type: "get",
                 async: false,
                 url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
                 dataType: "jsonp",
                 jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
                 jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
                 success: function(json){
                     alert('您查询到航班信息:票价: ' + json.price + ' 元,余票: ' + json.tickets + ' 张。');
                 },
                 error: function(){
                     alert('fail');
                 }
             });
         });
         </script>
         </head>
      <body>
      </body>
    </html>

    这里针对ajax与jsonp的异同再做一些补充说明:

    1、ajax和jsonp这两种技术在调用方式上”看起来”很像,目的也一样,都是请求一个url,然后把服务器返回的数据进行处理,因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装。

    2、但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加script标签来调用服务器提供的js脚本。

    3、所以说,其实ajax与jsonp的区别不在于是否跨域,ajax通过服务端代理一样可以实现跨域,jsonp本身也不排斥同域的数据的获取。

    4、还有就是,jsonp是一种方式或者说非强制性协议,如同ajax一样,它也不一定非要用json格式来传递数据,如果你愿意,字符串都行,只不过这样不利于用jsonp提供公开服务。

    总而言之,jsonp不是ajax的一个特例,哪怕jquery等巨头把jsonp封装进了ajax,也不能改变这一点!

    2、手写单链表查找倒数第k个节点

    1、为了找出倒数第k个元素,最容易想到的办法是首先遍历一遍单链表,求出整个单链表的长度n,然后将倒数第k个,转换为正数第n-k个,接下来遍历一次就可以得到结果。但是该方法存在一个问题,即需要对链表进行两次遍历,第一次遍历用于求解单链表的长度,第二次遍历用于查找正数第n-k个元素。
    这种思路的时间复杂度是O(n),但需要遍历链表两次。

    2、如果我们在遍历时维持两个指针,第一个指针从链表的头指针开始遍历,在第k-1步之前,第二个指针保持不动;在第k-1步开始,第二个指针也开始从链表的头指针开始遍历。由于两个指针的距离保持在k-1,当第一个(走在前面的)指针到达链表的尾结点时,第二个指针(走在后面的)指针正好是倒数第k个结点。这种思路只需要遍历链表一次。对于很长的链表,只需要把每个结点从硬盘导入到内存一次。因此这一方法的时间效率前面的方法要高。

    class Node{
        Node next=null;
        int data;
        public Node(int data){
            this.data=data;
        }
    }
    public class MyLinkedList {
    
        Node head=null;//链表头的引用
        public Node findElem(Node head,int k){
            if(k<1||k>this.length()){
                return null;
            }
            Node p1=head;
            Node p2=head;
            for(int i=0;i<k;i++)
                p1=p1.next;
            while(p1!=null){
                p1=p1.next;
                p2=p2.next;
            }
            return p2;
        }
        public static void main(String[] args) {
    
            MyLinkedList list=new MyLinkedList();
            list.addNode(1);
            list.addNode(2);
            list.addNode(3);
            list.addNode(4);
            list.addNode(5);
            MyLinkedList p=new MyLinkedList();
            p.head=list.findElem(list.head, 3);
            p.printList();
    
        }
    
    }

    3、http请求头,请求体,cookie在哪个里面?url在哪里面?

    参考菜鸟教程HTTP专栏:http://www.runoob.com/http/http-tutorial.html
    人人三面的时候问我http请求头都有哪些值,答不上来。。GG
    客户端请求消息
    这里写图片描述
    服务器响应消息
    HTTP响应也由四个部分组成,分别是:状态行、消息报头、空行和响应正文。
    这里写图片描述

    实例
    下面实例是一点典型的使用GET来传递数据的实例:
    客户端请求:

    GET /hello.txt HTTP/1.1
    User-Agent: curl/7.16.3 libcurl/7.16.3 OpenSSL/0.9.7l zlib/1.2.3
    Host: www.example.com
    Accept-Language: en, mi

    服务端响应:

    HTTP/1.1 200 OK
    Date: Mon, 27 Jul 2009 12:28:53 GMT
    Server: Apache
    Last-Modified: Wed, 22 Jul 2009 19:15:56 GMT
    ETag: "34aa387-d-1568eb00"
    Accept-Ranges: bytes
    Content-Length: 51
    Vary: Accept-Encoding
    Content-Type: text/plain

    输出结果:

    Hello World! My payload includes a trailing CRLF.

    4、原型链的解释

    饿了么面试的时候问到了,用友也问到了。没答好,GG.
    这里写图片描述

    5、对闭包的理解,实现一个暴露内部变量,而且外部可以访问修改的函数

    闭包的作用:
    匿名自执行函数、缓存、实现封装(主要作用)、实现面向对象中的对象

    var person = function(){    
        //变量作用域为函数内部,外部无法访问    
        var name = "default";       
        return {    
           getName : function(){    
               return name;    
           },    
           setName : function(newName){    
               name = newName;    
           }    
        }    
    }();    
    print(person.name);//直接访问,结果为undefined    
    print(person.getName());    
    person.setName("a");    
    print(person.getName());    
    //得到结果如下:  
    undefined  
    default  
    a

    6、基本的数据类型

    5个简单数据类型(基本数据类型)+ 1个复杂数据类型
    undefiend, number string null boolean + object
    ES6 新增Symbol

    7、基本的两列自适应布局

    左定右适应:

    #div1{
        width: 100px;
        display: inline-block;
        background-color: black;
    }
    #div2{
        display: inline-block;
        position: absolute;
        left: 100px;
        right: 0px;
        background-color: red;
    }

    8、unix中常用的命令行

    虽然上过linux课,但是命令忘得差不多了 尴尬。。。

    9、OSI模型,HTTP,TCP,UDP分别在哪些层

    这个可以参考我另一个博客:
    http://blog.csdn.net/qq_22944825/article/details/78160659
    OSI:物理层-数据链路层-网络层-传输层-会话层-表现层-应用层
    这里写图片描述

    10、解释平衡二叉树,以及在数据结构中的应用(红黑树)

    11、快排的时间复杂度和空间复杂度

    一个特别好的总结的博客:
    http://web.jobbole.com/87968/
    这里写图片描述

    12、手写一个jQuery插件

    1、$.extend(src)
      该方法就是将src合并到jquery的全局对象中去,如:

     $.extend({
          hello:function(){alert('hello');}
          });

    2、$.fn.extend(src)
      该方法将src合并到jquery的实例对象中去,如:

     $.fn.extend({
      hello:function(){alert('hello');}
     });

    13、在jquery方法和原型上面添加方法的区别和实现,以及jquery对象的实现

    参考上一个问题答案~

    使用jquery的第一件事就是要使用jquery对象,jquery对象和javascript中的DOM对象是不同的。

    什么是jquery对象?jquery将一个DOM对象转化为jquery对象后就可以使用jquery类库提供的各种函数。可以将jquery对象理解为一个类,并且封装了很多的方法,而且可以动态的通过加载插件扩展这个类,类似于C#中的分布类partial class。

    除了jQuery工具函数,jQuery的操作都是从jQuery对象开始。比如:

    attr(key,value)
    
    <img id="myphoto" alt="my photo" src=""/>
    
    $("#myphoto").attr("src","/pic/1.jpg");
    

    jQuery对象是一个特殊的集合对象。即使只有一个元素,jQuery对象仍然是一个集合。说其特殊是因为实际上jQuery对象是包含一个集合对象和各种函数的类。

    14、手写一个递归函数

     function fact(num) {
        if (num <= 1) {
            return 1;             
        } else {
            return num * fact(num - 1);            
        }
    } 

    以下代码可导致出错:

    var anotherFact = fact; 
     fact = null; 
     alert(antherFact(4)); //出错 

    由于fact已经不是函数了,所以出错。
    用arguments.callee可解决问题,这是一个指向正在执行的函数的指针,arguments.callee返回正在被执行的对现象。
    新的函数为:

    function fact(num) {
                if (num <= 1) {
                    return 1;
                } else {
                    return num * arguments.callee(num - 1); //此处更改了。 
                }
    }
    var anotherFact = fact;
    fact = null;
    alert(antherFact(4)); //结果为24.

    15、对前端路由的理解?前后端路由的区别?

    前端的路由和后端的路由在实现技术上不一样,但是原理都是一样的。在 HTML5 的 history API 出现之前,前端的路由都是通过 hash 来实现的,hash 能兼容低版本的浏览器。

    http://10.0.0.1/
    http://10.0.0.1/#/about
    http://10.0.0.1/#/concat

    服务端路由:每跳转到不同的URL,都是重新访问服务端,然后服务端返回页面,页面也可以是服务端获取数据,然后和模板组合,返回HTML,也可以是直接返回模板HTML,然后由前端JS再去请求数据,使用前端模板和数据进行组合,生成想要的HTML。

    前端路由:每跳转到不同的URL都是使用前端的锚点路由,实际上只是JS根据URL来操作DOM元素,根据每个页面需要的去服务端请求数据,返回数据后和模板进行组合,当然模板有可能是请求服务端返回的,这就是 SPA 单页程序。

    在js可以通过window.location.hash读取到路径加以解析之后就可以响应不同路径的逻辑处理。

    history 是 HTML5 才有的新 API,可以用来操作浏览器的 session history (会话历史)。基于 history 来实现的路由可以和最初的例子中提到的路径规则一样。

    H5还新增了一个hashchange事件,也是很有用途的一个新事件:

    当页面hash(#)变化时,即会触发hashchange。锚点Hash起到引导浏览器将这次记录推入历史记录栈顶的作用,window.location对象处理“#”的改变并不会重新加载页面,而是将之当成新页面,放入历史栈里。并且,当前进或者后退或者触发hashchange事件时,我们可以在对应的事件处理函数中注册ajax等操作!
    但是hashchange这个事件不是每个浏览器都有,低级浏览器需要用轮询检测URL是否在变化,来检测锚点的变化。当锚点内容(location.hash)被操作时,如果锚点内容发生改变浏览器才会将其放入历史栈中,如果锚点内容没发生变化,历史栈并不会增加,并且也不会触发hashchange事件。

    16、介绍一下webpack和gulp,以及项目中具体的使用

    17、你对es6的了解

    参见阮大大的博客
    http://es6.ruanyifeng.com/

    18、解释一下vue和react,以及异同点

    异同点:vue官网给过答案
    https://cn.vuejs.org/v2/guide/comparison.html

    只简单的用过vue,用vue写了一个日程表,请赐教哦~

    https://yyywwwqqq.coding.me/schedule/dist/

    源码地址:
    https://coding.net/u/yyywwwqqq/p/schedule/git

    19、关于平衡二叉树

    平衡二叉搜索树(Self-balancing binary search tree)又被称为AVL树(有别于AVL算法),且具有以下性质:它是一 棵空树或它的左右两个子树的高度差的绝对值不超过1,并且左右两个子树都是一棵平衡二叉树,同时,平衡二叉树必定是二叉搜索树,反之则不一定。平衡二叉树的常用实现方法有红黑树、AVL、替罪羊树、Treap、伸展树等。 最小二叉平衡树的节点的公式如下 F(n)=F(n-1)+F(n-2)+1 这个类似于一个递归的数列,可以参考Fibonacci(斐波那契)数列,1是根节点,F(n-1)是左子树的节点数量,F(n-2)是右子树的节点数量。

    20、前后端分离的意义以及对前端工程化的理解

    21、使用css实现一个三角形

    利用border去画~
    先看一下border的布局,如图:
    这里写图片描述
    所以三角形:
    1.设置宽度、高度为0
    这里写图片描述
    2.不设置border-top
    这里写图片描述
    3.设置左右border颜色为transparent–透明
    这里写图片描述

    22、用promise手写ajax

    function getJson(url){
        return new Promise((resolve, reject) =>{
            var xhr = new XMLHttpRequest();
            xhr.open('open', url, true);
            xhr.onreadystatechange = function(){
                if(this.readyState == 4){
                    if(this.status = 200){
                        resolve(this.responseText, this)
                    }else{
                        var resJson = { code: this.status, response: this.response }
                        reject(resJson, this)    
                    }
                }
            }
            xhr.send()
        })
    }
    
    function postJSON(url, data) {
        return new Promise( (resolve, reject) => {
            var xhr = new XMLHttpRequest()
            xhr.open("POST", url, true)
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    
            xhr.onreadystatechange = function () {
                if (this.readyState === 4) {
                    if (this.status === 200) {
                        resolve(JSON.parse(this.responseText), this)
                    } else {
                        var resJson = { code: this.status, response: this.response }
                        reject(resJson, this)
                    }
                }
            }
    
            xhr.send(JSON.stringify(data))
        })
    }
    
    getJSON('/api/v1/xxx')    // => 这里面是就try
    .catch( error => {
      // dosomething          // => 这里就是catch到了error,如果处理error以及返还合适的值
    })
    .then( value => {
      // dosomething          // 这里就是final
    })

    23、手写一个类的继承,并解释一下

    继承的形式有很多中,js高程里面归纳了其中,我简单说一下前三种。
    1.原型继承

    function Parent(){
        this.name = "parent";
    }
    Parent.prototype.getName = function(){
        return this.name;
    }
    
    function Child(){
        this.name = "child";
    }
    
    //继承parent
    Child.prototype = new Parent();

    2.构造函数继承

    function Animal(name){
        this.name = name;
        this.eat = function(){
            consoel.log(this.name + "吃饭");
        }
    }
    var cat = new Animal("maomi");
    cat.name;
    cat.eat();

    缺点是:
    3.组合继承

    24、解释一下call函数和apply函数的作用,以及用法

    改变this的指向。
    this的指向问题,在你不知道的js这本书中(神书)做了四点归纳:
    1.默认绑定 (指 直接调用 foo(), this指向window)
    2.隐式绑定(obj.foo(), this指向obj 这里会出现很多坑,下面的问题应该会有解答)
    3.显示绑定(利用call、apply、bind改变this)
    4.new(var cat = new Animal() , this指向cat对象)

    25、你说自己抗压能力强,具体表现在哪里?

    26、对前端前景的展望,以后前端会怎么发展

    27、手写第一次面试没有写出来的链表问题,要求用es6写

    28、平时是怎么学技术的?

    29、平时大学里面时间是怎么规划的?

    30、接下来有什么计划?这个学期和下个学期的计划是?

    31、项目中遇到的难点,或者你学习路上的难点

    32、你是通过什么方法和途径来学习前端的

    33、手写一个简单遍历算法

    34、解释一下react和vue,以及区别

    35、你在团队中更倾向于什么角色?

    36、对java的理解

    37、介绍node.js,并且介绍你用它做的项目

    38、手写一个js的深克隆

    function deepCopy(obj){
        //判断是否是简单数据类型,
        if(typeof obj == "object"){
            //复杂数据类型
            var result = obj.constructor == Array ? [] : {};
            for(let i in obj){
                result[i] = typeof obj[i] == "object" ? deepCopy(obj[i]) : obj[i];
            }
        }else {
            //简单数据类型 直接 == 赋值
            var result = obj;
        }
        return result;
    }

    39、for函数里面setTimeout异步问题

    40、手写归并排序

    <1>.长度为n(n>1),把该输入序列分成两个长度为n/2的子序列;
    <2>.对这两个子序列分别采用归并排序,直到长度n小于2;
    <3>.将两个排序好的子序列合并成一个最终的排序序列。

    function mergeSort(arr) { 
        var len = arr.length;
        if(len < 2) {
            return arr;
        } else {
            middle = Math.floor(len / 2);
            var left = arr.slice(0, middle);
            var right = arr.splice(middle);
            return merge(mergeSort(left), mergeSort(right));
        }
    
    }
    
    function merge(left, right) {
        var result = [];
        while(left.length && right.length) {
            left[0] > right[0] ? result.push(right.shift()): result.push(left.shift());
        }
        if(left.length) {
            result = result.concat(left);
        }
        if(right.length) {
            result = result.concat(right);
        }
        return result;
    }

    41、介绍自己的项目

    42、实现两个排序数组的合并

    参考42题中的merge函数。

    43、手写一个原生ajax

    ajax:一种请求数据的方式,不需要刷新整个页面;
    ajax的技术核心是 XMLHttpRequest 对象;
    ajax 请求过程:创建 XMLHttpRequest 对象、连接服务器、发送请求、接收响应数据;

    一个在stackoverflow的高分回答结合上面的代码,给出get和post的两种不同请求方法:

    var ajax = {};
    ajax.x = function () {
        if (typeof XMLHttpRequest !== 'undefined') {
            return new XMLHttpRequest();
        }
        var versions = [
        "MSXML2.XmlHttp.6.0",
        "MSXML2.XmlHttp.5.0",
        "MSXML2.XmlHttp.4.0",
        "MSXML2.XmlHttp.3.0",
        "MSXML2.XmlHttp.2.0",
        "Microsoft.XmlHttp"
        ];
    
        var xhr;
        for (var i = 0; i < versions.length; i++) {
            try {
                xhr = new ActiveXObject(versions[i]);
                break;
            } catch (e) {
            }
        }
        return xhr;
    };
    
    ajax.send = function (url, method, data, success,fail,async) {
        if (async === undefined) {
            async = true;
        }
        var x = ajax.x();
        x.open(method, url, async);
        x.onreadystatechange = function () {
            if (x.readyState == 4) {
                var status = x.status;
                if (status >= 200 && status < 300) {
                    success && success(x.responseText,x.responseXML)
                } else {
                    fail && fail(status);
                }
    
            }
        };
        if (method == 'POST') {
            x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        }
        x.send(data)
    };
    
    ajax.get = function (url, data, callback, fail, async) {
        var query = [];
        for (var key in data) {
            query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
        }
        ajax.send(url + (query.length ? '?' + query.join('&') : ''), 'GET', null, success, fail, async)
    };
    
    ajax.post = function (url, data, callback, fail, async) {
        var query = [];
        for (var key in data) {
            query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
        }
        ajax.send(url,'POST', query.join('&'), success, fail, async)
    };

    使用方法:GET

    ajax.get('/test.php', {foo: 'bar'}, function(response,xml) {
        //success
    },
    function(status){
        //fail
    });

    POST

    ajax.post('/test.php', {foo: 'bar'}, function(response,xml) {
        //succcess
    
    },function(status){
        //fail
    
    });

    44、手写一个promise版的ajax

    45、手写实现一个promise

    46、手写实现requireJS模块实现

    47、手写实现jquery里面的insertAfter

    48、react和vue的介绍以及异同

    49、AMD和CMD,commonJS的区别

    50、介绍一下backbone

    51、了解过SEO吗?

    52、低版本浏览器不支持HTML5标签怎么解决?

    53、用js使低版本浏览器支持HTML5标签 底层是怎么实现的?

    54、实现一个布局:左边固定宽度为200,右边自适应,而且滚动条要自动选择只出现最高的那个

    55、画出盒子模型,要使谷歌浏览器的盒子模型显示得跟IE浏览器一致(让谷歌跟ie一致,不是ie跟谷歌一致),该怎么做?

    56、手写JS实现类继承,讲原型链原理,并解释new一个对象的过程都发生了什么

    57、Array对象自带的方法,一一列举

    58、若干个数字,怎么选出最大的五个

    59、Array对象自带的排序函数底层是怎么实现的?

    60、常用的排序算法有哪些,介绍一下选择排序

    61、了解navigator对象吗?

    62、手写一个正则表达式,验证邮箱

    63、link和@import引入CSS的区别?

    64、刚才说有些浏览器不兼容@import,具体指哪些浏览器?

    65、介绍一下cookie,localstorage,sessionstorage,session

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

    67、你的优点/竞争力

    68、移动端适配问题

    69、react的难点在哪里

    70、做过css动画吗

    71、如何优化网站

    72、以后的规划

    73、你做过最困难的事情是啥?

    74、css3 html5新特性

    75、闭包,ES6,跨域

    76、问做过啥项目,用到什么技术,遇到什么困难

    77、兼容性

    78、盒子模型

    79、Array的unshift() method的作用是什么?如何连接两个Array?如何在Array里移除一个元素?

    80、用纸笔写一个Closure,任意形式和内容

    81、知不知道Array-like Object?

    82、如何用Native JavaScript来读写Cookie?

    83、知不知道CSS Box-model?

    84、如何做一个AJAX Request?

    85、Cross-domain access有没有了解?

    86、前端安全方面有没有了解?XSS和CSRF如何攻防?

    87、HTTP Response的Header里面都有些啥?

    88、知不知道HTTP2?

    89、输入URL后发生了什么?

    90、new operator实际上做了什么?

    91、面向对象的属性有哪些?

    92、做一个两栏布局,左边fixed width,右边responsive,用纸笔手写

    93、讲一下AJAX Request

    94、讲一下Cross-domain access

    95、介绍一下做过的项目

    96、问到了多个服务器怎么弄,架构之类的

    97、angular的渲染流程

    98、脏检查

    99、nodejs的架构、优缺点、回调

    100、css 盒模型

    101、css 布局,左边定宽右边自适应

    102、冒泡和捕获,事件流哪三个阶段?

    103、实现事件代理

    104、原型链

    105、继承的两种方法

    106、ajax,原生ajax的四个过程

    107、闭包,简单说一个闭包的应用,然后闭包的主要作用是什么

    108、css:两个块状元素上下的margin-top和margin-bottom会重叠。啥原因?怎么解决?

    109、js:写一个递归。就是每隔5秒调用一个自身,一共100次

    110、cookie和session有什么区别

    111、网络分层结构

    112、你的不足是什么?

    113、做了那么多项目,有没有自己的归纳总结

    114、工程怎么进行文件管理

    115、less和sass掌握程度

    116、Cookie 是否会被覆盖,localStorage是否会被覆盖

    117、事件代理js实现

    118、Css实现动画效果

    119、Animation还有哪些其他属性

    120、Css实现三列布局

    121、Css实现保持长宽比1:1

    122、Css实现两个自适应等宽元素中间空10个像素

    123、requireJS的原理是什么

    124、如何保持登录状态

    125、浮动的原理以及如何清除浮动

    126、Html的语义化

    127、原生js添加class怎么添加,如果本身已经有class了,会不会覆盖,怎么保留?

    128、Jsonp的原理。怎么去读取一个script里面的数据?

    129、如果页面初始载入的时候把ajax请求返回的数据存在localStorage里面,然后每次调用的时候去localStorage里面取数,是否可行。

    130、304是什么意思?有没有方法不请求不经过服务器直接使用缓存

    131、http请求头有哪些字段

    132、数组去除一个函数。用arr.splice。又问splice返回了什么?应该返回的是去除的元素。

    133、js异步的方法(promise,generator,async)

    134、Cookie跨域请求能不能带上

    135、最近看什么开源项目?

    136、commonJS和AMD

    137、平时是怎么学习的?

    138、为什么要用translate3d?

    139、对象中key-value的value怎么再放一个对象?

    140、Get和post的区别?

    145、Post一个file的时候file放在哪的?

    146、说说你对组件的理解

    147、组件的html怎么进行管理

    148、js的异步加载,promise的三种状态,ES7中的async用过么

    149、静态属性怎么继承

    150、js原型链的继承

    151、jquery和zepto有什么区别

    152、angular的双向绑定原理

    153、angular和react的认识

    154、MVVM是什么

    155、移动端是指手机浏览器,还是native,还是hybrid

    156、你用了移动端的什么库类和框架?

    157、移动端要注意哪些?

    158、适配有去考虑么,retina屏幕啊?

    159、rem是什么?em是什么?如果上一层就是根root了,em和rem等价么?

    160、怎么测试的?会自动化测试么?

    161、你觉得你什么技术最擅长?

    162、你平时有没有什么技术的沉淀?

    163、单向链表怎么查找有没有环?

    164、怎么得到一个页面的a标签?

    165、怎么在页面里放置一个很简单的图标,不能用img和background-img?

    166、正则表达式判断url

    167、怎么去除字符串前后的空格

    168、实现页面的局部刷新

    169、绝对定位与相对定位的区别

    170、js轮播实现思路

    171、使用js画一个抛物线,抛物线上有个小球随着抛物线运动,有两个按钮能使小球继续运动停止运动

    172、java五子棋,说下实现思路

    173、如何让各种情况下的div居中(绝对定位的div,垂直居中,水平居中)?

    174、display有哪些值?说明他们的作用

    175、css定义的权重

    176、requirejs实现原理

    177、requirejs怎么防止重复加载

    178、ES6里头的箭头函数的this对象与其他的有啥区别

    179、tcp/udp区别

    180、tcp三次握手过程

    181、xss与csrf的原理与怎么防范

    182、mysql与 MongoDB的区别

    183、w3c事件与IE事件的区别

    184、有没有上传过些什么npm模块

    185、IE与W3C怎么阻止事件的冒泡

    186、gulp底层实现原理

    187、webpack底层实现原理

    188、gulp与webpack区别

    189、vuejs与angularjs的区别

    190、vuex是用来做什么的

    191、说下你知道的响应状态码

    192、ajax的过程以及 readyState几个状态的含义

    193、你除了前端之外还会些什么?

    194、cookie与session的区别

    195、一些关于php与java的问题

    196、你觉得你哪个项目是你做的最好的

    197、说说你在项目中遇到了哪些困难,是怎么解决的

    198、前端优化你知道哪些

    199、webpack是用来干嘛的

    200、webpack与gulp的区别

    201、es6与es7了解多少

    202、说下你知道的响应状态码

    203、看过哪些框架的源码

    204、遇到过哪些浏览器兼容性问题

    205、清除浮动有哪几种方式,分别说说

    206、你知道有哪些跨域方式,分别说说

    207、JavaScript有哪几种类型的值

    208、使用 new操作符时具体是干了些什么

    209、学习前端的方法以及途径

    210、怎么实现两个大整数的相乘,说下思路

    211、你学过数据结构没,说说你都了解些什么

    212、你学过计算机操作系统没,说说你都了解些什么

    213、你学过计算机组成原理没,说说你都了解些什么

    214、你学过算法没,说说你都了解些什么

    215、说下选择排序,冒泡排序的实现思路

    216、用过哪些框架

    217、让你设计一个前端css框架你怎么做

    218、了解哪些设计模式说说看

    219、说下你所了解的设计模式的优点

    220、vue源码结构

    221、状态码

    222、浏览器缓存的区别

    223、304与200读取缓存的区别

    224、http请求头有哪些,说说看你了解哪些

    225、js中this的作用

    226、js中上下文是什么

    227、js有哪些函数能改变上下文

    228、你所了解的跨域的方法都说说看你了解的?

    229、要是让你自己写一个js框架你会用到哪些设计模式

    230、平常在项目中用到过哪些设计模式,说说看

    231、一来给了张纸要求写js自定义事件

    232、前端跨域的方法

    233、call与apply的区别

    234、h5有个api能定位你知道是哪个吗?

    235、vue与angularjs中双向数据绑定是怎样实现的?

    236、webpack怎样配置?

    237、nodejs中的文件怎么读写?

    238、link和@import有什么区别?

    239、cookies,sessionStorage 和 localStorage 的区别

    240、看过哪些前端的书?平时是怎么学习的

    241、说下你所理解的mvc与mvvc

    242、position有哪些值,说下各自的作用

    243、写个从几个li中取下标的闭包代码

    244、你的职业规划是怎么样的?

    245、移动端性能优化

    246、lazyload如何实现

    247、点透问题

    248、前端安全

    249、原生js模板引擎

    250、repaint和reflow区别

    251、requirejs如何避免循环依赖?

    252、实现布局:左边一张图片,右边一段文字(不是环绕)

    253、window.onload和$(document).ready()的区别,浏览器加载转圈结束时哪个时间点?

    254、form表单当前页面无刷新提交 target iframe

    255、setTimeout和setInterval区别,如何互相实现?

    256、如何避免多重回调—promise,promise简单描述一下,如何在外部进行resolve()

    257、margin坍塌?水平方向会不会坍塌?

    258、伪类和伪元素区别

    259、vue如何实现父子组件通信,以及非父子组件通信

    260、数组去重

    261、使用flex布局实现三等分,左右两个元素分别贴到左边和右边,垂直居中

    262、平时如何学前端的,看了哪些书,关注了哪些公众号

    263、实现bind函数

    264、数组和链表区别,分别适合什么数据结构

    265、对mvc的理解

    266、描述一个印象最深的项目,在其中担任的角色,解决什么问题

    267、http状态码。。。401和403区别?

    268、描述下二分查找

    269、为什么选择前端,如何学习的,看了哪些书,《js高级程序设计》和《你不知道的js》有什么区别,看书,看博客,看公众号三者的时间是如何分配的?

    270、如何评价BAT?

    271、描述下在实习中做过的一个项目,解决了什么问题,在其中担任了什么角色?这个过程存在什么问题,有什么值得改进的地方?

    272、如何看待加班,如果有个项目需要连续一个月加班,你怎么看?

    273、遇到的压力最大的一件事是什么?如何解决的?

    274、平时有什么爱好

    275、自身有待改进的地方

    276、n长的数组放入n+1个数,不能重复,找出那个缺失的数

    277、手里有什么offer

    278、你对于第一份工作最看重的三个方面是什么?

    279、如何评价现在的前端?

    280、用原生js实现复选框选择以及全选非全选功能

    281、用4个颜色给一个六面体上色有多少种情况

    282、amd和cmd区别

    283、为什么选择前端,移动端性能优化

    284、vue的特点?双向数据绑定是如何实现的

    285、Object.defineProperty

    286、算法题:数组去重,去除重复两次以上的元素,代码题:嵌套的ul-li结构,根据input中输入的内容,去除相应的li节点,且如果某个嵌套的ul下面的li都被移除,则该ul的父li节点也要被移除

    287、页面加载过程

    288、浏览器如何实现图片缓存

    展开全文
  • 最全前端面试问题及答案总结

    万次阅读 多人点赞 2015-09-14 11:51:39
    HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应。 JavaScript: 数据类型、面向对象、继承、闭包、插件、作用域、跨域、...
    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">HTML&CSS:  对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应。
    
    JavaScript:   数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、Nodejs、<span class="hljs-built_in" style="color: rgb(38, 139, 210);">JSON</span>、ajax等。
    
    其他:  HTTP、安全、正则、优化、重构、响应式、移动端、团队协作、可维护、SEO、UED、架构、职业生涯 
    </code>

    1.请你谈谈Cookie的弊端

    cookie虽然在持久保存客户端数据提供了方便,分担了服务器存储的负担,但还是有很多局限性的。
    第一:每个特定的域名下最多生成20个cookie

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-number" style="color: rgb(42, 161, 152);">1.</span>IE6或更低版本最多<span class="hljs-number" style="color: rgb(42, 161, 152);">20</span>个cookie
    <span class="hljs-number" style="color: rgb(42, 161, 152);">2.</span>IE7和之后的版本最后可以有<span class="hljs-number" style="color: rgb(42, 161, 152);">50</span>个cookie。
    <span class="hljs-number" style="color: rgb(42, 161, 152);">3.F</span>irefox最多<span class="hljs-number" style="color: rgb(42, 161, 152);">50</span>个cookie
    <span class="hljs-number" style="color: rgb(42, 161, 152);">4.</span>chrome和Safari没有做硬性限制
    </code>

    IEOpera 会清理近期最少使用的cookieFirefox会随机清理cookie

    cookie的最大大约为4096字节,为了兼容性,一般不能超过4095字节。

    IE 提供了一种存储可以持久化用户数据,叫做uerData,从IE5.0就开始支持。每个数据最多128K,每个域名下最多1M。这个持久化数据放在缓存中,如果缓存没有清理,那么会一直存在。

    优点:极高的扩展性和可用性

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">1.通过良好的编程,控制保存在cookie中的session对象的大小。
    2.通过加密和安全传输技术(SSL),减少cookie被破解的可能性。
    3.只在cookie中存放不敏感数据,即使被盗也不会有重大损失。
    4.控制cookie的生命期,使之不会永远有效。偷盗者很可能拿到一个过期的cookie。
    </code>

    缺点:

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-number" style="color: rgb(42, 161, 152);">1.</span>`<span class="javascript">Cookie</span>`数量和长度的限制。每个domain最多只能有<span class="hljs-number" style="color: rgb(42, 161, 152);">20</span>条cookie,每个cookie长度不能超过<span class="hljs-number" style="color: rgb(42, 161, 152);">4</span>KB,否则会被截掉。
    
    <span class="hljs-number" style="color: rgb(42, 161, 152);">2.</span>安全性问题。如果cookie被人拦截了,那人就可以取得所有的session信息。即使加密也与事无补,因为拦截者并不需要知道cookie的意义,他只要原样转发cookie就可以达到目的了。
    
    <span class="hljs-number" style="color: rgb(42, 161, 152);">3.</span>有些状态不可能保存在客户端。例如,为了防止重复提交表单,我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端,那么它起不到任何作用。
    </code>

    2.浏览器本地存储

    在较高版本的浏览器中,js提供了sessionStorageglobalStorage。在HTML5中提供了localStorage来取代globalStorage

    html5中的Web Storage包括了两种存储方式:sessionStoragelocalStorage

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

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

    3.web storage和cookie的区别

    Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。

    除此之外,Web Storage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie

    但是Cookie也是不可以或缺的:Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生

    浏览器的支持除了IE7及以下不支持外,其他标准浏览器都完全支持(ie及FF需在web服务器里运行),值得一提的是IE总是办好事,例如IE7、IE6中的UserData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage

    localStoragesessionStorage都具有相同的操作方法,例如setItem、getItemremoveItem

    CSS 相关问题

    display:none和visibility:hidden的区别?

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-tag" style="color: rgb(133, 153, 0);">display</span><span class="hljs-pseudo" style="color: rgb(203, 75, 22);">:none</span>  隐藏对应的元素,在文档布局中不再给它分配空间,它各边的元素会合拢,
    就当他从来不存在。
    
    <span class="hljs-tag" style="color: rgb(133, 153, 0);">visibility</span><span class="hljs-pseudo" style="color: rgb(203, 75, 22);">:hidden</span>  隐藏对应的元素,但是在文档布局中仍保留原来的空间。
    </code>

    CSS中 link 和@import 的区别是?

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">A:(<span class="hljs-number" style="color: rgb(42, 161, 152);">1</span>) <span class="hljs-keyword" style="color: rgb(133, 153, 0);">link</span>属于HTML标签,而<span class="hljs-variable" style="color: rgb(181, 137, 0);">@import</span>是CSS提供的; (<span class="hljs-number" style="color: rgb(42, 161, 152);">2</span>) 页面被加载的时,<span class="hljs-keyword" style="color: rgb(133, 153, 0);">link</span>会同时被加载,而<span class="hljs-variable" style="color: rgb(181, 137, 0);">@import</span>引用的CSS会等到页面被加载完再加载;(<span class="hljs-number" style="color: rgb(42, 161, 152);">3</span>) import只在IE5以上才能识别,而<span class="hljs-keyword" style="color: rgb(133, 153, 0);">link</span>是HTML标签,无兼容问题; (<span class="hljs-number" style="color: rgb(42, 161, 152);">4</span>) <span class="hljs-keyword" style="color: rgb(133, 153, 0);">link</span>方式的样式的权重 高于<span class="hljs-variable" style="color: rgb(181, 137, 0);">@import</span>的权重.
    </code>

    position的absolute与fixed共同点与不同点

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">A:共同点:
    <span class="hljs-number" style="color: rgb(42, 161, 152);">1.</span>改变行内元素的呈现方式,display被置为block;<span class="hljs-number" style="color: rgb(42, 161, 152);">2.</span>让元素脱离普通流,不占据空间;<span class="hljs-number" style="color: rgb(42, 161, 152);">3.</span>默认会覆盖到非定位元素上
    
    B不同点:
    absolute的”根元素“是可以设置的,而<span class="hljs-keyword" style="color: rgb(133, 153, 0);">fixed</span>的”根元素“固定为浏览器窗口。当你滚动网页,<span class="hljs-keyword" style="color: rgb(133, 153, 0);">fixed</span>元素与浏览器窗口之间的距离是不变的。  
    </code>

    介绍一下CSS的盒子模型?

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">1)有两种, IE 盒子模型、标准 W3C 盒子模型;IE的content部分包含了 border 和 pading;
    
    2)盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border).
    </code>

    图片描述

    CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">   *   1<span class="hljs-class" style="color: rgb(155, 112, 63);">.id</span>选择器( # <span class="hljs-tag" style="color: rgb(133, 153, 0);">myid</span>)
            2.类选择器(<span class="hljs-class" style="color: rgb(155, 112, 63);">.myclassname</span>)
            3.标签选择器(<span class="hljs-tag" style="color: rgb(133, 153, 0);">div</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">h1</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">p</span>)
            4.相邻选择器(<span class="hljs-tag" style="color: rgb(133, 153, 0);">h1</span> + <span class="hljs-tag" style="color: rgb(133, 153, 0);">p</span>)
            5.子选择器(<span class="hljs-tag" style="color: rgb(133, 153, 0);">ul</span> > <span class="hljs-tag" style="color: rgb(133, 153, 0);">li</span>)
            6.后代选择器(<span class="hljs-tag" style="color: rgb(133, 153, 0);">li</span> <span class="hljs-tag" style="color: rgb(133, 153, 0);">a</span>)
            7.通配符选择器( * )
            8.属性选择器(<span class="hljs-tag" style="color: rgb(133, 153, 0);">a</span><span class="hljs-attr_selector" style="color: rgb(203, 75, 22);">[rel = "external"]</span>)
            9.伪类选择器(<span class="hljs-tag" style="color: rgb(133, 153, 0);">a</span>: <span class="hljs-tag" style="color: rgb(133, 153, 0);">hover</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">li</span><span class="hljs-pseudo" style="color: rgb(203, 75, 22);">:nth-child</span>)
    
        *   可继承的样式: <span class="hljs-tag" style="color: rgb(133, 153, 0);">font-size</span> <span class="hljs-tag" style="color: rgb(133, 153, 0);">font-family</span> <span class="hljs-tag" style="color: rgb(133, 153, 0);">color</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">text-indent</span>;
    
        *   不可继承的样式:<span class="hljs-tag" style="color: rgb(133, 153, 0);">border</span> <span class="hljs-tag" style="color: rgb(133, 153, 0);">padding</span> <span class="hljs-tag" style="color: rgb(133, 153, 0);">margin</span> <span class="hljs-tag" style="color: rgb(133, 153, 0);">width</span> <span class="hljs-tag" style="color: rgb(133, 153, 0);">height</span> ;
    
        *   优先级就近原则,同权重情况下样式定义最近者为准;
    
        *   载入样式以最后载入的定位为准;
    
    优先级为:
    
    
       !<span class="hljs-tag" style="color: rgb(133, 153, 0);">important</span> >  <span class="hljs-tag" style="color: rgb(133, 153, 0);">id</span> > <span class="hljs-tag" style="color: rgb(133, 153, 0);">class</span> > <span class="hljs-tag" style="color: rgb(133, 153, 0);">tag</span>  
    
       <span class="hljs-tag" style="color: rgb(133, 153, 0);">important</span> 比 内联优先级高,但内联比 <span class="hljs-tag" style="color: rgb(133, 153, 0);">id</span> 要高
    
    <span class="hljs-tag" style="color: rgb(133, 153, 0);">CSS3</span>新增伪类举例:
    
    
    <span class="hljs-tag" style="color: rgb(133, 153, 0);">p</span><span class="hljs-pseudo" style="color: rgb(203, 75, 22);">:first-of-type</span> 选择属于其父元素的首个 <<span class="hljs-tag" style="color: rgb(133, 153, 0);">p</span>> 元素的每个 <<span class="hljs-tag" style="color: rgb(133, 153, 0);">p</span>> 元素。
    <span class="hljs-tag" style="color: rgb(133, 153, 0);">p</span><span class="hljs-pseudo" style="color: rgb(203, 75, 22);">:last-of-type</span>  选择属于其父元素的最后 <<span class="hljs-tag" style="color: rgb(133, 153, 0);">p</span>> 元素的每个 <<span class="hljs-tag" style="color: rgb(133, 153, 0);">p</span>> 元素。
    <span class="hljs-tag" style="color: rgb(133, 153, 0);">p</span><span class="hljs-pseudo" style="color: rgb(203, 75, 22);">:only-of-type</span>  选择属于其父元素唯一的 <<span class="hljs-tag" style="color: rgb(133, 153, 0);">p</span>> 元素的每个 <<span class="hljs-tag" style="color: rgb(133, 153, 0);">p</span>> 元素。
    <span class="hljs-tag" style="color: rgb(133, 153, 0);">p</span><span class="hljs-pseudo" style="color: rgb(203, 75, 22);">:only-child</span>    选择属于其父元素的唯一子元素的每个 <<span class="hljs-tag" style="color: rgb(133, 153, 0);">p</span>> 元素。
    <span class="hljs-tag" style="color: rgb(133, 153, 0);">p</span><span class="hljs-pseudo" style="color: rgb(203, 75, 22);">:nth-child(2)</span>  选择属于其父元素的第二个子元素的每个 <<span class="hljs-tag" style="color: rgb(133, 153, 0);">p</span>> 元素。
    <span class="hljs-pseudo" style="color: rgb(203, 75, 22);">:enabled</span>  <span class="hljs-pseudo" style="color: rgb(203, 75, 22);">:disabled</span> 控制表单控件的禁用状态。
    <span class="hljs-pseudo" style="color: rgb(203, 75, 22);">:checked</span>        单选框或复选框被选中。
    </code>

    列出display的值,说明他们的作用。position的值, relative和absolute分别是相对于谁进行定位的?

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-number" style="color: rgb(42, 161, 152);">1.</span>   
      block 象块类型元素一样显示。
      <span class="hljs-keyword" style="color: rgb(133, 153, 0);">inline</span> 缺省值。象行内元素类型一样显示。
      <span class="hljs-keyword" style="color: rgb(133, 153, 0);">inline</span>-block 象行内元素一样显示,但其内容象块类型元素一样显示。
      <span class="hljs-built_in" style="color: rgb(38, 139, 210);">list</span>-item 象块类型元素一样显示,并添加样式列表标记。
    
      <span class="hljs-number" style="color: rgb(42, 161, 152);">2.</span> 
      *absolute 
            生成绝对定位的元素,相对于 <span class="hljs-keyword" style="color: rgb(133, 153, 0);">static</span> 定位以外的第一个祖先元素进行定位。 
    
      *fixed (老IE不支持)
            生成绝对定位的元素,相对于浏览器窗口进行定位。 
    
      *relative 
            生成相对定位的元素,相对于其在普通流中的位置进行定位。 
    
      * <span class="hljs-keyword" style="color: rgb(133, 153, 0);">static</span>  默认值。没有定位,元素出现在正常的流中
      *(忽略 top, bottom, left, right z-index 声明)。
    
      * inherit 规定从父元素继承 position 属性的值。
    </code>

    CSS3有哪些新特性?

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-constant" style="color: rgb(181, 137, 0);">CSS3</span>实现圆角(border-radius),阴影(box-shadow),
    对文字加特效(text-shadow、),线性渐变(gradient),旋转(transform)
    <span class="hljs-symbol" style="color: rgb(203, 75, 22);">transform:</span>rotate(<span class="hljs-number" style="color: rgb(42, 161, 152);">9</span>deg) scale(<span class="hljs-number" style="color: rgb(42, 161, 152);">0</span>.<span class="hljs-number" style="color: rgb(42, 161, 152);">85</span>,<span class="hljs-number" style="color: rgb(42, 161, 152);">0</span>.<span class="hljs-number" style="color: rgb(42, 161, 152);">90</span>) translate(0px,-<span class="hljs-number" style="color: rgb(42, 161, 152);">30</span>px) skew(-<span class="hljs-number" style="color: rgb(42, 161, 152);">9</span>deg,0deg);<span class="hljs-regexp" style="color: rgb(42, 161, 152);">//</span>旋转,缩放,定位,倾斜
    增加了更多的<span class="hljs-constant" style="color: rgb(181, 137, 0);">CSS</span>选择器  多背景 rgba 
    在<span class="hljs-constant" style="color: rgb(181, 137, 0);">CSS3</span>中唯一引入的伪元素是<span class="hljs-symbol" style="color: rgb(203, 75, 22);">:</span><span class="hljs-symbol" style="color: rgb(203, 75, 22);">:selection</span>.
    媒体查询,多栏布局
    border-image
    </code>

    为什么要初始化CSS样式。

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">    因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对<span class="hljs-tag" style="color: rgb(133, 153, 0);">CSS</span>初始化往往会出现浏览器之间的页面显示差异。
    
        当然,初始化样式会对<span class="hljs-tag" style="color: rgb(133, 153, 0);">SEO</span>有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。
    
    *最简单的初始化方法就是: * <span class="hljs-rules">{<span class="hljs-rule"><span class="hljs-attribute" style="color: rgb(181, 137, 0);">padding</span>:<span class="hljs-value" style="color: rgb(42, 161, 152);"> <span class="hljs-number" style="color: rgb(0, 102, 102);">0</span></span></span>; <span class="hljs-rule"><span class="hljs-attribute" style="color: rgb(181, 137, 0);">margin</span>:<span class="hljs-value" style="color: rgb(42, 161, 152);"> <span class="hljs-number" style="color: rgb(0, 102, 102);">0</span></span></span>;<span class="hljs-rule">}</span></span> (不建议)
    
        淘宝的样式初始化: 
        <span class="hljs-tag" style="color: rgb(133, 153, 0);">body</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">h1</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">h2</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">h3</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">h4</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">h5</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">h6</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">hr</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">p</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">blockquote</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">dl</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">dt</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">dd</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">ul</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">ol</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">li</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">pre</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">form</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">fieldset</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">legend</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">button</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">input</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">textarea</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">th</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">td</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute" style="color: rgb(181, 137, 0);">margin</span>:<span class="hljs-value" style="color: rgb(42, 161, 152);"><span class="hljs-number" style="color: rgb(0, 102, 102);">0</span></span></span>; <span class="hljs-rule"><span class="hljs-attribute" style="color: rgb(181, 137, 0);">padding</span>:<span class="hljs-value" style="color: rgb(42, 161, 152);"><span class="hljs-number" style="color: rgb(0, 102, 102);">0</span></span></span>; <span class="hljs-rule">}</span></span>
        <span class="hljs-tag" style="color: rgb(133, 153, 0);">body</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">button</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">input</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">select</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">textarea</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute" style="color: rgb(181, 137, 0);">font</span>:<span class="hljs-value" style="color: rgb(42, 161, 152);"><span class="hljs-number" style="color: rgb(0, 102, 102);">12px</span>/<span class="hljs-number" style="color: rgb(0, 102, 102);">1.5</span>tahoma, arial, \<span class="hljs-number" style="color: rgb(0, 102, 102);">5</span>b8b\<span class="hljs-number" style="color: rgb(0, 102, 102);">4</span>f53</span></span>; <span class="hljs-rule">}</span></span>
        <span class="hljs-tag" style="color: rgb(133, 153, 0);">h1</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">h2</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">h3</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">h4</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">h5</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">h6</span><span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute" style="color: rgb(181, 137, 0);">font-size</span>:<span class="hljs-value" style="color: rgb(42, 161, 152);"><span class="hljs-number" style="color: rgb(0, 102, 102);">100%</span></span></span>; <span class="hljs-rule">}</span></span>
        <span class="hljs-tag" style="color: rgb(133, 153, 0);">address</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">cite</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">dfn</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">em</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">var</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute" style="color: rgb(181, 137, 0);">font-style</span>:<span class="hljs-value" style="color: rgb(42, 161, 152);">normal</span></span>; <span class="hljs-rule">}</span></span>
        <span class="hljs-tag" style="color: rgb(133, 153, 0);">code</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">kbd</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">pre</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">samp</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute" style="color: rgb(181, 137, 0);">font-family</span>:<span class="hljs-value" style="color: rgb(42, 161, 152);">couriernew, courier, monospace</span></span>; <span class="hljs-rule">}</span></span>
        <span class="hljs-tag" style="color: rgb(133, 153, 0);">small</span><span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute" style="color: rgb(181, 137, 0);">font-size</span>:<span class="hljs-value" style="color: rgb(42, 161, 152);"><span class="hljs-number" style="color: rgb(0, 102, 102);">12px</span></span></span>; <span class="hljs-rule">}</span></span>
        <span class="hljs-tag" style="color: rgb(133, 153, 0);">ul</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">ol</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute" style="color: rgb(181, 137, 0);">list-style</span>:<span class="hljs-value" style="color: rgb(42, 161, 152);">none</span></span>; <span class="hljs-rule">}</span></span>
        <span class="hljs-tag" style="color: rgb(133, 153, 0);">a</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute" style="color: rgb(181, 137, 0);">text-decoration</span>:<span class="hljs-value" style="color: rgb(42, 161, 152);">none</span></span>; <span class="hljs-rule">}</span></span>
        <span class="hljs-tag" style="color: rgb(133, 153, 0);">a</span><span class="hljs-pseudo" style="color: rgb(203, 75, 22);">:hover</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute" style="color: rgb(181, 137, 0);">text-decoration</span>:<span class="hljs-value" style="color: rgb(42, 161, 152);">underline</span></span>; <span class="hljs-rule">}</span></span>
        <span class="hljs-tag" style="color: rgb(133, 153, 0);">sup</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute" style="color: rgb(181, 137, 0);">vertical-align</span>:<span class="hljs-value" style="color: rgb(42, 161, 152);">text-top</span></span>; <span class="hljs-rule">}</span></span>
        <span class="hljs-tag" style="color: rgb(133, 153, 0);">sub</span><span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute" style="color: rgb(181, 137, 0);">vertical-align</span>:<span class="hljs-value" style="color: rgb(42, 161, 152);">text-bottom</span></span>; <span class="hljs-rule">}</span></span>
        <span class="hljs-tag" style="color: rgb(133, 153, 0);">legend</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute" style="color: rgb(181, 137, 0);">color</span>:<span class="hljs-value" style="color: rgb(42, 161, 152);"><span class="hljs-hexcolor" style="color: rgb(0, 102, 102);">#000</span></span></span>; <span class="hljs-rule">}</span></span>
        <span class="hljs-tag" style="color: rgb(133, 153, 0);">fieldset</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">img</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute" style="color: rgb(181, 137, 0);">border</span>:<span class="hljs-value" style="color: rgb(42, 161, 152);"><span class="hljs-number" style="color: rgb(0, 102, 102);">0</span></span></span>; <span class="hljs-rule">}</span></span>
        <span class="hljs-tag" style="color: rgb(133, 153, 0);">button</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">input</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">select</span>, <span class="hljs-tag" style="color: rgb(133, 153, 0);">textarea</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute" style="color: rgb(181, 137, 0);">font-size</span>:<span class="hljs-value" style="color: rgb(42, 161, 152);"><span class="hljs-number" style="color: rgb(0, 102, 102);">100%</span></span></span>; <span class="hljs-rule">}</span></span>
        <span class="hljs-tag" style="color: rgb(133, 153, 0);">table</span> <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute" style="color: rgb(181, 137, 0);">border-collapse</span>:<span class="hljs-value" style="color: rgb(42, 161, 152);">collapse</span></span>; <span class="hljs-rule"><span class="hljs-attribute" style="color: rgb(181, 137, 0);">border-spacing</span>:<span class="hljs-value" style="color: rgb(42, 161, 152);"><span class="hljs-number" style="color: rgb(0, 102, 102);">0</span></span></span>; <span class="hljs-rule">}</span></span> 
    </code>

    对BFC规范的理解?

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">      BFC,块级格式化上下文,一个创建了新的BFC的盒子是独立布局的,盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向(和布局方向有关系)的margin会发生折叠。
        (W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行布局,以及与其他元素的关系和相互作用。)
    </code>

    解释下 CSS sprites,以及你要如何在页面或网站中使用它。

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。这样可以减少很多图片请求的开销,因为请求耗时比较长;请求虽然可以并发,但是也有限制,一般浏览器都是<span class="hljs-number" style="color: rgb(42, 161, 152);">6</span>个。对于未来而言,就不需要这样做了,因为有了`<span class="javascript">http2</span>`。
    </code>

    html部分

    说说你对语义化的理解?

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">1,去掉或者丢失样式的时候能够让页面呈现出清晰的结构
    2,有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
    3,方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
    4,便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。
    </code>

    Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">(1)、<span class="hljs-doctype" style="color: rgb(147, 161, 161);"><!DOCTYPE></span> 声明位于文档中的最前面,处于 <span class="hljs-tag" style="color: rgb(0, 102, 102);"><<span class="hljs-title" style="color: rgb(38, 139, 210);">html</span>></span> 标签之前。告知浏览器以何种模式来渲染文档。 
    
    (2)、严格模式的排版和 JS 运作模式是  以该浏览器支持的最高标准运行。
    
    (3)、在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
    
    (4)、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。   
    </code>

    你知道多少种Doctype文档类型?

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"> 该标签可声明三种 DTD 类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
     HTML 4.01 规定了三种文档类型:Strict、Transitional 以及 Frameset。
     XHTML 1.0 规定了三种 XML 文档类型:Strict、Transitional 以及 Frameset。
    Standards (标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页,而 Quirks
     (包容)模式(也就是松散呈现模式或者兼容模式)用于呈现为传统浏览器而设计的网页。
    </code>

    HTML与XHTML——二者有什么区别

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">区别:
    <span class="hljs-number" style="color: rgb(42, 161, 152);">1.</span>所有的标记都必须要有一个相应的结束标记
    <span class="hljs-number" style="color: rgb(42, 161, 152);">2.</span>所有标签的元素和属性的名字都必须使用小写
    <span class="hljs-number" style="color: rgb(42, 161, 152);">3.</span>所有的XML标记都必须合理嵌套
    <span class="hljs-number" style="color: rgb(42, 161, 152);">4.</span>所有的属性必须用引号<span class="hljs-string" style="color: rgb(42, 161, 152);">""</span>括起来
    <span class="hljs-number" style="color: rgb(42, 161, 152);">5.</span>把所有<和&特殊符号用编码表示
    <span class="hljs-number" style="color: rgb(42, 161, 152);">6.</span>给所有属性赋一个值
    <span class="hljs-number" style="color: rgb(42, 161, 152);">7.</span>不要在注释内容中使“--”
    <span class="hljs-number" style="color: rgb(42, 161, 152);">8.</span>图片必须有说明文字
    </code>

    常见兼容性问题?

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-bullet">* </span>png24位的图片在iE6浏览器上出现背景,解决方案是做成PNG8.也可以引用一段脚本处理.
    
    <span class="hljs-bullet">* </span>浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
    
    <span class="hljs-bullet">* </span>IE6双边距bug:块属性标签float后,又有横行的margin情况下,在ie6显示margin比设置的大。 
    
    <span class="hljs-bullet">* </span>浮动ie产生的双倍距离(IE6双边距问题:在IE6下,如果对元素设置了浮动,同时又设置了margin-left或margin-right,margin值会加倍。)
      #box{ float:left; width:10px; margin:0 0 0 100px;} 
    
     这种情况之下IE会产生20px的距离,解决方案是在float的标签样式控制中加入 ——<span class="hljs-emphasis">_display:inline;将其转化为行内属性。(_</span>这个符号只有ie6会识别)
    
    <span class="hljs-bullet">*  </span>渐进识别的方式,从总体中逐渐排除局部。 
    
      首先,巧妙的使用“\9”这一标记,将IE游览器从所有情况中分离出来。 
      接着,再次使用“+”将IE8和IE7、IE6分离开来,这样IE8已经独立识别。
    
      css
    <span class="hljs-code">      .bb{</span>
    <span class="hljs-code">       background-color:#f1ee18;/*所有识别*/</span>
    <span class="hljs-code">      .background-color:#00deff\9; /*IE6、7、8识别*/</span>
    <span class="hljs-code">      +background-color:#a200ff;/*IE6、7识别*/</span>
    <span class="hljs-code">      _background-color:#1e0bd1;/*IE6识别*/ </span>
    <span class="hljs-code">      } </span>
    
    <span class="hljs-bullet">*  </span>IE下,可以使用获取常规属性的方法来获取自定义属性,
       也可以使用getAttribute()获取自定义属性;
       Firefox下,只能使用getAttribute()获取自定义属性. 
       解决方法:统一通过getAttribute()获取自定义属性.
    
    <span class="hljs-bullet">* </span>IE下,event对象有x,y属性,但是没有pageX,pageY属性; 
      Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.
    
    <span class="hljs-bullet">* </span>解决方法:(条件注释)缺点是在IE浏览器下可能会增加额外的HTTP请求数。
    
    <span class="hljs-bullet">* </span>Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 
      可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.
    
    <span class="hljs-bullet">* </span>超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
    L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}
    
    <span class="hljs-bullet">* </span>怪异模式问题:漏写DTD声明,Firefox仍然会按照标准模式来解析网页,但在IE中会触发怪异模式。为避免怪异模式给我们带来不必要的麻烦,最好养成书写DTD声明的好习惯。现在可以使用[<span class="hljs-link_label" style="color: rgb(108, 113, 196);">html5</span>](<span class="hljs-link_url" style="color: rgb(42, 161, 152);">http://www.w3.org/TR/html5/single-page.html</span>)推荐的写法:<span class="hljs-code">`<doctype html>`</span>
    
    <span class="hljs-bullet">* </span>上下margin重合问题
    ie和ff都存在,相邻的两个div的margin-left和margin-right不会重合,但是margin-top和margin-bottom却会发生重合。
    解决方法,养成良好的代码编写习惯,同时采用margin-top或者同时采用margin-bottom。
    <span class="hljs-bullet">* </span>ie6对png图片格式支持不好(引用一段脚本处理)
    </code>

    解释下浮动和它的工作原理?清除浮动的技巧

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
    
    1.使用空标签清除浮动。
       这种方法是在所有浮动标签后面添加一个空标签 定义<span class="hljs-tag" style="color: rgb(133, 153, 0);">css</span> <span class="hljs-tag" style="color: rgb(133, 153, 0);">clear</span><span class="hljs-pseudo" style="color: rgb(203, 75, 22);">:both</span>. 弊端就是增加了无意义标签。
    2.使用<span class="hljs-tag" style="color: rgb(133, 153, 0);">overflow</span>。
       给包含浮动元素的父标签添加<span class="hljs-tag" style="color: rgb(133, 153, 0);">css</span>属性 <span class="hljs-tag" style="color: rgb(133, 153, 0);">overflow</span><span class="hljs-pseudo" style="color: rgb(203, 75, 22);">:auto</span>; <span class="hljs-tag" style="color: rgb(133, 153, 0);">zoom</span><span class="hljs-pseudo" style="color: rgb(203, 75, 22);">:1</span>; <span class="hljs-tag" style="color: rgb(133, 153, 0);">zoom</span><span class="hljs-pseudo" style="color: rgb(203, 75, 22);">:1</span>用于兼容<span class="hljs-tag" style="color: rgb(133, 153, 0);">IE6</span>。
    3.使用<span class="hljs-tag" style="color: rgb(133, 153, 0);">after</span>伪对象清除浮动。
       该方法只适用于非<span class="hljs-tag" style="color: rgb(133, 153, 0);">IE</span>浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 <span class="hljs-tag" style="color: rgb(133, 153, 0);">height</span><span class="hljs-pseudo" style="color: rgb(203, 75, 22);">:0</span>,否则该元素会比实际高出若干像素;
    </code>

    浮动元素引起的问题和解决办法?

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">浮动元素引起的问题:
    (1)父元素的高度无法被撑开,影响与父元素同级的元素
    (2)与浮动元素同级的非浮动元素会跟随其后
    (3)若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构
    </code>

    解决方法:
    使用CSS中的clear:both;属性来清除元素的浮动可解决2、3问题,对于问题1,添加如下样式,给父元素添加clearfix样式:

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-class" style="color: rgb(155, 112, 63);">.clearfix</span><span class="hljs-pseudo" style="color: rgb(203, 75, 22);">:after</span><span class="hljs-rules">{<span class="hljs-rule"><span class="hljs-attribute" style="color: rgb(181, 137, 0);">content</span>:<span class="hljs-value" style="color: rgb(42, 161, 152);"> <span class="hljs-string" style="color: rgb(0, 136, 0);">"."</span></span></span>;<span class="hljs-rule"><span class="hljs-attribute" style="color: rgb(181, 137, 0);">display</span>:<span class="hljs-value" style="color: rgb(42, 161, 152);"> block</span></span>;<span class="hljs-rule"><span class="hljs-attribute" style="color: rgb(181, 137, 0);">height</span>:<span class="hljs-value" style="color: rgb(42, 161, 152);"> <span class="hljs-number" style="color: rgb(0, 102, 102);">0</span></span></span>;<span class="hljs-rule"><span class="hljs-attribute" style="color: rgb(181, 137, 0);">clear</span>:<span class="hljs-value" style="color: rgb(42, 161, 152);"> both</span></span>;<span class="hljs-rule"><span class="hljs-attribute" style="color: rgb(181, 137, 0);">visibility</span>:<span class="hljs-value" style="color: rgb(42, 161, 152);"> hidden</span></span>;<span class="hljs-rule">}</span></span>
    <span class="hljs-class" style="color: rgb(155, 112, 63);">.clearfix</span><span class="hljs-rules">{<span class="hljs-rule"><span class="hljs-attribute" style="color: rgb(181, 137, 0);">display</span>:<span class="hljs-value" style="color: rgb(42, 161, 152);"> inline-block</span></span>;<span class="hljs-rule">}</span></span> <span class="hljs-comment" style="color: rgb(147, 161, 161);">/* for IE/Mac */</span>
    </code>

    清除浮动的几种方法:

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-number" style="color: rgb(42, 161, 152);">1</span>,额外标签法,<div style=<span class="hljs-string" style="color: rgb(42, 161, 152);">"clear:both;"</span>></div>(缺点:不过这个办法会增加额外的标签使HTML结构看起来不够简洁。)
    <span class="hljs-number" style="color: rgb(42, 161, 152);">2</span>,使用after伪类
    
    <span class="hljs-comment" style="color: rgb(147, 161, 161);">#parent:after{</span>
        <span class="hljs-attribute" style="color: rgb(181, 137, 0);">content</span>:<span class="hljs-string" style="color: rgb(42, 161, 152);">"."</span>;
        <span class="hljs-attribute" style="color: rgb(181, 137, 0);">height</span>:<span class="hljs-number" style="color: rgb(42, 161, 152);">0</span>;
        <span class="hljs-attribute" style="color: rgb(181, 137, 0);">visibility</span>:hidden;
        <span class="hljs-attribute" style="color: rgb(181, 137, 0);">display</span>:block;
        <span class="hljs-attribute" style="color: rgb(181, 137, 0);">clear</span>:both;
        }
    
    <span class="hljs-number" style="color: rgb(42, 161, 152);">3</span>,浮动外部元素
    <span class="hljs-number" style="color: rgb(42, 161, 152);">4</span>,设置`<span class="javascript">overflow</span>`为`<span class="javascript">hidden</span>`或者auto
    </code>

    IE 8以下版本的浏览器中的盒模型有什么不同

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">IE8以下浏览器的盒模型中定义的元素的宽高不包括内边距和边框
    </code>

    DOM操作——怎样添加、移除、移动、复制、创建和查找节点。

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">(<span class="hljs-number" style="color: rgb(42, 161, 152);">1</span>)创建新节点
    
          createDocumentFragment()    <span class="hljs-comment" style="color: rgb(147, 161, 161);">//创建一个DOM片段</span>
    
          createElement()   <span class="hljs-comment" style="color: rgb(147, 161, 161);">//创建一个具体的元素</span>
    
          createTextNode()   <span class="hljs-comment" style="color: rgb(147, 161, 161);">//创建一个文本节点</span>
    
    (<span class="hljs-number" style="color: rgb(42, 161, 152);">2</span>)添加、移除、替换、插入
    
          appendChild()
    
          removeChild()
    
          replaceChild()
    
          insertBefore() <span class="hljs-comment" style="color: rgb(147, 161, 161);">//在已有的子节点前插入一个新的子节点</span>
    
    (<span class="hljs-number" style="color: rgb(42, 161, 152);">3</span>)查找
    
          getElementsByTagName()    <span class="hljs-comment" style="color: rgb(147, 161, 161);">//通过标签名称</span>
    
          getElementsByName()    <span class="hljs-comment" style="color: rgb(147, 161, 161);">//通过元素的Name属性的值(IE容错能力较强,会得到一个数组,其中包括id等于name值的)</span>
    
          getElementById()    <span class="hljs-comment" style="color: rgb(147, 161, 161);">//通过元素Id,唯一性</span>
    </code>

    html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">* HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。
    
    * 拖拽释放(Drag and drop) API 
      语义化更好的内容标签(header,nav,footer,aside,article,section)
      音频、视频API(audio,video)
      画布(Canvas) API
      地理(Geolocation) API
      本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;
      sessionStorage 的数据在浏览器关闭后自动删除
    
      表单控件,calendar、date、time、email、url、search  
      新的技术webworker, websocket, Geolocation
    
    * 移除的元素
    
    纯表现的元素:basefont,big,center,font, s,strike,tt,u;
    
    对可用性产生负面影响的元素:frame,frameset,noframes;
    
    支持HTML5新标签:
    
    * IE8/IE7/IE6支持通过document.createElement方法产生的标签,
      可以利用这一特性让这些浏览器支持HTML5新标签,
    
      浏览器支持新标签后,还需要添加标签默认的样式:
    
    * 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
       <span class="hljs-comment" style="color: rgb(147, 161, 161);"><!--[if lt IE 9]> 
       <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> 
       <![endif]--></span> 
    如何区分: DOCTYPE声明\新增的结构元素\功能元素
    </code>

    iframe的优缺点?

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">1.<span class="hljs-tag" style="color: rgb(0, 102, 102);"><<span class="hljs-title" style="color: rgb(38, 139, 210);">iframe</span>></span>优点:
    
        解决加载缓慢的第三方内容如图标和广告等的加载问题
        Security sandbox
        并行加载脚本
    
    2.<span class="hljs-tag" style="color: rgb(0, 102, 102);"><<span class="hljs-title" style="color: rgb(38, 139, 210);">iframe</span>></span>的缺点:
    
    
        *iframe会阻塞主页面的Onload事件;
    
        *即时内容为空,加载也需要时间
        *没有语意 
    </code>

    如何实现浏览器内多个标签页之间的通信?

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">调用localstorge、cookies等本地存储方式
    </code>

    webSocket如何兼容低浏览器?

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-title" style="color: rgb(133, 153, 0);">Adobe</span> Flash Socket 、 ActiveX HTMLFile (IE) 、 基于 multipart 编码发送 XHR 、 基于长轮询的 XHR
    </code>

    线程与进程的区别

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">一个程序至少有一个进程,一个进程至少有一个线程. 
    线程的划分尺度小于进程,使得多线程程序的并发性高。 
    另外,进程在执行过程中拥有独立的内存单元,而多个线程共享内存,从而极大地提高了程序的运行效率。 
    线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行,必须依存在应用程序中,由应用程序提供多个线程执行控制。 
    从逻辑角度来看,多线程的意义在于一个应用程序中,有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用,来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。
    </code>

    你如何对网站的文件和资源进行优化?

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">期待的解决方案包括:
     文件合并
     文件最小化/文件压缩
     使用 CDN 托管
     缓存的使用(多个域名来提供缓存)
     其他
    </code>

    请说出三种减少页面加载时间的方法。

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"> 1.优化图片 
     2.图像格式的选择(GIF:提供的颜色较少,可用在一些对颜色要求不高的地方) 
     3.优化CSS(压缩合并css,如margin-top,margin-left...) 
     4.网址后加斜杠(如www.campr.com/目录,会判断这个“目录是什么文件类型,或者是目录。) 
     5.标明高度和宽度(如果浏览器没有找到这两个参数,它需要一边下载图片一边计算大小,如果图片很多,浏览器需要不断地调整页面。这不但影响速度,也影响浏览体验。 
    当浏览器知道了高度和宽度参数后,即使图片暂时无法显示,页面上也会腾出图片的空位,然后继续加载后面的内容。从而加载时间快了,浏览体验也更好了。) 
    
    6.减少http请求(合并文件,合并图片)。
    </code>

    你都使用哪些工具来测试代码的性能?

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">Profiler, JSPerf(http:<span class="hljs-comment" style="color: rgb(147, 161, 161);">//jsperf.com/nexttick-vs-setzerotimeout-vs-settimeout), Dromaeo</span>
    </code>

    什么是 FOUC(无样式内容闪烁)?你如何来避免 FOUC?

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"> FOUC - Flash Of Unstyled Content 文档样式闪烁
     <span class="hljs-tag" style="color: rgb(0, 102, 102);"><<span class="hljs-title" style="color: rgb(38, 139, 210);">style</span> <span class="hljs-attribute" style="color: rgb(181, 137, 0);">type</span>=<span class="hljs-value" style="color: rgb(42, 161, 152);">"text/css"</span> <span class="hljs-attribute" style="color: rgb(181, 137, 0);">media</span>=<span class="hljs-value" style="color: rgb(42, 161, 152);">"all"</span>></span><span class="css"><span class="hljs-at_rule">@<span class="hljs-keyword" style="color: rgb(133, 153, 0);">import</span> <span class="hljs-string" style="color: rgb(42, 161, 152);">"../fouc.css"</span></span>;</span><span class="hljs-tag" style="color: rgb(0, 102, 102);"></<span class="hljs-title" style="color: rgb(38, 139, 210);">style</span>></span> 
    而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM,然后再去导入外部的CSS文件,因此,在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的,这段时间的长短跟网速,电脑速度都有关系。
     解决方法简单的出奇,只要在<span class="hljs-tag" style="color: rgb(0, 102, 102);"><<span class="hljs-title" style="color: rgb(38, 139, 210);">head</span>></span>之间加入一个<span class="hljs-tag" style="color: rgb(0, 102, 102);"><<span class="hljs-title" style="color: rgb(38, 139, 210);">link</span>></span>或者<span class="hljs-tag" style="color: rgb(0, 102, 102);"><<span class="hljs-title" style="color: rgb(38, 139, 210);">script</span>></span><span class="javascript">元素就可以了。
    </span></code>

    null和undefined的区别?

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

    当声明的变量还未被初始化时,变量的默认值为undefined
    null用来表示尚未存在的对象,常用来表示函数企图返回一个不存在的对象。

    undefined表示"缺少值",就是此处应该有一个值,但是还没有定义。典型用法是:

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">(<span class="hljs-number" style="color: rgb(42, 161, 152);">1</span>)变量被声明了,但没有赋值时,就等于<span class="hljs-literal" style="color: rgb(0, 102, 102);">undefined</span>。
    
    (<span class="hljs-number" style="color: rgb(42, 161, 152);">2</span>) 调用函数时,应该提供的参数没有提供,该参数等于<span class="hljs-literal" style="color: rgb(0, 102, 102);">undefined</span>。
    
    (<span class="hljs-number" style="color: rgb(42, 161, 152);">3</span>)对象没有赋值的属性,该属性的值为<span class="hljs-literal" style="color: rgb(0, 102, 102);">undefined</span>。
    
    (<span class="hljs-number" style="color: rgb(42, 161, 152);">4</span>)函数没有返回值时,默认返回<span class="hljs-literal" style="color: rgb(0, 102, 102);">undefined</span>。
    </code>

    null表示"没有对象",即该处不应该有值。典型用法是:

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">(1) 作为函数的参数,表示该函数的参数不是对象。
    
    (2) 作为对象原型链的终点。
    </code>

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

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">   <span class="hljs-number" style="color: rgb(42, 161, 152);">1</span>、创建一个空对象,并且 <span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span> 变量引用该对象,同时还继承了该函数的原型。
       <span class="hljs-number" style="color: rgb(42, 161, 152);">2</span>、属性和方法被加入到 <span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span> 引用的对象中。
       <span class="hljs-number" style="color: rgb(42, 161, 152);">3</span>、新创建的对象由 <span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span> 所引用,并且最后隐式的返回 <span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span> 。
    
    <span class="hljs-reserved">var</span> obj  = {};
    obj.__proto__ = Base.prototype;
    Base.call(obj); 
    </code>

    JSON 的了解?

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-built_in" style="color: rgb(38, 139, 210);">JSON</span>(JavaScript <span class="hljs-built_in" style="color: rgb(38, 139, 210);">Object</span> Notation) 是一种轻量级的数据交换格式。
    它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小
    {<span class="hljs-string" style="color: rgb(42, 161, 152);">'age'</span>:<span class="hljs-string" style="color: rgb(42, 161, 152);">'12'</span>, <span class="hljs-string" style="color: rgb(42, 161, 152);">'name'</span>:<span class="hljs-string" style="color: rgb(42, 161, 152);">'back'</span>}
    </code>

    js延迟加载的方式有哪些?

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">defer和<span class="hljs-keyword" style="color: rgb(133, 153, 0);">async</span>、动态创建DOM方式(创建script,插入到DOM中,加载完毕后callBack)、按需异步载入js
    </code>

    如何解决跨域问题?

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">    jsonp、 <span class="hljs-built_in" style="color: rgb(38, 139, 210);">document</span>.domain+iframe、<span class="hljs-built_in" style="color: rgb(38, 139, 210);">window</span>.name、<span class="hljs-built_in" style="color: rgb(38, 139, 210);">window</span>.postMessage、服务器上设置代理页面
    
    jsonp的原理是动态插入script标签
    </code>

    具体参见:详解js跨域问题

    documen.write和 innerHTML的区别

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-built_in" style="color: rgb(38, 139, 210);">document</span>.write只能重绘整个页面
    
    innerHTML可以重绘页面的一部分
    </code>

    .call() 和 .apply() 的区别和作用?

    作用:动态改变某个类的某个方法的运行环境。
    区别参见:JavaScript学习总结(四)function函数部分

    哪些操作会造成内存泄漏?

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
    垃圾回收器定期扫描对象,并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 <span class="hljs-number" style="color: rgb(42, 161, 152);">0</span>(没有其他对象引用过该对象),或对该对象的惟一引用是循环的,那么该对象的内存即可回收。
    
    <span class="hljs-built_in" style="color: rgb(38, 139, 210);">set</span>Timeout 的第一个参数使用字符串而非函数的话,会引发内存泄漏。
    闭包、控制台日志、循环(在两个对象彼此引用且彼此保留时,就会产生一个循环)
    </code>

    详见:详解js变量、作用域及内存

    JavaScript中的作用域与变量声明提升?

    详见:详解JavaScript函数模式

    如何判断当前脚本运行在浏览器还是node环境中?

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">通过判断Global对象是否为<span class="hljs-built_in" style="color: rgb(38, 139, 210);">window</span>,如果不为<span class="hljs-built_in" style="color: rgb(38, 139, 210);">window</span>,当前脚本没有运行在浏览器中
    </code>

    其他问题?

    你遇到过比较难的技术问题是?你是如何解决的?

    常使用的库有哪些?常用的前端开发工具?开发过什么应用或组件?

    列举IE 与其他浏览器不一样的特性?

    99%的网站都需要被重构是那本书上写的?

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-bullet">* </span>网站重构:应用web标准进行设计(第2版)
    </code>

    什么叫优雅降级和渐进增强?

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">优雅降级:Web站点在所有新式浏览器中都能正常工作,如果用户使用的是老式浏览器,则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题,针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案,使之在旧式浏览器上以某种形式降级体验却不至于完全失效.
    
    渐进增强:从被所有浏览器支持的基本功能开始,逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时,它们会自动地呈现出来并发挥作用。
    </code>

    详见:css学习归纳总结(一)

    WEB应用从服务器主动推送Data到客户端有那些方式?

    对Node的优点和缺点提出了自己的看法?

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">*(优点)因为Node是基于事件驱动和无阻塞的,所以非常适合处理并发请求,
      因此构建在Node上的代理服务器相比其他技术实现(如Ruby)的服务器表现要好得多。
      此外,与Node代理服务器交互的客户端代码是由javascript语言编写的,
      因此客户端和服务器端都用同一种语言编写,这是非常美妙的事情。
    
    *(缺点)Node是一个相对新的开源项目,所以不太稳定,它总是一直在变,
      而且缺少足够多的第三方库支持。看起来,就像是Ruby/Rails当年的样子。
    </code>

    除了前端以外还了解什么其它技术么?你最最厉害的技能是什么?

    你常用的开发工具是什么,为什么?

    对前端界面工程师这个职位是怎么样理解的?它的前景会怎么样?

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">前端是最贴近用户的程序员,比后端、数据库、产品经理、运营、安全都近。
        1、实现界面交互
        2、提升用户体验
        3、有了Node.js,前端可以实现服务端的一些事情
    
    
    前端是最贴近用户的程序员,前端的能力就是能让产品从 90分进化到 100 分,甚至更好,
    
     参与项目,快速高质量完成实现效果图,精确到1px;
    
     与团队成员,UI设计,产品经理的沟通;
    
     做好的页面结构,页面重构和用户体验;
    
     处理hack,兼容、写出优美的代码格式;
    
     针对服务器的优化、拥抱最新前端技术。
    </code>

    你在现在的团队处于什么样的角色,起到了什么明显的作用?

    你认为怎样才是全端工程师(Full Stack developer)?

    介绍一个你最得意的作品吧?

    项目中遇到什么问题?如何解决?

    你的优点是什么?缺点是什么?

    如何管理前端团队?

    最近在学什么?能谈谈你未来3,5年给自己的规划吗?

    你有哪些性能优化的方法?

    详情请看雅虎14条性能优化原则)。

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">  (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) 图片预加载,将样式表放在顶部,将脚本放在底部  加上时间戳。
    </code>

    http状态码有那些?分别代表是什么意思?

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">100-199 用于指定客户端应相应的某些动作。 
    200-299 用于表示请求成功。 
    300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。 
    400-499 用于指出客户端的错误。400    1、语义有误,当前请求无法被服务器理解。401   当前请求需要用户验证 403  服务器已经理解请求,但是拒绝执行它。
    500-599 用于支持服务器错误。 503 – 服务不可用
    </code>

    详情:http://segmentfault.com/blog/trigkit4/1190000000691919

    一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">    分为4个步骤:
        (1),当发送一个URL请求时,不管这个URL是Web页面的URL还是Web页面上每个资源的URL,浏览器都会开启一个线程来处理这个请求,同时在远程DNS服务器上启动一个DNS查询。这能使浏览器获得请求对应的IP地址。
        (2), 浏览器与远程Web服务器通过TCP三次握手协商来建立一个TCP/IP连接。该握手包括一个同步报文,一个同步-应答报文和一个应答报文,这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信,而后服务器应答并接受客户端的请求,最后由客户端发出该请求已经被接受的报文。
        (3),一旦TCP/IP连接建立,浏览器会通过该连接向远程服务器发送HTTP的GET请求。远程服务器找到资源并使用HTTP响应返回该资源,值为200的HTTP响应状态表示一个正确的响应。
        (4),此时,Web服务器提供资源服务,客户端开始下载资源。
    
    请求返回后,便进入了我们关注的前端模块
    简单来说,浏览器会解析HTML生成DOM Tree,其次会根据CSS生成CSS Rule Tree,而javascript又可以根据DOM API操作DOM
    </code>

    详情:从输入 URL 到浏览器接收的过程中发生了什么事情?

    平时如何管理你的项目?

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">先期团队必须确定好全局样式(globe.css),编码模式(utf-8) 等;
    
            编写习惯必须一致(例如都是采用继承式的写法,单样式都写成一行);
    
            标注样式编写人,各模块都及时标注(标注关键样式调用的地方);
    
            页面进行标注(例如 页面 模块 开始和结束);
    
            CSS跟HTML 分文件夹并行存放,命名都得统一(例如style.css);
    
            JS 分文件夹存放 命名以该JS功能为准的英文翻译。
    
            图片采用整合的 images.png png8 格式文件使用 尽量整合在一起使用方便将来的管理 
    </code>

    说说最近最流行的一些东西吧?常去哪些网站?

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">Node.js、Mongodb、<span class="hljs-built_in" style="color: rgb(38, 139, 210);">npm</span>、MVVM、MEAN、three.js,React 。
    网站:w3cfuns,sf,hacknews,CSDN,慕课,博客园,InfoQ,w3cplus等
    </code>

    javascript对象的几种创建方式

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">1,工厂模式
    2,构造函数模式
    3,原型模式
    4,混合构造函数和原型模式
    5,动态原型模式
    6,寄生构造函数模式
    7,稳妥构造函数模式
    </code>

    javascript继承的6种方法

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">1,原型链继承
    2,借用构造函数继承
    3,组合继承(原型+借用构造)
    4,原型式继承
    5,寄生式继承
    6,寄生组合式继承
    </code>

    详情:JavaScript继承方式详解

    ajax过程

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.
    
    (2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
    
    (3)设置响应HTTP请求状态变化的函数.
    
    (4)发送HTTP请求.
    
    (5)获取异步调用返回的数据.
    
    (6)使用JavaScript和DOM实现局部刷新.
    </code>

    详情:JavaScript学习总结(七)Ajax和Http状态字

    异步加载和延迟加载

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-number" style="color: rgb(42, 161, 152);">1.</span>异步加载的方案: 动态插入script标签
    <span class="hljs-number" style="color: rgb(42, 161, 152);">2.</span>通过ajax去获取js代码,然后通过eval执行
    <span class="hljs-number" style="color: rgb(42, 161, 152);">3.</span>script标签上添加defer或者<span class="hljs-keyword" style="color: rgb(133, 153, 0);">async</span>属性
    <span class="hljs-number" style="color: rgb(42, 161, 152);">4.</span>创建并插入iframe,让它异步执行js
    <span class="hljs-number" style="color: rgb(42, 161, 152);">5.</span>延迟加载:有些 js 代码并不是页面初始化的时候就立刻需要的,而稍后的某些情况才需要的。
    </code>

    前端安全问题?

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-code">    (XSS,sql注入,CSRF)</span>
    CSRF:是跨站请求伪造,很明显根据刚刚的解释,他的核心也就是请求伪造,通过伪造身份提交POST和GET请求来进行跨域的攻击。
    
    <span class="hljs-strong">**完成CSRF需要两个步骤:**</span>
    
    1.登陆受信任的网站A,在本地生成COOKIE
    
    2.在不登出A的情况下,或者本地COOKIE没有过期的情况下,访问危险网站B。
    </code>

    ie各版本和chrome可以并行下载多少个资源

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-title" style="color: rgb(133, 153, 0);">IE6</span> 两个并发,iE7升级之后的<span class="hljs-number" style="color: rgb(42, 161, 152);">6</span>个并发,之后版本也是<span class="hljs-number" style="color: rgb(42, 161, 152);">6</span>个
    
    Firefox,chrome也是<span class="hljs-number" style="color: rgb(42, 161, 152);">6</span>个
    </code>

    javascript里面的继承怎么实现,如何避免原型链上面的对象共享

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">用构造函数和原型链的混合模式去实现继承,避免对象共享可以参考经典的extend()函数,很多前端框架都有封装的,就是用一个空函数当做中间变量
    </code>

    grunt, YUI compressor 和 google clojure用来进行代码压缩的用法。

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">YUI Compressor 是一个用来压缩 JS 和 CSS 文件的工具,采用Java开发。
    
    使用方法:
    
    <span class="hljs-comment" style="color: rgb(147, 161, 161);">//压缩JS</span>
    java -jar yuicompressor-<span class="hljs-number" style="color: rgb(42, 161, 152);">2.4</span><span class="hljs-number" style="color: rgb(42, 161, 152);">.2</span>.jar --type js --charset utf-<span class="hljs-number" style="color: rgb(42, 161, 152);">8</span> -v src.js > packed.js
    <span class="hljs-comment" style="color: rgb(147, 161, 161);">//压缩CSS</span>
    java -jar yuicompressor-<span class="hljs-number" style="color: rgb(42, 161, 152);">2.4</span><span class="hljs-number" style="color: rgb(42, 161, 152);">.2</span>.jar --type css --charset utf-<span class="hljs-number" style="color: rgb(42, 161, 152);">8</span> -v src.css > packed.css
    </code>

    详情请见:你需要掌握的前端代码性能优化工具

    Flash、Ajax各自的优缺点,在使用中如何取舍?

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">1、Flash ajax对比
    Flash适合处理多媒体、矢量图形、访问机器;对CSS、处理文本上不足,不容易被搜索。
    Ajax对CSS、文本支持很好,支持搜索;多媒体、矢量图形、机器访问不足。
    共同点:与服务器的无刷新传递消息、用户离线和在线状态、操作DOM
    </code>

    请解释一下 JavaScript 的同源策略。

    概念:同源策略是客户端脚本(尤其是Javascript)的重要的安全度量标准。它最早出自Netscape Navigator2.0,其目的是防止某个文档或脚本从多个不同源装载。

    这里的同源策略指的是:协议,域名,端口相同,同源策略是一种安全协议。
    指一段脚本只能读取来自同一来源的窗口和文档的属性。

    为什么要有同源限制?

    我们举例说明:比如一个黑客程序,他利用Iframe把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名,密码登录时,他的页面就可以通过Javascript读取到你的表单中input中的内容,这样用户名,密码就轻松到手了。

    什么是 "use strict"; ? 使用它的好处和坏处分别是什么?

    ECMAscript 5添加了第二种运行模式:"严格模式"(strict mode)。顾名思义,这种模式使得Javascript在更严格的条件下运行。

    设立"严格模式"的目的,主要有以下几个:

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-deletion" style="color: rgb(220, 50, 47); background-color: rgb(255, 200, 189);">- 消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为;</span>
    <span class="hljs-deletion" style="color: rgb(220, 50, 47); background-color: rgb(255, 200, 189);">- 消除代码运行的一些不安全之处,保证代码运行的安全;</span>
    <span class="hljs-deletion" style="color: rgb(220, 50, 47); background-color: rgb(255, 200, 189);">- 提高编译器效率,增加运行速度;</span>
    <span class="hljs-deletion" style="color: rgb(220, 50, 47); background-color: rgb(255, 200, 189);">- 为未来新版本的Javascript做好铺垫。</span>
    </code>

    注:经过测试IE6,7,8,9均不支持严格模式。

    缺点:
    现在网站的JS 都会进行压缩,一些文件用了严格模式,而另一些没有。这时这些本来是严格模式的文件,被 merge 后,这个串就到了文件的中间,不仅没有指示严格模式,反而在压缩后浪费了字节。

    GET和POST的区别,何时使用POST?

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">    GET:一般用于信息获取,使用URL传递参数,对所发送信息的数量也有限制,一般在2000个字符
        POST:一般用于修改服务器上的资源,对所发送的信息没有限制。
    
        GET方式需要使用Request.QueryString来取得变量的值,而POST方式通过Request.Form来获取变量的值,
        也就是说Get是通过地址栏来传值,而Post是通过提交表单来传值。
    
    然而,在以下情况中,请使用 POST 请求:
    无法使用缓存文件(更新服务器上的文件或数据库)
    向服务器发送大量数据(POST 没有数据量限制)
    发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
    </code>

    哪些地方会出现css阻塞,哪些地方会出现js阻塞?

    js的阻塞特性:所有浏览器在下载JS的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等。直到JS下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。为了提高用户体验,新一代浏览器都支持并行下载JS,但是JS下载仍然会阻塞其它资源的下载(例如.图片,css文件等)。

    由于浏览器为了防止出现JS修改DOM树,需要重新构建DOM树的情况,所以就会阻塞其他的下载和呈现。

    嵌入JS会阻塞所有内容的呈现,而外部JS只会阻塞其后内容的显示,2种方式都会阻塞其后资源的下载。也就是说外部样式不会阻塞外部脚本的加载,但会阻塞外部脚本的执行。

    CSS怎么会阻塞加载了?CSS本来是可以并行下载的,在什么情况下会出现阻塞加载了(在测试观察中,IE6CSS都是阻塞加载)

    CSS后面跟着嵌入的JS的时候,该CSS就会出现阻塞后面资源下载的情况。而当把嵌入JS放到CSS前面,就不会出现阻塞的情况了。

    根本原因:因为浏览器会维持htmlcssjs的顺序,样式表必须在嵌入的JS执行前先加载、解析完。而嵌入的JS会阻塞后面的资源加载,所以就会出现上面CSS阻塞下载的情况。

    嵌入JS应该放在什么位置?

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">   <span class="hljs-number" style="color: rgb(42, 161, 152);">1</span>、放在底部,虽然放在底部照样会阻塞所有呈现,但不会阻塞资源下载。
    
       <span class="hljs-number" style="color: rgb(42, 161, 152);">2</span>、如果嵌入JS放在head中,请把嵌入JS放在CSS头部。
    
       <span class="hljs-number" style="color: rgb(42, 161, 152);">3</span>、使用defer(只支持IE)
    
       <span class="hljs-number" style="color: rgb(42, 161, 152);">4</span>、不要在嵌入的JS中调用运行时间较长的函数,如果一定要用,可以用`<span class="javascript">setTimeout</span>`来调用
    </code>

    Javascript无阻塞加载具体方式

    • 将脚本放在底部。<link>还是放在head中,用以保证在js加载前,能加载出正常显示的页面。<script>标签放在</body>前。
    • 成组脚本:由于每个<script>标签下载时阻塞页面解析过程,所以限制页面的<script>总数也可以改善性能。适用于内联脚本和外部脚本。

    • 非阻塞脚本:等页面完成加载后,再加载js代码。也就是,在window.onload事件发出后开始下载代码。
      (1)defer属性:支持IE4和fierfox3.5更高版本浏览器
      (2)动态脚本元素:文档对象模型(DOM)允许你使用js动态创建HTML的几乎全部文档内容。代码如下:


    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102);"><<span class="hljs-title" style="color: rgb(38, 139, 210);">script</span>></span><span class="javascript">
    <span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> script=<span class="hljs-built_in" style="color: rgb(38, 139, 210);">document</span>.createElement(<span class="hljs-string" style="color: rgb(42, 161, 152);">"script"</span>);
    script.type=<span class="hljs-string" style="color: rgb(42, 161, 152);">"text/javascript"</span>;
    script.src=<span class="hljs-string" style="color: rgb(42, 161, 152);">"file.js"</span>;
    <span class="hljs-built_in" style="color: rgb(38, 139, 210);">document</span>.getElementsByTagName(<span class="hljs-string" style="color: rgb(42, 161, 152);">"head"</span>)[<span class="hljs-number" style="color: rgb(42, 161, 152);">0</span>].appendChild(script);
    </span><span class="hljs-tag" style="color: rgb(0, 102, 102);"></<span class="hljs-title" style="color: rgb(38, 139, 210);">script</span>></span>
    </code>

    此技术的重点在于:无论在何处启动下载,文件额下载和运行都不会阻塞其他页面处理过程。即使在head里(除了用于下载文件的http链接)。

    闭包相关问题?

    详情请见:详解js闭包

    js事件处理程序问题?

    详情请见:JavaScript学习总结(九)事件详解

    eval是做什么的?

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">它的功能是把对应的字符串解析成JS代码并运行;
    应该避免使用<span class="hljs-built_in" style="color: rgb(38, 139, 210);">eval</span>,不安全,非常耗性能(<span class="hljs-number" style="color: rgb(42, 161, 152);">2</span>次,一次解析成js语句,一次执行)。
    </code>

    写一个通用的事件侦听器函数?

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-comment" style="color: rgb(147, 161, 161);">// event(事件)工具集,来源:github.com/markyun</span>
        markyun.Event = {
            <span class="hljs-comment" style="color: rgb(147, 161, 161);">// 页面加载完成后</span>
            readyEvent : <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span><span class="hljs-params" style="color: rgb(102, 0, 102);">(fn)</span> </span>{
                <span class="hljs-keyword" style="color: rgb(133, 153, 0);">if</span> (fn==<span class="hljs-literal" style="color: rgb(0, 102, 102);">null</span>) {
                    fn=<span class="hljs-built_in" style="color: rgb(38, 139, 210);">document</span>;
                }
                <span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> oldonload = <span class="hljs-built_in" style="color: rgb(38, 139, 210);">window</span>.onload;
                <span class="hljs-keyword" style="color: rgb(133, 153, 0);">if</span> (<span class="hljs-keyword" style="color: rgb(133, 153, 0);">typeof</span> <span class="hljs-built_in" style="color: rgb(38, 139, 210);">window</span>.onload != <span class="hljs-string" style="color: rgb(42, 161, 152);">'function'</span>) {
                    <span class="hljs-built_in" style="color: rgb(38, 139, 210);">window</span>.onload = fn;
                } <span class="hljs-keyword" style="color: rgb(133, 153, 0);">else</span> {
                    <span class="hljs-built_in" style="color: rgb(38, 139, 210);">window</span>.onload = <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span><span class="hljs-params" style="color: rgb(102, 0, 102);">()</span> </span>{
                        oldonload();
                        fn();
                    };
                }
            },
            <span class="hljs-comment" style="color: rgb(147, 161, 161);">// 视能力分别使用dom0||dom2||IE方式 来绑定事件</span>
            <span class="hljs-comment" style="color: rgb(147, 161, 161);">// 参数: 操作的元素,事件名称 ,事件处理程序</span>
            addEvent : <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span><span class="hljs-params" style="color: rgb(102, 0, 102);">(element, type, handler)</span> </span>{
                <span class="hljs-keyword" style="color: rgb(133, 153, 0);">if</span> (element.addEventListener) {
                    <span class="hljs-comment" style="color: rgb(147, 161, 161);">//事件类型、需要执行的函数、是否捕捉</span>
                    element.addEventListener(type, handler, <span class="hljs-literal" style="color: rgb(0, 102, 102);">false</span>);
                } <span class="hljs-keyword" style="color: rgb(133, 153, 0);">else</span> <span class="hljs-keyword" style="color: rgb(133, 153, 0);">if</span> (element.attachEvent) {
                    element.attachEvent(<span class="hljs-string" style="color: rgb(42, 161, 152);">'on'</span> + type, <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span><span class="hljs-params" style="color: rgb(102, 0, 102);">()</span> </span>{
                        handler.call(element);
                    });
                } <span class="hljs-keyword" style="color: rgb(133, 153, 0);">else</span> {
                    element[<span class="hljs-string" style="color: rgb(42, 161, 152);">'on'</span> + type] = handler;
                }
            },
            <span class="hljs-comment" style="color: rgb(147, 161, 161);">// 移除事件</span>
            removeEvent : <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span><span class="hljs-params" style="color: rgb(102, 0, 102);">(element, type, handler)</span> </span>{
                <span class="hljs-keyword" style="color: rgb(133, 153, 0);">if</span> (element.removeEnentListener) {
                    element.removeEnentListener(type, handler, <span class="hljs-literal" style="color: rgb(0, 102, 102);">false</span>);
                } <span class="hljs-keyword" style="color: rgb(133, 153, 0);">else</span> <span class="hljs-keyword" style="color: rgb(133, 153, 0);">if</span> (element.datachEvent) {
                    element.detachEvent(<span class="hljs-string" style="color: rgb(42, 161, 152);">'on'</span> + type, handler);
                } <span class="hljs-keyword" style="color: rgb(133, 153, 0);">else</span> {
                    element[<span class="hljs-string" style="color: rgb(42, 161, 152);">'on'</span> + type] = <span class="hljs-literal" style="color: rgb(0, 102, 102);">null</span>;
                }
            }, 
            <span class="hljs-comment" style="color: rgb(147, 161, 161);">// 阻止事件 (主要是事件冒泡,因为IE不支持事件捕获)</span>
            stopPropagation : <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span><span class="hljs-params" style="color: rgb(102, 0, 102);">(ev)</span> </span>{
                <span class="hljs-keyword" style="color: rgb(133, 153, 0);">if</span> (ev.stopPropagation) {
                    ev.stopPropagation();
                } <span class="hljs-keyword" style="color: rgb(133, 153, 0);">else</span> {
                    ev.cancelBubble = <span class="hljs-literal" style="color: rgb(0, 102, 102);">true</span>;
                }
            },
            <span class="hljs-comment" style="color: rgb(147, 161, 161);">// 取消事件的默认行为</span>
            preventDefault : <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span><span class="hljs-params" style="color: rgb(102, 0, 102);">(event)</span> </span>{
                <span class="hljs-keyword" style="color: rgb(133, 153, 0);">if</span> (event.preventDefault) {
                    event.preventDefault();
                } <span class="hljs-keyword" style="color: rgb(133, 153, 0);">else</span> {
                    event.returnValue = <span class="hljs-literal" style="color: rgb(0, 102, 102);">false</span>;
                }
            },
            <span class="hljs-comment" style="color: rgb(147, 161, 161);">// 获取事件目标</span>
            getTarget : <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span><span class="hljs-params" style="color: rgb(102, 0, 102);">(event)</span> </span>{
                <span class="hljs-keyword" style="color: rgb(133, 153, 0);">return</span> event.target || event.srcElement;
            },
            <span class="hljs-comment" style="color: rgb(147, 161, 161);">// 获取event对象的引用,取到事件的所有信息,确保随时能使用event;</span>
            getEvent : <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span><span class="hljs-params" style="color: rgb(102, 0, 102);">(e)</span> </span>{
                <span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> ev = e || <span class="hljs-built_in" style="color: rgb(38, 139, 210);">window</span>.event;
                <span class="hljs-keyword" style="color: rgb(133, 153, 0);">if</span> (!ev) {
                    <span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> c = <span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span>.getEvent.caller;
                    <span class="hljs-keyword" style="color: rgb(133, 153, 0);">while</span> (c) {
                        ev = c.arguments[<span class="hljs-number" style="color: rgb(42, 161, 152);">0</span>];
                        <span class="hljs-keyword" style="color: rgb(133, 153, 0);">if</span> (ev && Event == ev.constructor) {
                            <span class="hljs-keyword" style="color: rgb(133, 153, 0);">break</span>;
                        }
                        c = c.caller;
                    }
                }
                <span class="hljs-keyword" style="color: rgb(133, 153, 0);">return</span> ev;
            }
        }; 
    </code>

    Node.js的适用场景?

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">高并发、聊天、实时消息推送   
    </code>

    JavaScript原型,原型链 ? 有什么特点?

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-bullet">*  </span>原型对象也是普通的对象,是对象一个自带隐式的 <span class="hljs-strong">__proto__</span> 属性,原型也有可能有自己的原型,如果一个原型对象的原型不为null的话,我们就称之为原型链。
    <span class="hljs-bullet">*  </span>原型链是由一些用来继承和共享属性的对象组成的(有限的)对象链。
    </code>

    页面重构怎么操作?

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">编写 CSS、让页面结构更合理化,提升用户体验,实现良好的页面效果和提升性能。
    </code>

    WEB应用从服务器主动推送Data到客户端有那些方式?

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">html5 websoket
        WebSocket通过Flash
        XHR长时间连接
        XHR Multipart Streaming
        不可见的Iframe
        <span class="hljs-tag" style="color: rgb(0, 102, 102);"><<span class="hljs-title" style="color: rgb(38, 139, 210);">script</span>></span><span class="javascript">标签的长时间连接(可跨域)
    </span></code>

    事件、IE与火狐的事件机制有什么区别? 如何阻止冒泡?

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"> <span class="hljs-number" style="color: rgb(42, 161, 152);">1.</span> 我们在网页中的某个操作(有的操作对应多个事件)。例如:当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。  
     <span class="hljs-number" style="color: rgb(42, 161, 152);">2.</span> 事件处理机制:IE是事件冒泡、firefox同时支持两种事件模型,也就是:捕获型事件和冒泡型事件。;
     <span class="hljs-number" style="color: rgb(42, 161, 152);">3.</span>  ev.stopPropagation();注意旧ie的方法 ev.cancelBubble = <span class="hljs-literal" style="color: rgb(0, 102, 102);">true</span>;
    </code>

    ajax 是什么?ajax 的交互模型?同步和异步的区别?如何解决跨域问题?

    详情请见:JavaScript学习总结(七)Ajax和Http状态字

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-number" style="color: rgb(42, 161, 152);">1.</span> 通过异步模式,提升了用户体验
    
      <span class="hljs-number" style="color: rgb(42, 161, 152);">2.</span> 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用
    
      <span class="hljs-number" style="color: rgb(42, 161, 152);">3.</span> Ajax在客户端运行,承担了一部分本来由服务器承担的工作,减少了大用户量下的服务器负载。
    
      <span class="hljs-number" style="color: rgb(42, 161, 152);">2.</span> Ajax的最大的特点是什么。
    
      Ajax可以实现动态不刷新(局部刷新)
      readyState属性 状态 有<span class="hljs-number" style="color: rgb(42, 161, 152);">5</span>个可取值: <span class="hljs-number" style="color: rgb(42, 161, 152);">0</span>=未初始化 ,<span class="hljs-number" style="color: rgb(42, 161, 152);">1</span>=启动 <span class="hljs-number" style="color: rgb(42, 161, 152);">2</span>=发送,<span class="hljs-number" style="color: rgb(42, 161, 152);">3</span>=接收,<span class="hljs-number" style="color: rgb(42, 161, 152);">4</span>=完成
    
    ajax的缺点
    
      <span class="hljs-number" style="color: rgb(42, 161, 152);">1</span>、ajax不支持浏览器back按钮。
    
      <span class="hljs-number" style="color: rgb(42, 161, 152);">2</span>、安全问题 AJAX暴露了与服务器交互的细节。
    
      <span class="hljs-number" style="color: rgb(42, 161, 152);">3</span>、对搜索引擎的支持比较弱。
    
      <span class="hljs-number" style="color: rgb(42, 161, 152);">4</span>、破坏了程序的异常机制。
    
      <span class="hljs-number" style="color: rgb(42, 161, 152);">5</span>、不容易调试。
    
    跨域: jsonp、 iframe、<span class="hljs-built_in" style="color: rgb(38, 139, 210);">window</span>.name、<span class="hljs-built_in" style="color: rgb(38, 139, 210);">window</span>.postMessage、服务器上设置代理页面
    </code>

    js对象的深度克隆

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">  <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span> <span class="hljs-title" style="color: rgb(38, 139, 210);">clone</span><span class="hljs-params" style="color: rgb(102, 0, 102);">(Obj)</span> </span>{   
            <span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> buf;   
            <span class="hljs-keyword" style="color: rgb(133, 153, 0);">if</span> (Obj <span class="hljs-keyword" style="color: rgb(133, 153, 0);">instanceof</span> <span class="hljs-built_in" style="color: rgb(38, 139, 210);">Array</span>) {   
                buf = [];  <span class="hljs-comment" style="color: rgb(147, 161, 161);">//创建一个空的数组 </span>
                <span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> i = Obj.length;   
                <span class="hljs-keyword" style="color: rgb(133, 153, 0);">while</span> (i--) {   
                    buf[i] = clone(Obj[i]);   
                }   
                <span class="hljs-keyword" style="color: rgb(133, 153, 0);">return</span> buf;   
            }<span class="hljs-keyword" style="color: rgb(133, 153, 0);">else</span> <span class="hljs-keyword" style="color: rgb(133, 153, 0);">if</span> (Obj <span class="hljs-keyword" style="color: rgb(133, 153, 0);">instanceof</span> <span class="hljs-built_in" style="color: rgb(38, 139, 210);">Object</span>){   
                buf = {};  <span class="hljs-comment" style="color: rgb(147, 161, 161);">//创建一个空对象 </span>
                <span class="hljs-keyword" style="color: rgb(133, 153, 0);">for</span> (<span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> k <span class="hljs-keyword" style="color: rgb(133, 153, 0);">in</span> Obj) {  <span class="hljs-comment" style="color: rgb(147, 161, 161);">//为这个对象添加新的属性 </span>
                    buf[k] = clone(Obj[k]);   
                }   
                <span class="hljs-keyword" style="color: rgb(133, 153, 0);">return</span> buf;   
            }<span class="hljs-keyword" style="color: rgb(133, 153, 0);">else</span>{   
                <span class="hljs-keyword" style="color: rgb(133, 153, 0);">return</span> Obj;   
            }   
        }  
    </code>

    AMD和CMD 规范的区别?

    详情请见:详解JavaScript模块化开发

    网站重构的理解?

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">网站重构:在不改变外部行为的前提下,简化结构、添加可读性,而在网站前端保持一致的行为。也就是说是在不改变UI的情况下,对网站进行优化,在扩展的同时保持一致的UI。
    
    对于传统的网站来说重构通常是:
    
    表格(table)布局改为DIV+CSS
    使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)
    对于移动平台的优化
    针对于SEO进行优化
    深层次的网站重构应该考虑的方面
    
    减少代码间的耦合
    让代码保持弹性
    严格按规范编写代码
    设计可扩展的API
    代替旧有的框架、语言(如VB)
    增强用户体验
    通常来说对于速度的优化也包含在重构中
    
    压缩JS、CSS、image等前端资源(通常是由服务器来解决)
    程序的性能优化(如数据读写)
    采用CDN来加速资源加载
    对于JS DOM的优化
    HTTP服务器的文件缓存
    </code>

    如何获取UA?

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102);"><<span class="hljs-title" style="color: rgb(38, 139, 210);">script</span>></span><span class="javascript"> 
        <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span> <span class="hljs-title" style="color: rgb(38, 139, 210);">whatBrowser</span><span class="hljs-params" style="color: rgb(102, 0, 102);">()</span> </span>{  
            <span class="hljs-built_in" style="color: rgb(38, 139, 210);">document</span>.Browser.Name.value=navigator.appName;  
            <span class="hljs-built_in" style="color: rgb(38, 139, 210);">document</span>.Browser.Version.value=navigator.appVersion;  
            <span class="hljs-built_in" style="color: rgb(38, 139, 210);">document</span>.Browser.Code.value=navigator.appCodeName;  
            <span class="hljs-built_in" style="color: rgb(38, 139, 210);">document</span>.Browser.Agent.value=navigator.userAgent;  
        }  
    </span><span class="hljs-tag" style="color: rgb(0, 102, 102);"></<span class="hljs-title" style="color: rgb(38, 139, 210);">script</span>></span>
    </code>

    js数组去重

    以下是数组去重的三种方法:

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-built_in" style="color: rgb(38, 139, 210);">Array</span>.prototype.unique1 = <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102);">()</span> </span>{
      <span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> n = []; <span class="hljs-comment" style="color: rgb(147, 161, 161);">//一个新的临时数组</span>
      <span class="hljs-keyword" style="color: rgb(133, 153, 0);">for</span> (<span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> i = <span class="hljs-number" style="color: rgb(42, 161, 152);">0</span>; i < <span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span>.length; i++) <span class="hljs-comment" style="color: rgb(147, 161, 161);">//遍历当前数组</span>
      {
        <span class="hljs-comment" style="color: rgb(147, 161, 161);">//如果当前数组的第i已经保存进了临时数组,那么跳过,</span>
        <span class="hljs-comment" style="color: rgb(147, 161, 161);">//否则把当前项push到临时数组里面</span>
        <span class="hljs-keyword" style="color: rgb(133, 153, 0);">if</span> (n.indexOf(<span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span>[i]) == -<span class="hljs-number" style="color: rgb(42, 161, 152);">1</span>) n.push(<span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span>[i]);
      }
      <span class="hljs-keyword" style="color: rgb(133, 153, 0);">return</span> n;
    }
    
    <span class="hljs-built_in" style="color: rgb(38, 139, 210);">Array</span>.prototype.unique2 = <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span><span class="hljs-params" style="color: rgb(102, 0, 102);">()</span>
    </span>{
        <span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> n = {},r=[]; <span class="hljs-comment" style="color: rgb(147, 161, 161);">//n为hash表,r为临时数组</span>
        <span class="hljs-keyword" style="color: rgb(133, 153, 0);">for</span>(<span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> i = <span class="hljs-number" style="color: rgb(42, 161, 152);">0</span>; i < <span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span>.length; i++) <span class="hljs-comment" style="color: rgb(147, 161, 161);">//遍历当前数组</span>
        {
            <span class="hljs-keyword" style="color: rgb(133, 153, 0);">if</span> (!n[<span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span>[i]]) <span class="hljs-comment" style="color: rgb(147, 161, 161);">//如果hash表中没有当前项</span>
            {
                n[<span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span>[i]] = <span class="hljs-literal" style="color: rgb(0, 102, 102);">true</span>; <span class="hljs-comment" style="color: rgb(147, 161, 161);">//存入hash表</span>
                r.push(<span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span>[i]); <span class="hljs-comment" style="color: rgb(147, 161, 161);">//把当前数组的当前项push到临时数组里面</span>
            }
        }
        <span class="hljs-keyword" style="color: rgb(133, 153, 0);">return</span> r;
    }
    
    <span class="hljs-built_in" style="color: rgb(38, 139, 210);">Array</span>.prototype.unique3 = <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span><span class="hljs-params" style="color: rgb(102, 0, 102);">()</span>
    </span>{
        <span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> n = [<span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span>[<span class="hljs-number" style="color: rgb(42, 161, 152);">0</span>]]; <span class="hljs-comment" style="color: rgb(147, 161, 161);">//结果数组</span>
        <span class="hljs-keyword" style="color: rgb(133, 153, 0);">for</span>(<span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> i = <span class="hljs-number" style="color: rgb(42, 161, 152);">1</span>; i < <span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span>.length; i++) <span class="hljs-comment" style="color: rgb(147, 161, 161);">//从第二项开始遍历</span>
        {
            <span class="hljs-comment" style="color: rgb(147, 161, 161);">//如果当前数组的第i项在当前数组中第一次出现的位置不是i,</span>
            <span class="hljs-comment" style="color: rgb(147, 161, 161);">//那么表示第i项是重复的,忽略掉。否则存入结果数组</span>
            <span class="hljs-keyword" style="color: rgb(133, 153, 0);">if</span> (<span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span>.indexOf(<span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span>[i]) == i) n.push(<span class="hljs-keyword" style="color: rgb(133, 153, 0);">this</span>[i]);
        }
        <span class="hljs-keyword" style="color: rgb(133, 153, 0);">return</span> n;
    }
    </code>

    HTTP状态码

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-number" style="color: rgb(42, 161, 152);">100</span>  Continue  继续,一般在发送post请求时,已发送了http header之后服务端将返回此信息,表示确认,之后发送具体参数信息
    <span class="hljs-number" style="color: rgb(42, 161, 152);">200</span>  OK   正常返回信息
    <span class="hljs-number" style="color: rgb(42, 161, 152);">201</span>  Created  请求成功并且服务器创建了新的资源
    <span class="hljs-number" style="color: rgb(42, 161, 152);">202</span>  Accepted  服务器已接受请求,但尚未处理
    <span class="hljs-number" style="color: rgb(42, 161, 152);">301</span>  Moved Permanently  请求的网页已永久移动到新位置。
    <span class="hljs-number" style="color: rgb(42, 161, 152);">302</span> Found  临时性重定向。
    <span class="hljs-number" style="color: rgb(42, 161, 152);">303</span> See Other  临时性重定向,且总是使用 GET 请求新的 URI。
    <span class="hljs-number" style="color: rgb(42, 161, 152);">304</span>  Not Modified  自从上次请求后,请求的网页未修改过。
    
    <span class="hljs-number" style="color: rgb(42, 161, 152);">400</span> Bad Request  服务器无法理解请求的格式,客户端不应当尝试再次使用相同的内容发起请求。
    <span class="hljs-number" style="color: rgb(42, 161, 152);">401</span> Unauthorized  请求未授权。
    <span class="hljs-number" style="color: rgb(42, 161, 152);">403</span> Forbidden  禁止访问。
    <span class="hljs-number" style="color: rgb(42, 161, 152);">404</span> Not Found  找不到如何与 URI 相匹配的资源。
    
    <span class="hljs-number" style="color: rgb(42, 161, 152);">500</span> Internal Server <span class="hljs-built_in" style="color: rgb(38, 139, 210);">Error</span>  最常见的服务器端错误。
    <span class="hljs-number" style="color: rgb(42, 161, 152);">503</span> Service Unavailable 服务器端暂时无法处理请求(可能是过载或维护)。
    </code>

    cache-control

    网页的缓存是由HTTP消息头中的“Cache-control”来控制的,常见的取值有private、no-cache、max-age、must-revalidate等,默认为private

    Expires 头部字段提供一个日期和时间,响应在该日期和时间后被认为失效。允许客户端在这个时间之前不去检查(发请求),等同max-age的效果。但是如果同时存在,则被Cache-Controlmax-age覆盖。

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-title" style="color: rgb(133, 153, 0);">Expires</span> = <span class="hljs-string" style="color: rgb(42, 161, 152);">"Expires"</span> <span class="hljs-string" style="color: rgb(42, 161, 152);">":"</span> HTTP-date
    </code>

    例如

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-attribute" style="color: rgb(181, 137, 0);">Expires</span>: <span class="hljs-string" style="color: rgb(42, 161, 152);">Thu, 01 Dec 1994 16:00:00 GMT (必须是GMT格式)</span>
    </code>

    如果把它设置为-1,则表示立即过期

    Expiresmax-age都可以用来指定文档的过期时间,但是二者有一些细微差别

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;">1.Expires在HTTP/1.0中已经定义,<span class="hljs-operator"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">Cache</span>-Control:<span class="hljs-keyword" style="color: rgb(133, 153, 0);">max</span>-age在HTTP/<span class="hljs-number" style="color: rgb(42, 161, 152);">1.1</span>中才有定义,为了向下兼容,仅使用<span class="hljs-keyword" style="color: rgb(133, 153, 0);">max</span>-age不够;
    <span class="hljs-number" style="color: rgb(42, 161, 152);">2.</span>Expires指定一个绝对的过期时间(GMT格式),这么做会导致至少<span class="hljs-number" style="color: rgb(42, 161, 152);">2</span>个问题:<span class="hljs-number" style="color: rgb(42, 161, 152);">1</span>)客户端和服务器时间不同步导致Expires的配置出现问题。 <span class="hljs-number" style="color: rgb(42, 161, 152);">2</span>)很容易在配置后忘记具体的过期时间,导致过期来临出现浪涌现象;
    
    <span class="hljs-number" style="color: rgb(42, 161, 152);">3.</span><span class="hljs-keyword" style="color: rgb(133, 153, 0);">max</span>-age 指定的是从文档被访问后的存活时间,这个时间是个相对值(比如:<span class="hljs-number" style="color: rgb(42, 161, 152);">3600</span>s),相对的是文档第一次被请求时服务器记录的Request_time(请求时间)
    
    <span class="hljs-number" style="color: rgb(42, 161, 152);">4.</span>Expires指定的时间可以是相对文件的最后访问时间(Atime)或者修改时间(MTime),而<span class="hljs-keyword" style="color: rgb(133, 153, 0);">max</span>-age相对对的是文档的请求时间(Atime)
    
    如果值为<span class="hljs-keyword" style="color: rgb(133, 153, 0);">no</span>-<span class="hljs-keyword" style="color: rgb(133, 153, 0);">cache</span>,那么每次都会访问服务器。如果值为<span class="hljs-keyword" style="color: rgb(133, 153, 0);">max</span>-age,则在过期之前不会重复访问服务器。
    </span></code>

    js操作获取和设置cookie

    <code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transparent;"><span class="hljs-comment" style="color: rgb(147, 161, 161);">//创建cookie</span>
    <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span> <span class="hljs-title" style="color: rgb(38, 139, 210);">setCookie</span><span class="hljs-params" style="color: rgb(102, 0, 102);">(name, value, expires, path, domain, secure)</span> </span>{
        <span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> cookieText = <span class="hljs-built_in" style="color: rgb(38, 139, 210);">encodeURIComponent</span>(name) + <span class="hljs-string" style="color: rgb(42, 161, 152);">'='</span> + <span class="hljs-built_in" style="color: rgb(38, 139, 210);">encodeURIComponent</span>(value);
        <span class="hljs-keyword" style="color: rgb(133, 153, 0);">if</span> (expires <span class="hljs-keyword" style="color: rgb(133, 153, 0);">instanceof</span> <span class="hljs-built_in" style="color: rgb(38, 139, 210);">Date</span>) {
            cookieText += <span class="hljs-string" style="color: rgb(42, 161, 152);">'; expires='</span> + expires;
        }
        <span class="hljs-keyword" style="color: rgb(133, 153, 0);">if</span> (path) {
            cookieText += <span class="hljs-string" style="color: rgb(42, 161, 152);">'; expires='</span> + expires;
        }
        <span class="hljs-keyword" style="color: rgb(133, 153, 0);">if</span> (domain) {
            cookieText += <span class="hljs-string" style="color: rgb(42, 161, 152);">'; domain='</span> + domain;
        }
        <span class="hljs-keyword" style="color: rgb(133, 153, 0);">if</span> (secure) {
            cookieText += <span class="hljs-string" style="color: rgb(42, 161, 152);">'; secure'</span>;
        }
        <span class="hljs-built_in" style="color: rgb(38, 139, 210);">document</span>.cookie = cookieText;
    }
    
    <span class="hljs-comment" style="color: rgb(147, 161, 161);">//获取cookie</span>
    <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span> <span class="hljs-title" style="color: rgb(38, 139, 210);">getCookie</span><span class="hljs-params" style="color: rgb(102, 0, 102);">(name)</span> </span>{
        <span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> cookieName = <span class="hljs-built_in" style="color: rgb(38, 139, 210);">encodeURIComponent</span>(name) + <span class="hljs-string" style="color: rgb(42, 161, 152);">'='</span>;
        <span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> cookieStart = <span class="hljs-built_in" style="color: rgb(38, 139, 210);">document</span>.cookie.indexOf(cookieName);
        <span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> cookieValue = <span class="hljs-literal" style="color: rgb(0, 102, 102);">null</span>;
        <span class="hljs-keyword" style="color: rgb(133, 153, 0);">if</span> (cookieStart > -<span class="hljs-number" style="color: rgb(42, 161, 152);">1</span>) {
            <span class="hljs-keyword" style="color: rgb(133, 153, 0);">var</span> cookieEnd = <span class="hljs-built_in" style="color: rgb(38, 139, 210);">document</span>.cookie.indexOf(<span class="hljs-string" style="color: rgb(42, 161, 152);">';'</span>, cookieStart);
            <span class="hljs-keyword" style="color: rgb(133, 153, 0);">if</span> (cookieEnd == -<span class="hljs-number" style="color: rgb(42, 161, 152);">1</span>) {
                cookieEnd = <span class="hljs-built_in" style="color: rgb(38, 139, 210);">document</span>.cookie.length;
            }
            cookieValue = <span class="hljs-built_in" style="color: rgb(38, 139, 210);">decodeURIComponent</span>(<span class="hljs-built_in" style="color: rgb(38, 139, 210);">document</span>.cookie.substring(cookieStart + cookieName.length, cookieEnd));
        }
        <span class="hljs-keyword" style="color: rgb(133, 153, 0);">return</span> cookieValue;
    }
    
    <span class="hljs-comment" style="color: rgb(147, 161, 161);">//删除cookie</span>
    <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(133, 153, 0);">function</span> <span class="hljs-title" style="color: rgb(38, 139, 210);">unsetCookie</span><span class="hljs-params" style="color: rgb(102, 0, 102);">(name)</span> </span>{
        <span class="hljs-built_in" style="color: rgb(38, 139, 210);">document</span>.cookie = name + <span class="hljs-string" style="color: rgb(42, 161, 152);">"= ; expires="</span> + <span class="hljs-keyword" style="color: rgb(133, 153, 0);">new</span> <span class="hljs-built_in" style="color: rgb(38, 139, 210);">Date</span>(<span class="hljs-number" style="color: rgb(42, 161, 152);">0</span>);
    }</code>
    展开全文
  • 近期总结一一些面试题 都是企业的面试题笔记题 感觉薪资10k下的都会出笔试题 特别高的薪资都是直接技术面试或者是 现场编程 总结很多人的面试题,后期会对于单个知识点再说笔记详细讲解。 部分都是百度的答案,...
  • 前端常见面试题

    千次阅读 多人点赞 2018-10-15 21:25:30
    1.define介绍一下 define是amd(异步模块加载机制)的api,第一个参数是模块名称(可选),第二个参数是数组,包含所有依赖的模块(可选),第三个参数可以是一个函数或者是一个js对象。 (1) 如果第三个参数是回调...
  • 前端面试题

    千次阅读 2019-03-21 16:19:23
    89、介绍js基本数据类型 1)ECMAScript中有5种基本数据类型: Undefined、Null、Boolean、Number和String 1种复杂的数据类型—Object,Object本质上是由一组无序的名值对组成的 其中Undefined、Null、Boolean、...
  • 2018Web前端面试题及答案大全

    万次阅读 多人点赞 2018-06-22 17:59:34
    &lt;code style="font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 1em; padding: 0px; color: inherit; background-color: transpar...
  • 前端面试题(2019篇)

    万次阅读 2020-07-22 22:29:11
    文章目录display:none 和 visibility:hidden的区别div+css 和 table相比有哪些优势说你对rem的理解px和em的区别浏览器的内核分别是什么CSS3那些新增属性HTML5那些新增属性cookies , sessionStorage和localStorage...
  • 前端一到三年最全面试题(一)

    万次阅读 多人点赞 2020-10-08 18:06:21
    今天给朋友们分享一到三年前端最全的面试题。 JS基础题: JS的数据类型有哪些? 答案见:JS数据类型详解 如何判断JS变量的数据类型? typeof() instanceof constructor toString typeof求解的可能...
  • web前端面试题

    千次阅读 2019-08-11 22:03:56
    1.数据结构和算法 1)反转单词 export default (str) => { // 字符串按空格进行分隔,保存数组,数组的元素的先后顺序就是单词的顺序 let arr = str.split(' ') // 对数组进行遍历,然后每个元素进行反转...
  • 前端面试题整理【一】

    千次阅读 2019-02-11 09:49:08
    常见状态码 2开头 (请求成功)表示成功处理了请求的状态代码 200 (成功) 服务器已成功处理了请求。 通常,这表示服务器提供了请求的网页。 201 (已创建) 请求成功并且服务器创建了新的资源。...
  • 2020年一些前端面试题(含答案)

    万次阅读 2020-02-29 14:03:32
    1、css实现图片自适应宽高 img { max-width: 100%; max-height: 100%; } 2、什么是flex,写出常见属性,以及作用 Flex即:Flexible Box,弹性布局,用来为盒状模型提供最大的灵活性。可以实现类似垂直居中布局。...
  • 前端面试题集锦——前言

    万次阅读 多人点赞 2018-12-02 20:37:54
    前端开发面试题 参考资料: 前端开发面试题 前端开发面试题集锦–JavaScript篇 web前端开发面试遇到的题目 web前端经典面试题 【前端】前端面试题整理 web前端开发面试题-基础篇 ...史上最全前端面试题(含答案)-...
  • 2020前端面试题含解析汇总——基础篇(一)

    千次阅读 多人点赞 2020-05-01 16:38:48
    2020前端面试题汇总——基础篇(一) 2020前端面试题汇总——基础篇(二) 2020前端面试题汇总——基础篇(三) 2020前端面试题汇总——基础篇(四) 2020前端面试题汇总——基础篇(五) 次回----CSS部分 ...
  • 先分享一波我在面试中遇到的真实的面试题~ 这是初级笔试。 一般情况下,在笔试通过了之后,先过HR的关,才会有技术面,技术官问的问题一般从基础开始,然后像打井一样逐渐深入,直到你答不出来为止,然后面试...
  • 2019 秋招前端面试总结

    万次阅读 多人点赞 2019-03-05 21:10:50
    总结一下自己的秋招面试题,希望能对自己什么部分有所欠缺有更好的认识,并能给其他人提供经验,帮助找工作的人查缺补漏。 CVTE 前端一面 持续更新中…...
  • 前端js面试题(高级)

    千次阅读 2018-05-13 11:05:31
    1、ES6模块化如何使用?开发环境如何打包?2、Class和普通构造函数有何区别3、Promise的基本使用和原理4、总结一下ES6其他常用功能5、原型如何实际应用6、原型如何满足扩展7、什么是单线程?和异步有何关系?...
  • 前端三年到五年面试题分享

    万次阅读 多人点赞 2020-08-05 10:31:31
    今天给大家分享一些三年到五年前端面试题 1. 达达京东到家 笔试: 都是些基础选择题,考察计算机网络,事件循环机制,闭包,this 这些。 一面: 三次握手和四次挥手详细介绍 TCP 有哪些手段保证可靠交付 ...
  • 2020前端最新面试题(vue篇)

    万次阅读 多人点赞 2020-03-19 17:15:11
    由于疫情原因,原本每年的“金三银四”仿佛消失,随之而来的是找工作的压力,这里给要面试的小伙伴总结了到目前为止的前端面试题,仅供参考哦 1.vue-router是怎么传递参数的 2.v-if和v-for一起使用的弊端以及解决...
1 2 3 4 5 ... 20
收藏数 50,234
精华内容 20,093
关键字:

前端面试题