阅读 94

前端知识点-面试题篇

面试题

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 时,它可选的值有: img 在响应中使用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查询过程如下:

  1. 首先搜索浏览器自身的DNS缓存,如果存在,则域名解析到此完成
  2. 如果浏览器中没有找到,那么会尝试读取操作系统的hosts文件看是否存在对应的映射关系,如果存在,则到此完成
  3. 如果本地hosts文件不存在对应关系,则查找本地DNS服务器(ISP服务器,或者自己手动设置DNS服务器),如果找到,则完成
  4. 如果本地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个数
文章分类
前端
文章标签