前端面试总结全程

        在找工作的这段时间，其实面试了挺多的公司，关于前端技术方面被提问到了很多，常见的几类问题，我会在下文中一一给你解释：

一、 HTML：

         1、HTML5新特性，具体详情参考：https://www.cnblogs.com/ainyi/p/9777841.html

      （1）便于seo，方便开发维护。

<section>文档主体部分</section>

<aside>用来装载页面中非正文的内容,例如广告、成组的链接、侧边栏</aside>

<header></header>

<nav>定义导航标签</nav>

<audio>音频

<video>视频

         （2）表单新元素：

//进度条process 

<process value="0"></process>

//datalist 建议列表

<datalist id="numlist">

    <option>1</option>

    <option>2</option>

    <option>3</option>

</datalist>

<input  type="text" name="num"  list="numlist"/>

//meter度量衡

<meter  min="范围最小值"  max="范围最大值"  low="合理下限值"  high="合理上限值" optimum=""  value="当前值"></meter>

//placeholder：占位字符 作为提示不可提交

<input  value=" "  palaceholder="请输入用户名"/>

//multiple:L允许输入框中出现多个输入值用逗号分隔 [a@dn.com](mailto:a@dn.com)，[b@dn.com](mailto:b@dn.com)

<input  name="mail"  type="text"  multiple/>

       （3）拖拽api：

               源对象：

                    dragstart：源对象开始拖放。

                    drag：源对象拖放过程中。

                    dragend：源对象拖放结束。

                过程对象：

                     dragenter：源对象开始进入过程对象范围内。

                     dragover：源对象在过程对象范围内移动。

                     dragleave：源对象离开过程对象的范围。

         2、WebSocket的理解与使用：它是一种在单个 TCP 连接上进行全双工通讯的协议，在常见的实际工作中，客户端与服务端进行数据传输，会使用Ajax轮询的方式进行，但是轮询的时候因为轮询设定时间间隔，并向浏览器发送http请求，服务器响应请求完成后才能返回数据给客户端，这样有一个很大的缺陷：浏览器每次请求资源时，都需要向服务器发送Http请求，这样很浪费时间，而且有的请求头部比较长，但是实际用到的资源量很小，这样不断地发送请求也很浪费宽带资源。这时候我们需要在第一次发送请求时就建立起一个能够长久的数据传输通道，此时WebSocket就能被使用了，WebSocket使得客户端与服务器端能够进行良好的数据传输，而且服务器能够主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。如图所示：

Ajax轮询与WebSocket的数据请求流程图

   3、浏览器模型常见对象：window、history、xhr、location

       （1）window对象：①windows.open（"url","窗口名称","参数字符串"）

url地址：可选参数，不写或为空则窗口不显示内容。

窗口名称：可选，被打开窗口的名称，一般由字母数字或者_组成，但是不能包含空格；当为"_top"时，框架网页在上部窗口显示目标网页； 当为"_blank"时，在新窗口显示； 当为"_self"时，在当前窗口打开新网页；同一name只能创建一个；

参数字符串：可选，设置窗口参数，各参数用逗号隔开。'参数，参数，参数'

                             ②  window.close()//关闭当前窗口；

                                   窗口名.close()//关闭指定窗口名窗口

注意： JS中使用this时哪些是指向的window:

        setInterval(函数,时间(毫秒单位));

        clearInterval(定时器对象)；

        setTimeout(函数,延时时间(毫秒单位))；

        clearTimeout(延时器对象)；

上述定时器在使用this方法时，this的指向都是指向windows的。

     （2）history对象：

           浏览器历史记录，window.history.属性/方法。(window有时候会省略)

                 属性：length；历史列表中url数量。

                 方法：back(); 后退。

                 方法：forward(); 前进。

                  方法：go(n); 加载历史列表中某个具体页面。

            （3）location对象：

                       获取或设置窗口url，可用于解析url

                            location.属性

                            location.href = “目标网址”; //跳转到目标网址

                            location.href; //获取窗口url地址

                            location.search; //获取地址栏里的url参数信息。(即从 ? 开始的信息)

                            location.hash; //获取地址栏的锚点信息。 (#及后面的信息)

   （4）xhr对象：全称XMLHttpRequest，一般用于发送请求：

xhr.open("请求方式","请求文件资源",async);

      其中请求方式有：GET、POST、HEAD、PUT、OPTIONS
      请求的文件资源：资源文件路径；
      async：只有true/false两种，当为true时表示异步请求，为false表示同步请求，一                                 般在请求中都会默认为异步。

