常见面试题

 

1什么是跨域？如何解决

  （1）同源策略

是一种浏览器安全策略。必须同协议，同域名，同端口。

不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以xyz.com下的js脚本采用ajax读取abc.com里面的文件数据是会被拒绝的。

同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。但是不受同源策略限制的有页面中的链接，重定向以及表单提交是不会受到同源策略限制的。还有 跨域资源的引入是可以的。但是js不能读写加载的内容。如嵌入到页面中的<script src="..."></script>，<img>，<link>，<iframe>等。

（2）跨域

违背同源策略就会产生跨域。

（3）如何解决

jsonp,cors,服务器代理等等。jsonp是前端设置，cors和服务器代理是后端设置

（4）jsonp

let script=document.createElement('script')  //创建script标签
//设置回调函数
function getData (data){
    console.log(data)
}
//设置script的src属性，设置请求地址
script.src='http://localhost:3000?callback=getData'//会执行回调函数
//将script标签插入到文档中
document.body.append(script)

 

2宏任务和微任务

JavaScript是单线程语言

• 同步和异步任务分别进入不同的执行“场所”，同步的进入主线程，异步的进入Event Table 并注册函数

• 当指定的事情完成时，Event Table 会将这个函数移入Event Queue

• 主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行

• 上述过程会不断重复，也就是常说的Event Loop（事件循环）

• setTimeout这个函数，是经过指定时间后，把要执行的任务加入到Event Queue中，又因为是单线程任务要一个个执行，如果前面的任务需要的时间太长，那么只能等着。

宏任务

分类：settimeout,setinterval和script代码

• 宏任务所处的队列就是宏任务队列

• 宏任务队列可以有多个

• 第一个宏任务队列中只有一个任务：执行主线程的js代码。

• 宏任务

微任务：new Promise().then（回调） process.nextTick()

• 微任务所处的队列就是微任务队列

• 只有一个微任务队列

• 在上一个宏任务队列执行完毕后如果有微任务队列就会执行微任务队列中所有任务

3变量提升和执行上下文

js引擎在正式执行代码之前会做一个预处理 的工作，1收集变量，将var 后边的变量定义但是不赋值2收集函数，将function函数定义。

      console.log(username);
      log();
      var username = "leige";
      console.log(username);
      function log() {
        console.log("res");
      }

执行上下文（execute context），代码执行的环境。代码正式执行之前会进入到执行环境

• 创建变量对象，包括变量和函数
• 确定this指向。全局的this指向window，局部的this指向调用的对象
• 创建作用域链，父级作用域链加上当前的变量对象。

4闭包

什么是闭包：一个密闭的容器，用来存储数据。闭包是一个对象，存储数据的形式为：key----value

闭包形成条件：1函数嵌套2内部函数引用外部函数的局部变量。

闭包的优点：延长外部函数局部变量的生命周期。

闭包的缺点：占用内存，容易造成内存泄漏。。注意合理使用闭包，用完闭包要及时销毁。

5比较一下vue和react

相同点：

• 都是组件化开发，和virtual dom 
• 都支持props进行父子组件之间通信
• 都支持数据驱动视图
• 都支持服务端渲染
• 都有native的方案，react的react native ,vue的weex

不同点：

• 数据绑定：vue实现了双向数据绑定，react是单向数据流
• 组件写法不一样：react推荐的写法是JSX，all in js，把html,css都写在js里。vue推荐的做法是webpack+vue-loader的单文件组件格式。
• state对象在react中是不可变的，需要使用setState方法来更新state.在vue中数据由data属性在vue中管理。
• virtual dom 不一样，vue会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。而react，每当应用的状态改变时，全部组件都会被更新
• react 只针对mvc的view层，vue是mvvm.

6从url输入到网页渲染

1dns解析，将域名地址解析为IP地址

——读取浏览器的dns缓存，如果有直接使用

——读取电脑系统dns缓存

——读取路由器缓存

——读取网络运营商dns缓存

——递归搜索

2tcp连接，三次握手

——第一次握手，由浏览器发起，告诉服务器我要发起请求了

——第二次握手，由服务器发起，告诉浏览器我准备好接收请求了

——第三次握手，由浏览器发起，告诉服务器我马上就发了，准备接收吧

3发送请求

——请求报文，http协议的通信内容

4接收响应

——响应报文

5渲染页面

——遇见html标记，浏览器用html解析器解析成token构建dom树

——遇见style，link，浏览器用css解析器构建cssom树。

——遇见script,调用JavaScript解析器，处理JavaScript代码。

