面试总结记录（未完）

面试总结（未完）

• 电话面试

问题

• 自我介绍

  自我感觉差

• 项目流程，担任的角色

  疫情数据展示网站， 前端，服务端

• 项目中遇到最大的问题，如何解决的

  echarts地图数据不统一造成的没有效果，手动解决

• 从输入url到页面出现的整个过程（包括计算机网络）

  用户输入url通过DNS(是基于UDP的查询)服务器进行查询，查找到具体的IP地址

  建立TCP链接(三次握手四次挥手), 应用层会下发数据给传输层，TCP协议会指明两端的端口号

  下发给网络层，网络层中的IP协议会确定IP地址，确定数据包如何跳转路由器，再次封装成到数据链路层的数据帧，最后就是物理层的传输

  数据通过服务器后，响应回去，会有不同的状态码

  200 请求成功

  300 页面重定向

  400 客户端错误，错误的请求，不存在请求404，找不到

  500 服务器错误

• 浏览器渲染原理

  • 简单来说

    HTML 构建DOM树，CSS构建CSSOM树

    生成Render树，确定页面元素的布局，样式

  • JS执行有个JS引擎， 执行渲染有个渲染引擎

  • 不同浏览器的渲染引擎也是不同的

  • Firefox - Gecko

  • Chrome，Safari - webkit

    浏览器从服务端接受数据都是0，1字节数据，会先转换成字符串数据，也就是原本的html

    浏览器拿到html后，对html的内容进行标记，就是每一个标签，转换为Node(节点)

    根据不同的关系，构建成一颗DOM树。

    在html中会有引入css文件，这时候会加载css文件，将css转换成功CSSOM树

    从右到左, 比如.div1 span 这个选择器是先检测span这个标签，在检测是否有.div1为span的父代，符合这个条件的，就被选择中了

    尽量少使用标签选择器

    CSSOM树挂载到DOM树上，为渲染树

    渲染树只会包括需要显示的节点，如display: none就不会显示

    生成渲染树之后，根据渲染树来进行布局, 调用GPU进行绘制，合成图层显示在屏幕上

• 重绘和回流

  • 重绘，是当前节点只会改变外观而不影响布局，比如改变颜色
  • 回流，会改变节点的布局
  • 重绘不一定会导致回流，但是回流一定会导致重绘

vue相关

生命周期(基本几个)

beforeCreate 初始化数据，这个时候获取不到数据

created 可以访问数据，但是组件还没有挂载还是看不见

beforeMount, 创建虚拟dom

mounted将虚拟dom渲染为真实dom并且渲染数据

beforeUpdate和updated数据进行更新时候调用

• 在路由视图外使用keep-alive, 可以使得组件进行缓存，数据也是缓存下来的，因此可以使用:key="$route.path"根据不同的路径可以不用缓存。也有钩子函数，deactivated和activated

vue中计算属性computed和监听属性watch的区别

依赖其他属性进行计算, 有缓存，只有属性有变化才会返回内容

watch监听属性值的变化，值发生了改变就会执行回调函数

对原有属性做一些复杂的变化使用计算属性computed

根据属性值的变化来做一些逻辑

v-if和v-show

• v-if开始为假的话，则什么都不会发生，只有为真的时候会进行渲染。但是在切换的过程中会重新销毁和重建
• v-show在开始的时候不管真假，都会被渲染，之后只是进行css的切换
• 因此切换次数很多使用v-show，如果切换次数很少可以使用v-if

vue计算属性的缓存机制

• 计算属性是基于它们的响应式依赖进行缓存的
• 计算属性的getter, setter

vue数据响应的原理

vue中data什么时候可以写成对象的形式

• new Vue()的时候data可以写成对象的形式
• 在组件复用的时候，写成对象的形式，可以造成一个组件修改了data后，其它的组件也会被影响到，因此需要写成函数的形式。

浏览器相关

• 项目优化(页面出现白屏，卡顿问题)

  • 操作dom很慢

    DOM是渲染引擎里面的，JS是JS引擎里面的, 使用JS操作DOM，就是两个线程之间进行通信，就会有一些性能上的消耗，操作dom会出现重绘和回流的现象，更加消耗浏览器的性能

  • 导致性能的一些问题

    改变window的大小

    改变字体

    添加或者删除样式

    文字改变

    定位或者浮动

    盒模型

  • html方面，css方面，js方面

• 规范

  减少文件的大小(压缩文件)

  减少嵌套函数

  让v8引擎优化代码，尽可能保证传入的参数的类型一致(也就是说一个函数只处理传入定义好的变量，不要传入不同的类型的变量，再在函数里面进行类型的判断)