百度360必应搜狗淘宝本站头条
linux文件压缩linux用户组查看linux磁盘mysql安装linuxlinux多线程
当前位置：网站首页 > 优雅编程 > 正文

腾讯web前端面试题及解答(vue)202006

sinye56 2024-10-26 14:43 5 浏览 0 评论

web前端最近几年还是非常火，需求也比较大，且相对后端来说，web前端对非计算机专业同学门槛会更低一些，因此，不少同学转web前端坑。本文整理了腾讯几个部门web前端（vue方向）的面试题以及一些解答，希望对web前端同学有一定帮组。


一、JS/HTML/CSS

web前端三马车的问题问的比较少，可能跟网上有点多有关。


1.讲讲对promise的理解？

网上有


2.讲讲对d3的理解，讲讲d3与echarts的区别

1) d3正如其名 Data Driven Documents，其本质是将数据与 DOM 绑定，并将数据映射至 DOM 属性上；

2) d3与echarts的区别：

  1. d3通过svg绘制图形，可以自定义事件。svg不依赖分辨率，继续xml绘制图形，可以操作dom。支持事件处理器，复杂度高，会减慢页面的渲染速度。
  2. echarts通过canvas来绘制图形，用户通过配置 options 参数，就可很容易绘制指定图表。canvas依赖分辨率，基于js绘制图形，不支持事件处理，能以png或者jpg的格式保存图片。


3.前端需要注意哪些seo(搜索引擎优化)？

  • 合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可
  • 语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
  • 重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取 重要内容不要用js输出：爬虫不会执行js获取内容
  • 少用iframe：搜索引擎不会抓取iframe中的内容
  • 非装饰性图片必须加alt
  • 提高网站速度：网站速度是搜索引擎排序的一个重要指标


4.面试过程手写三角形的CSS样式

网上有，有几种写法。


二、VUE

1. vuex原理

  • vuex的store有State、 Getter、Mutation 、Action、 Module五种属性；
  • state 为单一状态树，在state中需要定义我们所需要管理的数组、对象、字符串等等
  • getters 类似vue的计算属性，主要用来过滤一些数据。
  • mutation 更改store中state状态的唯一方法就是提交mutation，store.commit。
  • action actions可以理解为通过将mutations里面处理数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action。
  • module module其实只是解决了当state中很复杂臃肿的时候，module可以将store分割成模块，每个模块中拥有自己的state、mutation、action和getter。

2.vue双向数据绑定，讲讲发布者订阅者模式

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的：

1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者；

2.实现一个订阅者Watcher，每一个Watcher都绑定一个更新函数，watcher可以收到属性的变化通知并执行相应的函数，从而更新视图；

3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令（v-model，v-on等指令），如果节点存在v-model，v-on等指令，则解析器Compile初始化这类节点的模板数据，使之可以显示在视图上，然后初始化相应的订阅者（Watcher）；

a、Observer实现对MVVM自身model数据劫持，监听数据的属性变更，并在变动时进行notify；

b、Compile实现指令解析，初始化视图，并订阅数据变化，绑定好更新函数；

c、Watcher一方面接收Observer通过dep传递过来的数据变化，一方面通知Compile进行view update；

先初始化一个监听器Observer，用于监听该对象data属性的值。

然后初始化一个解析器Compile，绑定这个节点，并解析其中的v-，" {{}} "指令，（每一个指令对应一个Watcher）并初始化模板数据以及初始化相应的订阅者，并把订阅者添加到订阅器中（Dep）。这样就实现双向绑定了。

整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 {{}}），最终利用watcher搭起observer和Compile之间的通信桥梁

data如何更新view

使用observer（观察者）实现数据劫持，绑定watcher（订阅者）的更新函数，watcher通知compile（模板编译）更新虚拟dom，最终挂载真实dom上

view如何更新data

使用事件监听函数绑定事件，在事件中改变值触发observer的set，再触发watcher


3. 父子组件如何通信，兄弟组件如何通信

父子组建通信方式主要以下几种：

  • Prop（常用）
  • $emit (组件封装用的较多)
  • .sync语法糖 （较少）
  • $attrs & $listeners (组件封装用的较多)
  • provide & inject （高阶组件/组件库用的较多）
  • slot-scope & v-slot （vue@2.6.0+）新增
  • scopedSlots 属性

具体例子：

1）父组件->子组件

　　（1）直接关系：

　　　　1. 属性传值(props)

　　　　2. $children（数组）

　　　　3. $refs

　　（2）跨多层关系：

　　　　1. provide / inject

2）子组件->父组件

　　（1）直接关系：

　　　　1. 事件传值

　　　　2. $parent

　　（2）跨多层关系：

　　　　1. 暂无

3）兄弟组件

　　（1）使用事件中心，实例化一个空的 Vue 实例（建议使用vuex）


4.vue如何将一个组件打包上传

