没有合适的资源?快使用搜索试试~ 我知道了~
2023最新前端面试题总结
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
5星 · 超过95%的资源 18 下载量 4 浏览量
2023-05-30
10:06:05
上传
评论 20
收藏 1019KB DOCX 举报
温馨提示
试读
47页
2023最新前端面试题总结
资源推荐
资源详情
资源评论
目录
1. 浏览器兼容性 ...................................................................................3
2. 如果没有文档类型声明,那么浏览器会怎么处理........................3
3. 如何理解层叠 ...................................................................................3
4. 一个标记样式的来源 .......................................................................3
5. margin 计算.......................................................................................3
6. 元素按照 display 值分为两类..........................................................3
7. 文档流...............................................................................................3
8. 元素浮动后的三大变化 ...................................................................4
9. 9. CSS 样式初始化: ........................................................................4
10. 10.BFC................................................................................................4
11. 清除浮动影响/解决塌陷..................................................................4
12. position:relative/absolute/fixed 的区别...........................................4
13. css 选择器优先级计算方法 .............................................................5
14. 一个盒子实际宽度或高度 ...............................................................5
15. css 盒模型 .........................................................................................5
16. css 兼容性 .........................................................................................5
17. Css 层 水平层叠...............................................................................6
18. JavaScript 兼容性..............................................................................6
19. javascript 执行流程...........................................................................7
20. Typeof 与 instanceof 区别 ................................................................7
21. 当做条件判断是 false.......................................................................7
22. undefined 和 null 区别: ..................................................................7
23. 事件绑定方式 ...................................................................................7
24. this 指向问题? ..................................................................................8
25. cookie 和 webStorage 区别: .............................................................8
26. 为什么需要将 DOM 对象里面的属性封装成方法,DOM 对象的方
法重新进行封装?...........................................................................................8
27. 不定宽高水平垂直居中问题 ...........................................................8
28. ecmascript 和 javascript 区别...........................................................9
29. 闭包...................................................................................................9
30. 伪类和为元素的区别 .....................................................................10
31. 请你简述面向对编程 .....................................................................10
32. 面向对象的特点 .............................................................................11
33. 对象的继承 .....................................................................................11
34. json 前后端交互标准 .....................................................................11
35. ajax 执行流程--封装 .......................................................................12
36. 焦点轮播图 说思路和写代码 .......................................................13
37. 数组排序算法 .................................................................................14
38. 数组去重算法 .................................................................................16
39. 去抖和节流 .....................................................................................17
40. 图片懒加载和预加载 .....................................................................17
41. 浏览器缓存机制 .............................................................................17
42. http 协议及状态码 .........................................................................18
43. event loop........................................................................................19
44. 从输入 url 到页面呈现到用户面前都做了哪些事情(后面讲)20
45. 网站开发方向 .................................................................................20
46. HTML4 和 HTML5 区别 ...................................................................20
47. 45.CSS2 和 CSS3 区别 .....................................................................20
48. webpack3 和 webpack4 区别 .........................................................21
49. cookie、session、webStoreage、localStorage、 sessionStorage 区
别: 21
50. 响应式开发 .....................................................................................23
51. 箭头函数与普通函数的区别 .........................................................24
52. var let const .....................................................................................24
53. this.setState 参数个数....................................................................24
54. 网站性能优化 .................................................................................24
55. 大中型公司开发业务流程 .............................................................25
56. React 和 Vue 对比:.......................................................................25
57. 请描述一下 cookies,sessionStorage 和 localStorage 的区别? ....25
58. Typescript ........................................................................................26
59. 纯函数和纯组件 .............................................................................26
60. 为什么 class App A 要大写? .........................................................26
61. render 为什么有根元素? .............................................................26
62. 解释 ref? .........................................................................................27
63. createRef 是什么?...........................................................................27
64. react 好在哪?/react 特点 .............................................................27
65. 判断是 Array? .................................................................................27
66. 数组的拷贝 .....................................................................................27
67. 生命周期方法(钩子函数 hooks)...............................................27
68. redux react-redux ............................................................................28
69. redux 中间件...................................................................................29
70. redux-saga generator 版本的异步..................................................30
71. dva ...................................................................................................30
72. antd .................................................................................................30
73. 组件间通信方式 .............................................................................30
74. 封装 ETable .....................................................................................30
75. ES6 ...................................................................................................30
76. Promise 异步操作...........................................................................33
77. .webpack .........................................................................................33
78. 76.vue-cli 两个版本区别 ................................................................36
79. 77 原型链 联系 constructor 比如 a.constructor()返回构造器函数
36
80. 同步和异步 .....................................................................................37
81. 判断 object 为空.............................................................................37
82. async 和 await .................................................................................38
83. vue 中$router 和$route ..................................................................38
84. vue-sourse .......................................................................................38
85. map 和 forEach 区别.......................................................................38
86. .入口组件外有个按钮,点击实现数组逆序,会对页面有什么影
响吗? 38
87. querySelector 和 querySelectorAll 和$()区别.................................38
88. .ES5 六种数据类型、ES6 七种数据类型......................................38
89. 遍历数组和对象的方式 .................................................................38
90. react jsx ...........................................................................................39
91. react-router .....................................................................................39
92. DOM 操作--原生 js 常用方法.........................................................40
93. onload 和 DOMContentLoaded 区别.............................................40
94. 深拷贝和浅拷贝及具体实现 .........................................................40
95. 跨域.................................................................................................41
96. 数组和字符串的变异方法和非变异方法 .....................................41
97. 文档碎片.........................................................................................42
98. 事件对象及事件对象常用属性和方法 .........................................42
99. Json 和 JS 相互转化 ......................................................................43
100. call/apply/bind ................................................................................43
101. redux-saga 为什么使用 generator 函数而不是 async 函数?.43
102. 为什么 react 中,this.setState({})为什么是异步的? .....................43
103. webpack 打包优化..........................................................................44
104. 把 m 进制的数字 num 转为 n 进制怎么做...................................45
105. 递归.................................................................................................45
106. redux-saga Generator......................................................................46
107. 0.1+0.2 为什么不等于 0.3 怎么解决 ...........................................46
108. 平常如何处理图标展示,一般用什么方式或插件实现..............46
109. 前后端如何进行联调 .....................................................................46
110. 从输入 url 到页面加载完成发生了什么详解 ...............................46
111. 阿里公司项目开发流程 .................................................................46
112. vuez 中,v-if 和 v-show 的区别 .....................................................47
1. 浏览器兼容性
同一份源代码,在不同浏览器,显示效果不同或出现错误
浏览器兼容性问题产生的原因:
同一个标记在不同浏览器中默认样式不同,如果不控制就会发生兼容性问题
(主要集中在 IE6/7 这种老浏览器中,从 IE8 及以上就标准了)
2. 如果没有文档类型声明,那么浏览器会怎么处理
浏览器会认为该文档是怪异模式:浏览器为了最大化兼容,按照非常老的浏览
器标准(IE5/6)进行解释,会产生大量的兼容性问题和 bug
3. 如何理解层叠
标记和控制标记显示的样式可以分离,样式可以统一控制所有标记
4. 一个标记样式的来源
--浏览器默认样式 user agent stylesheet
--继承自祖先元素的样式
--自定义样式--通过选择器应用样式
5. margin 计算
①.行内元素之间距离=左边元素的 margin-right+右边元素的 margin-left
②.块元素之间的距离=上面元素的 margin-botom 和下面元素的 margin-top 取
大者
6. 元素按照 display 值分为两类
①.display:inline;默认值 行内元素 (内联元素)
特点:所有元素一个紧挨着一个排列,没有换行,元素的内容多宽,盒子
就多宽
②.display:block; 块元素
特点:元素不管内容多宽,自己占一行
block-level box(块级盒元素):display 属性为 block 块, list-item 列表, table 表格
的元素,会生成 block-level box。并且参与 block fomatting context(块格式化上
下文);
inline-level box(内联级盒元素):display 属性为 inline, inline-block, inline-table
的元素,会生成 inline-level box。并且参与 inline formatting context(行内格式
化上下文);
7. 文档流
上面的标记顶着下面的标记,左面的标记顶着右面的标记,在同一个平面,称
为同一个文档流
8. 元素浮动后的三大变化
①.浮动元素脱离当前文档流,父元素高度减少浮动元素高度(激活 BFC),后面
的元素顶上去
②.浮动元素宽度变成盒子实际宽度,不再占一行
③.后面元素的内容 content 会错开浮动元素实际宽度,不会被浮动元素覆盖
9. 9. CSS 样式初始化:
解决浏览器兼容性问题.
清除指定标记的默认样式 ,进行统一设置
10. 10.BFC
BFC (Block formatting context)直译为"块级格式化上下文"。
【具体来说】当涉及可视化布局时,BFC 提供了一个环境,HTML 元素在这个
环境中按照一定的规则进行
。一个环境中的元素不会影响到其他环境中的布局。这样,可以把一个 BFC 理
解成一个独立的行政单位。也可以说 BFC 就是一个作用范围,一个独立的容器。这
个容器里的布局,与这个容器外的毫不相干。
BFC 布局规则:
1.内部的 BOX 会在垂直方向,一个接一个地放置。
2.BOX 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的
margin 会发生重叠
3.每个元素的 margin box 的左边,与包含块 border box 的左边相接触(对于
从左到右的格式化,否则相反)。即使存在浮动也是如此。
4.BFC 的区域不会与 float box 重叠。
5.BFC 就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面
的元素。反之如此
6.计算 BFC 的高度时,浮动元素也参与计算
触发 BFC
float 属性不为 none 【会影响祖先元素】
position 为 absolute 或 fixed 【会影响祖先元素】
display 为 inline-block, table-cell, table-caption, flex, inline-flex
overflow 不为 visible, 【建议使用 auto/hidden】
BFC 解决的问题:
1.自适应两栏布局
2.清除内部浮动
3.防止垂直 margin 重叠
触发 bfc(block formatting context)即可,触发的方法:
1. float 不为 none
2. overflow 不为 visible
3. display 设为‘table-cell’, ‘table-caption’, 或‘inline-block’
4. position 既不是 static 也不是 relative
5. zoom:1, IE 的 hasLayout 特性会建立一个新的 block formatting context
11. 清除浮动影响/解决塌陷
1.BFC overflow:hidden;
2.在浮动元素后添加块元素,并设置其 clear 属性.clear:both;
3.after 伪类 .box:after{
content:"\20";
display:block;
height:0px;
clear:both;
}
(可以通过 after 伪类向元素的最后添加一个空白的块元素,然后对其清除
浮动,而且不会在页面中添加多余的 div,这是最推荐的方式,几乎没有副作用
在 IE6 中 , 不 支 持 after , 所 以 在 IE6 中 还 需 要 使 用 hasLayout 来 处 理
(zoom:1))
12. position:relative/absolute/fixed 的区别
position:relative;相对定位相对于自己原来的位置或父元素进行定位,不脱离文档
流(不影响其他任何元素)
position:absolute;绝对定位脱离文档流,相对于最近的带定位样式 position 元素进
行定位,如果祖先都没有 position,那么相对于浏览器窗口定位
position:fixed;绝 对定位 相对于浏览 器窗口定 位(IE6 不支持 ) 。元素的位置通
过:”left” ”top” ”right” ”bottom”属性进行定位,脱离文档流,元素宽度变成盒子实际
宽度
13. css 选择器优先级计算方法
a b c d
行内 id 选择器 类选择器 标签选择器
样式 数量 伪类选择器 数量
属性选择器
数量
多个选择器应用给同一个标记,样式发生冲突,优先级高的选择器生效,如
果想要优先级低的选择器生效那么,在这个冲突样式后加 !important;提升
优先级
14. 一个盒子实际宽度或高度
宽 margin-left+border-left+padding-left+width+padding-right+border-right+margin-
right
高 margin-top+border-top+padding-top+height+padding-bottom+border-
bottom+margin-bottom
15. css 盒模型
w3c 标准:width 不包括 padding 和 border;
IE 盒模型:width 包括 padding 和 border。
16. css 兼容性
(1)CSS2.1
<1>浏览器渲染 bug --img 三像素 bug
解决:img{vertical-align:top; }
剩余46页未读,继续阅读
zayyo
- 粉丝: 343
- 资源: 45
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
- 1
- 2
- 3
- 4
前往页