前端面试笔记
一、HTML篇
1.语义话的目的是什么?⭐
2.HTML5新特征⭐⭐⭐
3.cookie与sessionStorage和localStorage的区别⭐⭐⭐
二、CSS篇
1.css有哪些基本的选择器，执行先后顺序?⭐
2.垂直居中DIV⭐⭐⭐
3.两栏布局左边固定右边自适应⭐⭐
3.三栏布局左右固定中自适应⭐⭐
4.常用的块与行属性内标签有哪些?有什么特征⭐⭐
5.清除浮动⭐⭐⭐
6.CSS3新特征⭐⭐⭐
7.介绍一下盒模型⭐⭐
8.CSS中有哪些长度单位?⭐⭐
9.display:none和visibility:hidden的区别⭐
10. 用CSS 实现长宽为浏览器窗口一半的正方形⭐
11. 用CSS 实现高度为0.5像素的线条⭐
12. 用CSS 实现三角形⭐
13. 伪类和伪元素的区别⭐⭐
13. 重绘和重排是什么?如何避免?⭐⭐
三、JS篇
1.ES6新特性?⭐⭐⭐
2.闭包的理解⭐⭐
3.call()、apply()、bind()的区别⭐
4.原型，原型链⭐⭐⭐
5.JS基本数据类型⭐⭐
6.export和export default的区别⭐
7.箭头函数和普通函数的区别⭐⭐
8.GET和POST的区别⭐⭐⭐
9.forEach和map的区别⭐
10.JS基本数据类型的比较⭐⭐
11.对象的继承⭐
12.简述一下你理解的面向对象⭐⭐
13. == 和 ===的区别⭐
14. 数组有哪些方法⭐⭐
15. 普通的数组去重(笔试一般都会有)⭐⭐
16. Promise⭐⭐⭐
17.JS中new操作符有什么用?⭐⭐
18.JS获取HTML DOM元素的方法⭐⭐
19.事件捕获和事件冒泡⭐⭐
20.虚拟dom⭐
21.排序方式⭐
22.数组操作方法会改变原数组⭐⭐
23.JS有几种方法判断变量的类型?⭐⭐⭐
24.如何判断一个对象是否存在?⭐
三、计算机网络与其他知识篇
1.HTTP与HTTPS⭐
2.TCP与UDP的区别⭐
3.HTTP常见的状态码⭐
4.如何解决跨域⭐⭐
5.网页从输入url到页面加载发生了什么⭐⭐
6.HTTP 传输过程⭐
7.浏览器如何渲染页面的?⭐
8.对MVC和MVVM的理解⭐⭐
9.深拷贝，浅拷贝⭐⭐⭐
10.防抖与节流⭐⭐⭐
11.性能优化⭐⭐
12.webpack是怎么打包的，babel又是什么⭐
13.git 和 svn的区别⭐
14.webSocket ⭐
15.require和import区别⭐
16.事件循环(Event Loop)⭐⭐⭐
17.什么是单页面应用(SPA)⭐
18.什么叫优雅降级和渐进增强?⭐
四、VUE篇
1.数据双向绑定原理⭐⭐⭐
2. vue生命周期⭐⭐⭐
3.组件之间如何传值⭐⭐⭐
4.路由之间如何传参⭐⭐
5.谈一谈VUEX⭐⭐
6.如何解决vuex页面刷新数据丢失问题?⭐⭐
7.computed和watch的区别?⭐⭐⭐
8.如何封装axios?⭐
9.Route和router的区别⭐
10.v-show和v-if的区别⭐
11.vue中数据变了但是视图不跟新怎么解决?⭐
12.vue中data为什么是函数而不是对象?⭐⭐
13.vue中父子组件传值，父组件异步请求，子组件不能实时更新怎么解决?(vue中数据不能实时更新怎么解决?)⭐⭐⭐
14.父子组件传参emit如何传多个参数?⭐
15.Vue 路由跳转方式⭐⭐
16.条件渲染v-if 与 v-for 优先级⭐
17.Vue 中 $nextTick 作用与原理?⭐⭐⭐
18.Vue 中 for循环为什么加 key?⭐⭐
五、REACT篇
1.React的生命周期(版本17.0.2)⭐⭐⭐
2.React如何获取组件对应的DOM元素?⭐⭐
3.React中可以在render访问refs吗?为什么?⭐⭐
4.React中什么是受控组件和非控组件?⭐⭐
5.谈一谈React的状态提升?⭐⭐
6.为什么要使用虚拟DOM?(什么是 Virtual DOM?)⭐⭐
六、其它篇
1.项目开发中遇到的bug?⭐⭐
项目中或者地图中遇到引入如图片不显示。
合并多个对象并去重
移动端1px问题
移动端点击穿透问题
项目中遇到bug总结：
2.说说你在项目中遇到印象最深，最困难的地方，是怎么解决的?⭐⭐
3.你觉得你们项目还有哪些不足的地方?⭐⭐
4.工作之余你会做什么，看什么书?⭐
5.近几年的职业规划?⭐⭐
一、HTML篇
1.语义话的目的是什么?⭐
答：用正确的标签做正确的事。
提高代码的可读性，页面内容结构化，便于开发人员的代码编写，同时提高的用户体验;有利于SEO ，便于搜索引擎爬虫爬取有效信息。
2.HTML5新特征⭐⭐⭐
Canvas绘图以及SVG绘图。
拖放(Drag and drop)API
语义化标签(header、nav、footer、article、section)
音频、视频(audio、video)API
地理定位(Geolocation)
本地离线存储(localStorage),长期存储数据，关闭浏览器后不丢失。
会话储存(sessionStorage),数据在关闭浏览器后自动删除。
表单控件(calendar、date、time、email、url、search)
新技术如Web Worker、Web Socket。(关于Web Socket使用可以看这篇文章浅谈Web Socket。)
3.cookie与sessionStorage和localStorage的区别⭐⭐⭐
保存方式
cookie存放在客户的浏览器上。
session都在客户端中保存，不参与服务器通讯。
生命周期
cookie可设置失效时间
localStorage除非手动清除否则永久保存
sessionStorage关闭当前页面或浏览器后失效
存储的大小
cookie 4kb左右
session 5M
易用性
cookie需自己封装
session可以接受原生接口
因为cookie每次请求都会携带在http请求中,所以它的主要用来识别用户登录,localStorage可以用来跨页面传参,sessionStorage可以用来保留一些临时数据。
关于storage使用的方式可以查看storage传值
二、CSS篇
1.css有哪些基本的选择器，执行先后顺序?⭐
类选择器(class)、标签选择器、ID选择器
!important>内联样式(非选择器)>ID选择器>类选择器>标签选择器>通配符选择器(*)
2.垂直居中DIV⭐⭐⭐
请看这里前端CSS布局问题
3.两栏布局左边固定右边自适应⭐⭐
请看这里前端CSS布局问题
3.三栏布局左右固定中自适应⭐⭐
请看这里前端CSS布局问题
4.常用的块与行属性内标签有哪些?有什么特征⭐⭐
块标签：div、h1~h6、ul、li、table、p、br、form。
特征：独占一行，换行显示，可以设置宽高，可以嵌套块和行
行标签：span、a、img、textarea、select、option、input。
特征：只有在行内显示，内容撑开宽、高，不可以设置宽、高(img、input、textarea等除外)。
5.清除浮动⭐⭐⭐
父级div定义overflow:hidden(如果父级元素有定位元素超出父级，超出部分会隐藏，)
给浮动元素父级增加标签(由于新增标签会造成不必要的渲染，不建议使用)
伪元素清除浮动：给浮动元素父级增加 .clearfix::after(content: ‘’; display: table; clear: both;)(不会新增标签，不会有其他影响，)
6.CSS3新特征⭐⭐⭐
圆角(border-radius)
阴影(box-shadow)
文字特效(text-shadow)
线性渐变(gradient)
变换(transform)
更多的CSS选择器
更多背景设置(background)
色彩模式(rgba)
伪元素(::selection)
媒体查询(@media)
多栏布局(column)
图片边框(border-image)
7.介绍一下盒模型⭐⭐
答：
盒模型由内容(content)、内边距(padding)、边框(border)、外边距(margin)组成。
盒模型分为IE盒模型和W3C标准盒模型。
W3C标准盒模型又叫content-box，元素宽度/高度由border+padding+content组成。
(属性width,height只包含内容content，不包含border和padding)
IE盒模型又叫border-box，元素宽度/高度由content组成。
(属性width,height包含border和padding，指的是content+padding+border。)
PS：盒模型这个东西需要多理解。。。
8.CSS中有哪些长度单位?⭐⭐
绝对长度单位：px
百分比:%
相对父元素字体大小单位:em
相对于根元素字体大小的单位:rem
相对于视口*宽度的百分比(100vw即视窗宽度的100%):vw
相对于视口*高度的百分比(100vh即视窗高度的100%):vh
9.display:none和visibility:hidden的区别⭐
display:none：隐藏元素，在文档布局中不在给它分配空间(从文档中移除)，会引起回流(重排)。
visibility:hidden: 隐藏元素，但是在文档布局中仍保留原来的空间(还在文档中)，不会引起回流(重绘)。
10. 用CSS 实现长宽为浏览器窗口一半的正方形⭐
11. 用CSS 实现高度为0.5像素的线条⭐
12. 用CSS 实现三角形⭐
向上
13. 伪类和伪元素的区别⭐⭐
区别
伪类只能使用“：”，伪元素既可以使用“:”，也可以使用“::”
伪元素其实相当于伪造了一个元素，伪类没有伪造元素，例如first-child只是给子元素添加样式而已。(本质区别就是是否抽象创造了新元素)
13. 重绘和重排是什么?如何避免?⭐⭐
重排：当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。
重绘：当一个元素的外观发生改变，但没有改变布局，重新把元素外观绘制出来的过程，所以重绘跳过了创建布局树和分层的阶段。
重排需要重新计算布局树，重绘不需要，重排必定发生重绘，但是涉及到重绘不一定要重排。涉及到重排对性能的消耗更多一些。
触发重排的方法： 页面初始渲染、添加/删除可见的DOM元素、改变元素位置、改变元素尺寸、改变元素内容、改变元素字体大小、改变浏览器窗口尺寸、设置 style 属性的值等。
避免重排的方式：样式集中改变、使用 absolute 或 fixed 脱离文档流。
免责声明：以上内容为本网站转自其它媒体，相关信息仅为传递更多信息之目的，不代表本网观点，亦不代表本网站赞同其观点或证实其内容的真实性。如稿件版权单位或个人不想在本网发布，可与本网联系，本网视情况可立即将其撤除。
