3年多前端菜鸡的面试及知识梳理（上）

参考

博客

• 1、中高级前端面试题（万字长文）
• 2、大前端吊打面试官系列

资料

• 1、HTML 5 教程
• 2、CSS3 教程
• 3、JavaScript 教程

收费小册
前端面试之道
注：某大佬这本收费小册干货很多，有些参考其中的问题，就不列答案了。

写在前面的话

因为一些特殊原因在家待了很久，博客和github都很久没有更新了。
这段时间，代码写的比较少，但是看了不少书。
因为博主不是科班出身，在家的几个月把科班的一些书籍都学习了一遍，比如《数据结构》，《计算机组成》，《计算机网络》，《操作系统》，下次有机会，可以把看一些书籍和前端的一些结合来讲，
现在主要是待业在家，准备出去找工作，因为疫情原因，先对当前的知识做个整理。
这些整理，只针对于自身的一些问题。
也有自己觉得一些重要，以及一些感悟的地方。

针对自己的查漏补缺

一、html部分

常见行内元素标签：a、br、code、em、img、input...
常见块级元素标签：div、p、dl、dt、form、h1~h6...

新特性

• 用于绘画的 canvas 元素
• 用于媒介回放的 video 和 audio 元素
• 对本地离线存储的更好的支持
• 新的特殊内容元素，比如 article、footer、header、nav、section
• 新的表单控件，比如 calendar、date、time、email、url、search

知识欠缺点

• HTML 5 拖放
• HTML 5 Canvas
• TML5 内联 SVG
• HTML 5 应用程序缓存
• HTML 5 Web Workers
• HTML 5 服务器发送事件

自己认为重要的一些部分

• HTML5 Input 类型
• HTML5 表单元素
• HTML5 表单属性

1、HTML5 表单属性，这个感觉很重要

新的 form 属性：

- autocomplete
- novalidate

新的 form 属性：

- autocomplete
- autofocus
- form
- form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
- height 和 width
- list
- min, max 和 step
- multiple
- pattern (regexp)
- placeholder
- required

HTML 事件属性（重要）
想了想，这部分还单独列出来好了，因为在日常开发中，使用到的概率也比较高

Form 事件（重要）

此外还有

• Keyboard 事件
• Mouse 事件（这块也用的比较多，篇幅原因就不展开列举了，可以自行查看些html5的教程）
• Media 事件

还有一个比较重要的部分就是video/audio的事件的属性使用了
HTML 5 视频/音频参考手册。
使用原生写的时候，做类似的h5活动页，就很有必要参考这块了。

小结：

随着几大框架的使用，html5中很多属性的直接应用会变的越来越少，被各种封装，之前公司做的活动页
也大都是用vue或者react框架下去制作，然后挂在一个路由下面。
可能在传统公司的使用还是很多，像一些互联网公司面试，问这方面的面试题都很少了。
撑死了就随便问些新特性啊，行块元素啊，媒体，缓存之类的。

二、css部分

1、盒模型（这个面试10次会问到8次）

box-sizing: content-box(默认)----指的是标准模型（本身内容宽高度+边框和内边距）

box-sizing: border-sizing-----指的是IE模型（本身内容的宽高度）

2、flex布局（记得有次面试平安的时候，问的很细，也比较重要）

具体参考Flex布局教程：语法篇

3、css选择器
因为比较基础，好像问的比较少了，最早的时候还是会问些后代选择器和子选择器之类的。

4、display的值（这个经常问！！！）

5、清浮动（*）

6、posiiton的值：（和display一样，也经常问，这样基础的应该都要掌握）

7、CSS3新特性

• 过渡
• 动画
• 形状转换
• 选择器
• 阴影
• 文字阴影: text-shadow: 2px 2px 2px #000;(水平阴影，垂直阴影，模糊距离，阴影颜色)
• 盒子阴影: box-shadow: 10px 10px 5px #999
• 边框
• 背景
• 文字
• 渐变
• 弹性布局、栅格布局、多列布局
• 媒体查询

8、Sass、Less、Stylus区别
感觉这个问题的即使回答不完全，好像也不是很重要，只要用过其中一种预处理预言，面试官都觉不会在这个问题上纠结太久

9、字体
之所以单独列出来，是因为我们很多图标都开始采用字体的形式，例如阿里字体。

注：自身欠缺的知识点

• 动画（太多的业务代码，导致对动画效果的要求不断的降低）
• 阴影
• 渐变
• 背景（背景用的好的话，真的会有妙用，可惜自身掌握的也不太好。）

##### 小结：

css一直都重要，特别是布局排版，还有一些兼容部分。
不管哪次面试，css都是必不可少的环节
熟练掌握基本的css，在日常的开发会少很多坑
比如还有什么1像素的问题之类的，都是要在不断的采坑中，慢慢成长的。
随着css3特性的不断强大，能够代替js做不少动画，好好使用，也会有不错的效果。
面试之前，应该也要好好把整个css部分，再过一遍

三、js部分

1、js基本数据类型（面试问的概率超高，应该算是基础吧）

undefined、number、string、null、boolean+object ES6新增Symbol

2、var、let、const 三者的区别什么？

var 存在变量提升，而 let、const 则不会。
var 的全局声明的变量会挂载到 window 上，而其他两者不会。
let 和 const 的作用基本一致，后者声明的变量不能再次赋值

注：有面试官会问你const的声明对象常量，能不能更改对象中的值，建议自己去实现下。。。

2、原生ajax（以前问的很多，现在框架增多，很多都是请求库，这个反而问的不怎么多了）

如何创建Ajax
XMLHttpRequest对象的工作流程
==========兼容性写法===========
var xmlHttp = null;
if(window.XMLHttpRequset) {
    // IE7+,Firefox,Chrome,Safari,Opera
    xmlHttp = new XMLHttpRequset();
}
else {
    // IE5,IE6
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
}
兼容性处理
事件的触发条件
xmlHttp.onreadystatechange = function() {
    if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
        responseText、responseXML
    }
}
事件的触发顺序
======================注意=================
如果是POST请求则需要添加头
xmlHttp.setRequestHeader("Content-type": "application/x-www-form-urlencoded")

3、深拷贝，浅拷贝（很常见）

4、Promise的理解和实现（如果现场要求手写一个promise比较难，我也只能说说思路，这点也比较欠缺诶）

5、绕不开的闭包问题（问的概率一半一半）

6、原型链

7、map, filter, reduce的作用和区别

8、微任务和宏任务（有次面试网易的时候，有问到，这块要掌握好了，对Event Loop的了解会有很大的收获）

小结：

js这部分向来都是问的最多的这块，随着es6的普及，很多次面试都会问es6的东西了。当然es5本身也是
需要掌握的更加扎实。
而且后续的使用vue，react等框架，也离不开js的支撑，所以js是务必最需要重视的一块

总结

对html部分和css的部分掌握的还算良好，js却很长时间，因为业务代码的关系，后期一直没有得到良好
的发展，也没有形成自己的知识体系。
因为篇幅有限，这期就先写这么多，后续的话，应该是更新
工程化，HTTP，vue，react，几个框架，
再往后，也有可能对小程序呀，app之类的，对自身的情况做个总结。