前端知识点-面试题篇面试题 1.如果后端传给前端一个很大的数，前端会怎么样，该怎么处理？懒加载+分页虚拟滚动列表 j

面试题

1.如果后端传给前端一个很大的数，前端会怎么样，该怎么处理？

懒加载+分页
虚拟滚动列表

js缓冲器来分片处理（思路，不懂）

function multistep(steps,args,callback){
    var tasks = steps.concat();

    setTimeout(function(){
        var task = tasks.shift();
        task.apply(null, args || []);   //调用Apply参数必须是数组

        if(tasks.length > 0){
            setTimeout(arguments.callee, 25);
        }else{
            callback();
        }
    },25);
}

2.new的过程

3.浏览器的缓存机制（强缓存和协商缓存）

浏览器在向浏览器请求资源时，首先判断是否命中强缓存，再判断是否是命中协商缓存

【强缓存】浏览器在加载资源时，会先根据本地缓存资源的header中的信息（Expires,Cache-Control）判断是否命中强缓存，如果命中则直接使用缓存中的资源不会再向服务器发送请求。【协商缓存】当强缓存没有命中的时候，浏览器会发送一个请求到服务器，服务根据header中的部分信息来判断是否命中缓存。如果命中，则返回304，告诉浏览器未更新，可使用本地的缓存。

解释：就是本地没有过期使用本地缓存资源，如果本地资源过期了，询问服务器资源更新了没（是否命中协商缓存），没有更新(服务端返回304)继续使用本地缓存资源

Cache-Control字段

在请求中使用Cache-Control 时，它可选的值有：在响应中使用Cache-Control 时，它可选的值有：在这里插入图片描述

扩展知识：

DNS缓存

全称Domain Name System, 即域名系统。

万维网上作为域名和IP地址相互映射的一个分布式数据库，能够使用户更方便的访问互联网，而不用记住能够被机器直接读取的IP数串。DNS协议运行在UDP协议之上，使用端口号53.

DNS解析

又叫主机名解析。

通过域名得到该域名对应的IP地址的过程叫做域名解析

www.baidu.com - DNS解析 - 11.222.33.444

有DNS的地方就有缓存，浏览器，操作系统，Local DNS, 根域名服务器，他们都会对DNS结果做一定程度的缓存。

DNS查询过程如下：

首先搜索浏览器自身的DNS缓存，如果存在，则域名解析到此完成

如果浏览器中没有找到，那么会尝试读取操作系统的hosts文件看是否存在对应的映射关系，如果存在，则到此完成

如果本地hosts文件不存在对应关系，则查找本地DNS服务器（ISP服务器，或者自己手动设置DNS服务器），如果找到，则完成

如果本地DNS服务器还没有招待，它就会向根服务器发出请求，进行递归查询

CDN 缓存

全称 Content Delivery Network,即内容分发网络。

优势：

1. CND 节点解决了跨运营商和跨地域访问的问题，访问延时大大降低。
2. 大部分请求在CDN边缘节点完成，CDN起到了分流作用，减轻了源服务器的负载压力

memory cache

MemoryCache顾名思义，就是将资源缓存到内存中，等待下次访问时不需要重新下载资源，而直接从内存中获取。Webkit早已支持memoryCache。目前Webkit资源分成两类，一类是主资源，比如HTML页面，或者下载项，一类是派生资源，比如HTML页面中内嵌的图片或者脚本链接，分别对应代码中两个类：MainResourceLoader和SubresourceLoader。虽然Webkit支持memoryCache，但是也只是针对派生资源，它对应的类为CachedResource，用于保存原始数据（比如CSS，JS等），以及解码过的图片数据。

disk cache

DiskCache顾名思义，就是将资源缓存到磁盘中，等待下次访问时不需要重新下载资源，而直接从磁盘中获取，它的直接操作对象为CurlCacheManager。

|memory cache | disk cache

相同点	只能存储一些派生类资源文件	只能存储一些派生类资源文件
不同点	退出进程时数据会被清除	退出进程时数据不会被清除
存储资源	一般脚本、字体、图片会存在内存当中	一般非脚本会存在内存当中，如css等

4.用css3写一个环形进度条

5.一道关于promise的任务控制编程题

6.说说BFC是什么，能解决什么问题

