1.输入网址到页面会发生什么首先在浏览器中输入网址查找缓存：浏览器??首先检查浏览器缓存-系统缓存-路由缓存中是否存在该地址页面，如果存在则内容显示页面。如果没有，请继续下一步。DNS域名解析：浏览器向DNS服务器发起请求，解析URL中域名对应的IP地址。DNS服务器是基于UDP的，所以会用到UDP协议。建立TCP连接：解析IP地址后，根据IP地址和默认端口80与服务器建立TCP连接。发起HTTP请求：浏览器发起HTTP请求读取文件。这条请求报文是TCP三次握手的第三次服务器响应请求并返回结果：服务器响应浏览器请求并向浏览器发送相应的html文件关闭TCP连接：释放TCP连接通过四次挥动浏览器渲染：客户端（浏览器）解析HTML内容并渲染出来。浏览器收到数据包后的解析过程是：构建DOM树：词法分析，然后解析成DOM树（dom树），DOM树由dom元素和属性节点组成。树的根是文档对象构建CSS规则树：生成CSS规则树（CSSRuleTree）构建渲染树：Web浏览器结合DOM和CSSOM，构建渲染树（rendertree）布局（Layout）：计算位置每个节点在屏幕中的位置绘制（Painting）：即遍历渲染树，使用UI后端层绘制每个节点。浏览器渲染机制、重绘、重排Rearrangement：当DOM的变化影响到元素的几何信息（DOM对象的位置和大小）时，浏览器需要重新计算元素的几何属性，并将其放置在界面中正确位置，这个过程称为重排。触发条件：添加或删除可见的DOM元素元素大小改变——margin、padding、border、width和height称为重绘。触发条件：改变元素的颜色、背景、box-shadow等属性2、平铺三个div和一个按钮3、position属性固定，定位固定：元素的位置相对于浏览器窗口是固定的，即使窗口在滚动它也不会移动。固定定位使元素的位置独立于文档流，因此不占用空间。固定定位的元素与其他元素重叠。相对定位relative：如果一个元素是相对定位的，它就会出现在它所在的位置。然后，您可以通过设置垂直或水平位置使该元素相对于其原点“相对”移动。使用相对定位时，无论元素是否移动，元素仍占据其原来的空间。因此，移动一个元素会导致它覆盖其他盒子。绝对定位absolute：绝对定位元素的位置是相对于最近定位的父元素，或者如果元素没有定位的父元素，那么它的位置是相对于它的。绝对定位使元素的位置独立于文档流，因此不占用空间。绝对定位元素与其他元素重叠。Sticky定位sticky：元素先按照正常的文档流定位，然后相对于流中元素的流根（BFC）和包含块（最近的块级祖先元素）定位。然后显示元素定位是相对的，直到超过某个阈值，然后固定。默认定位静态：默认。没有定位，元素出现在正常流中（忽略顶部、底部、左侧、右侧或z-index声明）。inherit：指定position属性的值应该从父元素继承。4.transition和animation的区别答：transition是一个transition属性，强调transition，它的实现需要触发一个事件（比如鼠标移动，焦点，点击等）来执行动画。类似于Flash的补间动画，设置开始关键帧和结束关键帧。animation是一个动画属性，它的实现不需要触发事件，设置好时间后就可以执行，可以循环播放一个动画。它也类似于flash的补间动画，但是可以设置多个关键帧（用@keyframe定义）来完成动画。5.CSS样式优先！importantinlinestyle(1000)IDselector(0100)classselector(0010)elementselector(0001)wildcardselector(0000)vue中组件样式的修改没有scoped6.EventLoop（高频）JS是单线程的。为了防止一个函数耗时过长阻塞后面的代码，它会先将同步代码压入执行栈，顺序执行，将异步代码压入异步队列。异步队列又分为宏任务队列和微任务队列。因为宏任务队列的执行时间较长，所以微任务队列的优先级高于宏任务队列。微任务队列的代表是Promise.then，MutationObserver，宏任务是setImmediatesetTimeoutsetIntervalrequestAnimationFrame，它属于什么任务呢？宏任务？或者两者都不是。7、map和forEach的区别是map有返回值，forEach没有返回值。8.Computed和watchwatch属性监听是一个对象，key是需要观察的属性，value是对应的回调函数，主要用来监听特定数据的一些变化，从而执行一些特定的业务逻辑操作，监视属性的变化，并在数据变化时执行异步或昂贵的操作时使用计算。计算属性属性的结果将被缓存。当函数在computed依赖的属性没有改变时，调用当前函数时会从缓存中读取结果。除非相关的响应属性发生变化，否则它将被重新计算。它主要用作财产。computed中的函数必须使用return来返回最终结果。Computed效率更高，应首先使用。数据不会改变，计算不会更新。9.webpack相关常用的Loader（高频）raw-loader：加载文件的原始内容（utf-8）file-loader：将文件输出到文件夹，通过in中的相对URL引用输出文件代码（处理图片和字体）source-map-loader：加载额外的SourceMap文件，方便断点调试svg-inline-loader：将压缩后的SVG内容注入代码image-loader：加载并压缩图片文件json-loader加载JSON文件（默认包含）babel-loader：将ES6转换为ES5ts-loader：将TypeScript转换为JavaScriptawesome-typescript-loader：将TypeScript转换为JavaScript，性能优于ts-loadersass-loader：将SCSS/SASS代码转换为CSScss-loader：加载CSS，支持模块化、压缩、文件导入等style-loader：将CSS代码注入JavaScript，通过DOM操作加载CSSpostcss-loader：扩展CSS语法，使用下一代CSS，可配合autoprefixer插件-ins自动补全CSS3前缀vue-loader:加载Vue.js常用的单文件组件plugindefine-plugin:定义环境变量（指定模式webpack4后会自动配置）ignore-plugin:忽略部分文件html-webpack-plugin:简化HTML文件创建（依赖于html-loader）web-webpack-plugin：可以轻松输出HTML用于单页应用，优于html-webpack-pluginuglifyjs-webpack-plugin：不支持ES6压缩（Webpack4之前）更简洁-webpack-plugin:支持压缩ES6(Webpack4)webpack-parallel-uglify-plugin:多进程执行代码压缩，提高构建速度ract-text-webpack-plugin)serviceworker-webpack-plugin:为web应用添加离线缓存功能clean-webpack-plugin:目录清理10.优化项目相关(open)11.vuerouter模式及实现原理一种是Hash模式，一种是History模式的Hash模式：将url中#后面的内容作为路由地址，可以直接通过location.url切换浏览器的地址。如果只是改变#后面的内容，浏览器不会向服务器请求这个地址，但是这个地址会记录在浏览器的访问记录中。当hash发生变化时，我们需要监听hash的变化，并做相应的处理。我们可以监控hashchange事件。当哈希发生变化时，会触发hashchange事件，在hashchange事件中记录当前路由地址，找到当前路由对应的组件，在浏览器中重新渲染History模式：路径为普通url，通过history.pushState()方法改变地址栏，并记录当前地址在浏览器的访问历史中，并不会真正跳转到指定路径，即浏览器不会向服务器发送请求。通过监听popstate事件，可以监听浏览器历史操作的变化，可以记录在popstate事件中。需要注意的是，调用history.pushSate()和history.replaceState()不会触发popstate事件，只会点击浏览器的前进后退按钮，调用history.forward()和history。popstate事件只会在使用back()和history.go()方法时触发。最后通过路由找到对应的组件，并渲染到浏览器中。12、小程序相关小程序的提升机制：小程序的机制如下图所示。当用户点击H5页面包含Scheme协议的url时：移动设备会识别scheme协议，打开百度App，将url的Source传递给百度APP。URLScheme是应用程序之间的调用协议。在应用程序内部注册协议后，当用户在浏览器或其他应用程序中点击相应的方案链接时，可以调用该应用程序并打开应用程序中的相关页面。百度App收到源后，识别小程序ID，调用小程序框架。小程序框架通过appKey加载小程序代码，打开指定的小程序。小程序根据路径和查询呈现特定页面，并加载页面内容。小程序架构微信小程序的框架由两部分组成：View层和AppService逻辑层。View层用于渲染页面结构，AppService层用于逻辑处理、数据请求、接口调用。它们在两个进程（两个Webviews）中运行。视图层和逻辑层通过系统层的JSBridage进行通信。逻辑层通知视图层数据变化，触发视图层的页面更新，视图层将触发的事件通知给逻辑层进行业务处理。
