Matrix 面试 - 前端篇

持续懵逼

Promise

所有为你而行的空幻梦想,都不及最后与你许的愿望。——《梦回还》

异步编程

JS有个很重要的部分叫异步编程,那么所以谓异步,大概可以通过这样一个例子说明:

一个网页,有文字,有图片,假定按照同步的方式来加载,那么就要等图片下载完了再加载内容,而如此一来,用户看到的就是一个空白了很久的网页突然弹出一堆东西,关键不在突然弹出,而在出现内容前的空白时间,用户一不耐烦给你关了,再花的网页都无用了()。
那么就有一个解决方法,先把文字渲染上去,然后等图片传输完成再渲染图片,这样就有一种 99% 的感觉,用户就没那么容易跑了。这就是异步的思想。

回调

回调是一种早期的异步编程方式,但是由于其嵌套造成的“回调地狱”,现在基本已经不再使用,就不再赘述了。

期约

一个简单的 Promise 实例:

1
2
3
4
5
6
7
8
9
let p=new Promise((resolve, reject) =>{
setTimeout(()=>{
resolve('2');
},2000);
})
console.log('1');
p.then((data)=>{
console.log(data);
})

这段代码中定义了一个 Promise 对象 p,这个对象中的 setTimeout 会在 2 秒后调用 resolve 方法,resolve 方法一调用, p.then 就会执行,data 接的是 resolve() 传入的参数,这里是 ‘2’ 。

async/await

待更新…

xss注入

XSS ,也就是 Cross-Site Scripting 的缩写,意为跨站脚本。具体来说就是把恶意代码注入到网页中,用户一打开网页,恶意代码就执行了。常见的 XSS 漏洞类型有如下几种:

  1. 反射/存储型 XSS
  2. DOM 操作型 XSS

反射/存储型 XSS

反射型XSS通常是指恶意代码未被服务器存储,每次触发漏洞的时候都将恶意代码通过 GET/POST 方式提交,然后触发漏洞。

csrf 攻击

最近打 CTF 见着一个叫 ssrf 攻击的,这俩长挺像,就想着是不是一个 Client 一个 Server ,再一搜,发现还真。。。不是。
csrf 全称 Cross-site request forgery ,意为跨站请求伪造,而 ssrf 全称 Server-side request forgery ,意为服务器端请求伪造

原生 JS 数据绑定和反射

待更新…

CSS 盒模型

看吧,就是像个盒子(逃
盒子图
(图源菜鸟教程)
Margin 指外边距,Border 指边框,Padding 指内边距,Content 指内容
然后没啥好解释了,实际上就是反复调整这几个部分的宽高,而且功夫不到家(像我这样)很容易被坑到,因为两个盒子之间可能会存在重叠。

行内元素和块级元素

表面上说比较突出的特点就是块级元素单独占一行或者几行,而行内元素不占独立区域

块级元素

块级元素一般有下面几种:

1
2
3
4
5
6
<h1>~<h6>
<p>
<div>
<ul>
<ol>
<li>

块级元素的宽度默认是容器的 100% ,也就是说它的宽度和父元素的宽度一样。
里面也可以塞进行内元素和其他块级元素。

行内元素

行内元素又名内联元素,一般有下面几种:

1
2
3
4
5
6
7
8
<a>
<span>
<b>
<i>
<em>
<strong>
<small>
<del>

行内元素和相邻行内元素是在同一行上的,而且有个关键的特点——它是不能调宽高的,默认宽高就是内容的宽高。
但也不是完全定死,水平方向的 padding 和 margin 就是可调的。
行内元素里面只能放纯文本或者其他行内元素,而不能放块级元素。

行内块级元素

有这个玩意也是我始料未及的
所谓行内块级元素,本质也是行内元素,但不同的是它具有块级元素可调高度的特性,而且和相邻的行内元素在同一行的时候,中间会有空白间隙。
行内块级元素一般有下面几种:

1
2
3
<img/>
<input/>
<td/>

持续更新中…

参考

作者

未央

发布于

2022-04-03

更新于

2024-07-02

许可协议

评论