前端做题

cfang
267 阅读13分钟

试卷:juejin.cn/post/684490…

url输入到页面显示全过程

  • 浏览器开启新的线程来处理请求,并向dns 服务器发送dns 解析请求.

  • 通过三次握手完成tcp 连接

  • 发送http 请求

  • 服务器处理请求并返回结果给浏览器

  • 浏览器完成服务器数据的下载,开始解析

  • 第一步：将载入的HTML文件解析成DOM树（DOM Tree），并且将各个标记标识解析成DOM树的各个节点；在解析HTML的同时会将CSS样式解析成CSS规则（CSS Rules）。

  • 第二步：将解析成的DOM树和CSS规则进行关联生成渲染树（Render Tree）。

  • 第三步：进入布局阶段，为DOM树的每个节点分配在屏幕上出现的确切坐标(reflow)（这一阶段还是渲染树）

  • 第四步：进入绘制阶段(repaint，在这里渲染引擎的工作就结束了，接下来就给用户界面后端（UI Backend）对渲染树的每个节点进行绘制，呈现出页面效果。

url输入到页面显示全过程

  1. 用户输入

当用户输入关键字并键入回车之后，这意味着当前页面即将要被替换成新的页面，不过在这个流程继续之前，浏览器还给了当前页面一次执行 beforeunload 事件的机会，beforeunload 事件允许页面在退出之前执行一些数据清理操作，还可以询问用户是否要离开当前页面。

  1. URL 请求过程

首先，网络进程会查找本地缓存是否缓存了该资源。 如果有缓存资源，那么直接返回资源给浏览器进程；如果在缓存中没有查找到资源，那么直接进入网络请求流程。这请求前的第一步是要进行 DNS 解析，以获取请求域名的服务器 IP 地址。如果请求协议是 HTTPS，那么还需要建立 TLS 连接。

其中，DNS也有几步缓存：浏览器缓存，hosts文件， 如果本地域名解析服务器也没有该域名的记录，则开始递归+迭代解析 TCP三次握手，HTTP。TLS握手，HTTPS。

接下来就是利用 IP 地址和服务器建立 TCP 连接。连接建立之后，浏览器端会构建请求行、请求头等信息，并把和该域名相关的 Cookie 等数据附加到请求头中，然后向服务器发送构建的请求信息。 数据在进入服务端之前，可能还会先经过负责负载均衡的服务器，它的作用就是将请求合理的分发到多台服务器上，这时假设服务端会响应一个 HTML 文件。 首先浏览器会判断状态码是什么，如果是 200 那就继续解析，如果 400 或 500 的话就会报错，如果 300 的话会进行重定向，这里会有个重定向计数器，避免过多次的重定向，超过次数也会报错。 浏览器开始解析文件，如果是 gzip 格式的话会先解压一下，然后通过文件的编码格式知道该如何去解码文件。

  1. 准备渲染进程

默认情况下，Chrome 会为每个页面分配一个渲染进程，也就是说，每打开一个新页面就会配套创建一个新的渲染进程。

  1. 渲染阶段

文件解码成功后会正式开始渲染流程，先会根据 HTML 构建 DOM 树，有CSS的话会去构建 CSSOM 树。如果遇到 script 标签的话，会判断是否存在 async 或者 defer ，前者会并行进行下载并执行 JS，后者会先下载文件，然后等待 HTML 解析完成后顺序执行。 如果以上都没有，就会阻塞住渲染流程直到 JS 执行完毕。

CSSOM 树和 DOM 树构建完成后会开始生成 Render 树，这一步就是确定页面元素的布局、样式等等诸多方面的东西 在生成 Render 树的过程中，浏览器就开始调用GPU 绘制，合成图层，将内容显示在屏幕上了。

一次完整的http协议请求过程

1.建立tcp连接 2.web浏览器向web服务器发送请求命令 3.web服务器发送请求头信息 4.web服务器应答（协议版本号和状态码） 5.web服务器应答头信息 6.web服务器向浏览器发送数据 7.web服务器关闭tcp连接

vuex包括哪些内容

Vuex 类似 Redux 的状态管理器，用来管理Vue的所有组件状态

css 重排reflow, 重绘 repaint

reflow : 重排（Layout）就是页面元素发生几何变更（例如位置变更），牵连其它元素发生几何变化，导致页面所有元素执行一次重新排版

repaint : 重绘（Paint）就是页面元素发生样色变更（例如颜色变更），但不影响其它元素发生几何变化，使页面执行一次重新绘图。

vuex其他题目

State

用来存放组件之间共享的数据。他跟组件中的data选项，只不过组件中data是用来存放组件的私有数据。

Getter

有时候我们需要从 store 中获取一些数据，使用Getter来获取，Getter可以对数据进行操作，类似于computed。

Mutation

更改 Vuex 的 store 中的状态的唯一方法，且为同步方法，类似methods。

Action

Action会通过Mutation，让Mutation帮他提交数据的变更。 Action支持异步请求

//async
store.dispatch('action', poayload)
//
//sync
store.commit('action', payload)

Module

当应用变得非常复杂时，store 对象就有可能变得相当臃肿。Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。

vue项目优化

webpack 优化

代码优化

  1. 区分v-show v-if
  2. 区分 watch computer
  3. 路由懒加载

使用require来导入组件,而不是直接import 组件

component：resolve=>(require(['需要加载的路由的地址'])，resolve)

或者使用es6 的动态加载

component: （）=>import('需要加载的模块地址')

export default {
  components: {
    Schedule: () => import('@/pages/coms/oa/schedule'),
    Task: () => import('@/pages/coms/oa/task'),
    Approve: () => import('@/pages/coms/oa/approve'),
    News: () => import('@/pages/coms/oa/news')
  }
}
  1. 按需加载组件 使用 babel-plugin-component 完成按需加载
  2. 使用keep-alive 减少重复请求

computed和watch区别

computed： 是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；

watch： 更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作；

vuex中store存储store.commit和store.dispatch的区别及用法

dispatch：含有异步操作，数据提交至 actions ，可用于向后台提交数据

写法示例： this.$store.dispatch('isLogin', true);

commit：同步操作，数据提交至 mutations ，可用于登录成功后读取用户信息写到缓存里

写法示例： this.$store.commit('loginStatus', 1);

在.vue文件中style是必须的吗？那script是必须的吗？为什么？

template 必须,没有会报错, 其他可以没有.在函数式组件中可以不定义script

vue-router钩子介绍

全局钩子

  1. router.beforeEach 全局前置守卫 进入路由之前
  2. router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用
  3. router.afterEach 全局后置钩子 进入路由之后

组件钩子 , 路由组件内的守卫：

  1. beforeRouteEnter 进入路由前
  2. beforeRouteUpdate (2.2) 路由复用同一个组件时
  3. beforeRouteLeave 离开当前路由时

vue-router懒加载实现

.lazy

v-model默认的触发条件是input事件,加了.lazy修饰符之后,v-model会在change事件触发的时候去监听

es6语法用过哪些基本数据类型

let var区别

通过let定义的变量，作用域是在定义它的块级代码以及其中包括的子块中，并且无法在全局作用域添加变量。 通过var定义的变量，作用域为包括它的函数作用域或者全局作用域。 通过let定义的变量，在同一个作用域内，不可以重复声明。 通过var定义的变量，在同一个作用域内，可以重复声明，在生成执行上下文的时候，会无视后面的声明。

var a = 1;
var a = 2
// ==>
 var a = 1;
 a = 2; //第二次的var 声明被无视了

什么是闭包

闭包的同级变量和子级变量能否获取到

this是什么

作用域有哪些

局部作用域、全局作用域, 块作用域 对应分为 局部变量,全局变量 块级变量。 变量在函数外定义为全局变量，全局变量有全局作用域：网页中的所有脚本和函数均可使用。 在代码中任何地方都能访问到的对象拥有全局作用域

变量在函数内部声明为局部作用域。

块作用域由 { } 包括，if语句和for语句里面的{ }也属于块作用域

什么是块级作用域

//todo

如何在当前js中使用其他js变量

//todo

如何给数组添加新的方法？（考察原型、继承）

通过 Array.prototype.方法名=function(){ }

双等三等区别

"=="就代表会先把两端的变量试图转换成相同类型，然后再比较；"==="就代表会直接去比较类型是否相同，如果类型相同则继续比较值是否相同。

如何判断两个数组是否相等，是用双等还是三等？（是个坑，双等三等都不行）

arr.toString() === arr2.toString()

undefined和null区别

  1. 都是js 中的原始类型

  2. undefined是基本数据类型 表示未定义 缺少的意思

  3. null是引用数据类型 是对象 表示空对象

  4. undefined是从null派生出来的 所以undefined==null true

  5. null 表示一个值被定义了，定义为“空值”；

  6. undefined 表示根本不存在定义。

  7. 所以设置一个值为 null 是合理的，如 objA.valueA = null;

  8. 但设置一个值为 undefined 是不合理的

0.1+0.2在三等情况下是否等于0.3

//todo

static和assets有什么区别

放在static中的文件不会进行构建编译处理，也就不会压缩体积，在打包时效率会更高，但体积更大在服务器中就会占据更大的空间

放在assets中的文件会进行压缩体积、代码格式化，压缩后会放置在static中一同上传服务器。

因此建议样式文件放在assets中进行打包，引入的第三方文件放到static中，因为引入的文件已经做过打包处理。

jQuery属性选择器如何拿到第三个input节点

$("input:eq(2)")

vue

用过的组件库有哪些

iview elementui vant

MVVM如何实现

MVVM是什么？ 响应式，双向数据绑定，即MVVM。是指数据层（Model）-视图层（View）-数据视图（ViewModel）的响应式框架。它包括：

  1. 修改View层，Model对应数据发生变化。

  2. Model数据变化，不需要查找DOM，直接更新View。

  3. MVVM的实现方式 通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

diff算法理解

先根据真实DOM生成一颗virtual DOM，当virtual DOM某个节点的数据改变后会生成一个新的Vnode，然后Vnode和oldVnode作对比，发现有不一样的地方就直接修改在真实的DOM上，然后使oldVnode的值为Vnode。

diff的过程就是调用名为patch的函数，比较新旧节点，一边比较一边给真实的DOM打补丁。 详细解释:www.cnblogs.com/wind-lanyan…

v-if v-show区别

单页面多页面区别

computed、watch区别

location.href和vue-router跳转有什么区别

vue-router使用pushState进行路由更新，静态跳转，页面不会重新加载；location.href会触发浏览器，页面重新加载一次

生命周期mount阶段做来什么

可以访问dom 了

项目中有多个环境怎么处理

v-once是做什么的

执行一次性地插值，当数据改变时，插值处的内容不会更

路由懒加载如何

  1. resolve=>(require(['需要加载的路由的地址'])，resolve)
  2. () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home')

watch 为什么不能用箭头函数

箭头函数的this来自定义时的上下文(vue 中一般为父组件)

实现图片懒加载原理是什么

将真实图片地址放到非src 属性中. src 用一个占位图片代替。 然后计算出页面scrollTop的高度和浏览器的高度之和， 如果图片距离页面顶端的坐标Y（相对于整个页面，而不是浏览器窗口）小于前两者之和，就说明图片就要显示出来了（合适的时机，当然也可以是其他情况），这时候我们再加载真实图片, 加载完成后修改src地址为真实地址

Vue3.0都有哪些重要新特性？

www.cnblogs.com/it-Ren/p/10…

  1. 压缩包体积更小 当前最小化并被压缩的 Vue 运行时大小约为 20kB（2.6.10 版为 22.8kB）。Vue 3.0捆绑包的大小大约会减少一半，即只有10kB！

  2. Object.defineProperty -> Proxy Object.defineProperty是一个相对比较昂贵的操作，因为它直接操作对象的属性，颗粒度比较小。将它替换为es6的Proxy， 在目标对象之上架了一层拦截，代理的是对象而不是对象的属性。这样可以将原本对对象属性的操作变为对整个对象的操作，颗粒度变大。

javascript引擎在解析的时候希望对象的结构越稳定越好，如果对象一直在变，可优化性降低，proxy不需要对原始对象做太多操作。

  1. Virtual DOM 重构

vdom的本质是一个抽象层，用javascript描述界面渲染成什么样子。rexact用jsx，没办法检测出可以优化的动态代码，所以做时间分片，vue中足够快的话可以不用时间分片。 新版将模板性能与模板大小解耦,变为依赖于动态节点数量,整体性能提升2-5被

传统vdom的性能瓶颈：

虽然 Vue 能够保证触发更新的组件最小化，但在单个组件内部依然需要遍历该组件的整个 vdom 树。 传统 vdom 的性能跟模版大小正相关，跟动态节点的数量无关。在一些组件整个模版内只有少量动态节点的情况下，这些遍历都是性能的浪费。 JSX 和手写的 render function 是完全动态的，过度的灵活性导致运行时可以用于优化的信息不足

使用functional-api 代替 class -api

弹性盒子中 flex: 0 1 auto 表示什么意思？

www.jianshu.com/p/4df56ee56…

flex-grow:项目的放大比例，默认为0，如果存在剩余空间，不放大 flex-shrink:项目的缩小比例，默认为1，如果空间不足，会适当缩小 flex-basis:在分配空间之前，项目的主轴空间，相当于我们设置的width，

flex:none;   // flex : 0,0,auto;
flex:auto;  // flex:1,1,auto;
flex:1;    //  flex:1,1,0%;
avatar
文章
阅读
粉丝