前端面试题一(初中级)二线城市offer给他拿下_二线城市前端面试题-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43932097/article/details/122980295

1.谈谈css盒模型

IE盒模型（border-box）
W3C标准盒模型（content-box）
切换盒子模型
box-sizing: content-box (W3C盒子模型)
box-sizing: border-box (IE盒子模型)

2.多种方式实现距离上面 100px ，下面自适应的布局

flex 布局(弹性布局)
gird 布局(网格布局)
margin-top + calc(指定一个元素宽的固定像素值为多个数值的和)
position(定位) + calc

3.display 都有哪些属性

值	描述
none	此元素不会被显示
block	此元素将显示为块级元素，此元素前后会带有换行符
inline	默认。此元素会被显示为内联元素，元素前后没有换行符
inline-block	行内块元素
table	此元素会作为块级表格来显示，表格前后带有换行符
inherit	规定应该从父元素继承 display 属性的值
flex	弹性盒模型
grid	网格布局

4.块元素和行内元素、行内块元素的区别

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中 <div> 标签是最典型的块元素
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span> 等，其中
<span>标签最典型的行内元素，也称内联元素
在行内元素中有几个特殊的标签 <img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素

5.谈谈js 原型和原型链

每一个对象从被创建开始就和另一个对象关联，从另一个对象上继承其属性，这个另一个对象就是 原型

当访问一个对象的属性时，先在对象的本身找，找不到就去对象的原型上找，如果还是找不到，就去对象的原型（原型也是对象，也有它自己的原型）的原型上找，如此继续，直到找到为止，或者查找到最顶层的原型对象中也没有找到，就结束查找，返回undefined。
这条由对象及其原型组成的链就叫做原型链

1.原型存在的意义就是组成原型链：引用类型皆对象，每个对象都有原型，原型也是对象，也有它自己的原型，一层一层，组成原型链。
2.原型链存在的意义就是继承：访问对象属性时，在对象本身找不到，就在原型链上一层一层找。说白了就是一个对象可以访问其他对象的属性。
3.继承存在的意义就是属性共享：好处有二：一是代码重用，字面意思；二是可扩展，不同对象可能继承相同的属性，也可以定义只属于自己的属性。

6.Person.prototype.constructor 是什么

Person.prototype.constructor === Person // true

7.函数有没有 proto 属性

let fn = function() {} 
// 函数（包括原生构造函数）的原型对象为Function.prototype 
fn.__proto__ === Function.prototype // true

8.谈一谈 js 数据类型

Number
String
Boolean
undefined
null
Object
Bigint
Symbol

9.如何判断数据类型的多种方式，有什么区别，适用场景

typeof运算符
instanceof方法
constructor方法
Object.prototype.toString.call
空值null
未定义undefined
数字
数组

10.Promise 如何一次进行多个异步请求

利用 Promise.all

11.Promise.all 的返回机制是什么

1、执行了resolve，Promise状态会变成fulfilled
2、执行了reject，Promise状态会变成rejected
3、Promise只以第一次为准，第一次成功就永久为fulfilled，第一次失败就永远状态为rejected
4、Promise中有throw的话，就相当于执行了reject

12.如果想要其中一个请求出错了但是不返回结果怎么办

使用 Promise.allSelect

13.webpack 打包优化知道多少

1.分析打包速度
const SpeedMeasurePlugin = require(“speed-measure-webpack-plugin”);
const smp = new SpeedMeasurePlugin();
// …
module.exports = smp.wrap(prodWebpackConfig)
2.分析影响打包速度环节
获取所有依赖模块
解析所有依赖模块
将所有的依赖模块打包到一个文件
二次打包
3.开启多进程打包
4.合理利用缓存（缩短连续构建时间，增加初始构建时间）
5.优化压缩时间
6.优化搜索时间- 缩小文件搜索范围减小不必要的编译工作

14.koa 如何启动一个服务器

const Koa = require(‘koa’);
const app = new Koa();
app.use(async ctx => {
ctx.body = ‘Hello World’;
});
app.listen(3000);

15.new koa 都做了什么

构建上下文 ctx
构建洋葱圈模型。

16.koa 洋葱圈模型原理

context的保存和传递
中间件的管理和next的实现

17.koa 洋葱圈和 express 中间件有什么区别

koa2的中间件是通过 async await 实现的，中间件执行顺序是“洋葱圈”模型
中间件之间通过next函数联系,当一个中间件调用 next() 后，会将控制权交给下一个中间件, 直到下一个中间件不再执行 next() 后, 将会沿路折返,将控制权依次交换给前一个中间件

express中间件一个接一个的顺序执行, 通常会将 response 响应写在最后一个中间件中
app.use 用来注册中间件
遇到 http 请求，根据 path 和 method 判断触发哪些中间件
实现 next 机制，即上一个中间件会通过 next 触发下一个中间件

18.csrf 和 xss 是什么，如何避免

XSS，即 Cross Site Script，中译是跨站脚本攻击；其原本缩写是 CSS，但为了和层叠样式表(Cascading Style Sheet)有所区分，因而在安全领域叫做 XSS。
XSS 攻击是指攻击者在网站上注入恶意的客户端代码，通过恶意脚本对客户端网页进行篡改，从而在用户浏览网页时，对用户浏览器进行控制或者获取用户隐私数据的一种攻击方式。
攻击者对客户端网页注入的恶意脚本一般包括 JavaScript，有时也会包含 HTML 和 Flash。有很多种方式进行 XSS 攻击，但它们的共同点为：将一些隐私数据像 cookie、session 发送给攻击者，将受害者重定向到一个由攻击者控制的网站，在受害者的机器上进行一些恶意操作。
XSS攻击可以分为3类：反射型（非持久型）、存储型（持久型）、基于DOM。

反射型
反射型 XSS 只是简单地把用户输入的数据 “反射”
给浏览器，这种攻击方式往往需要攻击者诱使用户点击一个恶意链接，或者提交一个表单，或者进入一个恶意网站时，注入脚本进入被攻击者的网站。

存储型
存储型 XSS 会把用户输入的数据 “存储” 在服务器端，当浏览器请求数据时，脚本从服务器上传回并执行。这种 XSS 攻击具有很强的稳定性。
比较常见的一个场景是攻击者在社区或论坛上写下一篇包含恶意 JavaScript 代码的文章或评论，文章或评论发表后，所有访问该文章或评论的用户，都会在他们的浏览器中执行这段恶意的 JavaScript 代码。

基于 DOM
基于 DOM 的 XSS 攻击是指通过恶意脚本修改页面的 DOM 结构，是纯粹发生在客户端的攻击

XSS 攻击的防范
HttpOnly 防止劫取 Cookie
输入检查，不要相信用户的任何输入。对于用户的任何输入要进行检查、过滤和转义。建立可信任的字符和 HTML 标签白名单，对于不在白名单之列的字符或者标签进行过滤或编码。
服务端的输出检查

CSRF
CSRF，即 Cross Site Request Forgery，中译是跨站请求伪造，是一种劫持受信任用户向服务器发送非预期请求的攻击方式。
通常情况下，CSRF 攻击是攻击者借助受害者的 Cookie 骗取服务器的信任，可以在受害者毫不知情的情况下以受害者名义伪造请求发送给受攻击服务器，从而在并未授权的情况下执行在权限保护之下的操作