面试回顾...

阿不不不不
221 阅读5分钟

输入URL到页面加载完成都经历了什么？

  1. 输入URL 摁下回车。
  2. 查找当前URL是否存在缓存，并比较缓存是否过期。
  3. DNS解析URL对应IP地址。
  4. 根据IP地址建立TCP连接（TCP三次握手）
  5. HTTP发起请求
  6. 服务器处理请求，浏览器接收HTTP响应。
  7. 渲染页面，构建DOM树。
  8. 关闭TCP连接（四次挥手）。

webSocket协议和http协议的区别

http是非常被动的，只能由客户端发起请求。

中间有过渡型方案，long poll（服务端有值了才response）或者ajax轮询（不停的发起请求询问）。

webSocket是通过tcp握手之后，使用Upgrade：websocket和Connection：Upgrade升级成的协议，从单工切换为全双工，解决了被动性的问题。

css常用选择器有哪些？

  1. 标签选择器（元素选择器）。 tagName {}
  2. 类选择器。 .className {}
  3. ID选择器。#idName {}
  4. 全局选择器。* {}
  5. 组合选择器（多种搭配）。tagName .className {}
  6. 继承选择器。ul li {}
  7. 伪类选择器。name : hover|visited|active|link {}

水平垂直居中

  1. table。父级元素为table，子元素为：cell-table，vertical-align：center。
  2. 定位。子元素绝对定位position:absolute，top:50%,left:50%，再相对自身位移transform:translate(-50%,-50%);
  3. flex。设置父级元素,display:flex;justify-content:center;align-items:center;
  4. margin。子元素绝对定位position:absolute，top、left、right、bottom均为0，再设置margin:auto;
  5. 行级元素，可以设置line-height 等于 height。

盒子模型

css盒子模型本质是一个盒子，包括实际内容（content）、内边距（padding）、边框（border）、边距（margin）；

  1. 标准盒子模型（w3c）：width = content；
  2. 怪异盒子模型（IE模型）：width = content + padding + border； 可以通过box-sizing属性切换：w3c:content-box,ie:border-box;

js的闭包的理解和使用场景

理解：js闭包是实现保存变量的引用，不被垃圾回收机制所回收。 场景：

  1. 利用闭包设定私有变量和方法，只return可操作方法。
  2. 缓存（保存状态，不被回收）。
  3. settimeout回调函数传参。

this对象的理解

只有在函数执行的时候this才能被确定。

  1. 作为纯粹的函数调用，this指向window。
  2. 作为对象的方法，this指向调用的对象。如果这个方法被赋值，则this指向丢失，回到默认window指向。
  3. 使用了call、apply、bind，this指向指定的对象。
  4. 作为构造函数的时候，this指向新创建的对象。

js基本数据类型有哪些？

Number、String、Boolean、Undefined、null、Symbol(ES6)、BigInt(IE10) Symbol是生命全局唯一变量的。 BigInt是大整数计算。末尾加n。（解决超过Number的范围+-2^53-1,会四舍五入的情况）

js异步

  1. 回调函数。缺点：依赖关系多了，依赖关系多了会有地狱问题；如果对方执行了多次你的回调函数，可能会造成错误（有个名词 我忘了叫什么）。
  2. Promise。单决议。resove-成功；reject-失败；then-返回一个promise；解决的问题：（1）阅读起来像同步思想（2）对方多次执行回调函数不会有影响。
  3. generator生成器。允许函数暂停和恢复。function* funName(){yield} 通过next（）执行。缺点：需要一个run方法，来执行这个生成器函数。
  4. async await。async funName(){await }，底层是生成器和promise的结合实现。

cookie localStorage sessionStorage

cookie：解决协议无状态的问题，每次请求都会携带，大小 4kb。

sessionStorage：会话级别的本地存储，页面关闭清空，大小 5M。

localStorage：持久本地存储，可设置时长，默认浏览器关闭清空，大小5M。

vue对象的生命周期

  1. beforeCreat
  2. created 完成了data
  3. brforeMount
  4. mounted
  5. beforeUpdate
  6. updated
  7. beforeDestory
  8. destoryed

computed 和 watched的区别

computed:相关依赖发生改变才会重新求值。监听data以外的变量，即作为本身。

watch:监听data里面的变量。

弹性flex布局

说一下？ 可以根据可视窗口的变化自动分配设置好的占比空间。

属性：

    display:flex;
    flex-direction:row | colnum;
    flex-wrap:nowrap | wrap;
    justify-content:center | flex-star | flex-end | space-between | space-around;
    align-items:center | flex-star | flex-end;
    flex:1;
    flex-shrink:1;
    flex-basis:1;
    order:1;
    align-self //覆盖align-items样式

vue-router

  1. hash（#），请求只包含域名、端口号，后面的路径放在请求头里面携带，只可同文档URL，所以不需要做路由覆盖处理。
  2. history，利用H5新API history.pushState(状态对象state，标题title，URL可选默认当前URL)，可为同源任意URL，添加到历史状态栈，浏览器地址也会改变，但是不会真的发送请求;刷新、重启浏览器可能会发送请求，所以如果匹配不到静态资源会返回404，所以需要后端做路由全覆盖。

路由守卫

router.beforeEach(to,from,next) to:目标路由对象 from:当前导航正要离开的路由 next:进行管道中的下一个钩子，next(false)中断当前导航。next('/')中断，进行新的导航。next(error)终止并报错。

也可以在router.js配置中配置独享的守卫，增加beforeEach对象。

浏览器 以及 内核

常用：IE、Safari、Chrome、Firefox、Opera 内核：WebKit（Safari、Chrome）V8引擎-js 内核的理解：排版渲染引擎、javascript引擎、其他。

js-V8引擎：

  1. 源代码->抽象语法树。
  2. 抽象语法树->通过JIT编译器的全代码生成器，直接生成本地代码。

排版渲染引擎：

  1. 解析html生成dom树。如果此时有js操作dom节点，会阻塞运行。js操作css，会先去下载css文件。async-并行下载，下载完执行，乱序+阻塞，defer-并行下载，dom完成执行，有序。
  2. 解析css生成规则树。
  3. 将dom树和css规则树合并生成渲染render树。
  4. 遍历渲染树开始paint布局，计算每个节点的位置大小等信息。
  5. 将渲染树的每个节点绘制到屏幕。

虚拟dom： 将render函数渲染成vnode，有dom操作时将新旧节点的对比在vnode上计算更新（在内存中 所以更快）完成之后，一次性操作dom完成更新。

i18n 全称

i18n（其来源是英文单词 internationalization的首末字符i和n，18为中间的字符数）是“国际化”的简称。在资讯领域，国际化(i18n)指让产品（出版物，软件，硬件等）无需做大的改变就能够适应不同的语言和地区的需要。

0.5px

avatar
文章
阅读
粉丝