WEB 前端面试题 (高能)

文章目录

• • `HTML 、 CSS 、浏览器 相关:`
  • • • *1.网络中使用最多的图片格式有哪些* :
      • *2. 请简述 css 盒子模型* :
      • *3. 视频 / 音频标签的使用* :
      • *4.HTML5 新增的内容有哪些* :
      • *5.Html5 新增的语义化标签有哪些* :
      • *6.Css3 新增的特性* :
      • *7. 清除浮动的方式有哪些？请说出各自的优点* :
      • *8. 定位的属性值有何区别* :
      • *9. 子元素如何在父元素中居中* :
      • *10.Border-box 与 content-box 的区别* :
      • *11. 元素垂直居中* :
      • *12. 如何让 chrome 浏览器显示小于 12px 的文字* :
      • *13.Css 选择器有哪些，那些属性可以继承，优先级如何计算？*
      • *14. 网页中有大量图片加载很慢 你有什么办法进行优化？*
      • *15. 行内元素 / 块级元素有哪些？*
      • *16. 浏览器的标准模式和怪异模式区别？*
      • *17.Margin 和 padding 在什么场合下使用*
      • *18. 弹性盒子布局属性有那些请简述 ?*
      • *19. 怎么实现标签的禁用*
      • *20.Flex 布局原理*
      • *21.Px ， rem ， em 的区别*
      • *22. 网页的三层结构有哪些*
      • *23. 常见的兼容性*
      • *24. 三栏布局方式两边固定中间自适应*
      • *25. Doctype 作用*
      • *26. 说一下 HTML5 drag api*
      • *27. 对 HTML 语义化标签的理解*
      • *28.web 性能优化*
      • *29.浏览器缓存机制*
      • *30.浏览器输入网址到页面渲染全过程*
      • *31.画一条 0.5px 的线*
      • *32.关于 JS 动画和 css3 动画的差异性*
      • *33.双边距重叠问题（外边距折叠）*
      • *34.浮动清除*
      • *35.CSS 选择器有哪些，优先级呢*
      • *36.css 动画如何实现*
      • *37.如何实现元素的垂直居中*
      • *38.CSS3 中对溢出的处理*
      • *39.对 CSS 的新属性有了解过的吗？*
      • *40.overflow 的原理*
      • *41.css 定位*
  • *Javascript 相关* :
  • • • *1.Js 基本数据类型有哪些*
      • *2.Ajax 如何使用*
      • *3. 如何判断一个数据是 NaN*
      • *4. 闭包是什么？有什么特性？对页面会有什么影响*
      • *5. Js 中常见的内存泄漏：*
      • *6. 事件委托是什么？如何确定事件源（Event.target 谁调用谁就是事件源）：*
      • *7. 什么是事件冒泡？：*
      • *8. 本地存储与 cookie 的区别*
      • *9.ES6 新特性*
      • *10.Let 与 var 与 const 的区别*
      • *11.数组方法有哪些请简述*
      • *12.什么是面向对象请简述*
      • *13.普通函数和构造函数的区别*
      • *14.请简述原型 / 原型链 / （原型）继承*
      • *15.Promise 的理解*
      • *16.我们用 Promise 来解决什么问题？*
      • *17.请简述 async 的用法？*
      • *18.一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？*
      • *19.get 请求传参长度的误区*
      • *20.补充 get 和 post 请求在缓存方面的区别*
      • *21.说一下闭包*
      • *22. 说说前端中的事件流*HTML 中与 javascript 交互是通过事件驱动来实现的，例如鼠标点
      • *23. 说一下事件委托*
      • *24. 说JS 的 new 操作符做了哪些事情*
      • *25. 改变函数内部 this 指针的指向函数（bind ， apply ， call 的区别）*
      • *26. JS 的各种位置*
      • *27. JS 拖拽功能的实现*
      • *28. JS 中的垃圾回收机制*
      • *29. JS 监听对象属性的改变*
      • *30. 自己实现一个 bind 函数*
      • *31. JS 怎么控制一次加载一张图片，加载完后再加载下一张*
      • *32. 来讲讲 JS 的闭包吧*
      • *33. 能来讲讲 JS 的语言特性吗*
      • *34. JS 的全排列*
  • *jQuery 相关的知识* :
  • • • *1. Css 预处理 sass less 是什么？为什么使用他们*
      • *2.Js 中 .call() 与 .apply() 区别*
      • *3. 为什么会造成跨域 / 请简述同源策略*
      • *4. 请输出三种减少页面加载时间的方式*
      • *5.This 指向*
      • *6. 什么是 jsonp 工作原理是什么？他为什么不是真正的 ajax*
      • *7. 请掌握 2 种以上数组去重的方式*
      • *8. 深浅拷贝是什么如何实现？*
      • *9. 为什么 js 是弱类型语言*
      • *10. 怎么转换 less 为 css*
      • *11.echarts 使用最多的是什么*
      • *12.For 循环与 map 循环有什么区别*
      • *13. 请写出一个简单的类与继承*
      • *14. 同步与异步的区别 / 阻塞与非阻塞区别*
      • *15. 重绘和回流是什么*
      • *16.http 是什么？有什么特点*
      • *17.HTTP 协议和 HTTPS 区别*
      • *18. 原型和继承， prototype ， call 和 apply 继承的区别（第一个参数是相同的，第二个的区别在哪）*
      • *19. 箭头函数与普通函数的区别*
      • *20. 什么是 js 内存泄露？*
      • *21. 你如何对网站的文件和资源进行优化？*
      • *22. 请简述 ajax 的执行过程 以及常见的 HTTP？*
      • *23. 预加载和懒加载的区别，预加载在什么时间加载合适*
      • *24.Jquery 选择器有哪些*
      • *26.Js 的函数节流和函数防抖的区别*
      • *27.Get 和 post 不同*
      • *28. 什么是 csrf 攻击*
      • *29. 什么时候用深拷贝 / 浅拷贝*
  • *Vue 相关* :
  • • • *1.Vue 的核心是什么*
      • *2. 请简述你对 vue 的理解*
      • *3. 请简述 vue 的单向数据流*
      • *4. Vue 常用的修饰符有哪些*
      • *5.v-text 与 { {}} 与 v-html 区别*
      • *6.v-on 可以绑定多个方法吗*
      • *7.Vue 循环的 key 作用*
      • *8. 什么是计算属性*
      • *9. Vue 单页面的优缺点*
      • *10.Vuex 是什么？怎么使用？在那种场景下使用*
      • *11.Vue 中路由跳转方式（声明式 / 编程式）*
      • *12.vue 跨域的解决方式*
      • *13.Vue 的生命周期请简述*
      • *14.Vue 生命周期的作用*
      • *15.DOM 渲染在那个生命周期阶段内完成*
      • *16.Vue 路由的实现*
      • *17.Vue 路由模式 hash 和 history ，简单讲一下*
      • *18.Vue 路由传参的两种方式， params 和 query*
      • *19.Vue 数据绑定的几种方式*
      • *20.Vue 注册一个全局组件*
      • *21.Vue 的路由钩子函数 / 路由守卫有哪些*
      • *22.Vue 中如何进行动态路由设置？有哪些方式？怎么获取传递过来的数据？*
      • *23.Elementui 中的常用组件有哪些？请简述你经常使用的 并且他们的属性有哪些？*
      • *24.Vue 中指令有哪些*
      • *25.Vue 如何定义一个过滤器*
      • *26.对 vue 中 keep-alive 的理解*
      • *27.如何让组件中的 css 在当前组件生效*
      • *28.Vue 生命周期一共几个阶段*
      • *29.Mvvm 与 mvc 的区别*
      • *31.Vue 组件中的 data 为什么是函数*
      • *32.Vue 双向绑定的原理*Vue 双向绑定就是：数据变化更新视图，视图变化更新数据*
      • *33.Vue 中组件怎么传值*
      • *34.Bootstrap 的原理*
      • *35.如果一个组件在多个项目中使用怎么办*
      • *36.槽口请简述*
      • *37.Watch 请简述*
      • *38.Vant Ui 请简述下*
      • *39.计算属性与 watch 区别*
      • *40.mvvm 框架是什么？ 它和其它框架（jquery ）的区别是什么？哪些场景适合？*
      • *41.Vue 首屏加载慢的原因，怎么解决的，白屏时间怎么检测，怎么解决白屏问题*
      • *42.Vue 双数据绑定过程中，这边儿数据改变了怎么通知另一边改变*
      • *43.Vuex 流程*
      • *44.Vuex 怎么请求异步数据*
      • *45.Vuex 中 action 如何提交给 mutation 的*
      • *46.Route 与 router 区别*
      • *47.vuex 的 State 特性是？*
      • *48.vuex 的 Getter 特性是？*
      • *49.vuex 的 Mutation 特性是？*
      • *50.vuex 的 actions 特性是？*
      • *51.vuex 的优势*
      • *52.v-for 与 v-if 优先级*
      • *53.请写出饿了么 5 个组件*
      • *54.vue 在 created 和 mounted 这两个生命周期中请求数据有什么区别呢？*
      • *55.说说你对 proxy 的理解*
      • *56.Vue3.0 是如何变得更快的？（底层，源码）*
  • *React 相关* :
  • • • *1.fetch VS ajax VS axios*
      • *2.React 事件处理 --- 修改 this 指向*
      • *3. 请简述你对 react 的理解*
      • *4.react 组件之间的数据传递*
      • *5.Vue 与 react 区别*
      • *6. 请简述虚拟 dom 与 diff 算法*
      • *7. 你对组件的理解*
      • *8. 调用 setState 之后发生了什么？*
      • *9.react 生命周期函数*
      • *10.为什么虚拟 dom 会提高性能 ?( 必考 )*
      • *11.( 组件的 ) 状态 (state) 和属性 (props) 之间有何不同*
      • *12.shouldComponentUpdate 是做什么的*
      • *13.react diff 原理*
      • *14. 何为受控组件*
      • *15. 调用 super(props) 的目的是什么*
      • *16.React 中构建组件的方式*
      • *17. 简述 flux 思想*
      • *18.React 项目用过什么脚手架？ Mern? Yeoman?*
      • *19. 应该在 React 组件的何处发起 Ajax 请求？*
      • *20. 何为高阶组件 (higher order component) ？*
  • *小程序相关* :
  • • • *1. 小程序的优势*
      • *2. 小程序的页面构成（4 个文件）*
      • *3. 小程序的生命周期*
      • *4. 小程序如何请求数据*
      • *5. 如何提高小程序的首屏加载时间*
      • *6. 请简述你经常使用的小程序的组件*
      • *7.Wxss 与 css 的区别请简述*
      • *8. 小程序如何实现响应式*
      • *9. 怎么优化小程序*
      • *10. 小程序如何显示用户头像与用户名*
      • *11. 请谈谈小程序的双向绑定和 vue 的异同？*
  • *补充* :
  • • • *1.请简述 webpack 中的 loaders 与 plugin 的区别*
      • *2.说一下 webpack 的打包原理*
      • *3.Commonjs ES6 模块区别？*
      • *4.Git 如何使用 / 常用指令有哪些*
      • *5.请简述你在项目中使用的 ui 框架*
      • *6.什么是 cors*
      • *7.说一下对 websocket 的理解*
  • *企业中的项目流程* :
  • • • *1.WEB 前端项目开发流程*
      • *2 .大公司和小公司开发的区别*

