金三银四，磨砺锋芒；剑指大厂，扬帆起航（2020年最全大厂WEB前端面试题精选）下

最新推荐文章于 2023-05-24 16:47:04 发布

VIP文章「已注销」

最新推荐文章于 2023-05-24 16:47:04 发布

阅读量1.3k

点赞数

文章标签： javascript css vue.js reactjs jquery

本文链接：https://blog.csdn.net/weixin_45992710/article/details/103991152

版权

引言

元旦匆匆而过，2020年的春节又接踵而来，大家除了忙的提着裤子加班、年底冲冲冲外，还有着对于明年的迷茫和期待！2019年有多少苦涩心酸，2020年就有更多幸福美好，加油，奥利给！怀着一颗积极向上的心，来面对未来每一天的挑战！

所谓“兵马未动，粮草先行”，我们打响明天的战役也需要精神食粮来做后勤保障才是。在此我整理了多位从业者和我在2019年底至2020年初的一厂面试精选题，希望对磨砺锋芒、奋发向上的小伙伴有所帮助，祝你早日剑指大厂，扬帆起航，奥利给！

前端的性能优化和安全

1.常见的网站漏洞有哪些？(拼多多一面 2019.11）

有跨站脚本攻击（XSS）、跨站请求伪造（CSRF）、点击劫持、SQL注入、DDOS攻击、DNS劫持

2.简要介绍一下SQL注入？(拼多多一面 2019.11）

所谓SQL注入，就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令.
防范方法：

永远不要信任用户的输入。对用户的输入进行校验，可以通过正则表达式，或限制长度；对单引号和双"-"进行转换等。
永远不要使用动态拼装sql，可以使用参数化的sql或者直接使用存储过程进行数据查询存取。
永远不要使用管理员权限的数据库连接，为每个应用使用单独的权限有限的数据库连接。
不要把机密信息直接存放，加密或者hash掉密码和敏感的信息。
应用的异常信息应该给出尽可能少的提示，最好使用自定义的错误信息对原始错误信息进行包装
sql注入的检测方法一般采取辅助软件或网站平台来检测，软件一般采用sql注入检测工具jsky,网站平台就有亿思网站安全平台检测工具。

3. 讲讲CSRF和XSS区别（腾讯一面 2019.09）

xss：跨站点攻击。xss攻击的主要目的是想办法获取目标攻击网站的cookie，因为有了cookie相当于有了session，有了这些信息就可以在任意能接进互联网的PC登陆该网站，并以其他人的身份登陆做破坏。预防措施防止下发界面显示html标签，把</>等符号转义。

csrf：跨站点伪装请求。csrf攻击的主要目的是让用户在不知情的情况下攻击自己已登录的一个系统，类似于钓鱼。如用户当前已经登陆了邮箱或bbs，同时用户又在使用另外一个，已经被你控制的网站，我们姑且叫它钓鱼网站。这个网站上面可能因为某个图片吸引你，你去点击一下，此时可能就会触发一个js的点击事件，构造一个bbs发帖的请求，去往你的bbs发帖，由于当前你的浏览器状态已经是登陆状态，所以session登陆cookie信息都会跟正常的请求一样，纯天然的利用当前的登陆状态，让用户在不知情的情况下，帮你发帖或干其他事情。预防措施，请求加入随机数，让钓鱼网站无法正常伪造请求。

4. DNS劫持与DNS污染（快手一面 2019.08）

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

5.在浏览器输入网址，知道页面出现发生了啥？（腾讯二面 2019.06）

1.DNS解析

2.发送tcp连接

3.发送http请求

4.服务器处理请求并返回http报文

5.浏览器解析渲染界面

6.连接结束

参考地址：https://www.cnblogs.com/yuanzhiguo/p/8119470.html

6.计算浏览器的白屏时间（腾讯二面 2019.06）

我们通常认为浏览器开始渲染 标签或者解析完 标签的时刻就是页面白屏结束的时间点。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>白屏</title>
  <script type="text/javascript">
    // 不兼容performance.timing 的浏览器，如IE8
    window.pageStartTime = Date.now();
  </script>
  <!-- 页面 CSS 资源 -->
  <link rel="stylesheet" href="common.css">
  <link rel="stylesheet" href="page.css">
  <script type="text/javascript">
    // 白屏时间结束点
    window.firstPaint = Date.now();
  </script>
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

因此白屏时间则可以这样计算出：

可使用Performance API时

白屏时间 = firstPaint - performance.timing.navigationStart;

不可使用Performance API时

白屏时间 = firstPaint - pageStartTime

7. 加载一个很长的列表，怎么优化性能？（腾讯二面 2019.06）

参考地址： https://segmentfault.com/p/1210000011237223/read

8.xss和csrf有哪些防御方式（英语流利说一面 2019.03）

什么是xss攻击：
攻击者通过篡改网页，嵌入恶意js代码，当用户访问网页时，被嵌入的js代码会被执行，从而达到恶意攻击用户的一种方式；

如何防范 XSS 攻击：
1、对输入的字符串做长度限制；
2、对用户的输入进行过滤，如对& < > " ’ /等进行转义；
3、获取用户的输入，不用innerHtml,用innerText.

CSRF攻击的原理：
跨站请求伪造，攻击者构造某个网站后台接口的请求地址，诱导用户去点击或者用特殊的方法让该请求地址自动加载，用户在登陆的情况下，这个请求被服务器端接收后误以为是用户合法的操作，
对于get形式的接口跨域轻易被攻击，对于psot形式的接口也不是100%安全，攻击者可诱导用户带from表单可用post形式提交参数的页面。

如何防范CSRF攻击：
1、验证 HTTP Referer 字段；
2、在请求地址中添加 token 并验证；
3、在 HTTP 头中自定义属性并验证。

9.前端需要注意哪些seo(搜索引擎优化)？（字节跳动一面 2019.08）

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

10.webpack中loader和plugins的区别（搜狐一面 2019.10 ）

Loaders是用来告诉webpack如何转化处理某一类型的文件，并且引入到打包出的文件中。
Plugin是用来自定义webpack打包过程的方式，一个插件是含有apply方法的一个对象，通过这个方法可以参与到整个webpack打包的各个流程(生命周期)。

混合式开发（hybrid webview等）

1、混合开发概述

Hybrid App主要以JS+Native两者相互调用为主，从开发层面实现“一次开发，多处运行”的机制，成为真正适合跨平台的开发。Hybrid App兼具了Native App良好用户体验的优势，也兼具了Web App使用HTML5跨平台开发低成本的优势。

目前已经有众多Hybrid App开发成功应用，比如美团、爱奇艺、微信等知名移动应用，都是采用Hybrid App开发模式。

2、移动应用开发的三种方式比较

移动应用开发的方式，目前主要有三种：

Native App：本地应用程序（原生App），一般依托于操作系统，有很强的交互，是一个完整的App，可拓展性强，需要用户下载安装使用。（简单来说，原生应用是特别为某种操作系统开发的，比如iOS、Android、黑莓等等，它们是在各自的移动设备上运行的）

该模式通常是由“云服务器数据+APP应用客户端”两部份构成，APP应用所有的UI元素、数据内容、逻辑框架均安装在手机终端上。

原生应用程序是某一个移动平台（比如iOS或安卓）所特有的，使用相应平台支持的开发工具和语言（比如iOS平台支持Xcode和Objective-C，安卓平台支持Eclipse和Java）。原生应用程序看起来（外观）和运行起来（性能）是最佳的。
Web App：网页应用程序（移动web）指采用Html5语言写出的App，不需要下载安装。类似于现在所说的轻应用。生存在浏览器中的应用，基本上可以说是触屏版的网页应用。（Web应用本质上是为移动浏览器设计的基于Web的应用，它们是用普通Web开发语言开发的，可以在各种智能手机浏览器上运行）

Web App开发即是一种框架型APP开发模式（HTML5 APP 框架开发模式），该开发具有跨平台的优势，该模式通常由“HTML5云网站+APP应用客户端”两部份构成，APP应用客户端只需安装应用的框架部份，而应用的数据则是每次打开APP的时候，去云端取数据呈现给手机用户。

HTML5应用程序使用标准的Web技术，通常是HTML5、JavaScript和CSS。这种只编写一次、可到处运行的移动开发方法构建的跨平台移动应用程序可以在多个设备上运行。虽然开发人员单单使用HTML5和JavaScript就能构建功能复杂的应用程序，但仍然存在一些重大的局限性，具体包括会话管理、安全离线存储以及访问原生设备功能（摄像头、日历和地理位置等）。
Hybrid App：混合应用程序（混合App）指的是半原生半Web的混合类App。需要下载安装，看上去类似Native App，但只有很少的UI Web View，访问的内容是 Web 。

混合应用程序让开发人员可以把HTML5应用程序嵌入到一个细薄的原生容器里面，集原生应用程序和HTML5应用程序的优点（及缺点）于一体。

混合应用大家都知道是原生应用和Web应用的结合体，采用了原生应用的一部分、Web应用的一部分，所以必须在部分在设备上运行、部分在Web上运行。不过混合应用中比例很自由，比如Web 占90%，原生占10%；或者各占50%。

3、如何实现移动端适配？（Bigo 网易雷火）

1、meta:viewport 防止浏览器自动缩放

<meta name="viewport" content="width=device-width , user-scalable=no ,  initial-scale=1.0  , maximum-scale=1.0 , minimum-scale=1.0">

2、响应式布局（responsive）

响应式布局可使网站在不同的设备上浏览时对应不同分辨率皆有适合的呈现
其布局通过媒体查询@media实现，
新闻及门户网站可以用响应式布局，但大型网站媒体查询有其局限性

实际上除了响应式，网站通常会采用：1.提供两套html由后端根据用户设备来切换 2.提供两个完全不同的url由后端根据用户设备来跳转

3、通过动态rem实现

css常见的单位有： px，em，rem ，vh ，vw

rem：root em 即根元素的字体大小
em：一个字的宽度（一般指字母m），它的大小与其font-size一样
vh： 100vh === 视口高度
vw： 100vw === 适口宽度

需要注意：

网页字体默认大小16px，em、rem默认情况下都是16px
chrome可以在浏览器设置中自行设置最小字号，无论控制样式多小都不会小于这个值，这个值默认12px

<script>
document.write(` <style>{html{font-size:${
      window.innerWidth}px}}</style>`)
</script>

参考地址：https://www.jianshu.com/p/c6d82db7ad62

git的使用

1、git版本管理问题，如何回滚

Git回滚代码到某个commit

回退命令：
git reset --hard HEAD^ 回退到上个版本

git reset --hard HEAD~3 回退到前3次提交之前，以此类推，回退到n次提交之前

git reset --hard commit_id 退到/进到，指定commit的哈希码（这次提交之前或之后的提交都会回滚）

2、git工作流程，常用的git命令有哪些，rebase的原理？

参考地址：https://www.jianshu.com/p/57f0626a1432

设计模式学习笔记

设计模式的定义：在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案

单例模式

保证一个类仅有一个实例，并提供一个访问它的全局访问点。实现的方法为先判断实例存在与否，如果存在则直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。
使用场景：一个单一对象，比如弹窗，无论点击多少次，弹窗只应该被创建一次。

class CreateUser {
   
    constructor(name) {
   
        this.name = name;
        this.getName();
    }
    getName() {
   
         return this.name;
    }
}
// 代理实现单例模式
var ProxyMode = (function() {
   
    var instance = null;
    return function(name) {
   
        if(!instance) {
   
            instance = new CreateUser(name);
        }
        return instance;
    }
})();
// 测试单体模式的实例
var a = new ProxyMode("aaa");
var b = new ProxyMode("bbb");
// 因为单体模式是只实例化一次，所以下面的实例是相等的
console.log(a === b);    //true

策略模式

定义一系列的算法，把他们一个个封装起来，并且使他们可以相互替换。
一个基于策略模式的程序至少由两部分组成。第一个部分是一组策略类（可变），策略类封装了具体的算法，并负责具体的计算过程。第二个部分是环境类Context（不变），Context接受客户的请求，随后将请求委托给某一个策略类。

/*策略类*/
var levelOBJ = {
    "A": function(money) {
        return money * 4;
    },
    "B" : function(money) {
        return money * 3;
    },
    "C" : function(money) {
        return money * 2;
    } 
};
/*环境类*/
var calculateBouns =function(level,money) {
    return levelOBJ[level](money);
};
console.log(calculateBouns('A',10000)); // 40000

代理模式

为一个对象提供一个代用品或占位符，以便控制对它的访问。
常用的虚拟代理形式：某一个花销很大的操作，可以通过虚拟代理的方式延迟到这种需要它的时候才去创建（例：使用虚拟代理实现图片懒加载）
图片懒加载的方式：先通过一张loading图占位，然后通过异步的方式加载图片，等图片加载好了再把完成的图片加载到img标签里面。

var imgFunc = (function() {
   
    var imgNode = document.createElement('img');
    document.body.appendChild(imgNode);
    return {
   
        setSrc: function(src) {
   
            imgNode.src = src;
        }
    }
})();
var proxyImage = (function() {
   
    var img = new Image();
    img.onload = function() {
   
        imgFunc.setSrc

最低0.47元/天解锁文章

「已注销」

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
金三银四，磨砺锋芒；剑指大厂，扬帆起航（2020年最全大厂WEB前端面试题精选）下

引言元旦匆匆而过，2020年的春节又接踵而来，大家除了忙的提着裤子加班、年底冲冲冲外，还有着对于明年的迷茫和期待！2019年有多少苦涩心酸，2020年就有更多幸福美好，加油，奥利给！怀着一颗积极向上的心，来面对未来每一天的挑战！所谓“兵马未动，粮草先行”，我们打响明天的战役也需要精神食粮来做后勤保障才是。在此我整理了多位从业者和我在2019年底至2020年初的一厂面试精选题，希望对磨砺锋芒、奋...
复制链接

扫一扫