2018 front-end interview questions (1)

First, the difference and advantages and disadvantages of https and http

        http is the HTTP protocol running on top of TCP. All transmitted content is in clear text, and neither the client nor the server can verify the identity of the other.

        https is HTTP running on top of SSL/TLS, and SSL/TLS running on top of TCP. All transmitted content is encrypted, and the encryption adopts symmetric encryption, but the key of symmetric encryption is asymmetrically encrypted with the certificate of the server side. In addition, the client can verify the identity of the server, and if client authentication is configured, the server can also verify the identity of the client.

Second, open the website to the page rendering, the steps passed       

        <1> The client enters the URL and requests to establish a connection with port 80 of the server.

        <2> The server receives the request and responds to the client;

        <3> The client receives the response from the server and is ready to start receiving data. The server starts sending data.

        (Three handshakes)

        Handshake 1: The client requests a connection by sending a data segment containing the "Sync Sequence Number (SYN)" flag to the server.

Handshake 2: The server responds to the client         with a data segment with the "Acknowledgement Acknowledgement (ACK)" and "Synchronization Sequence Number (SYN)" flags .

        3rd handshake: The client sends a data segment to acknowledge receipt of the server's data segment and begins to transmit the actual data.

        <4> Parse the html page and present the page content to the user.


Third, the difference between MVC and MVVM

        MVC is a traditional three-part model-view-controller, which is a single-item communication, that is, the model and the view must be connected through the controller.

        MVVM is a data-driven view, and the core is VM. In MVVM, data in view and viewmodel can communicate with each other, that is, call each other.


Fourth, the life cycle of Vue

       The process of Vue instance from creation to destruction is the life cycle. That is, a series of processes from starting to create, initializing data, compiling templates, mounting Dom → rendering, updating → rendering, unloading, etc., we call this the life cycle of Vue. 

        The life cycle of vue can be divided into 8 stages: before/after creation, before/after loading, before/after update, before/after destruction, beforeCreate, created, beforeMount, mounted will be triggered when the first page loads. A few hooks, DOM rendering has been completed in mounted.

        Some usage methods of life cycle hooks: beforecreate : You can add a loading event here to trigger created : The event when the initialization is completed is written here. If the loading event ends here, it is also suitable for asynchronous requests to call mounted here: Mount the element and get the DOM node updated: If the data is processed uniformly, write the corresponding function here beforeDestroy: You can make a confirmation box to confirm the stop event nextTick: Operate the dom immediately after updating the data.


Five, what are the methods to solve cross-domain

        (1) Image ping or script tag cross-domain

           Image ping is often used to track the number of times users click on a page or a dynamic ad exposure;

           The script tag can get data from other sources, which is also the basis for jsonp's dependence;

           Disadvantage: Only get requests can be sent, no access to the server's response text.

        (2) jsonp cross-domain

        根据XmlHttpRequest对象受到同源策略的影响,而利用script元素的这个开放策略,网页可以得到从其他来源动态产生的json数据,而这种使用模式就是所谓的jsonp。用jsonp抓取到的数据并不是json,而是任意的JavaScript,用JavaScript解释器运行而不是用json解析器解析。所以,通过Chrome查看所有的jsonp发送的get请求都是js类型,而非xhr。

        缺点:只能使用get请求;

                不能注册success、error等事件监听函数,不能很容易的确定jsonp请求成功或者失败;

                jsonp是从其他域中加载代码执行,容易受到跨域请求伪造的攻击,安全性无法保证;

       (3)cors

        cross-origin resouce sharing 跨域资源共享是允许浏览器向跨源服务器发出XmlHttpRequest请求,从而克服了ajax只能同源使用的限制。与 JSONP 不同,CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。服务器一般需要增加如下响应头的一种或几种:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400

跨域请求默认不会携带Cookie信息,如果需要携带,请配置下述参数:

"Access-Control-Allow-Credentials": true
// Ajax设置
"withCredentials": true

        (4)WebScoket

            WebScoket protocol是HTML5的一种新的协议,它实现了浏览器与服务器全双工通信,同时允许跨域通信,是server push技术的一种很棒的实现。需要注意的是:WebScoket对象不支持DOM2级事件监听,必须使用DOM 0级语法分别定义各个事件。

        (5)修改document.domain跨子域

         (6)window.postMessage()

            HTML5新特性,可以用来向其他所有的window对象发送消息。需注意,必须保证素有的脚本执行完成后才能发送MessageEvent,否则容易使其后买你的函数超时无法执行。

          (7)window.name+iframe


六、es6中数组的使用

        (1)includes: includes函数与string的includes一样,接受2个参数,查询的项以及查询起始位置;

        (2)find : find的参数为回调函数,回调函数可以接受3个参数,值X、索引i、数组arr,回调函数默认返回值X;

        (3)findIndex : 和find差不多,不过默认返回的是索引;

        (4)keys 、values、entries :分别是对数组索引、数组项、数组键值对的遍历;

        (5)fill :fill方法改变原数组,当第三个参数大于数组长度时候,以最后一位为结束位置;

        (6)Array.of() :方法返回一个数组,参数不分类型,只分数量,数量为0时返回空数组;

        (7)Array.from() :可以把带有length属性类似数组的对象转换为数组,也可以把字符串等便利的对象转化为数组,接受2个参数,转换对象和回调函数。

        (8)copywithin() : 接收三个参数,被汰换数据的开始处,替换块的开始处,替换块的结束处;

        (9) reduce : 对数组中的所有元素调用指定的回调函数,该回调函数的返回值为累积结果,并且此返回值在下一次调用该回调函数时作为参数提供;

        (10) forEach 和map : 遍历数组;

        (11)every (且)和some (或):数组中的项返回true 或者false;

        (12)filter :数组的过滤筛选。


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

        事件流描述的是从页面中接受事件的顺序,分为冒泡流和捕获流;

        事件冒泡是指事件从最具体的元素接收,然后逐级向上传播,直到不具体的节点;而事件捕获则正好相反,它是从不具体的节点开始,逐步到最具体的节点;

        IE的事件流是冒泡流,而火狐同时支持冒泡流和捕获流;

        阻止事件冒泡:e.stopPropagation(),ie则是使用e.cancelBubble = true ;


八、清除浮动的几种方法及各自的优缺点

      (1)  父级div定义height ;

        优点:简单,代码少,容易掌握

        缺点:只适合高度固定的布局,若高度和父级高度不同时,会产生问题;

      (2)结尾处添加空div标签clear:both

        优点:简单,代码少,兼容性好,不容易出现问题

        缺点:页面布局浮动多,需要添加很多空div 

        (3)父级div伪类:after和zoom

        优点:浏览器支持好,不容易出现怪问题

        缺点:代码多,需要两者结合起来才能让主流浏览器兼容

        (4)父级div 定义overflow:hidden

        优点:简单,代码少,浏览器支持好

        缺点:不能和position结合使用,超出的部分会被隐藏掉

        (5)父级div定义overflow:auto

        优点:代码少,简单,浏览器支持好

        缺点:内部宽度超过父级时候,出现滚动条

        (6)父级div也跟着一起浮动

        缺点:会产生新的浮动问题

        (7)父级div定义display:table

        缺点:会产生新的位置问题

        (8)结尾处加br标签clear:both

        

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325861369&siteId=291194637