前端面试题整理 -- 持续更新

本文答案为网上整理以及自己思考，如果哪里有错误欢迎大家指正！

1**/ px和em和rem的区别和适用场景

• px是固定的长度单位, em和rem是相对的长度单位
• px一般不适用于自适应布局, 因为其大小固定, 不会发生改变
• em和rem适用于自适应布局, em相对于父元素, rem相对于网页根元素
• em详解:
  • 子元素的fontsize是根据父元素的字体大小决定的
  • 元素的width\height\padding\margin是根据当前元素的字体大小决定的

    div {
     font-size: 40px;
     width: 10em; /* 400px */
     height: 10em;
     border: solid 1px black;
   }
   p {
     font-size: 0.5em; /* 20px */
     width: 10em; /* 200px */
     height: 10em;
     border: solid 1px red;
   }
   span {
     font-size: 0.5em;
     width: 10em;
     height: 10em;
     border: solid 1px blue;
     display: block;
   }

• rem详解:
  • rem的所有长度都是相对于根元素(< html >)
  • 当用rem做响应式的时候只需要通过媒体查询修改根元素的fontsize即可

html {
    font-size: 10px;
    }
div {
    font-size: 4rem; /* 40px */
    width: 30rem;  /* 300px */
    height: 30rem;
    border: solid 1px black;
}
p {
    font-size: 2rem; /* 20px */
    width: 15rem;
    height: 15rem;
    border: solid 1px red;
}
span {
    font-size: 1.5rem;
    width: 10rem;
    height: 10rem;
    border: solid 1px blue;
    display: block;
}

2**/ 有一个data，不知道其类型，但是要判断其类型，如果是null / undefined或者是空字符串，就要不做任何处理，其他情况下输出该值。

function check(data) {
  if (data !== null && typeof data !== "undefined") {
    if (typeof(data) === "string" && data.length !== 0) {
      console.log(data);
    } else {
      console.log(data);
    }
  }
}

判断一个数据是否为null的方法

• data === null
• Object.prototype.toString.call(null) === “[object Null]”
• console.log(!data&& typeof(data)!=‘undefined’ && data!=0); // true

HTML

table元素的缺点

答: 服务器的代码原本是下载一行加载一行, 但是table中的数据需要等到所有的内容全部下载完成一次性加载, 如果内容太大会导致后续代码卡住, 降低用户体验

viewport

<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale,user-scalable=no"/>

请描述一下 cookies，sessionStorage 和 localStorage 的区别？

• cookie是为了标识用户信息而存储在用户客户端上的信息,通常经过了加密
• 每次同源客户端-服务器进行数据交互的时候会自动发送cookie(cookie是来回传递的)
• sessionStorage和localStorage存储在本地,不会自动发送
• cookie存储大小为4kb左右, 其他两个大一些,大概在5mb或更多
• 有效期:
  • sessionStorage在用户关闭页面时就消失了
  • LocalStorage永久存储在客户端内,除非主动删除数据
  • cookie会一直存储,直到cookie有效期到

Attribute和Property

• Attribute跟随html代码中定义的值, 在程序运行过程中不会改变

• Property是随着标签动态变化的值

• <input type='itp' value='123' myValue='123123' /> //在输入框中输入leo
  <script>
  	let inp = document.querySelector('input');
      console.log(inp.getArrtibute(type)); // itp
      console.log(inp.getArrtibute(value)); // 123
      console.log(inp.getArrtibute(myValue)); // 123123
      console.log(inp.type); // text
      console.log(inp.value); // leo
      console.log(inp.myValue); // undefined
  </script>
  

• 通过以上可以发现, Attribute可以自定义, Property不可以自定义

CSS

盒模型

• 盒模型是由content+padding+border+margin构成的

• W3C标准盒模型: 设置的盒子宽高为内容的宽高

• IE怪异盒子模型: 设置的盒子宽高为内容+border+padding

