前端面试题汇总

1.输入一个URL到页面过程中发生了什么

1. 首先在浏览器中输入URL
2. 查找缓存：浏览器先查看浏览器缓存-系统缓存-路由缓存中是否有该地址页面，如果有则显示页面内容。如果没有则进行下一步。
3. DNS域名解析：浏览器向DNS服务器发起请求，解析该URL中的域名对应的IP地址。DNS服务器是基于UDP的，因此会用到UDP协议。
4. 建立TCP连接：解析出IP地址后，根据IP地址和默认80端口，和服务器建立TCP连接
5. 发起HTTP请求：浏览器发起读取文件的HTTP请求，，该请求报文作为TCP三次握手的第三次数据发送给服务器
6. 服务器响应请求并返回结果：服务器对浏览器请求做出响应，并把对应的html文件发送给浏览器
7. 关闭TCP连接：通过四次挥手释放TCP连接
8. 浏览器渲染：客户端（浏览器）解析HTML内容并渲染出来，浏览器接收到数据包后的解析流程为：
9. 构建DOM树：词法分析然后解析成DOM树（dom tree），是由dom元素及属性节点组成，树的根是document对象
10. 构建CSS规则树：生成CSS规则树（CSS Rule Tree）
11. 构建render树：Web浏览器将DOM和CSSOM结合，并构建出渲染树（render tree）
12. 布局（Layout）：计算出每个节点在屏幕中的位置
13. 绘制（Painting）：即遍历render树，并使用UI后端层绘制每个节点。

浏览器渲染机制、重绘、重排