7.浏览器是怎么加载一个HTML的（解析dom，css，js过程。。。）

8.vue-router实现的原理

9.回流重绘，为什么用transform写动画不用position top left

10.if...else...多层嵌套怎么解决

11.编程题：n维数组转换成1维数组，比如:[1,[2,3],[[4],[5,6]]]变成[1,2,3,4,5,6]

12.写一个EventEmitter

13.当浏览器地址栏输入一个url到页面展现，这个过程？

14.https过程

15.http和tcp的关系

16.编程题，在一个无序数组中找到第二大的数

HTML

浏览器页面有哪三层构成，分别是什么，作用是什么?
HTML5的优点与缺点？
Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
HTML5有哪些新特性、移除了哪些元素？
你做的网页在哪些浏览器测试过,这些浏览器的内核分别是什么?
每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？
说说你对HTML5认识?（是什么,为什么）
对WEB标准以及W3C的理解与认识?

CSS

解释一下CSS的盒子模型？
请你说说CSS选择器的类型有哪些，并举几个例子说明其用法？
请你说说CSS有什么特殊性?（优先级、计算特殊值）
常见浏览器兼容性问题与解决方案？
列出display的值并说明他们的作用？
如何居中div, 如何居中一个浮动元素?
请列举几种清除浮动的方法(至少两种)?
block，inline和inlinke-block细节对比？
什么叫优雅降级和渐进增强？
说说浮动元素会引起的问题和你的解决办法
你有哪些性能优化的方法？

JavaScript

js的各种位置，比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别？
js拖拽功能的实现
异步加载js的方法
js的防抖与节流
说一下闭包
说说你对作用域链的理解
JavaScript原型，原型链 ? 有什么特点？
请解释什么是事件委托/事件代理
Javascript如何实现继承？

函数执行改变this

  <!-- 用箭头函数，指向本身函数对象 -->
  function fn(){
    console.log('real',this); // {a:100}

    var arr = [1,2,3];
    arr.map(item=>{
        console.log(this); // {a:100}
    })
  }
  fn.call({a:100}); // call是强制让fn函数对象指向{a:100}

    <!-- 不用箭头函数,this指向window -->
  function fn(){
  console.log('real',this); // {a:100}

  var arr = [1,2,3];
  arr.map(function(item){
      console.log(this); // window;
  })
   }
  fn.call({a:100});

babel编译原理
函数柯里化
说一下类的创建和继承
说说前端中的事件流
如何让事件先冒泡后捕获
说一下图片的懒加载和预加载
js的new操作符做了哪些事情
改变函数内部this指针的指向函数（bind，apply，call的区别）
Ajax解决浏览器缓存问题

2.谈一谈 JavaScript 的异步？

答：setTimeout、MutationObserver、postMessage、Promise、async、await、generator

从 MutationObserver、postMessage 会牵扯到 vue 的 $nextTick

从 generator 会聊到 co.js 实现，代码不长，意思也好理解，但让我写还真没写出来，建议兄弟们好好看一遍！

从 Promise 和 setTimeout 会聊到下面要说的事件循环

3.浏览器和 nodejs 事件循环？

答：执行栈，promise 是 microTask，setTimeout 是 task

其中很多的阶段，可以从这里看到完整的模型介绍：html.spec.whatwg.org/multipage/w…

需要说出来的点：首先 setTimeout 并没有特殊，也是一个 task。另外每次的执行过 task 和大量的 microtask（不一定在一次循环全执行完）后，会进行 renderUi 阶段，虽然不是每次事件循环都进行 renderUi ，但每次间隔，也就是传说中 60hz 的一帧 16ms。

nodejs 事件循环略有不同...多了 process.nextTick 等

4.手写 Promise 或者 Promise 的静态方法

答：手写 Promise 尽量写出来 Promise 的状态，静态方法以及 .then，.catch。当然更细节的还原可以看 Promise A+ 规范。

静态方法指 Promise.allSettled Promise.all Promise.race 等等。

5.手写节流与防抖

答：老生常谈，原理很简单，主要还是看会不会封装函数，以及封装的高级与否，考虑的情况是否全面。

6.手写 bind 函数

7.service worker 使用

答：缓存，渐进式应用，拦截处理