• 可以通过box-sizing:border-box/content-box进行切换

BFC

• 块级格式化上下文

• 是页面中一个独立的区域, 可以用来避免对其他地方造成的布局混乱

• 创建BFC的方法:(脱离标准流)

  • 定位position:absolute/fixed
  • display:inline-block/flex
  • overflow:除visible以外
  • float:除none以外
  • 根元素

• BFC解决的问题: 外边距塌陷/清除内部浮动等

JS

数组去重

• ES6中利用set非重复性可以去重

• function removeSame(arr) {
      let s = new Set(arr);
      return [...s];
  }
  

• ES5中可以使用双重循环, 利用splice截掉数组

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

• 利用indexof方法对数组进行去重

• function removeSame(arr) {
      var newArr = [];
      for(var i = 0; i < arr.length; i++) {
          if(newArr.indexOf(arr[i]) === -1) {
              newArr.push(arr[i])
          }
      }
      return newArr;
  }
  

• 利用数组的sort方法

• function removeSame(arr) {
      arr.sort((a,b)=>a-b);
      for(var i = 0; i < arr.length; i++){
          if(arr[i] === arr[i+1]) {
              arr.splice(i,1);
              i--;
          }
      }
      return arr;
  }
  

• ES6中的map的key不能重复

• 对象的属性名不能重复

原型和原型链

• 原型的概念: 每一个对象在创建的时候都会关联另一个对象, 所关联的对象就是原型, 每一个对象都会从原型中继承属性.
• 在js中每一个函数都会有一个prototype属性指向其原型对象
• __ proto __ 这个是每一个对象都会有的属性, 这个属性会指向对象的原型
• constructor 是每一个原型都具有的属性, 可以通过该属性获取到原型的构造函数
• 当读取一个实例的属性的时候,如果找不到该属性,就会顺着原型链查找, 知道最顶层为止

闭包及其应用场景

闭包和作用域

• 作用域: 在编程语言中可以分为两种作用域 --全局作用域/局部作用域 . 在js中比较特殊,可以在函数内部访问到外部的作用域;而反过来,在函数外部无法访问函数内部的局部变量.
• 闭包: 定义在一个函数内部的函数/闭包就是能够读取其他函数内部变量的函数

闭包的作用

• 一: 读取函数内部的变量
• 二: 让这些变量始终保持在内存中

举例:

//用闭包定义能访问私有函数和私有变量的公有函数。
    var counter = (function(){
        var privateCounter = 0; //私有变量
        function change(val){
            privateCounter += val;
        }
        return {
            increment:function(){   //三个闭包共享一个词法环境
                change(1);
            },
            decrement:function(){
                change(-1);
            },
            value:function(){
                return privateCounter;
            }
        };
    })();
    console.log(counter.value());//0
    counter.increment();
    counter.increment();//2
    //共享的环境创建在一个匿名函数体内，立即执行。
    //环境中有一个局部变量一个局部函数，通过匿名函数返回的对象的三个公共函数访问。

事件机制

• 绑定事件的方法:
  • 直接在DOM中绑定
  • 通过js的onxxx —> document.getElementById(“xxx”).onclick = function(){}
  • 通过addEventListener(click,function(e),Boolean)
    • 参数说明:
      • 第一个参数是事件名称,不带on前缀
      • 第二个参数是绑定的事件处理函数
      • true代表在事件捕获阶段触发函数, false(默认值)代表在事件冒泡阶段触发函数
• 如果用on绑定多个同一种事件会替换, 如果用addEventListener会一次执行
• 可以用removeEventListenter接触绑定的事件
• 在IE678中不支持addEventListener, 可以用attachEvent(‘onclick’,function)代替

如果对一个容器同时绑定捕获和冒泡事件，先触发哪个？为什么？

• 先触发捕获事件
• 因为无论是冒泡事件还是捕获事件, 元素都会先执行捕获阶段

