精华内容
参与话题
问答
  • 2020年前端面试题及答案

    万次阅读 多人点赞 2020-02-11 19:29:34
    前端面试汇总(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使用之我要买个女朋友(入门篇)

     

     

     

    关注公众号,精彩不间断

     

     

    展开全文
  • 那些web前端经典面试题大全及答案

    万次阅读 多人点赞 2018-09-18 13:52:47
    阅读目录 ...马上就要过春节了,开年就是崭新的一年,相信很多的前端开发者会有一些跳槽的悸动,通过对本篇知识的整理以及经验的总结,希望能帮到更多的前端面试者。(如有错误或更好的答案,欢迎指正...

    阅读目录

    本篇收录了一些面试中经常会遇到的经典面试题以及自己面试过程中遇到的一些问题,并且都给出了我在网上收集的答案。马上就要过春节了,开年就是崭新的一年,相信很多的前端开发者会有一些跳槽的悸动,通过对本篇知识的整理以及经验的总结,希望能帮到更多的前端面试者。(如有错误或更好的答案,欢迎指正,水平有限,望各位不吝指教。:)

    另外,宣传一下自己发布不久的一个前端vue的项目:基于vue2.0 +vuex+ element-ui后台管理系统。希望有兴趣的同学,可以一起共同学习。

    javascript:

     

    • JavaScript中如何检测一个变量是一个String类型?请写出函数实现
    typeof(obj) === "string"
    typeof obj === "string"
    obj.constructor === String复制代码
    

     

    • 请用js去除字符串空格?

    方法一:使用replace正则匹配的方法

    去除所有空格: str = str.replace(/\s*/g,"");

    去除两头空格: str = str.replace(/^\s|\s$/g,"");

    去除左空格: str = str.replace( /^\s*/, “”);

    去除右空格: str = str.replace(/(\s*$)/g, "");

    str为要去除空格的字符串,实例如下:

    var str = " 23 23 ";
    var str2 = str.replace(/\s*/g,"");
    console.log(str2); // 2323复制代码
    

    方法二:使用str.trim()方法

    str.trim()局限性:无法去除中间的空格,实例如下:

    var str = "   xiao  ming   ";
    var str2 = str.trim();
    console.log(str2);   //xiao  ming 复制代码
    

    同理,str.trimLeft(),str.trimRight()分别用于去除字符串左右空格。

    方法三:使用jquery,$.trim(str)方法

    $.trim(str)局限性:无法去除中间的空格,实例如下:

    var str = "   xiao  ming   ";
    var str2 = $.trim(str)
    console.log(str2);   //  xiao  ming复制代码
    

     

    • 你如何获取浏览器URL中查询字符串中的参数?

    测试地址为:www.runoob.com/jquery/misc…

    实例如下:

    function showWindowHref(){
        var sHref = window.location.href;
        var args = sHref.split('?');
        if(args[0] == sHref){
            return "";
        }
        var arr = args[1].split('&');
        var obj = {};
        for(var i = 0;i< arr.length;i++){
            var arg = arr[i].split('=');
            obj[arg[0]] = arg[1];
        }
        return obj;
    }
    var href = showWindowHref(); // obj
    console.log(href['name']); // xiaoming复制代码
    

    js 字符串操作函数

    我这里只是列举了常用的字符串函数,具体使用方法,请参考网址

    • concat() – 将两个或多个字符的文本组合起来,返回一个新的字符串。

    • indexOf() – 返回字符串中一个子串第一处出现的索引。如果没有匹配项,返回 -1 。

    • charAt() – 返回指定位置的字符。

    • lastIndexOf() – 返回字符串中一个子串最后一处出现的索引,如果没有匹配项,返回 -1 。

    • match() – 检查一个字符串是否匹配一个正则表达式。

    • substr() 函数 -- 返回从string的startPos位置,长度为length的字符串

    • substring() – 返回字符串的一个子串。传入参数是起始位置和结束位置。

    • slice() – 提取字符串的一部分,并返回一个新字符串。

    • replace() – 用来查找匹配一个正则表达式的字符串,然后使用新字符串代替匹配的字符串。

    • search() – 执行一个正则表达式匹配查找。如果查找成功,返回字符串中匹配的索引值。否则返回 -1 。

    • split() – 通过将字符串划分成子串,将一个字符串做成一个字符串数组。

    • length – 返回字符串的长度,所谓字符串的长度是指其包含的字符的个数。

    • toLowerCase() – 将整个字符串转成小写字母。

    • toUpperCase() – 将整个字符串转成大写字母。

    怎样添加、移除、移动、复制、创建和查找节点?

    1)创建新节点

    createDocumentFragment() //创建一个DOM片段
      createElement() //创建一个具体的元素
      createTextNode() //创建一个文本节点

    2)添加、移除、替换、插入
      appendChild() //添加
      removeChild() //移除
      replaceChild() //替换
      insertBefore() //插入

    3)查找
      getElementsByTagName() //通过标签名称
      getElementsByName() //通过元素的Name属性的值
      getElementById() //通过元素Id,唯一性

    写出3个使用this的典型应用

    (1)、在html元素事件属性中使用,如:

    <input type=”button” onclick=”showInfo(this);” value=”点击一下”/>复制代码
    

    (2)、构造函数

    function Animal(name, color) {
      this.name = name;
      this.color = color;
    }复制代码
    

    (3)、input点击,获取值

    <input type="button" id="text" value="点击一下" />
    <script type="text/javascript">
        var btn = document.getElementById("text");
        btn.onclick = function() {
            alert(this.value);    //此处的this是按钮元素
        }
    </script>复制代码
    

    比较typeof与instanceof?

    相同点:JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空,或者是什么类型的。

    typeof的定义和用法:返回值是一个字符串,用来说明变量的数据类型。

    细节:

    (1)、typeof 一般只能返回如下几个结果:number,boolean,string,function,object,undefined。

    (2)、typeof 来获取一个变量是否存在,如 if(typeof a!="undefined"){alert("ok")},而不要去使用 if(a) 因为如果 a 不存在(未声明)则会出错。

    (3)、对于 Array,Null 等特殊对象使用 typeof 一律返回 object,这正是 typeof 的局限性。

    Instanceof定义和用法:instanceof 用于判断一个变量是否属于某个对象的实例。

    实例演示:

    a instanceof b?alert("true"):alert("false"); //a是b的实例?真:假

    var a = new Array(); 
    alert(a instanceof Array);  // true
    alert(a instanceof Object)  // true
    复制代码
    

    如上,会返回 true,同时 alert(a instanceof Object) 也会返回 true;这是因为 Array 是 object 的子类。

    function test(){};
    var a = new test();
    alert(a instanceof test)   // true复制代码
    

    细节:

    (1)、如下,得到的结果为‘N’,这里的 instanceof 测试的 object 是指 js 语法中的 object,不是指 dom 模型对象。

    if (window instanceof Object){ alert('Y')} else {  alert('N');}  // 'N'复制代码
    

    如何理解闭包?

    1、定义和用法:当一个函数的返回值是另外一个函数,而返回的那个函数如果调用了其父函数内部的其它变量,如果返回的这个函数在外部被执行,就产生了闭包。

    2、表现形式:使函数外部能够调用函数内部定义的变量。

    3、实例如下:

    (1)、根据作用域链的规则,底层作用域没有声明的变量,会向上一级找,找到就返回,没找到就一直找,直到window的变量,没有就返回undefined。这里明显count 是函数内部的flag2 的那个count 。

    var count=10;   //全局作用域 标记为flag1
    function add(){
        var count=0;    //函数全局作用域 标记为flag2
        return function(){
            count+=1;   //函数的内部作用域
            alert(count);
        }
    }
    var s = add()
    s();//输出1
    s();//输出2复制代码
    

    4、变量的作用域

    要理解闭包,首先必须理解Javascript特殊的变量作用域。

    变量的作用域分类:全局变量和局部变量。

    特点:

    1、函数内部可以读取函数外部的全局变量;在函数外部无法读取函数内的局部变量。

    2、函数内部声明变量的时候,一定要使用var命令。如果不用的话,你实际上声明了一个全局变量!

    5、使用闭包的注意点

    1)滥用闭包,会造成内存泄漏:由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。

    2)会改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。

    什么是跨域?跨域请求资源的方法有哪些?

    1、什么是跨域?

    由于浏览器同源策略,凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。存在跨域的情况:

    • 网络协议不同,如http协议访问https协议。

    • 端口不同,如80端口访问8080端口。

    • 域名不同,如qianduanblog.com访问baidu.com。

    • 子域名不同,如abc.qianduanblog.com访问def.qianduanblog.com。

    • 域名和域名对应ip,如www.a.com访问20.205.28.90.

    2、跨域请求资源的方法:

    (1)、porxy代理

    定义和用法:proxy代理用于将请求发送给后台服务器,通过服务器来发送请求,然后将请求的结果传递给前端。

    实现方法:通过nginx代理;

    注意点:1、如果你代理的是https协议的请求,那么你的proxy首先需要信任该证书(尤其是自定义证书)或者忽略证书检查,否则你的请求无法成功。

    (2)、CORS 【Cross-Origin Resource Sharing】

    定义和用法:是现代浏览器支持跨域资源请求的一种最常用的方式。

    使用方法:一般需要后端人员在处理请求数据的时候,添加允许跨域的相关操作。如下:

    res.writeHead(200, {
        "Content-Type": "text/html; charset=UTF-8",
        "Access-Control-Allow-Origin":'http://localhost',
        'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
        'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type'
    });复制代码
    

    (3)、jsonp

    定义和用法:通过动态插入一个script标签。浏览器对script的资源引用没有同源限制,同时资源加载到页面后会立即执行(没有阻塞的情况下)。

    特点:通过情况下,通过动态创建script来读取他域的动态资源,获取的数据一般为json格式。

    实例如下:

    <script>
        function testjsonp(data) {
           console.log(data.name); // 获取返回的结果
        }
    </script>
    <script>
        var _script = document.createElement('script');
        _script.type = "text/javascript";
        _script.src = "http://localhost:8888/jsonp?callback=testjsonp";
        document.head.appendChild(_script);
    </script>复制代码
    

    缺点:

    1、这种方式无法发送post请求(这里)

    2、另外要确定jsonp的请求是否失败并不容易,大多数框架的实现都是结合超时时间来判定。

    谈谈垃圾回收机制方式及内存管理

    回收机制方式

    1、定义和用法:垃圾回收机制(GC:Garbage Collection),执行环境负责管理代码执行过程中使用的内存。

    2、原理:垃圾收集器会定期(周期性)找出那些不在继续使用的变量,然后释放其内存。但是这个过程不是实时的,因为其开销比较大,所以垃圾回收器会按照固定的时间间隔周期性的执行。

    3、实例如下:

    function fn1() {
        var obj = {name: 'hanzichi', age: 10};
    }
    function fn2() {
        var obj = {name:'hanzichi', age: 10};
       return obj;
    }
    var a = fn1();
    var b = fn2();复制代码
    

    fn1中定义的obj为局部变量,而当调用结束后,出了fn1的环境,那么该块内存会被js引擎中的垃圾回收器自动释放;在fn2被调用的过程中,返回的对象被全局变量b所指向,所以该块内存并不会被释放。

    4、垃圾回收策略:标记清除(较为常用)和引用计数。

    标记清除:

    定义和用法:当变量进入环境时,将变量标记"进入环境",当变量离开环境时,标记为:"离开环境"。某一个时刻,垃圾回收器会过滤掉环境中的变量,以及被环境变量引用的变量,剩下的就是被视为准备回收的变量。

    到目前为止,IE、Firefox、Opera、Chrome、Safari的js实现使用的都是标记清除的垃圾回收策略或类似的策略,只不过垃圾收集的时间间隔互不相同。

    引用计数:

    定义和用法:引用计数是跟踪记录每个值被引用的次数。

    基本原理:就是变量的引用次数,被引用一次则加1,当这个引用计数为0时,被视为准备回收的对象。

    内存管理

    1、什么时候触发垃圾回收?

    垃圾回收器周期性运行,如果分配的内存非常多,那么回收工作也会很艰巨,确定垃圾回收时间间隔就变成了一个值得思考的问题。

    IE6的垃圾回收是根据内存分配量运行的,当环境中的变量,对象,字符串达到一定数量时触发垃圾回收。垃圾回收器一直处于工作状态,严重影响浏览器性能。

    IE7中,垃圾回收器会根据内存分配量与程序占用内存的比例进行动态调整,开始回收工作。

    2、合理的GC方案:(1)、遍历所有可访问的对象; (2)、回收已不可访问的对象。

    3、GC缺陷:(1)、停止响应其他操作;

    4、GC优化策略:(1)、分代回收(Generation GC);(2)、增量GC

    开发过程中遇到的内存泄露情况,如何解决的?

    1、定义和用法:

    内存泄露是指一块被分配的内存既不能使用,又不能回收,直到浏览器进程结束。C#和Java等语言采用了自动垃圾回收方法管理内存,几乎不会发生内存泄露。我们知道,浏览器中也是采用自动垃圾回收方法管理内存,但由于浏览器垃圾回收方法有bug,会产生内存泄露。

    2、内存泄露的几种情况:

    (1)、当页面中元素被移除或替换时,若元素绑定的事件仍没被移除,在IE中不会作出恰当处理,此时要先手工移除事件,不然会存在内存泄露。

    实例如下:

    <div id="myDiv">
        <input type="button" value="Click me" id="myBtn">
    </div>
    <script type="text/javascript">
        var btn = document.getElementById("myBtn");
        btn.onclick = function(){
            document.getElementById("myDiv").innerHTML = "Processing...";
        }
    </script>复制代码
    

    解决方法如下:

    <div id="myDiv">
        <input type="button" value="Click me" id="myBtn">
    </div>
    <script type="text/javascript">
        var btn = document.getElementById("myBtn");
        btn.onclick = function(){
        btn.onclick = null;
            document.getElementById("myDiv").innerHTML = "Processing...";
        }
    </script>复制代码
    

    (2)、由于是函数内定义函数,并且内部函数--事件回调的引用外暴了,形成了闭包。闭包可以维持函数内局部变量,使其得不到释放。

    实例如下:

    function bindEvent(){
        var obj=document.createElement("XXX");
        obj.onclick=function(){
            //Even if it's a empty function
        }
    }复制代码
    

    解决方法如下:

    function bindEvent(){
        var obj=document.createElement("XXX");
        obj.onclick=function(){
             //Even if it's a empty function
        }
        obj=null;
    }复制代码
    

    javascript面向对象中继承实现?

    面向对象的基本特征有:封闭、继承、多态。

    在JavaScript中实现继承的方法:

    1. 原型链(prototype chaining)

    2. call()/apply()

    3. 混合方式(prototype和call()/apply()结合)

    4. 对象冒充

    继承的方法如下:

    1、prototype原型链方式:

    function car(price){
        this.price = price;
    }
    car.prototype.sayPrice = function(){
        console.log("Price is "+this.price);
    }
    var oCar = new car("100W");
    oCar.sayPrice();
    
    function toyCar(price){
        this.price = price;
    }
    toyCar.prototype = new car()
    var oCar2 = new toyCar("10CNY");
    oCar2.sayPrice();复制代码
    

    2、call()/apply()方法

    function useCall(a,b){
      this.a = a;
      this.b = b;
      this.say = function(){
          console.log("I'm "+this.a+" You're "+this.b);
      }
     }
     function callThefunction (){
        var args = arguments;
        useCall.call(this,args[0],args[1]);
       // useCall.apply(this,arguments);
      }
    var testCall1 = new useCall("Not YY","Not TT");
    testCall1.say();
    
    var testCall2 = new callThefunction("YY","TT");
    testCall2.say();
    //  I'm Not YY You're Not TT
    //  I'm YY You're TT复制代码
    

    3、混合方法【prototype,call/apply】

    function house(size,price){
        this.size = size;
        this.price = price;
    }
    house.prototype.showArea=function (){
        console.log("面积为"+this.size);
    }
    house.prototype.sayPrice=function (){
        console.log("价钱为"+this.price);
    }
    
    function maofan(size,price){
        house.call(this,size,price);
    }
    maofan.prototype = new house();
    
    var newmaofan = new maofan("20Square meters ","1000CNY");
    newmaofan.showArea();复制代码
    

    4、对象冒充

    function Person(name,age){
       this.name = name;
       this.age = age;
       this.show = function(){
           console.log(this.name+",  "+this.age);
       }
    }
    Person.prototype.sayHi = function(){
       alert('hi');
    }
    
    function Student(name,age){ 
       this.student = Person;   //将Person类的构造函数赋值给this.student
       this.student(name,age);  //js中实际上是通过对象冒充来实现继承的
       delete this.student;    //移除对Person的引用
    }
    
    var s = new Student("小明",17);
    s.show();
    
    var p = new Person("小花",18);
    p.show();
    // 小明,  17
    // 小花,  18复制代码
    

    javascript相关程序计算题

    1、判断一个字符串中出现次数最多的字符,统计这个次数

    var str = 'asdfssaaasasasasaa';
    var json = {};
    for (var i = 0; i < str.length; i++) {
        if(!json[str.charAt(i)]){
           json[str.charAt(i)] = 1;
        }else{
           json[str.charAt(i)]++;
        }
    };
    var iMax = 0;
    var iIndex = '';
    for(var i in json){
        if(json[i]>iMax){
             iMax = json[i];
             iIndex = i;
        }
    }        
    console.log('出现次数最多的是:'+iIndex+'出现'+iMax+'次');复制代码
    

    结果如下:出现次数最多的是:a出现9次

    JavaScript 数组(Array)对象

    1、Array相关的属性和方法

    这里只是做了相关的列举,具体的使用方法,请参考网址

    Array 对象属性

    constructor 返回对创建此对象的数组函数的引用。

    length 设置或返回数组中元素的数目。

    prototype 使您有能力向对象添加属性和方法。

    Array 对象方法

    concat() 连接两个或更多的数组,并返回结果。

    join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

    pop() 删除并返回数组的最后一个元素。

    shift() 删除并返回数组的第一个元素

    push() 向数组的末尾添加一个或更多元素,并返回新的长度。

    unshift() 向数组的开头添加一个或更多元素,并返回新的长度。

    reverse() 颠倒数组中元素的顺序。

    slice() 从某个已有的数组返回选定的元素

    sort() 对数组的元素进行排序

    splice() 删除元素,并向数组添加新元素。

    toSource() 返回该对象的源代码。

    toString() 把数组转换为字符串,并返回结果。

    toLocaleString() 把数组转换为本地数组,并返回结果。

    valueOf() 返回数组对象的原始值

    2、编写一个方法 去掉一个数组的重复元素

    方法一:

    var arr = [0,2,3,4,4,0,2];
    var obj = {};
    var tmp = [];
    for(var i = 0 ;i< arr.length;i++){
       if( !obj[arr[i]] ){
          obj[arr[i]] = 1;
          tmp.push(arr[i]);
       }
    }
    console.log(tmp);复制代码
    

    结果如下: [0, 2, 3, 4]

    方法二:

    var arr = [2,3,4,4,5,2,3,6],
       arr2 = [];
    for(var i = 0;i< arr.length;i++){
        if(arr2.indexOf(arr[i]) < 0){
            arr2.push(arr[i]);
        }
    }
    console.log(arr2);复制代码
    

    结果为:[2, 3, 4, 5, 6]

    方法三:

    var arr = [2,3,4,4,5,2,3,6];
    var arr2 = arr.filter(function(element,index,self){
        return self.indexOf(element) === index;
    });
    console.log(arr2);
    复制代码
    

    结果为:[2, 3, 4, 5, 6]

    回到顶部

    jquery相关

    1、 jQuery 库中的 $() 是什么?

    () 函数是 jQuery() 函数的别称。() 函数用于将任何对象包裹成 jQuery 对象,接着你就被允许调用定义在 jQuery 对象上的多个不同方法。你可以将一个选择器字符串传入 $() 函数,它会返回一个包含所有匹配的 DOM 元素数组的 jQuery 对象。

    2、如何找到所有 HTML select 标签的选中项?

    $('[name=selectname] :selected')复制代码
    

    3、$(this) 和 this 关键字在 jQuery 中有何不同?

    $(this) 返回一个 jQuery 对象,你可以对它调用多个 jQuery 方法,比如用 text() 获取文本,用val() 获取值等等。

    而 this 代表当前元素,它是 JavaScript 关键词中的一个,表示上下文中的当前 DOM 元素。你不能对它调用 jQuery 方法,直到它被 () 函数包裹,例如(this)。

    4、jquery怎么移除标签onclick属性?

    获得a标签的onclick属性: $("a").attr("onclick")

    删除onclick属性:$("a").removeAttr("onclick");

    设置onclick属性:$("a").attr("onclick","test();");

    5、jquery中addClass,removeClass,toggleClass的使用。

    $(selector).addClass(class):为每个匹配的元素添加指定的类名

    $(selector).removeClass(class):从所有匹配的元素中删除全部或者指定的类,删除class中某个值;

    $(selector).toggleClass(class):如果存在(不存在)就删除(添加)一个类

    $(selector).removeAttr(class);删除class这个属性;

    6、JQuery有几种选择器?

    (1)、基本选择器:#id,class,element,*;

    (2)、层次选择器:parent > child,prev + next ,prev ~ siblings

    (3)、基本过滤器选择器::first,:last ,:not ,:even ,:odd ,:eq ,:gt ,:lt

    (4)、内容过滤器选择器: :contains ,:empty ,:has ,:parent

    (5)、可见性过滤器选择器::hidden ,:visible

    (6)、属性过滤器选择器:[attribute] ,[attribute=value] ,[attribute!=value] ,[attribute^=value] ,[attribute$=value] ,[attribute*=value]

    (7)、子元素过滤器选择器::nth-child ,:first-child ,:last-child ,:only-child

    (8)、表单选择器: :input ,:text ,:password ,:radio ,:checkbox ,:submit 等;

    (9)、表单过滤器选择器::enabled ,:disabled ,:checked ,:selected

    7、jQuery中的Delegate()函数有什么作用?

    delegate()会在以下两个情况下使用到:

    1、如果你有一个父元素,需要给其下的子元素添加事件,这时你可以使用delegate()了,代码如下:

    $("ul").delegate("li", "click", function(){ $(this).hide(); });复制代码
    

    2、当元素在当前页面中不可用时,可以使用delegate()

    8、$(document).ready()方法和window.onload有什么区别?

    (1)、window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。

    (2)、$(document).ready() 方法可以在DOM载入就绪时就对其进行操纵,并调用执行绑定的函数。

    9、如何用jQuery禁用浏览器的前进后退按钮?

    实现代码如下:

    <script type="text/javascript" language="javascript">
      $(document).ready(function() {
        window.history.forward(1);
          //OR window.history.forward(-1);
      });
    </script>复制代码
    

    10、 jquery中.get()提交和.post()提交有区别吗?

    相同点:都是异步请求的方式来获取服务端的数据;

    异同点:

    1、请求方式不同:.get() 方法使用GET方法来进行异步请求的。.post() 方法使用POST方法来进行异步请求的。

    2、参数传递方式不同:get请求会将参数跟在URL后进行传递,而POST请求则是作为HTTP消息的实体内容发送给Web服务器的,这种传递是对用户不可见的。

    3、数据传输大小不同:get方式传输的数据大小不能超过2KB 而POST要大的多

    4、安全问题: GET 方式请求的数据会被浏览器缓存起来,因此有安全问题。

    11、写出一个简单的$.ajax()的请求方式?

    $.ajax({
        url:'http://www.baidu.com',
        type:'POST',
        data:data,
        cache:true,
        headers:{},
        beforeSend:function(){},
        success:function(){},
        error:function(){},
        complete:function(){}
    }); 复制代码
    

    12、jQuery的事件委托方法bind 、live、delegate、on之间有什么区别?

    (1)、bind 【jQuery 1.3之前】

    定义和用法:主要用于给选择到的元素上绑定特定事件类型的监听函数;

    语法:bind(type,[data],function(eventObject));

    特点:

    (1)、适用于页面元素静态绑定。只能给调用它的时候已经存在的元素绑定事件,不能给未来新增的元素绑定事件。

    (2)、当页面加载完的时候,你才可以进行bind(),所以可能产生效率问题。

    实例如下:$( "#members li a" ).bind( "click", function( e ) {} );

    (2)、live 【jQuery 1.3之后】

    定义和用法:主要用于给选择到的元素上绑定特定事件类型的监听函数;

    语法:live(type, [data], fn);

    特点:

    (1)、live方法并没有将监听器绑定到自己(this)身上,而是绑定到了this.context上了。

    (2)、live正是利用了事件委托机制来完成事件的监听处理,把节点的处理委托给了document,新添加的元素不必再绑定一次监听器。

    (3)、使用live()方法但却只能放在直接选择的元素后面,不能在层级比较深,连缀的DOM遍历方法后面使用,即(“ul”").live...可以,但("body").find("ul").live...不行;

    实例如下:$( document ).on( "click", "#members li a", function( e ) {} );

    (3)、delegate 【jQuery 1.4.2中引入】

    定义和用法:将监听事件绑定在就近的父级元素上

    语法:delegate(selector,type,[data],fn)

    特点:

    (1)、选择就近的父级元素,因为事件可以更快的冒泡上去,能够在第一时间进行处理。

    (2)、更精确的小范围使用事件代理,性能优于.live()。可以用在动态添加的元素上。

    实例如下:

    $("#info_table").delegate("td","click",function(){/显示更多信息/});

    $("table").find("#info").delegate("td","click",function(){/显示更多信息/});

    (4)、on 【1.7版本整合了之前的三种方式的新事件绑定机制】

    定义和用法:将监听事件绑定到指定元素上。

    语法:on(type,[selector],[data],fn)

    实例如下:$("#info_table").on("click","td",function(){/显示更多信息/});参数的位置写法与delegate不一样。

    说明:on方法是当前JQuery推荐使用的事件绑定方法,附加只运行一次就删除函数的方法是one()。

    总结:.bind(), .live(), .delegate(),.on()分别对应的相反事件为:.unbind(),.die(), .undelegate(),.off()

    回到顶部

    HTML & CSS:

    1、什么是盒子模型?

    在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border),元素的外边距(margin)四个部分。这四个部分占有的空间中,有的部分可以显示相应的内容,而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。

    2、行内元素有哪些?块级元素有哪些? 空(void)元素有那些?

    行内元素:a、b、span、img、input、strong、select、label、em、button、textarea
    块级元素:div、ul、li、dl、dt、dd、p、h1-h6、blockquote
    空元素:即系没有内容的HTML元素,例如:br、meta、hr、link、input、img

    3、CSS实现垂直水平居中

    一道经典的问题,实现方法有很多种,以下是其中一种实现:
    HTML结构:

    <div class="wrapper">
         <div class="content"></div>
    </div>复制代码
    

    CSS:

    .wrapper {
        position: relative;
        width: 500px;
        height: 500px;
        border: 1px solid red; 
     }
    .content{
        position: absolute;
        width: 200px;
        height: 200px;
        /*top、bottom、left和right 均设置为0*/
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        /*margin设置为auto*/
        margin:auto;
        border: 1px solid green;    
    } 复制代码
    

    效果如下:

    [图片上传中...(image-b26e8-1537249903188-0)]

    4、简述一下src与href的区别

    href 是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。

    src是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。

    当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

    5、简述同步和异步的区别

    同步是阻塞模式,异步是非阻塞模式。
    同步就是指一个进程在执行某个请求的时候,若该请求需要一段时间才能返回信息,那么这个进程将会一直等待下去,直到收到返回信息才继续执行下去;
    异步是指进程不需要一直等下去,而是继续执行下面的操作,不管其他进程的状态。当有消息返回时系统会通知进程进行处理,这样可以提高执行的效率。

    6、px和em的区别

    相同点:px和em都是长度单位;

    异同点:px的值是固定的,指定是多少就是多少,计算比较容易。em得值不是固定的,并且em会继承父级元素的字体大小。
    浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

    7、浏览器的内核分别是什么?

    IE: trident内核

    Firefox:gecko内核

    Safari:webkit内核

    Opera:以前是presto内核,Opera现已改用Google Chrome的Blink内核

    Chrome:Blink(基于webkit,Google与Opera Software共同开发)

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

    渐进增强 progressive enhancement:
    针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

    优雅降级 graceful degradation:
    一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

    区别:

    a. 优雅降级是从复杂的现状开始,并试图减少用户体验的供给

    b. 渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要

    c. 降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带

    9、sessionStorage 、localStorage 和 cookie 之间的区别

    共同点:用于浏览器端存储的缓存数据

    不同点:

    (1)、存储内容是否发送到服务器端:当设置了Cookie后,数据会发送到服务器端,造成一定的宽带浪费;

    web storage,会将数据保存到本地,不会造成宽带浪费;

    (2)、数据存储大小不同:Cookie数据不能超过4K,适用于会话标识;web storage数据存储可以达到5M;

    (3)、数据存储的有效期限不同:cookie只在设置了Cookid过期时间之前一直有效,即使关闭窗口或者浏览器;

    sessionStorage,仅在关闭浏览器之前有效;localStorage,数据存储永久有效;

    (4)、作用域不同:cookie和localStorage是在同源同窗口中都是共享的;sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;

    10、Web Storage与Cookie相比存在的优势:

    (1)、存储空间更大:IE8下每个独立的存储空间为10M,其他浏览器实现略有不同,但都比Cookie要大很多。

    (2)、存储内容不会发送到服务器:当设置了Cookie后,Cookie的内容会随着请求一并发送的服务器,这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地,不会与服务器发生任何交互。

    (3)、更多丰富易用的接口:Web Storage提供了一套更为丰富的接口,如setItem,getItem,removeItem,clear等,使得数据操作更为简便。cookie需要自己封装。

    (4)、独立的存储空间:每个域(包括子域)有独立的存储空间,各个存储空间是完全独立的,因此不会造成数据混乱。

    11、Ajax的优缺点及工作原理?

    定义和用法:

    AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。Ajax 是一种用于创建快速动态网页的技术。Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

    传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。

    优点:

    1.减轻服务器的负担,按需取数据,最大程度的减少冗余请求

    2.局部刷新页面,减少用户心理和实际的等待时间,带来更好的用户体验

    3.基于xml标准化,并被广泛支持,不需安装插件等,进一步促进页面和数据的分离

    缺点:

    1.AJAX大量的使用了javascript和ajax引擎,这些取决于浏览器的支持.在编写的时候考虑对浏览器的兼容性.

    2.AJAX只是局部刷新,所以页面的后退按钮是没有用的.

    3.对流媒体还有移动设备的支持不是太好等

    AJAX的工作原理:

    1.创建ajax对象(XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp))

    2.判断数据传输方式(GET/POST)

    3.打开链接 open()

    4.发送 send()

    5.当ajax对象完成第四步(onreadystatechange)数据接收完成,判断http响应状态(status)200-300之间或者304(缓存)执行回调函数

    12、请指出document load和document ready的区别?

    共同点:这两种事件都代表的是页面文档加载时触发。

    异同点:

    ready 事件的触发,表示文档结构已经加载完成(不包含图片等非文字媒体文件)。

    onload 事件的触发,表示页面包含图片等文件在内的所有元素都加载完成。

    回到顶部

    正则表达式

    1、写一个function,清除字符串前后的空格。(兼容所有浏览器)

    function trim(str) {
        if (str && typeof str === "string") {
            return str.replace(/(^\s*)|(\s*)$/g,""); //去除前后空白符
        }
    }复制代码
    

    2、使用正则表达式验证邮箱格式

     var reg = /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/;
     var email = "example@qq.com";
     console.log(reg.test(email));  // true  复制代码
    

    回到顶部

    开发及性能优化

    1、规避javascript多人开发函数重名问题

    • 命名空间
    • 封闭空间
    • js模块化mvc(数据层、表现层、控制层)
    • seajs
    • 变量转换成对象的属性
    • 对象化

    2、请说出三种减低页面加载时间的方法

    • 压缩css、js文件
    • 合并js、css文件,减少http请求
    • 外部js、css文件放在最底下
    • 减少dom操作,尽可能用变量替代不必要的dom操作

    3、你所了解到的Web攻击技术

    (1)XSS(Cross-Site Scripting,跨站脚本攻击):指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或者JavaScript进行的一种攻击。
    (2)SQL注入攻击
    (3)CSRF(Cross-Site Request Forgeries,跨站点请求伪造):指攻击者通过设置好的陷阱,强制对已完成的认证用户进行非预期的个人信息或设定信息等某些状态更新。

    4、web前端开发,如何提高页面性能优化?

    内容方面:

    1.减少 HTTP 请求 (Make Fewer HTTP Requests)

    2.减少 DOM 元素数量 (Reduce the Number of DOM Elements)

    3.使得 Ajax 可缓存 (Make Ajax Cacheable)

    针对CSS:

    1.把 CSS 放到代码页上端 (Put Stylesheets at the Top)

    2.从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)

    3.精简 JavaScript 与 CSS (Minify JavaScript and CSS)

    4.避免 CSS 表达式 (Avoid CSS Expressions)

    针对JavaScript :

    1. 脚本放到 HTML 代码页底部 (Put Scripts at the Bottom)

    2. 从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)

    3. 精简 JavaScript 与 CSS (Minify JavaScript and CSS)

    4. 移除重复脚本 (Remove Duplicate Scripts)

    面向图片(Image):

    1.优化图片

    2 不要在 HTML 中使用缩放图片

    3 使用恰当的图片格式

    4 使用 CSS Sprites 技巧对图片优化

    5、前端开发中,如何优化图像?图像格式的区别?

    优化图像:

    1、不用图片,尽量用css3代替。 比如说要实现修饰效果,如半透明、边框、圆角、阴影、渐变等,在当前主流浏览器中都可以用CSS达成。

    2、 使用矢量图SVG替代位图。对于绝大多数图案、图标等,矢量图更小,且可缩放而无需生成多套图。现在主流浏览器都支持SVG了,所以可放心使用!

    3.、使用恰当的图片格式。我们常见的图片格式有JPEG、GIF、PNG。

    基本上,内容图片多为照片之类的,适用于JPEG。

    而修饰图片通常更适合用无损压缩的PNG。

    GIF基本上除了GIF动画外不要使用。且动画的话,也更建议用video元素和视频格式,或用SVG动画取代。

    4、按照HTTP协议设置合理的缓存。

    5、使用字体图标webfont、CSS Sprites等。

    6、用CSS或JavaScript实现预加载。

    7、WebP图片格式能给前端带来的优化。WebP支持无损、有损压缩,动态、静态图片,压缩比率优于GIF、JPEG、JPEG2000、PG等格式,非常适合用于网络等图片传输。

    图像格式的区别:

    矢量图:图标字体,如 font-awesome;svg

    位图:gif,jpg(jpeg),png

    区别:

    1、gif:是是一种无损,8位图片格式。具有支持动画,索引透明,压缩等特性。适用于做色彩简单(色调少)的图片,如logo,各种小图标icons等。

    2、JPEG格式是一种大小与质量相平衡的压缩图片格式。适用于允许轻微失真的色彩丰富的照片,不适合做色彩简单(色调少)的图片,如logo,各种小图标icons等。

    3、png:PNG可以细分为三种格式:PNG8,PNG24,PNG32。后面的数字代表这种PNG格式最多可以索引和存储的颜色值。

    关于透明:PNG8支持索引透明和alpha透明;PNG24不支持透明;而PNG32在24位的PNG基础上增加了8位(256阶)的alpha通道透明;

    优缺点:

    1、能在保证最不失真的情况下尽可能压缩图像文件的大小。

    2、对于需要高保真的较复杂的图像,PNG虽然能无损压缩,但图片文件较大,不适合应用在Web页面上。

    6、浏览器是如何渲染页面的?

    渲染的流程如下:

    1.解析HTML文件,创建DOM树。

    自上而下,遇到任何样式(link、style)与脚本(script)都会阻塞(外部样式不阻塞后续外部脚本的加载)。

    2.解析CSS。优先级:浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式;

    3.将CSS与DOM合并,构建渲染树(Render Tree)

    4.布局和绘制,重绘(repaint)和重排(reflow)

    作者:wdlhao
    链接:https://juejin.im/post/5a5cbd3ef265da3e324579c9
    来源:掘金
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    展开全文
  • 一个小白的四次前端面试经历

    万次阅读 多人点赞 2018-07-28 20:12:48
    做一个自我介绍,本人男,爱好女。曾以为自己可以改变世界,没想到被世界无情的摧残。来深圳之前那种找工作少于 1W 少跟我谈,变成了收到 offer 了 4000 包吃住挺好...
        

    做一个自我介绍,本人男,爱好女。曾以为自己可以改变世界,没想到被世界无情的摧残。来深圳之前那种找工作少于 1W 少跟我谈,变成了收到 offer 了 4000 包吃住挺好,由于现在还没有找到工作,有招前端工程师的可以和我留言和我联系一下嘿嘿,本人实际项目经验有些少,但是基础知识 html,css,js 这些基本知识还是挺扎实的。

    在深圳已经快两个星期了,从 7 月 22 号开始就一直在投简历,第一天投了 100 多份,之后每天就投几十份吧,在这其中面试了一共四家公司,其中有一家公司已经表示要我了,但是由于薪资问题还有他们公司只要我去了就只有我一个前端这样的问题,感觉不太适合的成长,就拒绝了。下面具体说一说四次面试经历,已经问到的问题,现在就做一次总结。

    本人由于现在在读大四(下半年开始读),所以去公司面试过程中难免会被问到自己的学历,比较尴尬,再加上自己的经验不足,所以小公司都会把我当成实习生来看待的感觉不是太好,因为实习生工资是有一些低的,感觉很难活下去。

    我因为租房的地方离四次面试的地方比较远,有三次都是 2 个小时左右的地铁上的时间,再加上走路找到公司的时间,所以每次走的都特别早,每次都差不多提前近一个小时就到了,第一次面试过程,我是提早了半个多小时到的,这是我来到这里第一次面试,比较重视,所以还专门去他公司的官网当中去看了看公司文化啥的,以为会被问到,然而四次下来没有一个公司问到我公司文化。第一次面试过程中一个应该算是全栈的技术人员来面试我的技术,每一个公司都会让你自己先做一个自我介绍的,当时脑子不好使了还是怎么了,就说了我叫 XXX,来自哪里,在哪里上的学,然后就没有在说话,面试官都楞了一下。(我特么长这么大从来没有见过这么快介绍完自己的)哈哈,因为我的简历上面写的东西都是真实比如自己的一些技能,自己的作品都是真实的,但是实际项目其实没有几个,这个技术人员着重问的我是我的技术能力中的东西。

    640?wx_fmt=png

    上面的是我的能力技能的简历,因为我面试之后猜的,他可能是一个全栈工程师,所以前端的一些技能我感觉可能没有我深入,但是他的经验肯定是比我高的,他一直都是问我的问题都是一些表面的东西。重点有几个。 H5 的一些新增的特性有哪些,我没有做具体的介绍,只是在坐地铁的过程中将 H5 的一些新增的特性记住的说了出来,比如 新增了一些语义化标签,拖拽,本地存储,离线存储,多线程,地理位置,多媒体标签音乐视频了,我当时连 svg,canvas 都忘记了说。我以为他会在其中打断我,让我对其中的一个东西做一个具体的介绍,没想到没有再问我。 第二个重点就是问了一下我封装 jQ 的时候具体实现了哪些方法,是如何封装的。我就简单的介绍了一下基本的功能,获取元素的一些方法,获得宽高,定位位置,事件,动画等一些功能,然后讲了一下简单的实现。他在中间也没有打断我说,也没有再继续问我这个问题,然后就换问题了,没有问我关于 es6 的问题,问到 node.js 的掌握程度,我说我用 node.js 通过 express,mysql 等一些模块做出了自己个人博客,有一些什么功能等等。他重点又问了我一些 mysql 的增删改查一些,内连接外连接知道是什么吗。其他的没有什么要说的了。我感觉他对我是比较满意的,这也是给我 offer 一家公司。接下来 HR 面试的时候,就主要问了住在哪里,就是看我们的忠心吧,会不会做东西做到一半跳槽了。我也就坚决表明了自己的决心,因为我人比较实在,只要还可以,只要能学到技术,一直待下去我也是没问题的。

    第二次面试就不是那么愉快了,因为他们公司招的人是主要做微信小程序为主的,我自己又是只是对微信小程序有一个简单的了解,并没有做出来过实际的项目,再加上这家公司要招的人说主要是想找一个来了就可以立马来上手工作的人,我也没有达到他的要求,也还可以吧,这家公司没有问太多的技术,只是对我的经历着重问了好多,如果说要问技术的话主要是问了 vue,vue 的原理,还有就是对微信小程序的看法是什样子的,我的回答让他不太满意吧或许,最后留下了一个等通知吧,我就已经知道没戏了,最后的一个问题都是这个你对公司还想有什么需要了解的吗。我问的他的是一个有点傻气的问题,我问公司包住吗?哈哈 接下来对我一阵教育,口头上都表示了对我的一些不满意,说现在的大学生出来之后应该是对技术保持着热情,而薪资待遇什么的都是次要的,感觉学习到了,因为我当时确实没有什么问题想问的,也不知道该问什么,我感觉什么都不说有点不好,反正就是一出门口就知道这次已经没戏了。

    第三家公司的招聘信息当中并没有提到招前端工程师,招的是软件工程师,我以为是招错了,所以多次联系确定之后去了他家的公司面试,这一家是做通讯的东西的,我感觉他们公司个个都是大牛。用 c 和 c++ 去开发操作系统,然后在操作系统上的一些 http、反正是一大堆通讯协议,对于我的能力技术我感觉他还是比较认可我的,因为底层的人应该是重基础的,问的我前端的问题比较少,问的我后台的知识,重点问的我的是 mysql 的语法,视图一些东西问的比较深入,他对前端新兴的技术不是那么了解,没有问我框架,只是问了我一些 html、css 原生的 js 的一些东西。他是看我的发展方向的,我问他我去他们公司主要去做什么事情。他说了好多我要干的工作,感觉就是除了操作系统之外的东西,我全部都需要干的那种。前端的系统的界面设计,再去用前端做出界面,还需要通过后台语言去把 ajax 请求存数据库,如果有需要的话我还需要出差去跟客户模拟展示这个功能,我还要会一些基本 linux 系统的指令,还需要读懂一些他们 c、c++ 的源码。我感觉我有点难受,这样的工作或许是好多工作了三四年的前端都不曾具备的能力吧。我唯一的一次发挥就是他看到我的简历上面写的是做过一个超市买卖商品的管理系统,让我拿着笔去跟他画一画具体的实现的过程,我感觉我讲的不是那么好,他心中应该是对我有一点点失望的。但是我也很难受,我面试的是一个前端工程师,我要做这么多的事情,所以这一次也不算失败吧,我说我现在有点达不到他们的要求,他说可以培养我,然后一点一点的来,我也不知道怎么吧,感觉这个工作不太适合我,或许会适合三四年后的我,但是绝对不适合现在的我,面试过程还算愉快,就是有一点不适合。

    第四家公司真的就是高大上了,在腾讯的旁边,先不说面试,先说腾讯,真的就是当时内心挺害怕的。有点不好意思的说就是当时站在腾讯大楼面前腿是有些瑟瑟发抖的。我想 BAT 应该是 90% 以上的前端工程师想进去的公司吧,我想以后有能力的时候也可以去他们的公司工作,当然我要付出好多的努力。咱们来说面试,这次面试是我这几次当中最开心快乐的一次,面试官真的是大牛,就是完全的让你发挥自己,他自己在我磕绊住的时候稍微换一个小小的话题就会让我继续把我的经验,技术说下去。怎么说呢,面试的过程我内心是非常快乐的,但是可能他对我的技术能力有一点就是感到我的能力经验或许会有一些不足。就问的我一些我的简历当中具体的项目中的问题来问我是如何解决的。总结下来就是下面几个。我做自我介绍的过程当中他对我的简历的一些东西来打断我来跟我比对,不会让我一直说到无话可说,然后问了一些我平时的学习方法。我做过一个仿京东首页的静态页面,他问的我是如何适配手机端的页面的。我用的是 rem 布局,他让我说 rem 布局的原理,然后我说完之后,我就疯狂的夸 rem 的优点,我说他不用写那种响应式的写好多套样式,写一套就行了,非常简单,方便。他问我有什么缺点,我就说所有的单位都是 rem 会去计算,可能性能上有一些不好。他问我还有呢,我实在是想不出他还有哪一点不好,所以我嗯哼的半天说我不知道,我感觉他挺好的了哈哈。接着我俩就开始笑。然后我有介绍了响应式布局,响应式布局需要写好几套样式,感觉有点麻烦。还有两种宽度固定,高度固定的布局方式,需要 UI 设计图非常好,是看布局的,当然我也就是简单的说了一下,并没有详细的说。 还有一个问题就是看到了封装 jQ,然后也是问的我实现的原理,功能。我说到功能的时候,说到了动画,他让我给他讲一下实现那个的过程。我那个已经是好几个月之前的事情了,说实话让我当场讲有一些困难,我讲的也并不好,但是还是讲完了。后来就是问了我 css 的一个最基本的问题 定位 有哪几种定位方式,有什么不同。我说心里话,如果这个问题是半年之前问的我,我肯定回答的非常好,但是无奈是现在,大概每一个用过他的人都知道该怎么使用,使用的过程中出现的问题。我讲出来的 东西是对的,但是讲出来的不是那么完整,就是缺少一些东西。相对定位的特性当中更没有说出不影响元素本身的特性(块级的还是支持 margin:auto; 行内元素还是行内元素和块级元素还是块级元素)。他当时是问了我的,还有其他的特性吗,我确实是想不起来了,所以有点遗憾当时没有说出来。因为就从这一点当中可以看出我整体的学习的一个知识体系,就是给了他一种我什么东西都学了但是掌握的不到位的感觉。相对定位中也没有提到 **行内元素支持宽高 *块级元素,内容撑开宽高 不支持 margin:auto:*** 的这一个特性,当然在这其中我是想到了 z-index 层级的关系的但是我不知道出于什么想法,没有把层级这个东西说出来,所以这一个问题是我在面试当中回答的特别不满意的地方。最后一个肯定会问的问题,我问了他一个我到现在还不是太明白的区块链到底是干什么的,他对这方面了解的不是太多,说对这个不敢妄加断论,但是他给我介绍了一下他们公司的这方面的东西,说是想要建立一个部门的,如果对这方面有兴趣以后如果可以进他们公司可以研究,他们公司主要是给自己做研发。我非常喜欢。之后他问我还有什么需要问的吗,我直接说我非常喜欢你们公司,希望可以来这里工作。我俩一直笑。后面的 HR 来面试我,我感觉他对我的印象可能不是那么好,后面他又去找老板或者是谁去了,那个人不在公司,所以说等通知,电话联系,总之如果可以去他们的那个公司的话,我感觉对我的成长是非常大的,我直接跟他们说了,我非常的喜欢他们公司。最后有一个举动感觉不是太礼貌,我当时因为想让他对我有一些印象,所以主动找他握手了,感觉不是太好的行为。

    总之了,感觉这边机会特别多,但是对于网络上的招聘信息,什么 8000-15000 什么的一些招聘,你也不要太相信这上面的价格,你自己的能力心里是有一点数的,一般达不到他们的要求的话,他们可能会录用你,但是工资绝对是到不了他们最低的那个的,肯定会比 8000 要低的感觉。

    反正我会一直在前端这个圈子里面一直捣鼓下去的,我希望我还可以保持现在的努力,可以保持现在的热情,明天会更好!!


    作者:一步一步向上爬

    https://www.cnblogs.com/z937741304/p/9375226.html


    640?wx_fmt=png

    展开全文
  • 前端常见面试

    万次阅读 多人点赞 2018-09-26 19:48:35
    1.define介绍一下 define是amd(异步模块加载机制)的api,第一个参数是模块名称(可选),第二个参数是数组,包含所有依赖的模块(可选),第三个参数可以是一个函数或者是一个js对象。 (1) 如果第三个参数是回调...

    1.define介绍一下
    define是amd(异步模块加载机制)的api,第一个参数是模块名称(可选),第二个参数是数组,包含所有依赖的模块(可选),第三个参数可以是一个函数或者是一个js对象。
    (1) 三个参数:如果第三个参数是回调函数的话,异步加载完依赖的模块之后,执行回调函数,在回调函数中可以直接使用依赖的模块,他们按依赖声明顺序作为参数提供给回调函数。回调函数执行结束之后,通知依赖于自己的模块自己已经可用。
    (2)两个参数:当第一个参数省略的话,就定义了一个匿名模块,这时候模块文件的文件名就是模块名。这将会使模块是高度可用的。
    (3)一个参数: define 的前面两个参数都可以省略;第三个参数有两种情况:一种是 JavaScript 对象,另一种是一个函数。
      如果是对象,可以是包含方法的对象或者是只提供数据。后者和 JSONP非常类似,因此,AMD可以认为包含了一个完整的JSONP实现。模块演变为一个简单的数据对象,这样的数据对象是高度可用的,而且因为是静态对象,它也是CDN友好的,可以提高JSONP的性能。
      如果是函数,其用途之一是快速开发实现。适用于较小型的应用,该方式无需提前考虑需要引入的模块,只需使用时,require 即可。

    define(function(){
        var a = require("A");
    })
    123
    

    define函数在执行的时候,会调用函数的 toString 方法,并扫描其中的 require 调用,提前载入这些模块,载入完成后再执行。
    注意:Opera 不能很好的支持函数的 toString 方法,因此,在浏览器中它的适用性并不强。但是使用构建工具打包时,构建工具会扫描 require 并强制载入依赖模块。
    2.express是什么?
    Express是一个最小的,灵活的Node.js Web应用程序开发框架,它提供了一套强大的功能来开发Web和移动应用程序。 它有助于基于Node Web应用程序的快速开发。
    特点:1、可以设置 中间件来响应http请求
    2、定义了路由用于执行不同的http请求动作
    3、可以通过模板传递参数来动态渲染html页面

    3.require是什么?
    异步加载模块的加载器
    4.var,let,const区别
    (1)var存在变量提升,let和const不存在变量提升,所以只能在变量声明之后使用,否则会报错。
    (2)const不可修改,声明时,直接初始化,var,let可修改,但是如果const指向的是一个引用值,只需要保证引用值的地址不改变即可。
    (3)let和const都是块级作用域,var是函数级作用域。
    (4)let,const都不允许在相同的作用域内声明同一变量。
    5.用过哪些pc端以及移动端框架?
    pc端:vue.js、bootstrap、jQuery、zepto、node.js、
    移动端框架:zepto
    6.事件冒泡、事件委托以及事件捕获?
    事件冒泡就是子级元素的某个事件被触发,它的上级元素的该事件也被递归执行。冒泡的终点是window。
    阻止事件冒泡在子级元素上面加上e.stopPropagation()阻止事件冒泡。
    事件委托其实是使用了冒泡的原理,从点击的元素开始,以递归方式的向父元素传播事件,这样做的好处是对于大量要处理的元素,不必为每个元素都绑定事件,只需要在他们的父元素上绑定一次即可,提高性能。 还有一个好处就是可以处理动态插入dom中的元素,直接绑定的方式是不行的。
    事件捕获是最外层的事件先被触发,最后才是我们点击的button事件被触发,这便是事件捕获。
    阻止事件捕获的方式是e.stopPropagation()。
    7.on、bind、live(jQuery)的区别
    bind是用来绑定一个或多个事件。
    live也可以绑定一个和多个事件,但是它还可以为新增加的元素绑定事件。
    on是前两种方式的结合,不仅如此on方法还多了一个selector方法,也就是子类选择器,还可以事件委托

    $("div").on("click","p",function(){
            alert(1);
        })
    

    8.call,apply,bind的区别
    共同点:都是在调用时,动态指定函数中的this
    不同点:1.call,apply借用,临时绑定;2.bind 永久绑定
    返回值:1.call,apply不创建新函数,仅调用原函数;2.bind基于原函数,创建新函数对象,之后调用的其实是新函数对象
    参数:1.call,apply在调用的时候传入所有参数call,要求独立传入每个参数,apply,要求将参数放入数组,统一传入;2,bind可在创建函数提前绑定部分参数,调用函数时传递剩余参数。
    由于IE6 ~ IE8不支持bind,所以需要兼容:

    if (!function() {}.bind) {
        Function.prototype.bind = function(context) {
            var self = this
                , args = Array.prototype.slice.call(arguments);
                
            return function() {
                return self.apply(context, args.slice(1));    
            }
        };
    }
    

    9.在前端开发中,有一部分用户行为会频繁的触发事件,而对于DOM操作,资源加载等耗费性能的处理,很可能会导致卡顿,甚至浏览器的崩溃。防抖和节流就是为了解决这一类的问题。

    防抖:

    理解:在车站上车,人员上满了车才发走重点是人员上满触发一次。
    场景:实时搜索,拖拽。
    实现: //每一次都要清空定时器,重新设置上计时器值,使得计时器每一次都重新开始,直到最后满足条件并且等待delay时间后,才开始执行handler函数。

    function debunce(handler,delay){ 
      //handler是要传入的进行防抖的函数,delay是等待时间。   
       var timer = null;
       return function(){   
            var _self = this,
            args = arguments;  
            clearTimeout(timer);        //每次都要清除这个定时器       
            timer = setTimeout(function(){    //重新开启定时器                        
                             handler.apply(_self,args);    
                         },delay);     } 
    
    

    节流:

    理解:大于等于10分钟发一次车,重点是一定间隔时间就会触发一次。 (即预定一个函数只有在大于等于执行周期时才会执行,周期内不执行)。
    场景:窗口调整(调整大小),页面滚动(滚动),抢购时疯狂点击(鼠标按下)
    实现: //处理程序是要传入的进行节流的函数,wait是上述的间隔时间。 //使用时间戳进行时间的计算。

       function throttle(handler,wait){
         //handler是要进行节流的函数,wait是等待时间        
             var lastTime = 0;  
             return function(){     
                      var nowTime = new Date).getTime();    //获取当前时间              
                      if(nowTime - lastTime> wait){      
                               handler.apply(this,arguments);      
                               lastTime = nowTime;      //更新最后时间            
                       }           
                }
      }
    

    懒加载

    前言:在我们闲暇无事的时候,总是看看这个、那个的网站,比如京东、天猫、淘宝什么的,当我们再看的时候会出现照片闪了一下的情况,这是正常的,因为图片刚刚加载出来,这个也就是懒加载,如果你在打开网页的时候,一下把图片都请求出来,你可能没看几秒就退出了,一是浪费了你的流量,二是用户体验差,一进入这个网站会浪费很多流量,所以会造成遗失大量的用户。

    原理:先将img标签中的src链接设为同一张图片(空白图片),将其真正的图片地址存储再img标签的自定义属性中(比如data-src)。当js监听到该图片元素进入可视窗口时,即将自定义属性中的地址存储到src属性中,达到懒加载的效果。
    这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢,页面卡顿或崩溃等问题。

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>LazyLoad</title>
        <style type="text/css">
            img {
                display: block;
                width: 500px;
                height: 400px;
            }
        </style>
    </head>
    <body>
      <img src='./1.png'></img>
      <img src='./2.png'></img>
      <img src='./3.png'></img>
      <img src='./4.png'></img>
      <img src='./5.png'></img>
        <script type="text/javascript">
            var aImg = document.querySelectorAll('img');
            var len = aImg.length;
            var n = 0;//存储图片加载到的位置,避免每次都从第一张图片开始遍历
            window.onscroll = function() {
                var seeHeight = document.documentElement.clientHeight;
                var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
                for (var i = n; i < len; i++) {
                    if (aImg[i].offsetTop < seeHeight + scrollTop) {
                        if (aImg[i].getAttribute('src') == '') {
                            aImg[i].src = aImg[i].getAttribute('guoyu-src');
                        }
                        n = i + 1;
                        console.log('n = ' + n);
                    }
                }
            };
        </script>
    </body>
    </html>
    

    10.常见的HTTP状态码你了解多少?描述一下以下状态码
    (1)200 ,请求成功,一切正常,数据成功返回
    (2)301,永久性重定向,是指所请求的文档在别的地方;文档新的URL会在定位响应头信息中给出。浏览器会自动连接到新的URL。
    (3)302,临时重定向,该状态码表示请求的资源已被分配了新的URI,希望用户(本次)能使用新的URI访问。
    (4)303,该状态码表示由于请求对应的资源存在着另一个URI,应使用GET方法定向获取请求的资源
    (5)403,Foribidden 服务器端理解本次请求,但是拒绝执行任务,没有权限访问
    (6)404,NOT,found 请求的资源,网页无法找到,不存在
    (7)503,服务器端无法响应,服务器由于在维护或已经超载而无法响应
    11.什么情况下会遇到跨域,描述一下前端常见处理跨域的几种方式。并封装一个jsonp原理
    浏览器最核心,最基本的安全功能是同源策略。限制了一个源中加载文本或者脚本与其他源中资源的交互方式,当浏览器执行一个脚本时会检查是否同源,只有同源的脚本才会执行,如果不同源即为跨域。
    (1)Jsonp:原理就是利用了script标签不受同源策略的限制,在页面中动态插入了script,script标签的src属性就是后端api接口的地址,并且以get的方式将前端回调处理函数名称告诉后端,后端在响应请求时会将回调返还,并且将数据以参数的形式传递回去。
    (2)CORS:(跨域资源共享)是一种允许当前域的资源被其他域的脚本请求访问的机制。
    当使用XMLHttpRequest发送请求时,浏览器如果发现违反了同源策略就会自动加上一个请求头:origin,后端在接受到请求后确定响应后会在Response Headers中加入一个属性:Access-Control-Allow-Origin,值就是发起请求的源地址,浏览器得到响应会进行判断Access-Control-Allow-Origin的值是否和当前的地址相同,只有匹配成功后才进行响应处理。
    现代浏览器中和移动端都支持CORS,IE下需要8+
    (3)服务器跨域,服务器中转代理
    前端向本地服务器发送请求,本地服务器代替前端再向服务器接口发送请求进行服务器间通信,本地服务器是个中转站的角色,再将响应的数据返回给前端。
    (4)widow.postMessage(html5提供的新方法)
    可以使用它来向其它的window对象发送消息,无论这个window对象是属于同源或不同源,目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。
    调用postMessage方法的window对象是指要接收消息的那一个window对象,该方法的第一个参数message为要发送的消息,类型只能为字符串;第二个参数targetOrigin用来限定接收消息的那个window对象所在的域,如果不想限定域,可以使用通配符 * 。
    需要接收消息的window对象,可是通过监听自身的message事件来获取传过来的消息,消息内容储存在该事件对象的data属性中。

    12.Web前端应该从哪些方面来优化网站性能
    (1)减少页面体积,提升网络加载
    静态资源压缩合并,(JS/css代码压缩合并,雪碧图)
    静态资源缓存
    使用CDN(内容分发网络)加载资源更快
    (2)优化页面渲染
    css放在前面,js放后面
    懒加载
    减少dom操作
    13.浏览器端存储有哪些,并描述他们的区别。
    cookie, localStorage ,sessionStorage ,web SQL, indexedDB,他们都是保存在浏览器端,且同源的。
    区别:
    1.cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。
    2.存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,2.5M~10M(根据浏览器的不同)。web SQL与indexedDB无上限。
    3.数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。web SQL与indexedDB永久有效
    4.作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localStorage ,cookie,web SQL,indexedDB在所有同源窗口中都是共享的。
    5.web SQL是关系数据库,引入了一组使用 SQL 操作客户端数据库的 API。indexedDB是非关系数据库
    14.说说get和post请求
    1.如果不设定请求方式,默认是get方式
    2.GET请求只能进行url编码,而POST支持多种编码方式。
    3.GET请求参数会被完整保留在浏览器历史记录里,而POST中的参数不会被保留。
    4.GET请求在URL中传送的参数是有长度限制的,而POST没有。
    5.对参数的数据类型,GET只接受ASCII字符,而POST没有限制。
    6.安全性,GET比POST更不安全,因为参数直接暴露在URL上,所以不能用来传递敏感信息。GET参数通过URL传递,POST放在Request body中。
    7.GET产生一个TCP数据包;POST产生两个TCP数据包。(对于GET方式的请求,浏览器会把http header和data一并发送出去,服务器响应200(返回数据);而对于POST,浏览器先发送header,服务器响应100 continue,浏览器再发送data,服务器响应200 ok(返回数据))
    8.get 后退按钮/刷新无影响,post数据会被重新提交。
    9.get可被收藏为书签,post不可收藏为书签。
    15. 一个页面从输入 URL 到页面加载完的过程中都发生了什么事情?
    加载过程:
    浏览器根据 DNS 服务器解析得到域名的 IP 地址
    向这个 IP 的机器发送 HTTP 请求
    服务器收到、处理并返回 HTTP 请求
    浏览器得到返回内容
    渲染过程:
    根据 HTML 结构生成 DOM 树
    根据 CSS 生成 CSSOM
    将 DOM 和 CSSOM整合形成 RenderTree
    根据 RenderTree 开始渲染和展示
    遇到<script时,会执行并阻塞渲染
    16.实现你知道的数组去重方法,(最少三种
    (1)set

    function handle() {
    return Array.from(new Set(arr));
    }
    

    (2)indexOf

    Var out = [];
    arr.forEach(function(ele) {
    	if(out.indexOf(ele) == -1) {
    		out.push(ele);
    	}
    })
    

    (3)利用对象的属性不能相同的特点进行去重

    Var out = {};
    Var outArr = [];
    for(var i = 0; i < arr.length; i++) {
    	if(!out[arr[i]]) {
    		out[arr[i]] = 1;
    		outArr.push(arr[i])
    	}
    }
    

    (4)使用splice

    var len = arr.length
    for(var i = 0; i < len; i++) {
    	for(var j = i + 1; j < len; j++) {
    	if(arr[i] == arr[j]) {
    		arr.splice(j,1);
    		len--;
    		j--;
    		}
    	}
    }
    

    17.实现一个深拷贝
    (1)

    function deepClone() {
    return JSON.parse(JSON.stringify(arr));
    }
    

    (2)

    function deepClone(obj) {
    	var newObj = obj instanceof Array ? [] : {};
    	if(typeof obj != 'object') return obj;
    	for(var prop in obj) {
    	    newObj[prop] = typeof obj[prop] == 'object' ? deepClone(obj[prop]) : obj[prop] 
    	}
    	return newObj;
    }
    

    18.TCP三次握手与四次挥手?
    三次握手的原因是:TCP的三次握手最主要是防止已过期的连接再次传到被连接的主机。
    在这里插入图片描述
    四次挥手的原因是,害怕服务器端有数据还没有传完
    在这里插入图片描述
    18.TCP与UDP的区别

    1、TCP面向连接(如打电话要先拨号建立连接);UDP是无连接的,即发送数据之前不需要建立连接
    2、TCP提供可靠的服务。也就是说,通过TCP连接传送的数据,无差错,不丢失,不重复,且按序到达;UDP尽最大努力交付,即不保证可靠交付
    3、TCP面向字节流,实际上是TCP把数据看成一连串无结构的字节流;UDP是面向报文的,
    4、UDP没有拥塞控制,因此网络出现拥塞不会使源主机的发送速率降低(对实时应用很有用,如IP电话,实时视频会议等)
    5、每一条TCP连接只能是点到点的;UDP支持一对一,一对多,多对一和多对多的交互通信
    6、TCP首部开销20字节;UDP的首部开销小,只有8个字节
    7、TCP的逻辑通信信道是全双工的可靠信道,UDP则是不可靠信道

    19.http是什么?
    HTTP是超文本传输协议,它是TCP/IP协议的一个应用层协议,用于定义WEB浏览器与WEB服务器之间交换数据的过程以及通迅的格式。
    20.实现元素的垂直水平居中方式
    (1) 设置定位,margin为自身的的一半,top:50%,left:50%;position:absolute;
    (2) transform:translate(-50%,-50%)
    (3)flex布局 justify-center:center //垂直方向;
    align-items:center // 水平方向
    (4)margin:auto;position:absolute;left:0;top:0;right:0;bottom:0

     .wrapper {
                width: 500px;
                height: 500px;
                border: 1px solid #ccc;
                position: relative;
            }
            .wrapper .box {
                position: absolute;  
                top:50%;                
                left: 50%;
                margin: -50px -50px;   
                width: 100px;
                height: 100px;
                background-color: blueviolet;
            }
    

    (2) transform:translate(-50%,-50%)
    (3)flex布局 justify-center:center;align-items:center

     .wrapper {
               width: 500px;
               height: 500px;
               border: 1px solid #ccc;
               display: flex;
               justify-content: center;
               align-items: center;
           }
           .wrapper .box {
               width: 100px;
               height: 100px;
               background-color: blueviolet;
           }
    

    (4)margin:auto;position:absolute;left:0;top:0;right:0;bottom:0

      .wrapper {
                width: 500px;
                height: 500px;
                position: relative;
                border: 1px solid #ccc;
            }
            .wrapper .box {
                position: absolute;
                left: 0;
                right: 0;
                top:0;
                bottom: 0;
                margin: auto;
                width: 100px;
                height: 100px;
                background-color: blueviolet;
            }
    

    21.http与https的区别
    为了数据传输的安全,HTTPS在HTTP的基础上加入了SSL协议,SSL依靠证书来验证服务器的身份,并为浏览器和服务器之间的通信加密。
    http是超文本传输协议,信息是明文传输,https则是具有安全性的ssl加密传输协议。
    http的连接很简单,是无状态的;HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,比http协议安全。
    22.重排(回流)和重绘是什么?什么情况下会触发重排和重绘。
    重绘:dom节点的css样式颜色的变化过程叫做重绘 改变的是cssTree 一部分变化,对randerTree影响相对较小。所以相对与重排而言对浏览器性能影响较小
    重排:js动态的修改dom 即更改了DOM树了 更改dom树之后 renderTree就变了,renderTree变了也就是要重新建立一个renderTree了 ,这个过程叫做重排。
    回流触发的情况:页面首次渲染;浏览器窗口大小发生改变;元素尺寸或位置发生改变;元素内容变化(文字数量或图片大小等等);元素字体大小变化;添加或者删除可见的DOM元素;触发display
    重绘触发条件:当页面中元素样式的改变并不影响它在文档流中的位置时(例如:color、background-color、visibility等),浏览器会将新样式赋予给元素并重新绘制它。
    性能优化:避免频繁的样式操作,最好一次性重写style,或者一次性更改class,避免频繁操作dom,对具有复杂动画的元素使用绝对定位,使它脱离文档流,否则会引起父元素及后续元素频繁回流。
    23.浏览器执行时间线:
    根据js执行那一刻开始的执行顺序 浏览器加载的时间线
    1.创建document对象,开始解析web页面 这时document.readyState 等于’loading’
    2.遇到link标签(外部引用css)创建线程加载,并继续解析文档, 即异步加载
    3.遇到非异步的script标签,浏览器加载并阻塞,等待js加载完成
    4.遇到异步的script标签,浏览器创建线程加载,并继续解析文档。对于async属性的脚本,脚本加载完成后立即执行;对于defer属性的脚本,脚本等到页面加载完之后再执行(异步禁止使用document.write)
    5.遇到img等,先正常解析dom结构,然后浏览器异步加载src,并继续解析文档
    6.当文档解析完成之后(即renderTree构建完成之后, 此时还未下载完对吧),document.readyState=‘interative’。活跃的 动态的
    7.文档解析完成后,所有设置有defer的脚本会按照顺序执行。
    8.文档解析完成之后 页面会触发document上的一个DOMContentLoad事件
    9.当页面所有部分都执行完成之后 document.readyState =‘complete’ 之后就可以执行window.onload事件了
    24.异步加载js
    javascript 异步加载 的 三种方案
    1.defer 异步加载,但要等到dom文档全部解析完才会被执行。只有IE能用。
    2.async 异步加载,加载完就执行,async只能加载外部脚本,不能把js写在script 标签里。 (1.2 执行时也不阻塞页面)
    3.创建script,插入到DOM中,加载完毕后callBack,
    25.Webpack与gulp区别
    Gulp

    Gulp为了规范前端开发流程,实现前后端分离,模块化开发,版本控制,文件合并与压缩,mock数据等功能的一个前端自动化构建工具。

    Webpack

    webpack是前端资源模块化管理工具和打包工具。可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等需要时再异步加载。通过 loader的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、AMD 模块、ES6 模块、CSS、图片、JSON、Coffeescript、LESS 等。

    两者区别:

    侧重点不同:首先gulp是侧重于前端开发的整个过程的控制管理。着重于控制流程。例如自动刷新页面,雪碧图,压缩js,css,编译less,检查语法等。
    webpack侧重于模块打包。把开发中所有资源都看做模块。webpack是通过loader(加载器)和plugins(插件)对资源进行处理。是模块化方案。不管是AMD/CMD/ES6风格的模块化,都能编译成浏览器认识的js.

    26.xxs介绍一下
    xss表示跨站脚本攻击,它与SQL注入攻击类似,SQL注入攻击中以SQL语句作为用户输入,从而达到查询/修改/删除数据的目的,而在xss攻击中,通过插入恶意脚本,实现对用户浏览器的控制。
    xss攻击可以分成两种类型:
    1.非持久型xss攻击,是一次性的,仅对当次的页面访问产生影响。
    2.持久性攻击,会把攻击者的数据存储在服务器端,攻击行为将伴随着攻击数据一直存在。
    26.js为什么需要异步,以及Js异步实现方法
    Javascript语言的执行环境是"单线程",单线程的好处是实现起来比较简单,执行环境相对单纯;坏处是只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行。导致浏览器长时间无响应,交互性差。
    因而产生了可以使js异步的方式:
    (1)回调函数:
    缺点:会造成回调地狱,可维护性,阅读性差,并且每个任务只能指定一个回调函数。
    优点:简单,容易理解和部署
    (2)事件监听
    缺点:变成了事件驱动,运行流程不清晰
    优点:比较容易理解,可以绑定多个事件,每个事件可以指定多个回调函数,而且可以降低耦合度,有利于实现模块化。
    (3)promise
    优点:解决了回调函数的回调地狱,实现了链式调用
    缺点:无法取消Promise,一旦新建它就会立即执行,无法中途取消;如果不设置回调函数,Promise内部抛出的错误,不会反应到外部;当处于Pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。
    (4)generator

    function *myGenerator(a) {
              var b = yield ajax();
              yield ajax();
            }
            var it = myGenerator();
            function ajax() {
                if(xhr.status == 200) {
                    it.next(5);
                }
            }     此时b就是5.
    

    优点:解决了promise的链式调用,可读性更强
    缺点:执行完一条语句,需要调用next执行下一条语句
    (5)async

    async function myGenerator(a) {
              var b = await ajax();
              await ajax();
              return  response;
            }
    

    优点:上一个ajax执行完,就会调用下一个ajax执行,不需要next。他还会生成一个promise。
    myGenerator().then(function () {},function () {})

    27.对于模块化的理解以及怎么在书写代码中体现
    把一坨代码划分成很多的模块来编写,减少了代码多而复杂的现象,模块化开发的一个实现就是组件化,组件化可以把你的代码有结构的分为一个个小的组件,各个小的组件之间代码是独立的,这样的代码维护起来比较简单方便,也方便了多人协作开发时出现变量复用,函数复用的现象,组件化还有一个优点就是可以代码复用,在不同的网站中如果我们想要这样的效果就可以把代码直接复制过来使用就可以啦,我们所用的webpack打包工具就是一种可以实现模块化开发的工具,vuejs也是以组件化为基础的框架
    28.闭包
    当内部函数被保存到外部时,将会生成闭包。闭包会导致原有作用域链不释放,造成内存泄露。
    闭包的用途:1.实现公有变量 eg:函数累加器;2.可以做缓存 eg:eater
    3.可以实现封装,属性私有化。 eg: new Person();
    使用闭包的注意点:
    (1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。
    (2)闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象使用,把闭包当作它的公用方法,把内部变量当作它的私有属性,这时一定要小心,不要随便改变父函数内部变量的值。
    29.XHTML与HTML的有何异同?
    HTML 和 XHTML 的区别简单来说,XHTML 可以认为是 XML 版本的 HTML,为符合 XML 要求,XHTML 语法上要求更严谨些。
    两者的区别,粗略可以分为两大类比较:
    1.功能上的差别
    主要是XHTML可兼容各大浏览器、手机以及PDA,并且浏览器也能快速正确地编译网页。
    2.书写习惯的差别。
    (1)XHTML要求正确嵌套<p><strong></strong></p>
    (2)XHTML所有元素必须关闭<p></p>
    (3)XHTML区分大小写
    (4)XHTML属性值要加引号<table width="800"></table>
    (5)XHTML用id属性代替name属性
    (6)属性值不能简写<input type="radio" checked=“checked”></input>
    30.介绍一下CSS的盒子模型?弹性盒子模型是什么?
    (1)有两种,混杂盒模型、标准 W3C 盒子模型; IE 的 内容区 包含了 content,border 和 padding;
    (2)标准盒模型:内容(content)、填充(padding)、边界(margin)、边框(border)。内容区仅包括content区。
    弹性布局模型就是根据所处的设备,视图大小,进行自动的宽高改变的一个具有更强的空间可塑能力的模型。
    31.Doctype的作用?标准模式与兼容模式各有什么区别?
    !DOCTYPE>告知浏览器的解析器用什么文档标准解析这个文档DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现,否则用标准模式解析文档。
    标准模式是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
    32.HTML5 为什么只需要写 ?
    HTML5 不基于 SGML,因此不需要对DTD进行引用,但是需要doctype来规范浏览器的行为(让浏览器按照它们应该的方式来运行);而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。
    SGML和DTD是什么?

    33.行内元素有哪些?块级元素有哪些? 空(void)元素有那些?
    (1)行内元素有:a b span img input select strong
    (2)块级元素有:div ul ol li dl dt dd h1 h2 h3 h4…p
    (3)常见的空元素:
    <br> <hr> <img> <input> <link> <meta>

    34.导入样式时,使用link和@import有什么区别?
    (1)link属于XHTML标签,除了加载CSS外,还能用于定义RSS, 定义rel连接属性等作用;而@import是CSS提供的,只能用于加载CSS;
    (2)页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;
    (3)import是CSS2.1 提出的,只在IE5以上才能被识别,而link是XHTML标签,无兼容问题;
    35.介绍一下你对浏览器内核的理解?
    主要分成两部分:渲染引擎和JS引擎。
    渲染引擎:负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等),以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
    JS引擎则:解析和执行javascript来实现网页的动态效果。

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

    常见的浏览器内核有哪些?
    Trident内核:IE,360,搜狗浏览器等。
    Gecko内核:firebox
    Presto内核:Opera7及以上。
    Webkit内核:Safari,Chrome等。
    36.html5有哪些新特性、移除了哪些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?
    增加的新特性:
    1.绘画 canvas;2.多媒体标签video 和 audio ;
    3.本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;sessionStorage 的数据在浏览器关闭后自动删除;
    4.语意化更好的内容元素,比如 article、footer、header、nav、section;
    5.表单控件,calendar、date、time、email、url、search;
    6.新的技术webworker, websockt, Geolocation;
    移除的元素:
    纯表现的元素:basefont,big,center,font, s,strike,tt,u;
    对可用性产生负面影响的元素:frame,frameset,noframes;
    支持HTML5新标签:
    IE8/IE7/IE6支持通过document.createElement方法产生的标签,
    可以利用这一特性让这些浏览器支持HTML5新标签,
    浏览器支持新标签后,还需要添加标签默认的样式。
    当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
    如何区分: DOCTYPE声明\新增的结构元素\功能元素
    37.HTML5的离线储存怎么使用,工作原理能不能解释一下?
    在用户没有与因特网连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件。
    原理:HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术),通过这个文件上的解析清单离线存储资源,这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示。

    如何使用:
    1、页面头部像下面一样加入一个manifest的属性;
    2、在cache.manifest文件的编写离线存储的资源;

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

    38.在离线状态时,操作window.applicationCache进行需求实现?浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢?
    在线的情况下,浏览器发现html头部有manifest属性,它会请求manifest文件,如果是第一次访问app,那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储;如果已经访问过app并且资源已经离线存储了,那么浏览器就会使用离线的资源加载页面,然后浏览器会对比新的manifest文件与旧的manifest文件,如果文件没有发生改变,就不做任何操作,如果文件改变了,那么就会重新下载文件中的资源并进行离线存储。
    离线的情况下,浏览器就直接使用离线存储的资源。

    39.iframe有那些缺点?
    (1)iframe会阻塞主页面的onload事件;
    *搜索引擎的检索程序无法解读这种页面,不利于SEO;
    (2)*iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。
    使用iframe之前需要考虑这两个缺点。如果需要使用iframe,最好是通过javascript动态给iframe添加src属性值,这样可以绕开以上两个问题。

    40.Label的作用是什么?是怎么用的?
    label标签来定义表单控制间的关系,当用户选择该标签时,浏览器会自动将焦点转到和标签相关的表单控件上。

    <label for="Name">Number:</label> <input type=“text“name="Name" id="Name"/>
    <label>Date:<input type="text" name="B" /></label>
    

    41.HTML5的form如何关闭自动完成功能?
    给不想要提示的 form 或下某个input 设置为 autocomplete=off。
    42.如何实现浏览器内多个标签页之间的通信? (阿里)
    调用localstorge、cookies等本地存储方式
    43.webSocket如何兼容低浏览器?(阿里)
    Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基于 multipart 编码发送 XHR 、 基于长轮询的 XHR
    44.CSS 选择器有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?
    选择器:1.id选择器;2.类选择器;3.标签选择器;4.相邻选择器(h1 + p);5.子选择器(ul > li);6.后代选择器(li a);7.通配符选择器(*);
    8.属性选择器(element[attr] = str]);9.伪类选择器(a: hover)

    • 可继承的属性: font-size font-family color, UL LI DL DD DT;
    • 不可继承的属性:border padding margin width height ;
    • 优先级就近原则,同权重情况下样式定义最近者为准;
    • 载入样式以最后载入的定位为准;
      优先级为:
      !important >行内样式 > id > class > tag > *
      权重为:无穷大 > 1000 > 100 > 10 > 1 > 0
      CSS3新增伪类举例
      p:first-of-type
      p:last-of-type
      p:only-of-type
      p:only-child
      p:nth-child(n)
      :enabled :disabled 控制表单控件的禁用状态。
      :checked 单选框或复选框被选中。
      :read-only :write:only
      45.列出display的值,说明他们的作用。position的值, relative和absolute定位原点是?
      display的值:1.block 该元素显示为块级元素;none 此元素不会显示;inline-block 行级块元素;line 行级元素;list-item 此元素会作为列表显示;
      position的值:
      1.absolute生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位;
      2.fixed 生成绝对定位的元素,相对于浏览器窗口进行定位;
      3.relative 生成相对定位的元素,相对于其正常位置进行定位;
      4.static 默认值。没有定位;
      5.inherit 规定从父元素继承 position 属性的值;
      6.sticky:粘性定位,该定位基于用户滚动的位置。
      它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。
      46.一个满屏 品 字布局 如何设计?
     * {
                padding: 0;
                margin: 0;
            }
            html,body {
                width: 100%;
                height: 100%
            }
            .top {
                width: 50%;
                height: 50%;
                background-color: yellowgreen;
                margin: 0 auto;
            }
            .bottom {
                width: 100%;
                height: 50%;
            }
            .bottom .left {
                width: 50%;
                height: 100%;
                float: left;
                background-color: violet;
            }
            .bottom .right {
                width: 50%;
                height: 100%;
                float: right;
                background-color: #bbccff;
            }
    
        </style>
    </head>
    <body>
        <div class="top"></div>
        <div class="bottom"><div class="left"></div>
            <div class="right"></div></div>
    

    47.css新增的特性都有什么?
    圆角,边框阴影,文本阴影,渐变背景颜色,文本换行,引入文本库,边框背景图片,box-sizing更改盒模型,多列布局,弹性盒子,
    48.常见兼容性问题?

    49.如果需要手动写动画,你认为最小时间间隔是多久,为什么?(阿里面试题)
    一般显示器默认频率是60Hz,即1秒刷新60次,所以理论上最小间隔为1/60*1000ms = 16.7ms
    50.列举IE 与其他浏览器不一样的特性?
    1)IE支持currentStyle,Firefox使用getComputStyle;
    2)IE使用innerText,FireFox使用textContent;
    3)滤镜方面:IE:filter:alpha(opacity= num);Firefox:-moz-opacity:num;
    4)事件方面:IE:attachEvent:火狐是addEventListener;
    5)鼠标位置:IE是event.clientX;火狐是event.pageX;
    6)IE使用event.srcElement;Firefox使用event.target;
    7)IE中消除list的原点仅需margin:0即可达到最终效果;FIrefox需要设置margin:0;padding:0以及list-style:none;
    51.如何设计突发大规模并发架构?

    52、cssSprite是什么 ?有什么优缺点?
    CSS Sprites是一种网页图片应用处理方式,就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位。
    优点:减少网页的http请求,提高性能;减少图片的字节;减少了命名困扰;更换风格方便:只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变,维护起来更加方便。
    缺点:图片合成比较麻烦;背景设置时,需要得到每一个背景单元的精确位置,;维护合成图片时,最好只是往下加图片,而不要更改已有图片。
    53.CSS引入的方式有几种? link和import的区别是什么?
    css引入有4种:1,link引入。2,@improt引入。3,在页面添加<style</style标签。4,将样式直接写内联
    link和@import引入的区别:
    1.link是xhtml标签,除加载css样式外还有其他用处,@improt是css范畴只能加载css样式;
    2.link引入的样式是和页面同时加载,而@improt引入的样式是页面结构加载完毕后才开始加载;
    3.link是xhtml标签不存在兼容性问题,而@improt是在css2.1提出的不兼容低版本浏览器不兼容;
    4.link支持javascript对Dom样式进行改变,而@import不支持;
    54.前端页面有哪三层构成? 分别是什么? 作用是什么?
    构成:结构层、表示层、行为层
    分别是:HTML、CSS、JavaScript
    作用:HTML实现页面结构,CSS完成页面的表现与风格,JavaScript实现一些客户端的功能与业务。
    55.如何用CSS分别单独定义ie6 IE7 IE8 IE9 IE10的width属性
    width:8px\0; /ie8/
    +width:7px; /ie7/
    _width:6px; /ie6/
    56.在CSS中哪些属性可以同父元素继承。
    1、字体系列属性
    font:组合字体
    font-family:规定元素的字体系列
    font-weight:设置字体的粗细
    font-size:设置字体的尺寸
    font-style:定义字体的风格
    2、文本系列属性
    text-indent:文本缩进
    text-align:文本水平对齐
    line-height:行高
    color:文本颜色
    57.谈谈以前端的角度出发做好seo需要做什么
    seo是搜索引擎优化,为了提高网站的权重,增强搜索引擎友好度,以达到提高排名,增加流量,改善用户体验,促进销售的作用。
    (1)减少页面体积,提升网络加载
    静态资源压缩合并,(JS/css代码压缩合并,雪碧图)
    静态资源缓存
    使用CDN(内容分发网络)加载资源更快
    (2)优化页面渲染
    css放在前面,js放后面
    懒加载
    减少dom操作
    58.移动端(Android IOS)怎么做好用户体验?
    1.简化导航,帮助用户尽快的找到想要的内容。
    2.多考虑手势与触感,帮助用户更快更高效地完成交互。
    3.创造对话,增加用户交互感。
    4.动画化,能够吸引用户关注,并且能够帮助用户展示如何更好的设计和交互。
    5.善用新用户引导流程和表单,引导用户熟悉其功能。
    59.css基本语句的构成
    css语句的构成:
    1、(若干条)样式;2、样式的属性名;3、样式的属性值
    CSS的好处:
    1、CSS将HTML格式与内容分离,有利于对内容进行统一的格式设置和修改;2、CSS样式相比HTML格式化标记的功能更加丰富和强大;3、可以说css对于界面的美化起了很大作用
    60.document load 和document ready 的区别
    页面加载完成有两种事件
    1.load是当页面所有资源全部加载完成后(包括DOM文档树,css文件,js文件,图片资源等),执行一个函数
    问题:如果图片资源较多,加载时间较长,onload后等待执行的函数需要等待较长时间,所以一些效果可能受到影响
    2.$(document).ready()是当DOM文档树加载完成后执行一个函数 (不包含图片,css等)所以会比load较快执行
    在原生的jS中不包括ready()这个方法,只有load方法就是onload事件

    62.css 中的使用列布局是什么? 为了实现列布局我们需要指定哪些内容?

    63.描述css reset的作用和用途?
    不同的浏览器对默认样式的解释不一样,使用该方法去掉这些默认样式,即重新定义标签样式。不建议使用 * 选择器进行重写,这样会降低效率,影响性能。
    64.写出5 种以上ie6 bug 的解决方法,哪些你认为是解决起来最麻烦的?

    65.哪些浏览器支持html5?这些浏览器的内核分别是什么?
    主流浏览器对html5的支持情况:(1)Chrome,Firefox:支持html5很多年,而且有自动升级,支持最好;(2)Safari,Opera:同样支持html5很多年,支持也很好;(3)IE:IE10起比较好了,之前很差。
    66.什么是Web workers?为什么我们需要他?
    js的单线程机制会导致当有一些非常复杂的任务需要处理时,页面不得不需要等待任务处理完成才能响应用户的操作,这对于页面的响应及用户体验都会带来一些负面的影响,为了解决这个问题,H5提出了Web Worker,允许JavaScript创建多个线程,但是新创建的这些线程将作为子线程并且完全受主线程的控制。并且不得操作DOM,其实本质上还是单线程。 所以,我们可以把一些费时的任务交给Web Worker创建的子线程在后台完成,而前台页面依然可以处理用户的响应。
    67.写出至少三个CSS3中新添加的样式属性的名字及参数。
    1.background-clip(背景图片裁剪),border-box,padding-box,content-box,text
    2.background-size(背景图片尺寸)
    auto,cover(图片铺满整个背景,超出的位置裁剪),contain(尽量将背景图片铺满背景)
    3.word-wrap,normal,break-wrap,
    68.、多人项目中,你如何规划css文件样式命名。
    我的话可能会用文档定义css样式的作用和命名,然后所有成员都按文档写。。。
    如果有成员需要加入或者修改css样式,就需要修改文档,同时通知所有成员。。。
    69.你经常遇到的浏览器兼容性有哪些?通常是怎么处理的。

    70.HTML中div与span区别;
    1.div是块级元素, 实际上就是一个区域, 主要用于容纳其他标签。 默认的display属性是block;2. span是行内元素, 主要用于容纳文字。 默认的display属性是inline.

    72.列举5种以上表单元素中input的type类型,以及五种新的type类型;
    原来的:text,password,submit,CheckBox,radio
    h5新增:email;url;number;range;
    Date pickers (date, month, week, time, datetime, datetime-local)
    search;color
    73.alt和title分别表示什么含义以及具体应用体现;
    使用alt属性是当页面加载不出来图片的时候先说你alt;
    使用title属性,当鼠标悬浮在特定的元素上面的时候,显示title。
    74.对html语义化理解,以及语义化有哪些优点。
    根据内容的结构化和语义化,选择合适的标签。
    语义化优点:1.在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构;2.提高用户体验:例如title、alt、label标签的应用;3.有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息;4.方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;5.便于团队开发和维护,语义化更具可读性
    75.经常使用的页面开发工具级测试工具。
    vscode
    76.经常使用什么脚本库,开发或使用什么应用或组件;

    77.使用css如何让一个宽度为200px的div水平居中,(要求兼容ie,可提供多种方法);

    78.页面构造中你遇到过什么样的兼容问题,如何解决

    79.什么是css预处理器,简述优缺点;
    less
    80.css3中你最常用的有哪些?说明用法。

    81.请说出至少三种减少页面加载时间的方法。(加载时间是指感知的时间或者实际加载 的时间)

    82.实现 class为test的div 在屏幕宽为400一下的宽度为200,屏幕宽为400~800的情况下宽 度为350;

    83.实现当屏幕宽度大雨700,小于800是时引用外部样式style-7-9.css

    84.列一个手机端可以实现手势滑动的插件或类库

    85.对WEB标准以及W3C的理解与认识

    86.CSS中的class和id有什么区别。

    87.请说一下移动端常见的适配不同屏幕大小的方法。

    88.一个高宽未知的图片如何在一个比他大的容器内水平居中。

    89.定义链接四种状态的伪类的正确书写顺序是?

    90、超链接访问过后hover样式后会出现什么问题?如何解决。

    91、设置文字阴影属性。设置表格边框合并属性。

    92、文本强制换行。
    word-wrap:break-wrap
    93、display:none与visibility:hidden的区别是什么?
    display:none 不为被隐藏的对象保留其物理空间 visibility:hidden 为被隐藏的对象保留其物理空间
    94.CSS超过宽度的文字显示点点,必须要设置的属性。

    95.你经常遇到的浏览器兼容性有哪些?通常是怎么处理的。

    96.html5 中的应用缓存是什么?

    97.简单介绍boostrap栅格系统

    98.ie 和标准下有哪些兼容性的写法

    99.解释一下浮动和它的工作原理。
    浮动的标签只能被具有文本特性的标签所看到(,即display:inline/inline-block)或者触发bfc的标签(position:absolute,overflow:hidden,float:left/right)
    100.列举不同的清除浮动的方法,并指出他们各自适用的场景。
    101.object instanceof Function ,function instanceof Object?
    Instanceof的判断机制是:沿着A的__proto__这条线来找,同时沿着B的prototype这条线来找,如果两条线能找到同一个引用,即同一个对象,那么就返回true。如果找到终点还未重合,则返回false。
    1.Object, Function, Array等等这些都被称作是构造“函数”,他们都是函数。而所有的函数都是构造函数Function的实例。从原型链机制的的角度来说,那就是说所有的函数都能通过原型链找到创建他们的Function构造函数的构造原型Function.protorype对象,所以:
    Object instanceof Function 返回true
    2.与此同时,又因为Function.prototype是一个对象,所以他的构造函数是Object. 从原型链机制的的角度来说,那就是说所有的函数都能通过原型链找到创建他们的Object构造函数的构造原型Object.prototype对象,所以:
    Function instanceof Object 返回 true
    有趣的是根据我们通过原型链机制对instanceof进行的分析,我们不难得出一个结论:Function instanceof Function 依然返回true, 原理是一样的
    1.Function是构造函数,所以它是函数对象
    2. 函数对象都是由Function构造函数创建而来的,原型链机制解释为:函数对象的原型链中存在Function.prototype
    3. instanceof查找原型链中的每一个节点,如果Function.prototype的构造函数Function的原型链中被查到,返回true
    102.左边固定200px,右面自适应

     <style>
            .wrapper,body,html {
                width: 100%;
                height: 100%;
            }
            .wrapper {
                width: 150px;
                display: flex;
            }
            .wrapper .left {
                width:200px;
                height: 100%;
                background-color: pink; 
                flex-grow: 0;
                flex-shrink: 0;
            }
            .wrapper .right {
                height: 100%;
                background-color: yellow;
                flex-grow: 1;
                flex-shrink: 1;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
                <div class="left"></div>
                <div class="right"></div>
        </div>
    

    102.进行排序,说时间复杂度,空间复杂度
    103.var a = {b:1} 获取a.b
    JavaScript中,除了数字、字符串、布尔值、null和undefined外,其他的所有值都是对象。数组、函数等都是一个对象。
    Object 拥有一个类似 Hash表的数据结构, 以键值对来存储属性和方法
    104.数据基本类型,以及引用类型?
    null undefined string number bolean
    引用类型有Object、Array、Date、RegExp、function
    105.css常用的单位?
    1.px(像素);2.%(百分数);3.em(相对于夫级的font-size);4.rem(相对于根节点html的font-size,16px);5.vh,vw(移动端);
    106.jQuery的$ajax({}),如果有依赖关系怎么办?
    调用jQuery的defferd方法。

    var promise1 = $.ajax(url1);
    var promise2 = promise1.then(function(data){
    	return $.ajax(url2, { "data": data });
    });
    var promise3 = promise2.then(function(data){
    	return $.ajax(url3, { "data": data });
    });
    promise3.done(function(data){
    	// data retrieved from url3
    });
    

    107.实现快排:

     function quickSort(arr){
                //如果数组<=1,则直接返回
                if(arr.length<=1){return arr;}
                var pivotIndex=Math.floor(arr.length/2);
                //找基准,并把基准从原数组删除
                var pivot=arr.splice(pivotIndex,1)[0];
                //定义左右数组
                var left=[];
                var right=[];
                //比基准小的放在left,比基准大的放在right
                for(var i=0;i<arr.length;i++){
                    if(arr[i]<=pivot){
                        left.push(arr[i]);
                    }
                    else{
                        right.push(arr[i]);
                    }
                }
                //递归
                return quickSort(left).concat([pivot],quickSort(right));
            }                
    

    108.Object是什么?可以执行吗?
    是对象,在js里面万物皆对象,除了原始值,因而function,array等都是对象,因而可以执行。
    109.原型链?
    因为每个对象和原型都有原型,对象的原型指向原型对象,而父的原型又指向父的父的原型对象 ,这种原型层层连接起来的就构成了原型链。
    110.堆和栈?
    堆和栈存储的数据类型和处理速度不同,
    堆用于复杂数据类型(引用类型)分配空间,例如数组对象、object对象(引用类型的值通常大小不固定,所以被存储在堆内存中);它是运行时动态分配内存的,因此存取速度较慢。
    栈中主要存放一些基本类型(Undefined、Null、Boolean、Number 和 String)的变量和对象的引用,其优势是存取速度比堆要快,并且栈内的数据可以共享,但缺点是存在栈中的数据大小与生存期必须是确定的,缺乏灵活性。
    易混淆的是:

    var s = new String('abc');     //存放在堆里面
    var ss = 'abc'                       //存放在栈里面
    

    第一种是用new关键字来新建String对象,对象会存放在堆中,每调用一次就会创建一个新的对象;而第二种是在栈中,栈中存放值‘abc’和对值的引用。
    112.将行内元素变为块级元素
    (1)display
    (2)float
    (3)position(absolute和fixed)
    113.字符串常用的方法
    (1)substring
    substring(start开始位置索引,end结束位置索引)截取的位置不包含结束位置的字符,只写一个参数表示从开始位置截取最后,输入负值将变为零,哪个较小作为开始
    (2)slice(start开始位置索引,end结束位置索引)基本和substring相似,区别在参数为负数。当为负值时,表示相对于最后的位置的第几个,当第二个参数时大于第一个参数时返回空
    (3)substr(start开始位置索引,end需要返回字符个数),只传start时,从开始位置到最后,start为负值时,相对于最后位置的第几个,end为负值时,变为0
    (4)charAt(index)方法返回指定索引位置处的字符。如果超出有效范围(0与字符串长度减一)的返回空字符串
    (5)indexof(string)返回string对象内第一次出现字符串的位置。如果没有找到字符串,则返回-1.
    (6).lastindexof(string)倒序查找
    返回string对象中第一次出现的位置相应的索引。如果没有则返回-1;
    (7)split(str)将字符串以参数分割为数组
    (8)toLowerCase方法返回一个字符串,该字符串中的字母被转换成小写。
    (9)toUppercase
    (10)match()-方法可在字符串内检索指定值,或找到一个或多个正则表达式的匹配
    (11)search()方法返回与正则表达式查找内容的第一个字符串的位置。
    (12)replace()用来查找匹配一个正则表达式的字符串,然后使用新字符串代替匹配;
    数组的方法:
    (1)Push() 添加到最后 返回添加后的数组;
    (2)Unshift() 添加到最前面 返回添加后的数组;
    (3)Shift() 删除(从前面删除)返回处理后的数组;
    (4)Pop() 删除最后一项 返回处理后的数组
    (5)reverse() 颠倒数组中的元素的顺序
    (6)Join(str) 数组转化为字符串
    (7)slice(start,end) 截取数组中的从start(开始)到end(结束 不包含) 返回新数组,原数组不变
    (8)concat() 方法用于连接两个或多个数组。
    (9)splice(开始下标,个数,ele1,ele2…)剪接数组
    (10)forEach(function(ele,index,self){}) 循环遍历
    (11)sort(function() {})排序

    114.js循环机制?宏队列?
    事件循环的顺序是从script开始第一次循环,随后全局上下文进入函数调用栈,碰到macro-task就将其交给处理它的模块,处理完之后将回调函数放进macro-task的队列之中,碰到micro-task也是将其回调函数放进micro-task的队列之中。直到函数调用栈清空只剩全局执行上下文,然后开始执行所有的micro-task。当所有可执行的micro-task执行完毕之后。循环再次执行macro-task中的一个任务队列,执行完之后再执行所有的micro-task,就这样一直循环。
    macro-task(宏任务)包括:script(整体代码), setTimeout, setInterval, setImmediate, I/O, UI rendering。
    micro-task(微任务)包括:process.nextTick, Promises, Object.observe, MutationObserver
    注意:Promise构造函数中的第一个参数是在当前任务直接执行
    115.实现两栏布局,左面固定,右面自适应

    <div class='wrapper'>
       <div class='left'></div>
       <div class='right'></div>
    </div>
    

    (1)给left,position:absolute,right,margin-left:100px
    (2)给left,float:left,right,margin-left:100px,在夫级上清除浮动,给wrapper,overflow: hidden;
    (3)给right,flex-grow:1,flex-shrink:0,给wrapper,display:flex
    (4)给left,right加浮动,给right, width: calc(100% - 100px);

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

    万次阅读 多人点赞 2015-09-14 11:51:10
    HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应。 JavaScript: 数据类型、面向对象、继承、闭包、插件、作用域、跨域、...
  • 前端面试题三

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

    千次阅读 多人点赞 2019-04-17 11:23:57
    近来看到网上格式各样的web前端求职的面试题,接下来我用我的经验总结了一套在面试过程中高频率问到的面试题,希望能帮助各位求职者在求职的过程中顺利通过,废话不多说,直接说题。。。 一、HTML5部分 1.说一下对...
  • 前端面试经历

    2019-04-11 20:22:25
    聊一聊我的面试经历,那年数九寒冬,坐标北京,初冬的第一场雪,零下十几度。 如果你也是第一次找工作,不要忧伤不要焦虑,因为有一天,你也会像我现在这样,上班时间,开着微信和扣扣,该聊天时就聊天,像极一个...
  • Web前端面试——HTTP部分

    万次阅读 多人点赞 2018-09-14 08:39:17
    1.一次完整的HTTP事务流程 (1)域名解析 (2)发起TCP的三次握手 (3)建立TCP连接后发起http... ... ...(6)浏览器对页面进行渲染呈现给用户 ...从网址到IP地址的转换,称为DNS解析,DNS解析是一个递归查询的过程,具体...
  • 前端面试前端面试题300道~~熬夜吐血整理

    万次阅读 多人点赞 2017-10-07 14:01:07
    人生也有涯 而知也无涯 以有涯随无涯 殆已! –庄子 部分内容转载自网络,侵立删!如有错误,请指正! 1、手写jsonp的实现 参考自: ...先说说JSONP是怎么产生的: ...其实网上关于JSON...
  • 前端面试技巧(4)

    千次阅读 2019-01-16 15:56:10
    来自慕课课程:前端跳槽面试必备技巧 1.三面/四面面试技巧 准备要充分、描述要演练、引导找时机、优势要发挥、回答要灵活 2.面试描述中要突出的能力 业务能力、团队协作能力、事务推动能力、带人能力、其他能力 业务...
  • 2020前端面试题及答案汇总

    万次阅读 多人点赞 2020-03-26 14:39:55
    文章目录1. 浏览器篇1.1 常用那几种浏览器测试?分别是什么内核?1.2 说说你对浏览器内核的理解?1.3 一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?...标准模式与兼容模式各有什么区别?...
  • 文档描述 本文是关注微信小程序的开发和面试问题, 由基础到困难循序渐进, 适合面试和开发小程序。 并有热点框架(vue react node.js 全栈)前端资源以及后端视频资源和源码 ...生命周期函数面试题 1.什么是...
  • 前端面试题

    2019-01-30 10:10:25
    说 下技术栈,就是react的全家桶和 到的第三 插件,每个部分是 嘛的?解决 么问题的? 使 的难度 react react-router redux 这个也是 较重要的 react-router-config
  • 前端面试题汇总

    2018-09-13 17:15:54
    web前端面试题汇总。
  • 很多变态的好玩的前端面试题

    万次阅读 2017-11-22 09:48:06
    1. javascript的 “;”导致的一个问题 function foo1() { return { bar: "hello" }; } function foo2() { return { bar: "hello" }; } const a = foo1(); const b = foo2();......
  • 前端面试题(2019篇)

    万次阅读 多人点赞 2019-03-13 08:49:35
    文章目录display:none 和 visibility:hidden的区别div+css 和 table相比有哪些优势说你对rem的理解px和em的区别浏览器的内核分别是什么CSS3那些新增属性HTML5那些新增属性cookies , sessionStorage和localStorage...
  • 本人自己去找的各大公司的前端面试题进行的总结,希望各位能更好的找打破属于自己心仪的工作和自己技术的提升
  • 2020 前端面试题总结大全 及 答案

    万次阅读 多人点赞 2020-03-04 09:15:23
    1、link和@inmport的区别 ...@import是css的语法规则,只能引入样式; 2、加载页面时,link是同时加载的,@impor是页面加载完后才加载 3、link没有兼容性的问题,而@import只在较高版本的浏览器才可以识别 ...
  • 2020中高级前端面试题合集

    千次阅读 2020-03-18 22:19:00
    2020中高级前端面试题合集 “全方位总结一下所遇到的面试题目,与大家共同学习,也是对自己的一次总结” 01 前言 2020是不平凡的一年,这一年里发生许多事情,大家也都知道。对于互联网行业来说也是一次重大的...
  • web前端面试题

    2019-03-15 14:05:52
    web前端面试题汇总,前端的小伙伴们发福利了。
  • 前端面试:这50个经典前端面试题面试者必看!

    千次阅读 多人点赞 2019-09-06 14:46:33
    在收到一家公司前端面试邀请之后,有的人会轻松上阵,在面试官面前乱说,惹人反感。有的人在面试前会把这家公司的主营...以下是关于前端面试题的汇总: 1、prototype和__proto__的关系是什么? 2、meta viewport...
  • 2020年最新web前端面试题,包含html,css,javascript基础,web开发常见技术。
  • 前端干货 2019前端面试题精选

    万次阅读 多人点赞 2019-02-08 18:26:14
    俗称“金三银四”,那么换工作就总免不了要去面试,那么以下这些面试题可以助你一臂之力。   01 TCP(Transmission Control Protocol)  TCP传输控制协议,是一种面向连接的、可靠的、基于字节流的传输层通信...
  • 前端面试题汇总.doc

    2020-06-28 13:06:15
    事件委托是利用事件冒泡的原理,让自己的所触发的事件,让他的父元素代替执行!把本应该添加到某个元素上的事件委托给他的父级,从而减少DOM交互达到网页优化。
  • 前端面试题(适合vue)

    万次阅读 多人点赞 2018-06-28 14:41:49
    面试题集合1、v-model是什么? vue中标签怎么绑定事件?答:v-model这个指令只能用在表单元素上,可以用他进行双向数据绑定。绑定事件:&lt;input @click=doLog() /&gt;2、mvvm框架是什么?说说对双向数据...
  • 前端面试题(不定期更新)

    千次阅读 2017-10-28 20:23:13
    本文由我收集总结了一些前端面试题,初学者阅后也要用心钻研其中的原理,重要知识需要系统学习、透彻学习,形成自己的知识链。万不可投机取巧,临时抱佛脚只求面试侥幸混过关是错误的!也是不可能的!不可能的!不...
  • web前端面试题(全)

    2018-07-16 22:05:58
    前端 面试题 js html css 等系列 面试题 全 全!前端 面试题 js html css 等系列 面试题 全 全!
  • Java前端面试题总结

    万次阅读 多人点赞 2018-02-27 10:43:54
    Java前端面试题总结简单说一下HTML,CSS,javaScript在网页开发中的定位?HTML:超文本标记语言,定义网页的结构CSS:层叠样式表,用来美化页面JavaScript:主要用来验证表单,做动态交互(其中AJAX) CSS面试题...
  • 前端面试题全套整理附详细解答.pdf 前端面试题全套整理附详细解答.pdf 前端面试题全套整理附详细解答.pdf

空空如也

1 2 3 4 5 ... 20
收藏数 107,085
精华内容 42,834
关键字:

前端面试