这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」,内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中,共计111道
HTML
-
HTML5有哪些新特性?
-
Doctype作⽤? 严格模式与混杂模式如何区分?它们有何意义?
-
如何实现浏览器内多个标签页之间的通信?
-
⾏内元素有哪些?块级元素有哪些? 空(void)元素有那些?⾏内元 素和块级元素有什么区别?
-
简述⼀下src与href的区别?
-
cookies,sessionStorage,localStorage 的区别?
-
HTML5 的离线储存的使用和原理?
-
怎样处理 移动端 1px 被 渲染成 2px 问题?
-
iframe 的优缺点?
-
Canvas 和 SVG 图形的区别是什么?
JavaScript
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
问:0.1 + 0.2 === 0.3 嘛?为什么?
-
JS 数据类型
-
写代码:实现函数能够深度克隆基本类型
-
事件流
-
事件是如何实现的?
-
new 一个函数发生了什么
-
什么是作用域?
-
JS 隐式转换,显示转换
-
了解 this 嘛,bind,call,apply 具体指什么
-
手写 bind、apply、call
-
setTimeout(fn, 0)多久才执行,Event Loop
-
手写题:Promise 原理
-
说一下原型链和原型链的继承吧
-
数组能够调用的函数有那些?
-
PWA使用过吗?serviceWorker的使用原理是啥?
-
ES6 之前使用 prototype 实现继承
-
箭头函数和普通函数有啥区别?箭头函数能当构造函数吗?
-
事件循环机制 (Event Loop)
我们带着这三个问题,继续往下看,阅读的过程中如果同学们有自己的见解,可以评论区发表自己的看法。如果觉得讲的内容让你有了新的见解,请献上你宝贵的一赞???,这将是我继续写作的动力。
传统页面
这里不纠结叫法,凡是整个项目都是 DOM
直出的页面,我们都称它为“传统页面”(SSR 属于首屏直出,这里我不认为是传统页面的范畴)。那么什么是 DOM
直出呢?简单说就是在浏览器输入网址后发起请求,返回来的 HTML
页面是最终呈现的效果,那就是 DOM
直出。并且每次点击页面跳转,都会重新请求 HTML
资源。耳听为虚,眼见为实。我们以这个地址为例,验证以下上述说法。
www.cnblogs.com/han-1034683…
定眼一看,就能明白上图在描述什么。没错,博客园就是一个传统页面搭建而成的网站,每次加载页面,都会返回 HTML
资源以及里面的 CSS
等静态资源,组合成一个新的页面。
“瞎了”的同学,我再教一个方法,就是在浏览器页面右键,点击“显示网页源代码”,打开后如下所示:
网页上能看到什么图片或文字,你能在上述图片中找到相应的 HTML
结构,那也属于传统页面,也就是 DOM
直出。
单页面
时代在进步,科技在发展,面对日益增长的网页需求,网页开始走向模块化、组件化的道路。随之而来的是代码的难以维护、不可控、迭代艰难等现象。面临这种情况,催生出不少优秀的现代前端框架,首当其冲的便是 React
、 Vue
、 Angular
等著名单页面应用框架。而这些框架有一个共同的特点,便是“通过 JS 渲染页面”。
举个例子,以前我们直出 DOM
,而现在运用这些单页面框架之后, HTML
页面基本上只有一个 DOM
入口,大致如下所示:
所有的页面组件,都是通过运行上图底部的 app.js
脚本,挂载到 <div id="root"></div>
这个节点下面。用一个极其简单的 JS 展示挂载这一个步骤:
image.png
脱去所有的凡尘世俗,最本真的单页项目运行形式便是如此。注意,我要点题了啊!!!
image.png
既然单页面是这样渲染的,那如果我有十几个页面要互相跳转切换,咋整!!??这时候 前端路由 应运而生,它的出现就是为了解决单页面网站,通过切换浏览器地址路径,来匹配相对应的页面组件。我们通过一张丑陋的图片来理解这个过程:
前端路由 会根据浏览器地址栏 pathname
的变化,去匹配相应的页面组件。然后将其通过创建 DOM
节点的形式,塞入根节点 <div id="root"></div>
。这就达到了无刷新页面切换的效果,从侧面也能说明正因为无刷新,所以 React
、 Vue
、 Angular
等现代框架在创建页面组件的时候,每个组件都有自己的 生命周期 。
原理
–
前端路由 插件比较火的俩框架对应的就是 Vue-Router
和 React-Router
,但是它们的逻辑,归根结底还是一样的,用殊途同归四个字,再合适不过。
通过分析哈希模式和历史模式的实现原理,让大家对前端路由的原理有一个更深刻的理解。
哈希模式
a
标签锚点大家应该不陌生,而浏览器地址上 #
后面的变化,是可以被监听的,浏览器为我们提供了原生监听事件 hashchange
,它可以监听到如下的变化:
-
点击
a
标签,改变了浏览器地址 -
浏览器的前进后退行为
-
通过
window.location
方法,改变浏览器地址
接下来我们利用这些特点,去实现一个 hash
模式的简易路由:在线运行
- page1
- page2
-
当然,这是很简单的实现,真正的 hash 模式,还要考虑到很多复杂的情况,大家有兴趣就去看看源码。
浏览器展示效果如下:
历史模式
history
模式会比hash
模式稍麻烦一些,因为history
模式依赖的是原生事件popstate
,下面是来自 MDN 的解释:image.png
小知识:pushState 和 replaceState 都是 HTML5 的新 API,他们的作用很强大,可以做到改变浏览器地址却不刷新页面。这是实现改变地址栏却不刷新页面的重要方法。
包括
a
标签的点击事件也是不会被popstate
监听。我们需要想个办法解决这个问题,才能实现history
模式。image.png
**解决思路:**我们可以通过遍历页面上的所有
a
标签,阻止a
标签的默认事件的同时,加上点击事件的回调函数,在回调函数内获取a
标签的href
属性值,再通过pushState
去改变浏览器的location.pathname
属性值。然后手动执行popstate
事件的回调函数,去匹配相应的路由。逻辑上可能有些饶,我们用代码来解释一下:在线地址最后
中年危机是真实存在的,即便有技术傍身,还是难免对自己的生存能力产生质疑和焦虑,这些年职业发展,一直在寻求消除焦虑的依靠。
-
技术要深入到什么程度?
-
做久了技术总要转型管理?
-
我能做什么,我想做什么?
-
一技之长,就是深耕你的专业技能,你的专业技术。(重点)
-
独立做事,当你的一技之长达到一定深度的时候,需要开始思考如何独立做事。(创业)
-
拥有事业,选择一份使命,带领团队实现它。(创业)
一技之长分五个层次
-
栈内技术 - 是指你的前端专业领域技术
-
栈外技术 - 是指栈内技术的上下游,领域外的相关专业知识
-
工程经验 - 是建设专业技术体系的“解决方案”
-
带人做事 - 是对团队协作能力的要求
-
业界发声 - 工作经验总结对外分享,与他人交流
永远不要放弃一技之长,它值得你长期
信仰持有
。开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
主要内容包括html,css,html5,css3,JavaScript,正则表达式,函数,BOM,DOM,jQuery,AJAX,vue 等等。
-