eventloop

eventloop就是用来等待和发送消息和事件的程序结构在程序中有两个线程,一个是程序执行的主线程,另一个是用来与主线程进行通讯的eventloop线程

【宏任务】从上到下执行代码/UI rendering/setTimeOut/setInterval

【微任务】Promise/mutationObserver

promise

用来解决回调函数地狱的一种处理异步编程的方式

• 基本用法

  • promise.then()

  • promise.catch()

  • let p = new promise(
    	function(resove,reject) {
            sleep(1)
            resolve('成功')
        }
    ).then(
    	(res) => {console.log(res)},
        (err) => {console.log(err)}
    )
    

  • promise.all()

    • 接受一个数组作为参数
    • 数组元素可以是promise对象,也可以是其他值,但是只有promise会等待状态改变
    • 如果有任意一个promise失败,则该promise失败,返回值是第一个失败的字promise的效果

  • promise.race()

    • 常见用法:将异步操作和定时器放到一起,如果定时器先执行则判定为超时
    • race和all一样,但是在第一个promise对象执行完毕后,并不会取消其他的promise对象的执行,但是只有第一个完成的会被then处理,其他不会进入到then模块

箭头函数和普通函数的区别

• 箭头函数是匿名函数,不能作为构造函数,无法使用new关键字
• 箭头函数不绑定arguments,取而代之的是使用rest参数
• 箭头函数不绑定this,但会捕捉上下文的this,作为自己的this
• 箭头函数无法通过clall()和apply()方法改变this指向

浏览器及网络相关

输入一个url到页面渲染发生了什么

• 通过dns将域名解析为IP地址
• TCP三次握手建立连接
• 发送HTTP请求
• 服务器处理请求HTTP请求并返回HTTP报文
• 浏览器解析渲染页面
• TCP四次挥手断开连接

html代码如何形成DOM树？

• 标签解析: 浏览器首先将html文档的标签进行解析
• DOM树构建: 将标签按顺序进栈,当遇到结束标签的时候弹出栈顶的相同标签,挂载到DOM树上

js会阻塞页面的渲染吗？为什么？

• 会,js的加载会阻塞DOM的渲染

CSS会阻塞js的加载吗?为什么

• 会, 浏览器渲染页面的过程是 html解析生成dom树 css解析生成cssom树, 两者结合生成渲染树(rander tree),根据渲染树将进行绘制, 将像素绘制到屏幕上
• 此时css解析和dom解析生成树是并行过程,所以css不会阻塞dom树的解析
• 但是要想生成渲染树就一定会等待两个都完成, 所以css会阻塞DOM的渲染
• 因为js可能会操作dom节点和css样式, 因此样式表会在后面js代码执行前加载完毕, 造成js加载阻塞

项目

项目实现

登录 --> input输入框会先验证, 两个input都为true后, 提交信息到后台, 后台根据拿到的信息在数据库中进行查询,如果有查询到记录,则登录成功,并将用户信息保存在session中,同时设置一个cookie保存到客户端. 客户端在进入各个页面之前会先检查cookie,如果存在则可以进入,如果不存在则跳转到login登录页面进行登录

即时通讯 --> 把需要用到的数据存放在vuex中，在app.vue的updateBySocket()函数中整体监听服务端emit的事件，根据路由信息判断数据是要做一般处理还是交给对话框页面进行处理

---

Vue

1.Vuex

1. state：vuex的基本数据，用来存储变量、

2. getter：从基本数据(state)派生的数据，相当于state的计算属性

3. mutation：提交更新数据的方法，必须是同步的。commit调用

4. action：它提交的是mutation，而不是直接修改状态；action可以包含任意异步操作。dispatch调用。

5. modules：模块化vuex，可以让每个模块拥有自己的state/getter/mutation/action，使结构非常清晰，方便管理