自定义组件打包上传到npm，网上有具体流程。


三、安全

1. 讲讲CSRF和XSS

1）XSS 其实就是所谓的 HTML 注入，攻击者的输入没有经过后台的过滤直接进入到数据库，最终显示给来访的用户。如果攻击者输入一段 js 脚本，就能窃取来访者的敏感信息（比如 Cookie），实现伪装成来访者对网站发送危险请求。

2）避免 XSS 的方法之一主要是对用户输入的内容进行过滤。

3）XSS 是实现 CSRF 的诸多途径中的一条，但绝对不是唯一的一条。一般习惯上把通过 XSS 来实现的 CSRF 称为 XSRF。

4）要完成一次CSRF攻击，受害者必须依次完成两个步骤：

  • 登录受信任网站A，并在本地生成Cookie。
  • 在不登出A的情况下，访问危险网站B。

5）给每个表单加入随机 Token 进行验证，这样B页面无法获取A页面的 Token 导致请求验证失败，从而防止了 CSRF。CSRF攻击是源于WEB的隐式身份验证机制！WEB的身份验证机制虽然可以保证一个请求是来自于某个用户的浏览器，但却无法保证该请求是用户批准发送的！


2. DNS劫持与DNS污染

  • DNS劫持 DNS劫持就是通过劫持了DNS服务器，通过某些手段取得某域名的解析记录控制权，进而修改此域名的解析结果，导致对该域名的访问由原IP地址转入到修改后的指定IP。DNS劫持通过篡改DNS服务器上的数据返回给用户一个错误的查询结果来实现的。
  • DNS污染 DNS污染，指的是用户访问一个地址，国内的服务器(非DNS)监控到用户访问的已经被标记地址时，服务器伪装成DNS服务器向用户发回错误的地址的行为。范例，访问Youtube、Facebook之类网站等出现的状况。


四、性能优化


1.计算浏览器的白屏时间

1）白屏时间 = 地址栏输入网址后回车 - 浏览器出现第一个元素

影响白屏时间的因素：网络、服务端性能，前端页面结构设计。

2）给个例子，通常认为浏览器开始渲染<body>或者解析完<head>的时间是白屏结束的时间点

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>白屏时间</title>

<script>

// 开始时间

window.pageStartTime = Date.now();

</script>

<link rel="stylesheet" href="">

<link rel="stylesheet" href="">

<!-- ...页面css资源 -->

<script>

// 白屏结束时间

window.firstPaint = Date.now()

</script>

</head>

<body>

<div>123</div>

</body>

</html>

白屏时间 = firstPaint - pageStartTime


2. 加载一个很长的列表，怎么优化性能？

简单说下几方面方法：

1）将表格实现改为其他元素标签实现

2）仅渲染视窗可见的数据

3）进行函数节流，即控制scroll事件的处理，在规定的时间内仅触发一次

4）减少驻留的VNode和Vue组件，不使用显示的子组件slot方式，改为手动创建虚拟DOM来切断对象引用

5）减少操作期间增加的对象，操作时组件必然会更新创建，可以减少组件中子组件的数量


非技术问题

1、你遇到的最大的困难？是如何克服困难的？

2、印象最深刻的一个项目，为什么，这个项目给你的最大的收获是啥？


笔试题：

1. 手写快速排序算法

var quickSort = function(arr) {
    if(arr.length<=1)
        return arr;
    var left=[],right=[];    
    var index=Math.floor(arr.length/2);
    var midVal=arr.splice(midVal,1)[0];
    for(var i=0;i<arr.length;i++){
        arr[i]<midVal?left.push(arr[i]):right.push(arr[i]);
    }
    return quickSort(left).concat(midVal).concat(quickSort(right));
};


2.js实现数组千分位

//正则实现
function format (num) {  
    var reg=/\d{1,3}(?=(\d{3})+$)/g;   
    return num.toString().replace(reg, ',');  
}
//基础
function format(num){
    num+='';
    var str="";
    for(var i=num.length-1,j=1;i>=0;i--,j++){
        if(j%3===0 & i!=0){
            str+=num[i]+',';
        }else{
            str+=num[i];
        }
    }
    return str.split('').reverse().join('');
}


3.写call函数的实现

Function.prototype.call2 = function (context) {
    var context = context || window;
    context.fn = this;
    var args = [];
    for(var i = 1, len = arguments.length; i < len; i++) {
        args.push('arguments[' + i + ']');
    }
    var result = eval('context.fn(' + args +')');
    delete context.fn
    return result;
}


4. 查找数组中元素和等于给定数的子数组

