语义话的目的是什么 HTML篇前端面试题盘点

前端面试笔记

一、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 脱离文档流。

关键词： 前端面试题 前端面试题及答案 前端面试笔记 JS篇前端面试题 ES6新特是什么 HTML篇前端面试题 HTML5新特征 CSS中有哪些长度单位 语义话的目的是什么 CSS篇篇前端面试题