6. Vuex是一个专为Vue.js开发的状态管理模式。它采用集中式存储管理应用的所有组件状态，并以相应的规则保证状态以一种可预测的方式发生变化。
   Vuex的目的是为了管理共享状态，为了达到这个目的，它制定了一系列的规则。

2.虚拟dom的原理

1. 用JavaScript对象模拟真实DOM树，对真实DOM进行抽象
2. diff算法：比较两个虚拟DOM树的差异
3. pach算法：将两个虚拟DOM对象的差异应用到真正的DOM树

虚拟DOM的优缺点：
优点：保证性能下限；无需手动操作DOM；跨平台
缺点：无法进行极致优化

3.双向绑定的原理

1. 双向数据绑定是通过数据劫持结合发布订阅模式的方式来实现的，也就是说数据和视图同步，数据发生变化，视图跟着发生变化，视图变化，数据也随之发生变化。
2. 核心：Object.defineProperty()方法。
3. 介绍下Object.defineProperty()方法

• Object.defineProperty(obj，prop，descriptor)，这个语法内有三个参数，分别为要定义其上属性的对象，要定义或者修改的属性，具体的改变方法
• 简单的说，就是用这个方法来定义一个值。当调用时我们使用了它里面的get方法，当我们给这个属性赋值时，又用到了它里面的set方法。

	var obj = {};
	Object.defineProperty(obj,"hello",{
		get:function(){
			console.log("调用了get方法")
		},
		set:function(newVal){
			console.log("调用了set方法，方法的值是"+newVal)
		}
	})

4.vue组件间传递数据

1. props / $emit 适用父子组件通信
2. ref 与 $parent / $children 适用父子组件通信
3. EventBus($emit / $on) 适用于父子、隔代、兄弟组件通信
4. $attrs / $listeners 适用于隔代组件通信
5. provide / inject 适用于隔代组件通信
6. Vuex 适用于父子、隔代、兄弟组件通信

5.VUE项目优化

1. 使用CDN资源，减少服务器带宽压力
2. 路由懒加载
3. 将一些js css放到其他地方，减少服务器压力
4. 按需加载第三方资源
5. 使用NGINX开启gzip减少网络传输的流量大小
6. 若首屏为登录页，可以做成多入口，登录页单独分离为一个入口

6.父子组件生命周期的加载顺序

1. 加载渲染过程

   父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted

2. 子组件更新过程

   父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated

3. 父组件更新过程

   父beforeUpdate -> 父updated

4. 销毁过程

   父beforeDestory -> 子beforeDestory -> 子destroyed -> 父destroyed

7.您的接口一般都放在哪个生命周期中？

接口请求一般放在mounted中，但需要注意的是服务端渲染不支持mounted，需要放到created中。

8.data为什么是个函数？

一个组件被复用多次的话，也就会创建多个实例。本质上，这些实例用的都是同一个构造函数。如果data是一个对象的话，对象属于引用类型，会影响到所有的实例。所以为了保证组件不同的实例间data不冲突，data必须是一个函数。

9.diff算法过程

1. 同级比较，再比较子节点
2. 先判断一方有子节点一方没有子节点的情况(如果新的children没有子节点，将旧的子节点移除)
3. 比较都有子节点的情况(核心diff)
4. 递归比较子节点

10.虚拟DOM以及key属性的作用

由于在浏览器中操作虚拟DOM是很昂贵的。频繁的操作DOM，会产生一定的性能问题，这就是虚拟DOM产生的原因。
Virtual DOM本质就是用一个原生JS对象去描述一个DOM节点，是对真实DOM的一层抽象。
key的作用是尽可能的复用DOM元素。

11.优化

代码层面的优化