HTML 、 CSS 、浏览器 相关:

1.网络中使用最多的图片格式有哪些 :

• JPEG,GIF,PNG,最流行的是 jpeg 格式，可以把文件压缩到最小 在 ps 以
  jpeg 格式存储时，提供 11 级压缩级别

2. 请简述 css 盒子模型 :

一个 css 盒子从外到内可以分成四个部分：margin（外边距），
border( 边框），padding（内边距），content（内容）。
默认情况下，盒子的width 和 height 属性只是设置 content（内容）的宽和高，盒子真正的宽应该是：内容宽度 左右填充 左右边距 左右边框
第 1 页 盒子真正的高应该是：内容高度 上下填充 上下边距 上下边框

3. 视频 / 音频标签的使用 :

视频：< video src=””> < /video >
视频标签属性：
src 需要播放的视频地址
width/height 设置播放视频的宽高，和 img 标签的宽高属性一样
autoplay 是否自动播放
controls 是否显示控制条
poster 没有播放之前显示的展位图片
loop 是否循环播放
perload 预加载视频（缓存）与 autoplay 相冲突，设置了 autoplay 属
性，perload 属性会失效。
muted 静音模式
音频: 音频属性和视频属性差不多，不过宽高和 poster 属性不能用
< audio>
< source src=”” type=””>
< /audio >

4.HTML5 新增的内容有哪些 :

新增语义化标签
新增表单类型
表单元素
表单属性
表单事件
多媒体标签

5.Html5 新增的语义化标签有哪些 :

语义化标签优点：1.提升可访问性 2.seo 3.结构清晰，利于维护
Header 页面头部 main 页面主要内容 footer 页面底部
Nav 导航栏 aside 侧边栏 article 加载页面一块独立内容
Section 相 当 于 div
figure 加 载 独 立 内 容 （ 上 图 下 字 ）
figcaption figure 的标题
Hgroup 标题组合标签 mark 高亮显示 dialog 加载对话框标签（必须
配合 open 属性）
Embed 加载插件的标签 video 加载视频 audio 加载音频（支持格式
ogg，mp3，wav）

6.Css3 新增的特性 :

边框：
border-radios 添加圆角边框
border-shadow：给框添加阴影 （水平位移，垂直位移，模糊半径，阴
影尺寸，阴影颜色，insetr（内/外部阴影））
border-image：设置边框图像
border-image-source 边框图片的路径 第 4 页
border-image-slice 图片边框向内偏移
border-image-width 图片边框的宽度
border-image-outset 边框图像区域超出边框的量
border-image-repeat 图像边框是否平铺（
repeat 平铺 round 铺满
stretch 拉伸）
背景：
Background-size 背景图片尺寸
Background-origin规定background-position属性相对于什么位置定
位
Background-clip 规定背景的绘制区域（padding-box，border-box，
content-box）
渐变：
Linear-gradient（）线性渐变
Radial-gradient（）径向渐变
文本效果：
Word-break：定义如何换行
Word-wrap：允许长的内容可以自动换行
Text-overflow：指定当文本溢出包含它的元素，应该干啥
Text-shadow：文字阴影（水平位移，垂直位移，模糊半径，阴影颜色）
转换：
Transform 应用于 2D3D 转换，可以将元素旋转，缩放，移动，倾斜
Transform-origin 可以更改元素转换的位置，（改变 xyz 轴）
Transform-style 指定嵌套元素怎么样在三位空间中呈现
2D 转换方法：
rotate 旋转 translate（
x，y）指定元素在二维空间的位移 scale（
n）
定义缩放转换
3D 转换方法：
Perspective（
n）为 3D 转换 translate rotate scale 过渡：
Transition-proprety 过渡属性名
Transition-duration 完成过渡效果需要花费的时间
Transition-timing-function 指定切换效果的速度
Transition-delay 指定什么时候开始切换效果
动画：animation
Animation-name 为@keyframes 动画名称
animation-duration 动画需要花费的时间
animation-timing-function 动画如何完成一个周期
animation-delay 动画启动前的延迟间隔
animation-iteration-count 动画播放次数
animation-direction 是否轮流反向播放动画

7. 清除浮动的方式有哪些？请说出各自的优点 :

高度塌陷：当所有的子元素浮动的时候，且父元素没有设置高度，这时
候父元素就会产生高度塌陷。
清除浮动方式 1：给父元素单独定义高度
优点：快速简单，代码少 缺点：无法进行响应式布局
清除浮动方式 2：父级定义 overflow：hidden；zoom：1（针对 ie6 的
兼容）
优点：简单快速、代码少，兼容性较高 缺点：超出部分被隐藏，布局时
要注意
清除浮动方式 3：在浮动元素后面加一个空标签，clear：both；height：
0；overflow：hidden
优点：简单快速、代码少，兼容性较高。
缺点：增加空标签，不利于页面优化
清除浮动方式 4：父级定义 overflow：auto
第 5 页 第 6 页
优点：简单，代码少，兼容性好
缺点：内部宽高超过父级 div 时，会出现滚动条
清除浮动方式 5：万能清除法：
给塌陷的元素添加伪对象
.father：after{
Content：“随便写”；
Clear：both；
display：block；
Height：0；
Overflow：hidden；
Visibility：hidden
}
优点：写法固定，兼容性高
缺点：代码多

8. 定位的属性值有何区别 :

Position 有四个属性值：relative absolute fixed static
Relative 相对定位 不脱离文档流，相对于自身定位
Absolute 绝对定位，脱离文档流 相对于父级定位
Fixed 固定定位，脱离文档流，相对于浏览器窗口定位
Static 默认值，元素出现在正常的流中

9. 子元素如何在父元素中居中 :

水平居中：
1.子父元素宽度固定，子元素设置 margin：auto，并且子元素不能设置
浮动，否则居中失效
2.子父元素宽度固定，父元素设置 text-align：center，子元素设置
display：inline-block，并且子元素不能设置浮动，否则居中失效
水平垂直居中：
子元素相对于父元素绝对定位，子元素 top，left 设置 50%，子元素
margin-top 和 margin-left 减去各自宽高的一半
子元素相对于父元素绝对定位，子元素上下左右全为 0，然后设置子元素
margin：auto
父元素设置 display：table-cell vertical-align：middle，子元素设置
margin：auto
子元素相对定位，子元素 top，left 值为 50%，transform：translate
（
-50%，-50%）
子元素相对父元素绝对定位，子元素 top，left 值为 50%，transform：
translate（
-50%，-50%）
父元素设置弹性盒子，
display：flex； justfy-content：center ；align-item：center；
justfy-content：center

10.Border-box 与 content-box 的区别 :

Content-box 标准盒模型 width 不包括 padding 和 border
Border-box 怪异盒模型 width 包括 padding 和 border

11. 元素垂直居中 :

1.设置子元素和父元素的行高一样
2.子元素设置为行内块，再加 vertical-align：middle
3.已知父元素高度，子元素相对定位，通过 transform：
translateY（-50%）
4.不知道父元素高度，子绝父相，子元素 top：50%，transform：
translateY（-50%）
``5.创建一个隐藏节点，让隐藏节点的 height 为剩余高度的一半
6.给父元素 display：
table，子元素 display：
table-cell，vertical-align：
middle
7.给父元素添加伪元素
8.弹性盒，父元素 display：flex，子元素 align-self：center

12. 如何让 chrome 浏览器显示小于 12px 的文字 :

本 来 添 加 谷 歌 私 有 属 性 -webkit-text-size-adjust ： none ，
现 在-webkit-transform：scale（）

13.Css 选择器有哪些，那些属性可以继承，优先级如何计算？

Css3 新增的伪类有哪些
Css2 选择器：
元素选择器，id 选择器，群组选择器，类选择器，*通配符选择器，后代
选择器
Css2 伪类选择器：a:link/visited/hover/active
Css3 选择器： 第 9 页
空格 > 相邻兄弟选择器 ~通用选择器（查找后面所有）
结构伪类选择器：
查找第几个 nth-child（
n）
查找同一类型第几个 nth-of-type
查找唯一类型 only-of-type
属性选择器：根据标签属性查找 [attr=value]
: root 查找根元素 html 标签
: empty 查赵空标签
目标伪类选择器：（表单）
：enabled 查找可以使用的标签
：disabled 查找禁止使用的标签
：checked 查找被选中的标签
伪元素选择器 ：：selection 设置选中文本内容的高亮显示（只能用于背
景色和文本颜色）
否定伪类选择器 not（）
语言伪类选择器 lang（取值）
优先级（权重）：
元素选择器 1
伪元素选择器 1
class 选择器 10
伪类选择器 10
属性选择器 10
Id 选择器 100
内联样式的权重 1000
包含选择器权重为权重之和
继承样式权重为 0
那些属性可以继承：
Css 继承特性主要是文本方面 第 10 页
所有元素可继承：visibility 和 cursor
块级元素可继承：text-indent 和 text-align
列表元素可继承：list-style，list-style-type，list-style-position，
list-style-image
内联元素可继承：
letter-spacing，word-spacing，
line-height，color，
font，font-family，font-size
Font-style ， font-variant ， font-weight ， text-decoration ，
text-transform，direction
字母间距 段落间距 行高
字体颜色 字体种类 字体大小 字体样
式 字体粗细 小型大写字母文本 文本修饰 转换不同元素中的文本 文
本方向

14. 网页中有大量图片加载很慢 你有什么办法进行优化？

1.图片懒加载，在图片未可视区域加一个滚动条事件，判断图片位置与浏
览器顶端和页面的距离，如果前者小鱼后者，优先加载
2.使用图片预加载技术，将当前展示图片的前一张和后一张优先下载
3.使用 csssprite 或者 svgsprite

15. 行内元素 / 块级元素有哪些？

行内元素：相邻的行内元素会排列在同一行，不会独占一行 设置宽高无
效 span
块级元素：会独占一行 可以设置宽高等属性 div
可变元素：根据上下文预警决定该元素为块元素还是内联元素 第 11 页
块级元素：div h1-h6 hr p ul ol table address blockquote dir from
menu
行内元素：a br I em img input select span sub sup u textarea
可变元素：button del iframe ins

16. 浏览器的标准模式和怪异模式区别？

标准模式：浏览器按照 W3C 标准解析执行代码
怪异模式：浏览器根据自己的方式解析执行代码，因为不同浏览器解析
执行方式不一样，所以叫怪异模式
区别：
在怪异模式下，盒模型为怪异盒模型 而在标准模式下为标准盒子模型
图片元素的垂直对齐方式对于行内元素和 table-cell 元素，标准模式下
vertical-align 属性默认值是 baseline，而在怪异模式下，table 单元格
中的图片的 vertical-align 属性默认