初级前端工程师高频面试题

如何在只知道对象名的情况下拿到

用Object.keys(对象名) 拿key   

 Object.values(对象名)  拿值

Object.assign(a,b)   可以合并两个对象(把b的值赋给a,有重复的就覆盖)

for 和 forEach 之间的区别是什么?

for 可以从任意下标循环,可以跳出(break) 可以修改索引(例如循环到倒数第二个我再从新循环)

真实dom虚拟dom

          //1、创建虚拟dom

          const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'hello react'))

          //2、渲染虚拟dom到页面

          ReactDOM.render(VDOM,document.getElementById('test'))

          //获取真实dom

          var TDOM = document.getElementById('test')

          console.log('虚拟dom',VDOM)

          console.log('真实dom',TDOM)

虚拟dom就是用js创建的dom 是一个对象例如使用 createElement 创建的

真实dom是用html写出来的代码,

打debbug的时候可以发现虚拟dom

虚拟dom体积小 不会进行排版与重绘,

虚拟DOM实现原理?

虚拟DOM的实现原理主要包括以下3部分:

用JavaScript对象模拟真实DOM树,对真实DOM进行抽象;

diff算法-比较两棵虚拟DOM树的差异;

pach算法-将两个虚拟DOM对象的差异应用到真正的DOM树。

虚拟DOM的优缺点

优点:

保证性能下限:框架的虚拟 DOM需要适配任何上层API可能产生的操作,它的-些DOM操作的实现必须是普适的,所以它的性能并不是最优的;但是比起粗暴的DOM操作性能要好很多,因此框架的虚拟DOM至少可以保证在你不需要手动优化的情况下,依然可以提供还不错的性能,即保证性能的下限;

, 无需手动操作DOM:我们不再需要手动去操作DOM,只需要写好View-Model的代码逻辑,框架会根据虚拟DOM和数据双向绑定,帮我们以可预期的方式更新视图,极大提高我们的开发效率;

跨平台:虚拟DOM本质上是JavaScript对象而DOM与平台强相关,相比之下虚拟DOM可以

进行更方便地跨平台操作,例如服务器渲染、weex 开发等等。

缺点:

, 无法进行极致优化: 虽然虚拟DOM +合理的优化,足以应对绝大部分应用的性能需求,但在-一些性能要求极高的应用中虚拟DOM无法进行针对性的极致优化。

兄弟传参

可以用第三方的组件库, npm  i  pubsub-js  引入import pubsub from 'pubsub-js'

Pubsub.publish(‘方法名’,参数)

改变this指向 区别

call bind apply

fn.call(obj,1,2,3)

fn.bind(obj)(1,2,3)

fn.apply(obj,[1,2,3])

区别,call直接写参数,bind不会调用需要手动调用,apply需要把参数写成数组

浏览器如何渲染网页

解析HTML生成DOM树 - 渲染引擎首先解析HTML文档,生成DOM树

构建Render树 - 接下来不管是内联式,外联式还是嵌入式引入的CSS样式会被解析生成CSSOM树,根据DOM树与CSSOM树生成另外一棵用于渲染的树-渲染树(Render tree),

布局Render树 - 然后对渲染树的每个节点进行布局处理,确定其在屏幕上的显示位置

绘制Render树 - 最后遍历渲染树并用UI后端层将每一个节点绘制出来

防抖和节流:

防抖:为什么:防抖就是防止抖动,避免事件的重复触发等用户高频事件完了,再进行事件操作。比如监听输入框联想

设计思路:事件触发后开启一个定时器,如果事件在这个定时器限定的时间内再次触发,则清除定时器,在写一个定时器,定时时间到则触发。

function debounce(fn, delay){

let timer = null;

return function(){

clearTimeout(timer);

timer = setTimeout(()=> {

fn.apply(this, arguments);

}, delay)

}

}

节流:为什么:节流就是减少流量,将频繁触发的事件减少,并每隔一段时间执行。比如发短信验证码

function throttle(fn, delay){

let valid = true;

return function(){

if(valid) {

setTimeout(()=> {

fn.apply(this, arguments);

valid = true;

}, delay)

valid = false;

}

}

}

什么是TCP三次握手

1.第1次握手 建立连接

客户端向服务器发送的报文SYN包信息中SYN码为1

2.第2次握手 服务器回应客户端,用于接受并连接请求

服务器返给客户端的的报文SYN码和ACK码都为1,也称呼为syn-ack报文信息。

3.第3次握手 客户端最终发给服务器的,用来确认服务器回复的

客户端最终发给服务器的报文信息ACK码为1,我们称呼为ack包。

4.第4次 也就是俗称的 最终断开连接

三次握手的目的

三次握手的目的是建立可靠的通信通道,说到通信,简单来说就是数据的发生与接收,而三次握手最主要的目的就是双方确认自己与对方的发送与接收是否正常

你用过那些v-model修饰符?

.lazy文本框失去焦点后在更新数据

.trim清除前后空格的

.number从字符中获取数字

你知道那些事件修饰符?

.stop 阻止事件冒泡

.once 只执行一次,一次性事件

.self 阻止事件冒泡和事件捕获

.captrue 事件捕获阶段触发

.prevent 阻止浏览器默认行为

.native 触发原生事件

对URL进行转码解码

转码encodeURIComponent     解码decodeURIComponent

Vue2$data $options

this.$data 拿到data  this.$data.a=this.a

this.$options.data() 拿到初始值,无论data里的值怎么变

Object.assign(this.$data,this.$options.data()) 初始化data

H5新特性

语义化标签  

表单新特性 color  email   placeholder    

vedio和audio .

 canvas画布  

webSocket

DOM查询操作

事件委托

 就是利用冒泡机制把原本在子元素上的方法放到父元素上,减少事件注册以及内存占用

promise和async await的区别

promise是es6的语法,async await是es7的新特性

async await 是基于promise实现的,不能用于普通函数,它和promise一样都是非阻塞的,

promise可能在请求还没返回时就先执行了外面的操作

async await 像同步的操作

Vue2和vue3的双向绑定啥区别

vue3 中使用了 es6 的 ProxyAPI 对数据代理

vue2 的双向数据绑定 是利用ES5 的一个 APlbject.defineProperty0对数据进行劫持 结合 发布订阅模式的方式来实现的

微信小程序的分包

在app.Json里写一个和pages同级的标签subpackages   ,里边有 root(分包路径) name(名字) pages(页面路径)independent(是否独立加载)

注意:分包之间的跳转的路径需要写全带着root的一级   分包跳主包 可以用switchTab 或者reLaunch

接口数据加密

import CryptoJS from 'crypto-js'

sessionStorge

新开一个会话不会把sessionStorge的数据带过来

computed和watch

Computed不可以做异步  watch可以做异步

路由守卫

beforeEach((to, from, next) 不next()就会卡哪儿 不往下走

给A标签清除浮动

A后加标签css + clear:both

父级加css  +  overflow:hidden

A+ :after{/*伪元素是行内元素 正常浏览器清除浮动方法*/

        content: "";

        display: block;

        height: 0;

        clear:both;

        visibility: hidden;

    }

    .clearfix{

        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/

}

$set

this.$set(this.data,  ”key”,   value')   

               对象名      key键      设置的值

Vue.set

this.$forceUpdate()                                     =>强制刷新视图

Guess you like

Origin blog.csdn.net/weixin_48091030/article/details/130369270