• 尽量减少data中的数据，data中的数据都会增加getter和setter，会收集对应的watcher
• v-if和v-for不能连用
• 如果需要使用v-for给每项元素绑定事件时，使用事件代理
• SPA页面采用keep-alive缓存组件
• 在更多的情况下，使用v-if替代v-show
• key值保证唯一
• 使用路由懒加载，异步组件
• 防抖、节流
• 第三方模块按需导入
• 长列表滚动到可视区域动态加载
• 图片懒加载
• 服务端渲染 SSR or 预渲染

基础Web优化

• 开启GZIP压缩
• 浏览器缓存
• CDN的使用

Webpack层面的优化

• 压缩代码
• Tree Shaking / Scope Hoisting (剔除js中用不上的代码)
• 使用CDN加载第三方模块
• sourceMap优化
• 提取公共代码

12.Vue的两个核心

1. 数据驱动
   在VUE中，数据的改变会驱动视图的自动更新。传统的做法是需要手动改变dom使得视图更新，而VUE只改变数据
2. 组件化
   组件化开发，优点很多，可以很好的降低数据之间的耦合度。将常用的代码封装成组件后，就能高度的复用，提高代码的复用性。

13.MVVM 和 MVC

最大的区别就是：前者实现了View和Model的自动同步，也就是当Model的属性改变时，我们不用再手动操作DOM元素，来改变View的显示。
MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑;View代表UI组件，它负责将数据模型转化成UI展现出来，ViewModel是一个同步View和Model的对象。MVVM模式简化了界面与业务的依赖，解决了数据频繁更新。MVVM在使用当中，利用双向绑定的技术，使得Model变化时,ViewModel会自动更新，而ViewModel变化时，View会自动变化。

15.keep-alive

是Vue的内置组件，能在组件切换过程中将状态保留着内存中，防止重新渲染DOM
include:字符串或者正则表达式。只有匹配的组件会被缓存
exclude:字符串或者正则表达式。任何匹配的组件都不会被缓存
exclude优先级大于include

16.Computed和Watch

1. Computed是计算属性，类似于过滤器，对绑定到视图的数据进行处理，并监听变化进而执行对应的方法。计算属性是基于他们的依赖进行缓存的。只有在相关依赖发生改变时，它们才会重新求值。
2. Watch是一个侦听的动作，用来观察和响应Vue实例上的数据变动
3. 异同：它们都是vue对监听器的实现，只不过computed主要用于对同步数据的处理，watch则主要用于观测某个值的变化去完成一段开销较大的复杂业务逻辑。能用computed的时候先用computed，避免了多个数据影响其中某个数据时多次调用watch的情况。
4. 运用场景：当我们需要进行数值计算时，并且依赖于其他数据时，并且依赖于其它数据时，应该使用computed；当我们需要在数据变化时执行异步或者开销较大的操作时，应该使用watch

17.插槽

插槽：插槽就是子组件中的提供给父组件使用的一个占位符，用表示，父组件可以在这个占位符中填充任何模板代码，如HTML，组件等，填充的内容会替换子组件的标签。
分为：具名插槽，默认插槽，作用域插槽

18.单页面应用的优缺点

优点

1. 良好的交互体验(不需要重新加载页面，没有页面之间的切换，不会出现白屏现象)
2. 良好的前后端工作分离模式
3. 减轻服务器压力

缺点

1. 首屏加载慢

• Vue-router懒加载
• 使用CDN加速
• 异步加载组件
• 服务端渲染

2. 不利于SEO
3. 不适合开发大型项目

19.Webpack打包优化

1. 定位体积大的模块(使用webpack插件：webpack-bundle-analyzer)
2. 提取公共模块
3. 移除不必要的文件
4. 模块化引入
5. 用过CDN引用
6. 通过DLLPlugin和DLLReferencePlugin拆分文件
7. 开启Gzip压缩
8. 压缩混淆代码

20.Proxy想比于defineProperty的优势

Object.defineProperty()的问题主要有三个：

• 不能监听数组的变化
• 必须遍历对象的每个属性
• 必须深层遍历嵌套的对象

Proxy优点：