聊到 worker 可能还会聊到 web worker， shared worder 等等，如果有自信，或者工作对这方面有深入理解，可以秀一下。能体现出自己的优势...

8.严格模式

答：this 的 undefined，禁止 with，arguments 不允许更改，给只读对象赋值抛异常，变量需要先声明，call，apply 第一个参数不会被转换...

能答出来一些就行。

Vue

Vue中 key 值的作用
Vue 组件中 data 为什么必须是函数？
vuex的State特性是？
介绍一下Vue的响应式系统
computed与watch的区别
介绍一下Vue的生命周期
为什么组件的data必须是一个函数
组件之间是怎么通信的
Vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗？
Vue如何实现按需加载配合webpack设置
简单描述每个周期具体适合哪些场景
scss是什么？在Vue.cli中的安装使用步骤是？有哪几大特性？
聊聊你对Vue.js的template编译的理解？
Vue 路由跳转的几种方式
Vue如何实现按需加载配合webpack设置?
Vue的路由实现：hash模式和history模式
Vue与Angular以及React的区别？
Vue路由的钩子函数
什么是Vue的计算属性？

React

介绍一下react
React单项数据流
react生命周期函数和react组件的生命周期
react和Vue的原理，区别，亮点，作用
reactJs的组件交流
有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢
项目里用到了react，为什么要选择react，react有哪些好处
怎么获取真正的dom
选择react的原因
react的生命周期函数
setState之后的流程
react高阶组件知道吗？
React的jsx，函数式编程
react的组件是通过什么去判断是否刷新的
如何配置React-Router
路由的动态加载模块
Redux中间件是什么东西，接受几个参数
redux请求中间件如何处理并发

内存

浏览器、网络、DNS、CDN、

跨标签页通讯

  // 第一种 BroadcastChannel  BroadCast Channel 可以帮我们创建一个用于广播的通信频道。当所有页面都监听同一频道的消息时，其中某一个页面通过它发送的消息就会被其他所有页面收到。它的API和用法都非常简单。
  //  在不同的页面中用相同的名字 new BroadcastChannel()
  const bc = new BroadcastChannel("afc");
  // 发送
  bc.postMessage("hello");
  // 监听
  bc.onmessage = function(e) {
      console.log("监听", e);
  }
  // 关闭
  bc.close();


  // 第二种 Server Worker Service Worker 是一个可以长期运行在后台的 Worker，能够实现与页面的双向通信。多页面共享间的 Service Worker 可以共享，将 Service Worker 作为消息的处理中心（中央站）即可实现广播效果。

浏览器架构
浏览器下事件循环(Event Loop)
从输入 url 到展示的过程
重绘与回流
存储
Web Worker
V8垃圾回收机制
内存泄露
reflow(回流)和repaint(重绘)优化
如何减少重绘和回流?
一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
localStorage 与 sessionStorage 与cookie的区别总结

服务端与网络

HTTPS和HTTP的区别
HTTP版本
从输入URL到页面呈现发生了什么？
HTTP缓存
缓存位置
强缓存
协商缓存
缓存的资源在那里
用户行为对浏览器缓存的影响
缓存的优点
不同刷新的请求执行过程

少量算法

回文串，中心扩散法
冒泡，快排
二分查找
二叉树
动态规划（没遇到考这个的，可能难度太高，面试官看我简单的半天才拿下，这个直接不考虑了，大佬可以关注一下）

算法与数据结构

常用算法

冒泡

function bubbleSort(arr) {
    for (let i = 0, len = arr.length; i < len - 1; i++) {

        for (let j = 0; j < len - 1 - i; j++) {
            console.log(i, j, arr.join());
            count++;
            if (arr[j] - arr[j + 1] > 0) {
                let x = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = x;
            } else {
                // break;
            }
        }


    }
    return arr;
}

去重方法，排序算法，统计最多字母数

二叉树层序遍历
B树的特性，B树和B+树的区别
尾递归
如何写一个大数阶乘？递归的方法会出现什么问题？
把多维数组变成一维数组的方法
说一下冒泡快排的原理
Heap排序方法的原理？复杂度？
几种常见的排序算法，手写
数组的去重，尽可能写出多个方法
如果有一个大的数组，都是整型，怎么找出最大的前10个数

前端知识点-面试题篇

面试题