1. 重排：当DOM的变化影响了元素的几何信息(DOM对象的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。
   触发条件：
   添加或者删除可见的DOM元素
   元素尺寸改变——边距、填充、边框、宽度和高度
2. 重绘：当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。
   触发条件：改变元素的color、background、box-shadow等属性

2.平铺三个div和一个按钮

3.position属性

1. 固定定位 fixed： 元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定 位使元素的位置与文档流无关，因此不占据空间。 Fixed 定位的元素和其他元素重叠。
2. 相对定位 relative： 如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直 或水平位置，让这个元素“相对于”它的起点进行移动。 在使用相对定位时，无论是 否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
3. 绝对定位 absolute： 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那 么它的位置相对于。absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。
4. 粘性定位 sticky： 元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定 位，之后为固定定位。
5. 默认定位 Static： 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声 明）。 inherit: 规定应该从父元素继承 position 属性的值。

4.transition和animation的区别

答：transition是过度属性，强调过度，它的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画。它类似于flash的补间动画，设置一个开始关键帧，一个结束关键帧。
animation是动画属性，它的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。它也类似于flash的补间动画，但是它可以设置多个关键帧（用@keyframe定义）完成动画。

5.CSS样式优先级

!important
内联样式（1000）
ID选择器（0100）
类选择器（0010）
元素选择器（0001）
通配符选择器（0000）
vue中对组件样式的修改 无scoped的情况

6.EventLoop（高频）

JS是单线程的，为了防止一个函数执行时间过长阻塞后面的代码，所以会先将同步代码压入执行栈中，依次执行，将异步代码推入异步队列，异步队列又分为宏任务队列和微任务队列，因为宏任务队列的执行时间较长，所以微任务队列要优先于宏任务队列。微任务队列的代表就是，Promise.then，MutationObserver，宏任务的话就是setImmediate setTimeout setInterval

requestAnimationFrame是属于什么任务？宏任务？或二者都不是

7.map 跟 forEach 的区别

map有返回值 forEach 没有返回值

8.computed与watch

watch 属性监听 是一个对象，键是需要观察的属性，值是对应回调函数，主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作,监听属性的变化，需要在数据变化时执行异步或开销较大的操作时使用

computed 计算属性 属性的结果会被缓存，当computed中的函数所依赖的属性没有发生改变的时候，那么调用当前函数的时候结果会从缓存中读取。除非依赖的响应式属性变化时才会重新计算，主要当做属性来使用 computed中的函数必须用return返回最终的结果 computed更高效，优先使用。data 不改变，computed 不更新。

9.webpack相关

常用Loader（高频）

1. raw-loader：加载文件原始内容（utf-8）
2. file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件 (处理图片和字体)
3. source-map-loader：加载额外的 Source Map 文件，以方便断点调试
4. svg-inline-loader：将压缩后的 SVG 内容注入代码中
5. image-loader：加载并且压缩图片文件
6. json-loader 加载 JSON 文件（默认包含）
7. babel-loader：把 ES6 转换成 ES5
8. ts-loader: 将 TypeScript 转换成 JavaScript
9. awesome-typescript-loader：将 TypeScript 转换成 JavaScript，性能优于 ts-loader
10. sass-loader：将SCSS/SASS代码转换成CSS
11. css-loader：加载 CSS，支持模块化、压缩、文件导入等特性
12. style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS
13. postcss-loader：扩展 CSS 语法，使用下一代 CSS，可以配合 autoprefixer 插件自动补齐 CSS3 前缀
14. vue-loader：加载 Vue.js 单文件组件

常用的Plugin

1. define-plugin：定义环境变量 (Webpack4 之后指定 mode 会自动配置)
2. ignore-plugin：忽略部分文件
3. html-webpack-plugin：简化 HTML 文件创建 (依赖于 html-loader)
4. web-webpack-plugin：可方便地为单页应用输出 HTML，比 html-webpack-plugin 好用
5. uglifyjs-webpack-plugin：不支持 ES6 压缩 (Webpack4 以前)
6. terser-webpack-plugin: 支持压缩 ES6 (Webpack4)
7. webpack-parallel-uglify-plugin: 多进程执行代码压缩，提升构建速度
8. mini-css-extract-plugin: 分离样式文件，CSS 提取为独立文件，支持按需加载 (替代extract-text-webpack-plugin)
9. serviceworker-webpack-plugin：为网页应用增加离线缓存功能
10. clean-webpack-plugin: 目录清理

10.优化项目相关（开放）

11.vue router模式及实现原理

一种是Hash模式，一种是History模式

Hash模式：是以url中#后面的内容作为路由地址，可以直接通过location.url来切换浏览器的地址，如果只改变了#后面的内容，浏览器不会向服务器请求这个地址，但是会把这个地址记录在浏览器的访问记录中，当hash改变后，要监听hash的变化，并做相应的处理，我们可以监听hashchange事件，当hash发生变化时，会触发hashchange事件，在hashchange事件中记录当前路由地址，并找到当前路由对应的组件，重新渲染在浏览器中

History模式：路径就是普通的url，通过history.pushState()方法来改变地址栏，并把当前地址记录在浏览器的访问历史中，并不会真正的跳到指定的路径，也就是浏览器不会向服务器发送请求。通过监听popstate事件，可以监听到浏览器历史操作的变化，在popstate事件中可以记录浏览器地址栏改变后的地址，要注意的是，调用history.pushSate()和history.replaceState()不会触发popstate事件，只有点击浏览器的前进后退按钮及调用history.forward()、history.back()、history.go()方法时才会触发popstate事件。最后通过路由找到对应的组件，渲染在浏览器中

12.小程序相关

小程序的吊起机制：
小程序调起机制如下图，当用户在 H5 页面中点击含有 Scheme 协议的 url 时：

1. 移动设备会识别 scheme 协议，打开百度 App ，并将 url 的 Source 传递给百度 APP。URL Scheme 是一种 App 间的调起协议。App 内部注册协议后，当用户在浏览器或其他 App 内点击相应的 scheme 链接，就能够调起 App 并打开 App 内的相关页面。
   
2. 当百度 App 接受到 source 后，识别小程序标识，调起小程序框架。
3. 小程序框架通过 appKey 加载小程序代码，打开指定小程序。
4. 小程序根据 path 和 query 渲染具体页面，加载页面内容。
   

小程序架构
微信小程序的框架包含两部分View视图层、App Service逻辑层，View层用来渲染页面结构，AppService层用来逻辑处理、数据请求、接口调用，它们在两个进程（两个Webview）里运行。
视图层和逻辑层通过系统层的JSBridage进行通信，逻辑层把数据变化通知到视图层，触发视图层页面更新，视图层把触发的事件通知到逻辑层进行业务处理。