百度前端面试题2020

Dear 丶 2022-12-01 14:03 252阅读 0赞

> 最近一直着急更换工作，舍本逐末，没有好好准备和复习。
> 
> 从本篇开始，整理自己投递简历获得面试机会公司的笔试、面试题（尽力回想）  
> 常识知识直接贴出答案，自己也不太理解的就贴出学习链接，待学习理解后更新内容。
> 
> 积累经验，温故知新，再接再厉～

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

### 自我介绍 ###

*  …

### HTML ###

1.  doctype的含义和作用([w3school详细介绍][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 ###

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

*  标准：标准盒模型下盒子的大小 = 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范围

1.  用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;//避免被内容撑开多余的高度
                  }
2.  clientWidth offsetWidth区别
    
     *  offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽度(width)的值。
     *  Element.clientWidth 属性表示元素的内部宽度，以像素计。该属性包括内边距 padding，但不包括边框 border、外边距 margin 和垂直滚动条（如果有的话）
3.  position取值
    
     *  relative、absolute、fixed、static、inherit、sticky
     *  粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位(relative)，之后为固定定位(fixed)。
4.  说明一下flex弹性布局的理解
    
     *  flex：1的意思:让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容。
     *  默认 flex：0， 1 ，auto （flex-grow flex-shrink flex-basic）
     *  flex：auto（ 1，1，auto）
     *  flex：none（ 0，0， auto）

### JS ###

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

### Vue ###

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

### 工程化&算法 ###

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

### 其他 ###

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

[w3school]: https://www.w3school.com.cn/tags/tag_doctype.asp