　　xhr.send()方法接收一个参数，即要作为请求主体发送的数据。调用send()方法后，请求被分派到服务器，如果是GET方法，send()方法无参数，或参数为null；如果是POST方法，send()方法的参数为要发送的数据；具体实例如下：

var xhr = createXHR();
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
         if((xhr.status>200&&xhr.status<300)||xhr.status == 304){             alert(xhr.responseText);
         }else{
                 alert("Request was unsuccessful : "+xhr.status);
             }
         }
    };
 xhr.open("get","example.php",true);
 xhr.send(null)

      4、Cookie、Session（LocalStorage、SessionStorage）的理解与区别：

          详情请参考个人之前的文章：https://www.jianshu.com/p/a2cb156c0c4d

       5、页面DOM渲染过程、重流：

       （1）页面DOM渲染过程：
         ①浏览器解析html源码，然后创建一个DOM树。在DOM树中，每一个HTML标签都有一个对应的节点(元素节点),并且每个文本也都有一个对应的节点(文本节点)。DOM树的根节点就是documentElement，对应的是html标签。
          ②浏览器解析CSS代码，计算出最终的样式数据。对CSS代码中非法的语法它会直接忽略掉。解析CSS的时候会按照如下顺序来定义优先级：浏览器默认设置，用户设置，外联样式，内联样式，html中的style(嵌在标签中的行间样式)。
          ③创建完DOM树并得到最终的样式数据之后，构建一个渲染树。渲染树和DOM树有点像，但是有区别。DOM树完全和html标签一一对应，而渲染树会忽略不需要渲染的元素(head、display:none的元素)。渲染树中每一个节点都存储着对应的CSS属性。
          ④当渲染树创建完成之后，浏览器就可以根据渲染树直接把页面绘制到屏幕上。

      （2）重流与重绘的理解：
详情参考：https://www.cnblogs.com/zhuzhenwei918/p/7441709.html

        6、文件上传的实现：

             这里主要介绍两种前端去实现文件上传的方法：

            （1）使用formData上传：

               利用JS构造form表单的数据的方法

                        html：<input type="file">

                        js:

                        var  formData = new FormDtaa();

                        fomData.append("userid",userid);

                        formData.append("signatura",signatura);

                        formData.append("file",file);//这里的file是blob数据；然后通过ajax请求发送formData到服务器即可，注意一定要用post方式上传；

         说明：这里利用formData.append()的方法避免了DOM中有多个input操作的情况出现，最后将file数据append到formData并发送到服务器即可完成上传。

      （2）使用fileReader读取文件数据进行上传：（这里是利用HTML5的新api）

                        var fr = new  FileReader();

                                   fr.readAsDataURL(file);

                                   fr.onload = function (event){

                                        var  data = event.target.result;//获取的data是base64格式的数据

                                        img.src = data；

                                        ajax(url,{data},function(){})    //利用ajax请求把文件数据信息上传即可

                                    }

二、CSS

        1、行内元素与块级元素的区别：

       块级元素一般为结构性标语，如：h1~h6、ul、ol、dl、p、pre、marquee、table、form、div、li等，行内元素一般在行内解释，如：a、b、span、br、i、strong、img、u、select、input等。

                        块级元素的特点：
                        ① 总是在新的一行开始；
                        ② 高度、宽度都是可控的；
                        ③ 宽度如果没有设置，一般默认为100%；
                        ④ 块级元素可以包含块级元素和行内元素。

                        行内元素的特点：
                        ① 一般都会和其他元素在一行中；
                        ② 高度、宽度以及内边距是不可控的；
                        ③ 它的宽高就是内容高度，不可以改变；
                        ④ 行业元素只能包含行内元素，不能包含块级元素。

        这里还需要注意的是：块级元素与行内元素是可以相互转换的，当块级元素被定义为：display：inline时，这里块级元素就被改变为行内元素；当行内元素被定义为:display：block时，行内元素会被改变为块级元素。（具体参考：https://www.cnblogs.com/stfei/p/9084915.html）