var ans,res,len;
var dfs=function(index,sum,candidates,target){
    if(sum===target){
        var tmp=res.map(function(item){
            return item;
        })
        ans.push(tmp);
        // console.log(res,ans);
        return ;
    }
    for(var i=index;i<len;i++){
        if(sum+candidates[i]>target)
            continue;
        res.push(candidates[i]);
        dfs(i,sum+candidates[i],candidates,target);
        res.pop();
    }
}
var combinationSum = function(candidates, target) {
    ans=[];
    len=candidates.length;
    candidates.sort((a,b)=>a-b);
    for(var i=0;i<len;i++){
        res=[candidates[i]];
        dfs(i,candidates[i],candidates,target);
    }
    return ans;
};

5.变色龙问题，给定10、15、17只三种颜色的变色龙，每两只一碰就会变成第三种颜色，最后如何变成同一种颜色，总结规律

通过相碰变色，使得其中两种变色龙的数量相差3，例如三种龙为:a,b,c，其中a-c的数量为，,a和c相碰变色为b,则a和c的数量就相等，之后a和c两两相碰，全部变色为b。


6.给定一个链表和一个值k，每隔k进行反转。例如1->2->3->4->5->6->7,k为3，反转结果为3->2->1->6->5->4->7。

基于单链表反转算法（非递归），进行以k为步长的单链表反转。

相关推荐

Linux两种光驱自动挂载的方法

环境：CentOS6.4西昆云服务器方式一修改fstab文件/etc/fstab是系统保存文件系统信息?静态文件，每一行描述一个文件系统；系统每次启动会读取此文件信息以确定需要挂载哪些文件系统。参...

linux系统运维，挂载和分区概念太难?在虚机下操作一次全掌握

虚拟机的好处就是可以模拟和学习生产环境的一切操作，假如我们还不熟悉磁盘操作，那先在虚机环境下多操作几次。这次来练习下硬盘扩容操作。虚拟机环境：centos8vm11linux设备命名规则在linux中...

Linux 挂载 NFS 外部存储 (mount 和 /etc/fstab)

mount:手工挂载，下次重启需再重新挂载，操作命令：mount-tnfs-ooptionsserver:/remote/export/local/directory上面命令中，本地目录...

在Linux中如何设置自动挂载特定文件系统(示例)

Linux...

Linux环境中的绑定挂载(bind mount)

简介：Linux中的mount命令是一个特殊的指令，主要用于挂载文件目录。而绑定挂载（bindmount）命令更为特别。mount的bind选项将第一个目录克隆到第二个。一个目录中的改变将会在...

Linux挂载CIFS共享 临时挂载 1. 首先

如何解决服务器存储空间不足的问题？大家好，欢迎回来。在上一期视频中，我为大家介绍了如何利用Linux挂载来扩容服务器存储空间。这一期视频，我将以Linux为例，教大家如何进行扩容。群辉使用的是Linu...

Linux 硬盘挂载(服务器重启自动挂载)

1、先查看目前机器上有几块硬盘，及已挂载磁盘：fdisk-l能够查看到当前主机上已连接上的磁盘，以及已经分割的磁盘分区。（下面以/dev/vdb磁盘进行分区、挂载为例，挂载点设置为/data）df...

linux 挂载磁盘

在Linux中挂载硬盘的步骤如下：...

笨小猪教您Linux磁盘挂载

本教程针对Linux系统比较熟悉或者想学习Linux基础的用户朋友，本教程操作起来比较傻瓜式，跟着步骤就会操作，本文使用的工具是XShell同时多多注意空格（文中会有提示）。【问答】什么是磁盘挂载？答...

Linux 磁盘挂载和docker安装命令

本篇给大家介绍Linux磁盘挂载和docker安装的相关内容，Linux服务器的操作是一个手熟的过程，一些不常用的命令隔断时间就忘记了，熟话说好记性不如烂笔头，还需在平时的工作中多练习记录。...

Linux设置开机自动挂载分区

有时候，我们在安装完Linux系统之后，可能在使用过程中添加硬盘或者分区进行使用，这时候就需要手动把磁盘分区挂载到某个路径，但是开机之后就会消失，需要重新挂载，非常麻烦，那么我们应该如何设置开机自动挂...

在linux挂载一个新硬盘的完整步骤

以下是在Linux中挂载新原始磁盘的完整步骤，包括分区、创建文件系统以及使用UUID在/etc/fstab中启动时挂载磁盘：将新的原始磁盘连接到Linux系统并打开电源。运行以下命令，...

Linux系统如何挂载exFAT分区

简介：Linux系统中不能像Windows系统那样自动识别加载新设备，需要手动识别，手动加载。Linux中一切皆文件。文件通过一个很大的文件树来组织，文件树的根目录是：/，从根目开始录逐级展开。这些文...

Linux系统挂载硬盘

fdisk-l查看可挂载的磁盘都有哪些df-h查看已经挂载的磁盘...

WSL2发布，如何在Win10中挂载Linux文件系统

WSL2是最新版本的架构，它为Windows子系统提供支持，使其能够在Windows上运行ELF64Linux二进制文件。通过最近的更新，它允许使用Linux文件系统访问存储在硬盘中的文件。如果你...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表