我的位置:首页 > 前端开发>Html5

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

时间:2020-02-24 11:42:00 来源:互联网 作者: 神秘的大神 字体:

参考

博客

资料

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

写在前面的话

因为一些特殊原因在家待了很久,博客和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 事件属性(重要)
想了想,这部分还单独列出来好了,因为在日常开发中,使用到的概率也比较高

属性 描述
onafterprint script 文档打印之后运行的脚本。
onbeforeprint script 文档打印之前运行的脚本。
onbeforeunload script 文档卸载之前运行的脚本。
onerror script 在错误发生时运行的脚本。
onload(很常用) script 页面结束加载之后触发。
onmessage script 在消息被触发时运行的脚本
onpagehide(很常用) script 当窗口隐藏时运行的脚本。
onpageshow(很常用) script 当窗口成为可见时运行的脚本。
onresize script 当浏览器窗口被调整大小时触发。
onstorage script 在 Web Storage 区域更新后运行的脚本。
onunload script 一旦页面已下载时触发(或者浏览器窗口已被关闭)。

Form 事件(重要)

属性 描述
onblur (很常用) script 元素失去焦点时运行的脚本。
onchange(很常用) script 在元素值被改变时运行的脚本。
oncontextmenu script 当上下文菜单被触发时运行的脚本。
onfocus(很常用) script 当元素获得焦点时运行的脚本。
onformchange script 在表单改变时运行的脚本。
onforminput script 当表单获得用户输入时运行的脚本
oninput(很常用) script 当元素获得用户输入时运行的脚本。
oninvalid(很常用) script 当元素无效时运行的脚本
onselect script 在元素中文本被选中后触发。
onsubmit(很常用) script 在提交表单时触发。

此外还有

  • 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之类的,对自身的情况做个总结。