PS：在这里需要给大家提醒一点：CSS中有些属性是可以继承的，也有些是不可以的，具体详情参考：https://www.cnblogs.com/wssjzw/p/9113896.html；

      2、flex布局：

          概念：flex布局又被称为：弹性布局，用来为盒子模型提供最大的灵活性；

           任何一个容器都可以被指定为Flex布局，如：.box{display:flex;}，行内元素也可以使用flex布局，如：.box{display:inline-flex;}，webkit内核的浏览器，必须加上前缀-webkit，如：.box{display:-webkit-flex;display:flex;},需要注意的是，当你的元素被定义为flex布局后，子元素的float、clear、vartical-align属性将全部失效。如图所示：

模型图

         容器默认存在两根轴：水平的主轴（main axis）、垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交点）叫做main start，结束的位置叫做main end 。flex中有6个属性：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content

          flex-direction表示主轴方向， 一般默认为水平方向，如果你要改变主轴的方向，就需要通过row（水平方向）、column（垂直方向）来改变其中row表示水平自左向右，row-reverse表示水平自右向左，column表示垂直自上而下，column-reverse表示垂直自下而上。如下图说明：

.box{ flex-direction:column-reverse |column |row  | row -reverse  ; }

模型图

         当然我们在实际中常常会遇到元素填满一行，但是会溢出，这时候我们需要对元素进行分析：需不需要换行，分为三种情况：nowrap、wrap、wrap-reverse，其中行内一般默认不换行：nowrap，但是换行时要分为两种情况：一、需要换行且第一行在上方（wrap）；二、需要换行且第一行在下方（wrap-reverse），如下说明：

.box{ flex-wrap: nowrap | wrap | wrap-reverse;}

nowrap wrap wrap-reverse

            flex-flow属性：是flex-direction属性和flex-wrap属性的简写形式，默认 row nowrap。

.box{ flex-flow:<flex-direction> || <flex-wrap>;}

            justify-content属性：justify-content属性定义了项目在主轴上的对齐方式。

 justify-content属性图

它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
        flex-start（默认值）：左对齐
        flex-end：右对齐
        center：居中
        space-between:两端对齐，项目之间的间隔都相等
        space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

                 align-items属性：align-items属性定义项目在交叉轴上如何对齐。

.box{    align-items:flex-start | flex-end | center |baseline | stretch;}

align-items属性图

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上之下。
        flex-start：交叉轴的起点对齐
        flex-end:交叉轴的终点对齐
        center：交叉轴的中点对齐
        baseline：项目的第一行文字的基线对齐。
        stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

        align-content属性：align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box{    align-content:flex-start | flex-end | center | spance-between | space-around |stretch;}

align-content属性图

该属性可能取6个值。
         flex-start：与交叉轴的起点对齐。
         flex-end：与交叉轴的终点对齐。
         center：与交叉轴的中点对齐。
         space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
         space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
         stretch（默认值）：轴线占满整个交叉轴。

        其余详情请参考：https://www.cnblogs.com/dreamperson/p/9367008.html

 3、CSS预处理器：Less、Sass、Stylus

        详情参考;https://blog.csdn.net/ly2983068126/article/details/77737292

4、CSS3的新特性：

        

                5、伪元素before和after的用法：

                6、display、float、position的关系：

                7、盒子模型：

                8、垂直居中方法：margin 0 auto

                9、margin和绝对定位计算

                10、在flex布局中定义了上下的两个div设置margin为20px，实际页面中两个div的间距是多少？为什么？

        三、JS

                1、es6的新特性：

                2、promise异步和async/await：

                3、浅拷贝与深拷贝的理解、实现深拷贝：

                4、DOM事件流，事件委托：

                5、跨域的理解和解决方法：

                6、Array对象的一些常用方法：

                7、JS数据类型：underfined、null、boolean、number、string、object、function、array等：

                8、jQuery链式调用实现原理：

                9、防抖节流，如：当监听一个输入框的文本Value值变化，Value发生变化时调用接口，如何优化实现当输入停顿一段时间才会调用接口：

                10、如何判断一个变量是数组类型还是对象类型：

                11、for...in、for...of、forEach、map的区别：

                12、模块机制，AMD和common.js：

                13、this对象和bind、call函数使用：

                14、prototype原型对象的理解，实现一个方法，传入一个string类型的参数，然后将string的每个字符间加个空格返回：

spacify('hello world')// => 'h e l l o  w o r l d''

hello world'.spacify();

String.prototype.spacify=function(){

    return this.split('').join(' ');

};

                15、函数申明与函数表达式的区别：

// 函数声明

function funDeclaration(type){

    return type==="Declaration";

}

// 函数表达式

var funExpression=function(type){

    return type==="Expression";

}

本文属于原创；

分类：面试浅谈；