• 针对对象：针对整个对象，而不是对象的某个属性，所以也就不需要对keys进行遍历。
• 支持数组：Proxy不需要对数组的方法进行重载，省去了众多hack，减少代码量等于减少了维护成本，而且标准就是好的
• Proxy的第二个参数有13种拦截方法

21.在哪个生命周期内调用异步请求？

可以在钩子函数created、beforeMount、mounted中。最好在created中，优点：能更快获取到服务端数据，减少页面loading时间；SSR不支持beforeMount、mounted钩子函数，放在created有助于一致性。

22.Vue框架怎么实现对象和数组的监听？

Vue框架是通过遍历数组和递归遍历对象，从而达到利用Object.defineProperty()也能对对象和数组进行监听。

23.Vue3.0 新特性

1. 监测机制的改变
   3.0将带来基于代理Proxy的observer实现，提供全语言覆盖的反应性跟踪。
2. 对象式的组件声明方式
3. 支持自定义渲染器
4. 支持Fragment(多个根节点)和Protal组件，针对一些特殊的场景做了处理
5. 基于treeshaking优化，提供了更多的内置功能。

24.v-for 和 v-if同时使用？

建议不要在与v-for相同的元素上使用v-if。当它们处于同一节点时，v-for指令的优先级高于v-if，这意味着v-if将分别重复运行于每个v-for循环中。

25.vue和jquery的区别？

1. 精力集中
   JQ偏重于对DOM的操作，这分散了我们本该放在业务逻辑上的能力。而Vue则是MVVM思想，数据驱动，双向绑定，只需定义好渲染规则，所以我们只需要将注意力放到数据操作上即可
2. 代码结构
   jq写的可能会出现冗余的代码；vue中的钩子函数可以对页面进行精准操作
3. 操作性
   用jq操作DOM实际上是蛮麻烦的
4. 模块化
5. 单页面实现
6. 组件的复用
7. 性能
   vue使用了虚拟DOM，能够减少DOM的操作，能提高一定的效率

26.router和route

1. router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象是一个全局的对象，他包含了所有路由的关键对象和属性
2. route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name、path、params、query等

27.什么时候需要使用$.nextTick()

在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中

28.路由原理

1. hash模式
   hashchange事件
2. history模式
   pushState()和replaceState()事件

29.事件修饰符

1. .stop:阻止冒泡(阻止事件向上级DOM元素传递)
2. .prevent:阻止默认事件的发生
3. .capture:捕获冒泡，即有冒泡发生时，有该修饰符的DOM元素会先执行
4. .self:将事件绑定到自身，只有自身才能出发
5. .once:事件只能触发一次

30.组件数据流

Vue组件间传递数据是单向的，即数据总是从父组件传递到子组件，子组件在其内部可以有自己维护的数据，但它无权修改父组件传递给他的数据，当开发者尝试这样做的时候，vue会报错。这样做是为了组件间更好的解耦，在开发中可能有多个子组件依赖父组件的某个数据。

计算机网络

1.进程和线程

进程是资源分配的最小单位，线程是CPU调度的最小单位

1. 线程是在进程下行进
2. 一个进程可以包含多个线程
3. 不同进程间数据很难共享
4. 同一进程下，不同线程间数据很容易共享

2.TCP/IP协议簇

1. 应用层：规定了向用户提供应用服务时通信的协议
2. 传输层：对应上层应用层，提供处于网络连接中两台计算机之间的数据传输使用的协议
3. 网络层：规定了数据通过怎样的传输路线到达对方计算机传输给对方
4. 链路层：用来处理连接网络的硬件部分，

---

浏览器工作原理

1.HTTP请求

主要有GET、HEAD、POST、PUT、DELETE、CONNECT、OPTIONS、TRACE
options作用：①检测服务器所支持的方法，②CORS中的预检请求

Get 和 Post 的区别？

