码迷,mamicode.com
首页 > 其他好文 > 详细

前端面试题(一)

时间:2019-01-01 14:02:36      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:icon   back   return   time   建立   cal   增删改   前端   挥手   

1:实现一个函数判断是不是回文字符串

function run(input) {
    if(typeof input !== "string")
        return false
    return
input.split(‘‘).reverse().join(‘‘) === input;
    //input.split(‘‘)可以把字符串变成数组
}

 

2:两种以上方式实现已知或者未知宽度的垂直水平居中

//已知宽高

.box{

                                  height: 400px;

                                  width: 400px;

                                  background-color: #808080;

                                  position: relative;

                         }

                         .box1{

                                  height: 100px;

                                  width:  100px;

                                  background-color: red;

                                  position: absolute;

                                  left: 0;

                                  right: 0;

                                  top: 0;

                                  bottom: 0;

                                  margin: auto;

                         }

//

.box{

                                  height: 400px;

                                  width: 400px;

                                  background-color: #808080;

                                  position: relative;

                         }

                         .box1{

                                  height: 100px;

                                  width:  100px;

                                  background-color: red;

                                  position: absolute;

                                  left:50%;

                                  top: 50%;

                margin-left: -50px;

                margin-top: -50px;

                         }

//未知宽高 transform: translate3d(-50%,-50%,0);

3D变化,-50%表示的是当前元素的50%

.box{

                                  height: 400px;

                                  width: 400px;

                                  background-color: #808080;

                                 position: relative;

                         }

                         .box1{

                                  height: 100px;

                                  width:  100px;

                                  background-color: red;

                                  position: absolute;

                                  left:50%;

                                  top: 50%;

                transform: translate3d(-50%,-50%,0);

                         }

//flex布局

.box{

                                  height: 400px;

                                  width: 400px;

                                  background-color: #808080;

                                  display: flex;

                                  justify-content: center;

                                  align-items:center

                         }

                         .box1{

                                  height: 100px;

                                  width:  100px;

                                  background-color: red;

                        

                         }

3:实现效果,点击容器内的图标,图标边框变成border 1px solid red,点击空白处重置。

Const box = document.getElementById(‘box‘);

 

function isIcon(target) {

return target.className.includes(‘icon‘)

}

 

box.onClick = function(e) { e.stopPropagation();

const target = e.target;

if (isIcon(target)) {

    target.style.border = ‘1px solid red‘

  }

}

Const doc = document;

doc.onclick = function(e) {

const children = box.children;

for(let i; i < children.length; i++) {  

if (isIcon(children[i])) {

      children[i].style.border = ‘none‘

 

    }

  }

}

4:实现简单的双向数据绑定mvvm

<input type="text" id="input">

const data = {};
const input = document.getElementById("input");
input.onchange = e =>{
    let target = e.target;
    data.text = target.value;
}

Object.defineProperty(data,‘text‘,{
     set(value){
         input.value = value;
         this.value = value;
     }

})

 

5: 实现Storge,使得该对象为单例,并定于localStroage进行封装设置数值setitem(key,value),

Getitem(key);

class Store{
     constructor(){

     }

     static getInstance(){
         if(!Store.instance){
             Store.instance = new Store();
         }
         return Store.instance
    
}

     set=(key,value) =>{
         localStorage.setItem(key,value);
     }

     get = (key)=>{
        return localStorage.getItem(key);
     }

}

 

6:事件循环机制event loop

    首先,js是单线程的,主要的任务是处理用户的交互,而用户的交互无非就是响应DOM的增删改,使用事件队列的形式,一次事件循环只处理一个事件响应,使得脚本执行相对连续,所以有了事件队列,用来储存待执行的事件,那么事件队列的事件从哪里被push进来的呢。那就是另外一个线程叫事件触发线程做的事情了,他的作用主要是在定时触发器线程、异步HTTP请求线程满足特定条件下的回调函数push到事件队列中,等待js引擎空闲的时候去执行,当然js引擎执行过程中有优先级之分,首先js引擎在一次事件循环中,会先执行js线程的主任务,然后会去查找是否有微任务microtask(promise),如果有那就优先执行微任务,如果没有,在去查找宏任务macrotask(setTimeout、setInterval)进行执行。

事件循环,先执行宏任务,其中同步任务立即执行,异步任务,加载到对应的的Event Queue中(setTimeout等加入宏任务的Event Queue,Promise.then加入微任务的Event Queue),所有同步宏任务执行完毕后,如果发现微任务的Event Queue中有未执行的任务,会先执行其中的任务,这样算是完成了一次事件循环。接下来查看宏任务的Event Queue中是否有未执行的任务,有的话,就开始第二轮事件循环,依此类推。

 

7: 事件流

事件流分为两种,捕获事件流和冒泡事件流。

捕获事件流从根节点开始执行,一直往子节点查找执行,直到查找执行到目标节点。

冒泡事件流从目标节点开始执行,一直往父节点冒泡查找执行,直到查到到根节点。

事件流分为三个阶段,一个是捕获节点,一个是处于目标节点阶段,一个是冒泡阶段。

 

8:有一个数组【1,2,3,4】实现数组的全排列

  //算法自行搜索

9:输入url看到页面的发生的全部过程,越详细越好

首先浏览器主进程接管,开了一个下载线程。

然后进行HTTP请求(DNS查询、IP寻址等等),中间会有三次捂手,等待响应,开始下载响应报文。将下载完的内容转交给Renderer进程管理。

Renderer进程开始解析css rule tree和dom tree,这两个过程是并行的,所以一般我会把link标签放在页面顶部。

解析绘制过程中,当浏览器遇到link标签或者script、img等标签,浏览器会去下载这些内容,遇到时候缓存的使用缓存,不适用缓存的重新下载资源。

css rule tree和dom tree生成完了之后,开始合成render tree,这个时候浏览器会进行layout,开始计算每一个节点的位置,然后进行绘制。

绘制结束后,关闭TCP连接,过程有四次挥手。

10:三次握手和四次挥手

为什么要三次挥手?

  在只有两次“握手”的情形下,假设Client想跟Server建立连接,但是却因为中途连接请求的数据报丢失了,故Client端不得不重新发送一遍;这个时候Server端仅收到一个连接请求,因此可以正常的建立连接。但是,有时候Client端重新发送请求不是因为数据报丢失了,而是有可能数据传输过程因为网络并发量很大在某结点被阻塞了,这种情形下Server端将先后收到2次请求,并持续等待两个Client请求向他发送数据...问题就在这里,Cient端实际上只有一次请求,而Server端却有2个响应,极端的情况可能由于Client端多次重新发送请求数据而导致Server端最后建立了N多个响应在等待,因而造成极大的资源浪费!所以,“三次握手”很有必要!

  为什么要四次挥手?

  试想一下,假如现在你是客户端你想断开跟Server的所有连接该怎么做?第一步,你自己先停止向Server端发送数据,并等待Server的回复。但事情还没有完,虽然你自身不往Server发送数据了,但是因为你们之前已经建立好平等的连接了,所以此时他也有主动权向你发送数据;故Server端还得终止主动向你发送数据,并等待你的确认。其实,说白了就是保证双方的一个合约的完整执行!

  使用TCP的协议:FTP(文件传输协议)、Telnet(远程登录协议)、SMTP(简单邮件传输协议)、POP3(和SMTP相对,用于接收邮件)、HTTP协议等。

前端面试题(一)

标签:icon   back   return   time   建立   cal   增删改   前端   挥手   

原文地址:https://www.cnblogs.com/love-life-insist/p/10204637.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!