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

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

sinye56 2024-10-26 14:43 9 浏览 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为步长的单链表反转。

相关推荐

程序员:JDK的安装与配置(完整版)_jdk的安装方法

对于Java程序员来说，jdk是必不陌生的一个词。但怎么安装配置jdk，对新手来说确实头疼的一件事情。我这里以jdk10为例，详细的说明讲解了jdk的安装和配置，如果有不明白的小伙伴可以评论区留言哦下...

Linux中安装jdk并配置环境变量_linux jdk安装教程及环境变量配置

一、通过连接工具登录到Linux(我这里使用的Centos7.6版本)服务器连接工具有很多我就不一一介绍了今天使用比较常用的XShell工具登录成功如下：二、上传jdk安装包到Linux服务器jdk...

麒麟系统安装JAVA JDK教程_麒麟系统配置jdk

检查检查系统是否自带java在麒麟系统桌面空白处，右键“在终端打开”，打开shell对话框输入：java–version查看是否自带java及版本如图所示，系统自带OpenJDK，要先卸载自带JDK...

学习笔记-Linux JDK - 安装&amp;配置

前提条件#检查是否存在JDKrpm-qa|grepjava#删除现存JDKyum-yremovejava*安装OracleJDK不分系统#进入安装文件目...

Linux新手入门系列:Linux下jdk安装配置

本系列文章是把作者刚接触和学习Linux时候的实操记录分享出来，内容主要包括Linux入门的一些理论概念知识、Web程序、mysql数据库的简单安装部署，希望能够帮到一些初学者，少走一些弯路。注意：L...

测试员必备:Linux下安装JDK 1.8你必须知道的那些事

1.简介在Oracle收购Sun后，Java的一系列产品就被整合到Oracle官网中，打开官网乍眼一看也不知道去哪里下载，还得一个一个的摸索尝试，而且网上大多数都是一些Oracle收购Sun前，或者就...

Linux 下安装JDK17_linux 安装jdk1.8 yum

一、安装环境操作系统：JDK版本：17二、安装步骤第一步：下载安装包下载Linux环境下的jdk1.8，请去官网（https://www.oracle.com/java/technologies/do...

在Ubuntu系统中安装JDK 17并配置环境变量教程

在Ubuntu系统上安装JDK17并配置环境变量是Java开发环境搭建的重要步骤。JDK17是Oracle提供的长期支持版本，广泛用于开发Java应用程序。以下是详细的步骤，帮助你在Ubuntu系...

如何在 Linux 上安装 Java_linux安装java的步骤

在桌面上拥抱Java应用程序，然后在所有桌面上运行它们。--SethKenlon（作者）无论你运行的是哪种操作系统，通常都有几种安装应用程序的方法。有时你可能会在应用程序商店中找到一个应用程序...

Windows和Linux环境下的JDK安装教程

JavaDevelopmentKit（简称JDK），是Java开发的核心工具包，提供了Java应用程序的编译、运行和开发所需的各类工具和类库。它包括了JRE（JavaRuntimeEnviro...

linux安装jdk_linux安装jdk软连接

JDK是啥就不用多介绍了哈，外行的人也不会进来看我的博文。依然记得读大学那会，第一次实验课就是在机房安装jdk，编写HelloWorld程序。时光飞逝啊，一下过了十多年了，挣了不少钱，买了跑车，娶了富...

linux安装jdk,全局配置，不同用户不同jdk

jdk1.8安装包链接：https://pan.baidu.com/s/14qBrh6ZpLK04QS8ogCepwg提取码：09zs上传文件解压tar-zxvfjdk-8u152-linux-...

运维大神教你在linux下安装jdk8_linux安装jdk1.7

1.到官网下载适合自己机器的版本。楼主下载的是jdk-8u66-linux-i586.tar.gzhttp://www.oracle.com/technetwork/java/javase/downl...

window和linux安装JDK1.8_linux 安装jdk1.8.tar

Windows安装JDK1.8的步骤：步骤1：下载JDK打开浏览器，找到JDK下载页面https://d.injdk.cn/download/oraclejdk/8在页面中找到并点击“下载...

最全的linux下安装JavaJDK的教程(图文详解)不会安装你来打我?

默认已经有了linux服务器，且有root账号首先检查一下是否已经安装过java的jdk任意位置输入命令：whichjava像我这个已经安装过了，就会提示在哪个位置，你的肯定是找不到。一般我们在...

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

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