——将dom树和cssom树合并成渲染树

——根据渲染树来计算布局

——根据渲染树渲染

6断开连接：tcp四次挥手

——浏览器发起，告诉服务器，请求报文发送完了

——由服务器发起，告诉浏览器，我准备关闭了

——由服务器发起，告诉浏览器，响应报文发送完了，你准备关闭把

——由浏览器发送，告诉服务器我东西接收完了，我准备关闭了。

7call、apply、bind

在JavaScript中，call、apply和bind是Function对象自带的三个方法，这三个方法的主要作用是改变函数中的this指向。

相同之处：改变函数体内 this 的指向。
不同之处：

• call、apply的区别：接受参数的方式不一样。
• bind：不立即执行。而apply、call 立即执行。

call用法：call([thisObj[,arg1[, arg2[, [,.argN]]]]])，

thisObj的取值有以下4种情况：
（1） 不传，或者传null,undefined， 函数中的this指向window对象
（2） 传递另一个函数的函数名，函数中的this指向这个函数的引用
（3） 传递字符串、数值或布尔类型等基础类型，函数中的this指向其对应的包装对象，如 String、Number、Boolean
（4） 传递一个对象，函数中的this指向这个对象

function a(){   
  console.log(this);   //输出函数a中的this对象
}       

function b(){}       

var c={name:"call"};    //定义对象c  

a.call();   //window
a.call(null);   //window
a.call(undefined);   //window
a.call(1);   //Number
a.call('');   //String
a.call(true);   //Boolean
a.call(b);   //function b(){}
a.call(c);   //Object

8rem适配

适配的目的是同一个元素在不同设备上实现相同的效果。

        window.onload=function(){
            let width=document.documentElement.clientWidth;
            let html=document.querySelectorAll('html');
            html[0].style.fontSize=width+'px';
        }

9内联元素和块状元素

常用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内联块状元素有：

<img>、<input>

10函数的防抖和节流

函数节流：函数执行一次后，只有大于设定的执行周期后才会执行第二次。

——有个需要频繁触发的函数，出于优化性能的考虑，会让函数在规定时间内只触发一次。

    //节流函数
    function throttle(fn, delay) {
        //记录函数上一次执行时间
        var lastTime = 0;
        return function(){
           //记录当前函数触发时间
            var nowTime = new Date();
            if (nowTime - lastTime > 0) {
                //修订this的指向
                fn.call(this);
                lastTime=nowTime;
            }
        }
    }

函数防抖：一个需要频繁触发的函数，在规定时间内只让最后一次生效。

func

 

11用css创建一个三角形

把元素的宽度高度设置为0

    #box{
        width: 0px;
        height: 0px;
        border: 100px solid ;
        border-top-color: red;
        border-bottom-color: transparent;
        border-right-color: transparent;
        border-left-color: transparent;
      }

12NaN

NaN跟谁都不相等包括他本身。

NaN === NaN;        // false
typeof NaN      //number

13css选择器

div p 后代选择器，包括孩子，孙子。。。。

div>p 子元素选择器：和后代类似，但是只能获得子元素.

div,p 分组选择器

属性选择器  a[href='']

14清除浮动的方式：https://www.jianshu.com/p/09bd5873bed4

 

浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。

浮动会导致父元素高度坍塌

清除浮动主要有两种方式，分别是clear清除浮动和BFC清除浮动

clear清除浮动

<div class="box-wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div style="clear:both;"></div>
</div>

BFC清除浮动

可以给父元素添加以下属性来触发BFC：
✦ float 为 left | right
✦ overflow 为 hidden | auto | scorll
✦ display 为 table-cell | table-caption | inline-block | flex | inline-flex
✦ position 为 absolute | fixed

.box-wrapper{
  overflow: hidden;
}

15盒模型

标准盒模型

box-sizing:content-box     width=content宽度

怪异盒模型

box-sizing:border-box     width=content+padding+border

16外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

17BFC

 

18重排重绘

重绘就是一个元素的外观被改变，但布局没有发生变化。如改变color等。。repaint

重排就是dom的变化影响到了元素的几何属性，如改变窗口的大小，改变dom的宽高....reflow

重排一定会重绘，重绘不一定重排

display:none 不占地，没有事件

opcity（不透明）:0-1     0是透明，占地，有事件

visiblity:hidden     占地，没有事件。

19零碎

------undefined变量定义了没有赋值，数组越界，或者访问一个对象没有的属性，函数没有返回值，默认返回undefined。

——

typeof 'str'  //string
typeof 1      //number
typeof true   //boolean
typeof undefined //undefined