前端工程师面试必备（持续更新中）

面试汇总一：2018大厂高级前端面试题汇总
高级面试：【半月刊】前端高频面试题及答案汇总

css内容

响应式布局

当前主流的三种预编译器比较

CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用；
让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

less,sass,stylus三者的区别

1.变量：
- Sass声明变量必须是『$』开头，后面紧跟变量名和变量值，而且变量名和变量值需要使用冒号：分隔开。
- Less 声明变量用『@』开头，其余等同 Sass。
- Stylus 中声明变量没有任何限定，结尾的分号可有可无，但变量名和变量值之间必须要有『等号』。
2.作用域：
- Sass：三者最差，不存在全局变量的概念。也就是说在 Sass 中定义了相同名字的变量时你就要小心蛋疼了。
- Less：最近的一次更新的变量有效，并且会作用于全部的引用！
- Stylus：Sass 的处理方式和 Stylus 相同，变量值输出时根据之前最近的一次定义计算，每次引用最近的定义有效；
3.嵌套：
- 三种 css 预编译器的「选择器嵌套」在使用上来说没有任何区别，甚至连引用父级选择器的标记 & 也相同。
4.继承：
- Sass和Stylus的继承非常像，能把一个选择器的所有样式继承到另一个选择器上。使用『@extend』开始，后面接被继承的选择器。Stylus 的继承方式来自 Sass，两者如出一辙。
- Less 则又「独树一帜」地用伪类来描述继承关系；
5.导入@Import：
- Sass 中只能在使用 url() 表达式引入时进行变量插值：
```
$device: mobile;
@import url(styles.#{$device}.css);
复制代码
```
- Less 中可以在字符串中进行插值：
```
@device: mobile;
@import "styles.@{device}.css";
复制代码
```
- Stylus 中在这里插值不管用，但是可以利用其字符串拼接的功能实现：
```
device = "mobile"
@import "styles." + device + ".css"
复制代码
```
总结
- 1.Sass和Less语法严谨、Stylus相对自由。因为Less长得更像 css，所以它可能学习起来更容易。
- 2.Sass 和 Compass、Stylus 和 Nib 都是好基友。
- 3.Sass 和 Stylus 都具有类语言的逻辑方式处理：条件、循环等，而 Less 需要通过When等关键词模拟这些功能，这方面 Less 比不上 Sass 和 Stylus。
- 4.Less 在丰富性以及特色上都不及 Sass 和 Stylus，若不是因为 Bootstrap 引入了 Less，可能它不会像现在这样被广泛应用（个人愚见）。

link与@import区别与选择


"CSSurl路径" rel="stylesheet" type="text/css" /
复制代码

link功能较多，可以定义 RSS，定义 Rel 等作用，而@import只能用于加载 css；
当解析到link时，页面会同步加载所引的 css，而@import所引用的 css 会等到页面加载完才被加载；
@import需要 IE5 以上才能使用；
link可以使用 js 动态引入，@import不行；

垂直居中布局

css经典布局系列一——垂直居中布局

css3的高级特性举例

h5新增了哪些内容或者API，使用过哪些？

1像素边框问题

什么是BFC

BFC是什么

BFC 英文解释： block formatting context。中文意思：块级格式化上下文；
formatting context 意思是：页面中一个渲染区域，有自己的一套渲染规则，决定其子元素如何定位，以及和其他兄弟元素的关系和作用。
BEC有如下特性
- 内部的box会在垂直方向，从顶部开始一个接一个地放置；
- box垂直方向的距离由margin决定。属于同一个BFC的两个相邻的box的margin会发生折叠；
- 每一个元素的margin box的左遍，与包含块border box的左边相接触。即使浮动元素也是如此；
- BFC区域不会与float box叠加；
- 计算 BFC 的高度时，浮动子元素也参与计算；
- 文字层不会被浮动层覆盖，环绕于周围

产生BFC 作用的css 属性

float 除了none以外的值；
overflow 除了visible 以外的值（hidden，auto，scroll ）；
display (table-cell，table-caption，inline-block, flex, inline-flex)；
position值为（absolute，fixed）这些属性值得元素都会自动创建 BFC；

BFC作用

BFC 最大的一个作用就是：在页面上有一个独立隔离容器，容器内的元素和容器外的元素布局不会相互影响。
- 解决上外边距重叠；重叠的两个box都开启bfc;
- 解决浮动引起高度塌陷；容器盒子开启bfc;
- 解决文字环绕图片；左边图片div，右边文本容器p，将p容器开启bfc；

js基础

for...in和for...of区别

for...in
- 1.循环出来的是index索引，是字符串型的数字；
- 2.遍历顺序有可能不是按照实际数组的内部顺序；
- 3.使用for in会遍历数组所有的可枚举属性，包括原型上的以及数组自定义的属性；
- 所以for in更适合遍历对象，不要使用for in遍历数组。
推荐在循环对象属性的时候，使用for...in,在遍历数组的时候的时候使用for...of；
for...in循环出的是key，for...of循环出的是value；
注意，for...of是ES6新引入的特性。修复了ES5引入的for...in的不足；
for...of不能循环普通的对象，需要通过和Object.keys()搭配使用；

Object.prototype.objCustom = function () {}; 
Array.prototype.arrCustom = function () {};

let iterable = [3, 5, 7];
iterable.foo = "hello";

for (let i in iterable) {
  console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}

for (let i of iterable) {
  console.log(i); // logs 3, 5, 7
}
复制代码

script 引入方式：

html 静态'，则只是在dom中插入了一行字符串，就更不会管字符串里引入的js了，所以不能用这个方法插入script！！！

2.各个js文件的加载时机（script标签插入文档的时机顺序）

比如： 1.js 依赖 2.js，2.js 依赖 3.js；实际的加载顺序是为 1.js，2.js，3.js
注意：而实际模块运行的顺序，才是 3.js，2.js，1.js。所以，文件的加载、加载后文件的运行、模块的运行，这是 3 个东西啊，别混了。

3.文件模块的执行时机

// 1.js 中的代码
require([], functionA() {
    // 主要逻辑代码
})
复制代码

文件的加载：将

前端工程师面试必备（持续更新中）

css内容

响应式布局

当前主流的三种预编译器比较

less,sass,stylus三者的区别

link与@import区别与选择

垂直居中布局

css3的高级特性举例

h5新增了哪些内容或者API，使用过哪些？

1像素边框问题

什么是BFC

BFC是什么

产生BFC 作用的css 属性

BFC作用

js基础

for...in和for...of区别

script 引入方式：

你可能感兴趣的:(前端工程师面试必备（持续更新中）)