1. get和post在HTTP中都代表着请求数据，其中get请求相对来说更简单、快速、效率高些
2. get相对于post安全性低
3. get有缓存，post没有缓存
4. get体积小，post可以无限大
5. get的URL参数可见，post不可见
6. get只接受ASCII字符的参数数据类型，post没有限制
7. get请求参数会保留历史记录，post参数中不会保留
8. get产生一个TCP数据包，post产生两个数据包

2.跨域

同源策略：是一种约定，也是浏览器最核心也最基本的安全功能。同源：域名、协议、端口相同，也就是在一个域里。非同源受到的限制：cookie不能读取、dom无法获得、ajax请求不能发送。
跨域：一个域的页面去请求另一个域的资源
如何解决？
JSONP(利用script标签 src 属性没有跨域限制的漏洞，缺点：仅支持GET方法，不安全可能会遭受XSS攻击)；CORS；Websocket；Node中间件代理；nginx反向代理；window.name + iframe

3.重绘和回流

回流：当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就成为回流(称为重新布局更简单明了)。每个页面至少需要一次回流，也就是页面在第一次加载的时候。
重绘：当render tree中的一些元素需要更新属性，这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就称为重绘
区别：

• 回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流。
• 当页面布局和几何属性改变时就需要回流。比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变
• 回流往往伴随着布局的变化，代价较大
• 重绘只是样式的变化，结构不会变化

4.SEO优化

1. 整体结构：网站底部版权部分加上网站名称和链接
2. 标签优化：按照SEO爬虫权重来排
3. 标签属性的说明：meta标签中的content属性；图片标签加上图片的说明
4. 链接结构：

5.URL输入到页面显示全过程

1. DNS解析：将域名解析成IP地址
2. TCP连接：TCP三次握手
3. 发送HTTP请求
4. 服务器处理请求并返回HTTP报文
5. 浏览器解析渲染页面
6. 断开连接：TCP四次挥手

6.CSRF 和 XSS

XSS:恶意攻击者往Web页面插入恶意Script代码，当用户浏览该页时，嵌入其中的Web里面的Script代码会被执行，从而达到恶意攻击用户的目的。
CSRF:CSRF攻击是攻击者借助受害者的cookie骗取服务器的信任，可以在受害者不知情的情况下以受害者的名义伪造请求发给受攻击服务器，从而在未授权的情况下执行在权限保护下的操作。

防范XSS:

1. HttpOnly防止劫取Cookie
2. 输入检查
3. 输出检查

防范CSRF：

1. 通过验证码
2. Referer Check
3. 添加token验证

7.请求状态码

200：OK，表示请求被服务器正常处理并返回
204：No Content，请求成功，但是返回的报文中不含实体的主体部分
206：Patial Content，表示客户端进行了范围请求
301：Moved Permanently，永久性重定向
302：临时性重定向
304：Not Modified，表示客户端发送附带条件的请求时，服务端允许访问资源，但是请求为满足条件的情况下返回状态码
400：Bad Request，表示请求报文中存在语法错误
401：Unauthorized，未经许可
403：Forbidden，服务器拒绝该次访问
404：Not Found，表示服务器上无法找到请求的资源
500：Inter Server Error，表示服务器执行请求时发生了错误

8.浏览器内核

1. IE --> Trident
2. Chrome --> Webkit(Blink)
3. Safari --> Webkit
4. Firefox --> Gecko
5. Opera --> Presto

9.浏览器渲染页面的原理和流程

1. 根据html文件构建DOM树和CSSOM树。构建DOM树期间，如果遇到JS，阻塞DOM树及CSSOM树的构建，优先加载JS文件，加载完毕，再继续构建DOM树及CSSOM树。
2. 构建渲染树(Render tree)
3. 页面的重绘与回流。页面渲染完成后，若JS操作DOM节点后，根据JS对DOM操作动作的大小，浏览器对页面重绘或是回流。