百度前端面试题2020

最近一直着急更换工作，舍本逐末，没有好好准备和复习。

从本篇开始，整理自己投递简历获得面试机会公司的笔试、面试题（尽力回想）
常识知识直接贴出答案，自己也不太理解的就贴出学习链接，待学习理解后更新内容。

积累经验，温故知新，再接再厉～

百度一面问的比较基础（可能水平有限，没趟出太多的雷）面试官比较nice，问题由浅入深，一直在说没关系（好失望…）大三实习的时候就有面试过一次，也是一面凉，菜是原罪啊。

自我介绍

• …

HTML

1. doctype的含义和作用(w3school详细介绍)
   • 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
   • 标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，应该使用什么样的文档类型定义（DTD）来解析文档。
   • 声明必须是 HTML 文档的第一行，位于html标签之前。
2. 获取dom元素方式，获取元素标签名
   • getElementById()
   • getElementsByTagName()
   • getElementsByClassName()
   • querySelector
   • querySelectorAll
   • 获取元素标签名：element.tagName
3. html5语义化标签
   • 语义化，指对文本内容的结构化（内容语义化），选择合乎语义的标签（代码语义化），便于开发者阅读，维护和写出更优雅的代码的同时，让浏览器的爬虫和辅助技术更好的解析。
   • 列举语义化标签：header nav main article section aside footer

CSS

4. css选择器权重计算方式
   • 第一等：代表内联样式，如: style=””，权值为1000。
   • 第二等：代表ID选择器，如：#content，权值为0100。
   • 第三等：代表类，伪类和属性选择器，如.content，权值为0010。
   • 第四等：代表元素选择器和伪元素选择器，如div p，权值为0001。
   • 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
   • 继承的样式没有权值。
   • 1,0,0,0 > 0,99,99,99，也就是说从左往右逐个等级比较，前一等级相等才往后比
   • !important 的作用是提升优先级，加了这句的样式的优先级是最高的
5. css link @import 加载顺序
   • link无论放到哪里都是优先加载，import受代码顺序影响
   • 代码中引用文件都是在文档加载完成以后才开始加载的
   • link支持使用Javascript控制DOM去改变样式；而@import不支持。
6. 盒模型

• 标准：标准盒模型下盒子的大小 = content + border + padding + margin
• 怪异：怪异盒模型下盒子的大小=width（content + border + padding） + margin
• box-sizing取值：
  - content-box： 默认值，border和padding不算到width范围内，可以理解为是W3c的标准模型(default)
  - border-box：border和padding划归到width范围内，可以理解为是IE的怪异盒模型
  - padding-box：将padding算入width范围

7. 用css实现正方形（元素宽高之间的关系）

   • 如果用百分比表示padding margin的话，百分比的对象都是父元素的width。所以用padding来撑起div能够正方形。

       // 1.CSS3 vw 单位1vw = 1% viewport width
       <div class="vw">hello,viewport</div>
       .vw {
               width: 50%;
               height: 50vw;
               background: #ccc;
           }
            <div class="placeholder"></div>
       //2.padding-bottom
        .placeholder {
               width: 100%;
               padding-bottom: 100%;/* padding百分比相对父元素宽度计算 */
               height: 0;//避免被内容撑开多余的高度
           }
     

8. clientWidth offsetWidth区别

   • offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽度(width)的值。
   • Element.clientWidth 属性表示元素的内部宽度，以像素计。该属性包括内边距 padding，但不包括边框 border、外边距 margin 和垂直滚动条（如果有的话）

9. position取值

   • relative、absolute、fixed、static、inherit、sticky
   • 粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位(relative)，之后为固定定位(fixed)。

10. 说明一下flex弹性布局的理解

    • flex：1的意思:让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容。
    • 默认 flex：0， 1 ，auto （flex-grow flex-shrink flex-basic）
    • flex：auto（ 1，1，auto）
    • flex：none（ 0，0， auto）

JS

11. js数据类型
    • Number、String、Boolean、undefined、object、Null Symbol bigInt
12. 判断整数
    • parseInt(number)==number 拓展：indexOf 正则 取余
13. js Symbol
    • 理解的不是太深：es6新增基础类型
    • Object.getOwnPropertySymbols(a) —遍历symbol
    • 作用：做属性名，得到唯一不重复独的值
14. js函数柯里化
    • 是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。
    • https://www.jianshu.com/p/2975c25e4d71
15. promise源码 常用api
    • https://www.jianshu.com/p/43de678e918a
16. js发布订阅模式
    • https://www.jianshu.com/p/0f2986b0bebd
17. typescript
18. event loop 微任务 宏任务

Vue

19. provide inject
    • provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。
20. compute watcher 二者区别
21. diff算法
22. vuex

工程化&算法

23. webpack loader pluginy说明，有自己封装过吗？
24. loader和plugin的先后顺序
25. 树深度广度遍历 时间复杂度
    … (算法必考，因为直接说了自己算法比较菜，所以之后就没有再问了)

其他

26. 最开始问了点简历上提到的项目相关问题
27. 最后问了技术沉淀方式，问我投递的是什么岗位，然后就结束了