干货！前端工程师面试阿里，总结19年最精辟的知识点！

Bertha 。 2022-03-02 07:30 140阅读 0赞

# **基础知识点** #

![1240][]

**1、水平垂直居中**

子绝父相,子盒子设置绝对定位,设置top:50%;left:50%,margin-top:-50%;margin-left:-50%;

子绝父相,子盒子设置绝对定位,设置 left & top & right & bottom为0;margin: auto;

伸缩盒子,父元素设置flex;justify-content: center;align-items: center;

利用transform属性,需要设置子绝父相,设置top:50%;left:50%;transform:translate(-50%, -50%);

**2、圣杯布局**

中间盒子设置宽度100%,左右margin,留出左右盒子的位置

左右盒子在通过定位至左右

**3、兼容性问题**

标签样式在不同的浏览器各自的margin 和padding差异较大, 解决方案：css里 \*\{margin:0;padding:0;\}

当在a标签中嵌套img标签时，在某些浏览器中img会有蓝色边框；解决方案：给img添加border：0；或者是border：none；

图片默认有间;隙解决方案：1）给img标签添加左浮动float：left；2）给img标签添加display：block。

**4、清除浮动的方法？（重点）**

1.父级div定义height

2.结尾处家空div标签clear:both

3.父级div定义 伪类:after和zoom

4.父级div定义 overflow:hidden

**5、前端优化技巧**

压缩css，js，图片

2.减少http请求次数，合并css，js 合并图片（雪碧图）

3.使用CDN

4.减少dom元素数量

5.图片懒加载

6.静态资源另外用无cookie得域名

7.减少dom的访问（缓存dom）

8.巧用事件委托

9.样式表置顶，脚本置低

**6、this指向问题**

一般来说,谁调用,this就指向谁,特殊情况除外

普通函数调用，此时 this 指向 window

定时器函数， 此时 this 指向 window

**更改this指向的三个方法**

1.call( )方法调用一个函数,其具有一个指定的this值

fn.call(改变其this指向, \[指定的参数\] ) 如果指定了null或者undefired,则内部this指向window

应用场景:①借用构造函数

②借用其他对象的方法

2.apply( )方法调用一个函数,其具有一个指定的this值,作为一个数组提供的参数

fn.apply(var1, var2) 应用:把数组展开

应用场景:把数组展开,传递给调用的方法

3.bind 不会调用函数,会返回一个新的函数

应用场景:①改变定时器内部的this,②改变事件处理函数的this

**7、json字符串转化方法**

JSON.parse(str); //由JSON字符串转换为JSON对象

JSON.stringify(obj); //将JSON对象转化为JSON字符

# **进阶知识点** #

![1240 1][]

1、设置分页符

![1240 2][]

2、只能输入数字和小数点

![1240 3][]

3、统计每一个字符串出现的次数

![1240 4][]

![1240 5][]

# **高难度知识点** #

**怎样引入一个第三方的包？**

**require与import的区别：**

**遵循规范：**

require 是 AMD规范引入方式

import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法

**调用时间：**

require是运行时调用，所以require理论上可以运用在代码的任何地方

import是编译时调用，所以必须放在文件开头

**本质：**

require是赋值过程，其实require的结果就是对象、数字、字符串、函数等，再把require的

结果赋值给某个变量

import是解构过程，但是目前所有的引擎都还没有实现import，我们在node中使用babel支持

ES6，也仅仅是将ES6转码为ES5再执行，import语法会被转码为require

**在那调用第三方支付接口？为什么？**

**前端调接口和后端调接口各有什么区别，优势与特点**

一般支付接口都是由后端和支付单位联系调取的,前端调接口容易被劫持,不安全。

**[对web前端感兴趣的小伙伴也可以加 小编q 裙：][web_ _q]**

![1240 6][]

[1240]: /images/20220302/2b904a8903234ae79e9d34f2c71abe6e.png
[1240 1]: /images/20220302/fca1ddcdb713473c8ed9da7dd96df593.png
[1240 2]: /images/20220302/c4b4638939524d1682dde717359743b7.png
[1240 3]: /images/20220302/e0ac08c4ef8a41d7a71383e6b1c657b2.png
[1240 4]: /images/20220302/4fa43ba2543b41a6943b45f901745c9f.png
[1240 5]: /images/20220302/213cfc07f3b74391a6092b6e5742b2ad.png
[web_ _q]: https://www.jianshu.com/writer
[1240 6]: /images/20220302/a4056aaaf89b4bacb12add854179fd3e.png