前言大家好，我是林三信，相信大家在面试中被问过很多次“告诉我当你在地址栏中输入网址会发生什么？”，我相信很多人我可以把所有的步骤都倒着回答，但是光靠背是不够的。其实这道题包含了很多关于浏览器和性能优化的知识点。今天就和大家分享一下这15个知识点的输入网址是怎么回事？1.在浏览器地址栏输入网址，回车。2、浏览器检查当前URL是否有缓存，比较缓存是否过期。3、DNS解析URL对应的IP。4、建立基于IP的TCP连接（三次握手）。5、HTTP发起请求。6、服务器处理请求，浏览器收到HTTP响应。7.渲染页面并构建DOM树。8.关闭TCP连接（挥手四次）。永恒之钻1.浏览器应该具备哪些功能？1、网络：浏览器通过网络模块下载各种资源，如HTML文本、JavaScript代码、CSS样式表、图片、音视频文件等，网络部分尤为重要，因为耗时长，需要安全访问Internet上的资源。2.资源管理：从网络下载或本地获取的资源需要一个高效的机制来管理。比如如何避免重复下载，如何缓存资源等。3、网页浏览：这是浏览器最核心、最基本的功能，最重要的功能。这个功能决定了如何将资源转化为可视化结果4、多页面管理5、插件与管理6、账号与同步7、安全机制8、开发者工具浏览器的主要功能可以用一句话概括：用户输入的url被转换成可视化图片。2.浏览器的内核拥有浏览器中最重要的模块之一。它的主要功能是将所有请求的资源转化为可视图像。这个模块就是浏览器内核，也就是通常所说的渲染引擎。以下是浏览器核心的总结：1.IE：Trident2，Safari：WebKit。WebKit本身主要由两个小引擎组成，一个是渲染引擎“WebCore”，另一个是javascript解释引擎“JSCore”，两者都源自KDE的渲染引擎KHTML和javascript解释引擎KJS。3.铬：闪烁。从2013年发布的Chrome28.0.1469.0版本开始，Chrome放弃了Chromium引擎，改用最新的Blink引擎（基于WebKit2——2010年苹果推出的新WebKit引擎）。Blink相比上一代引擎简化了代码，改进了DOM框架，同时也提高了安全性。4、Opera：2013年2月，宣布放弃Presto，采用Chromium引擎，改用Blink引擎。系统执行的基本单位2、线程：是进程中独立的执行单位，是CPU调度的最小单位，是程序运行的基本单位3、进程中至少有一个运行线程：主线程.进程启动后自动创建4、一个进程可以同时运行多个线程。我们常说一个程序运行在多个线程中。比如你用听音乐的软件，这个软件就是一个进程。喜欢的歌曲，点赞和评论，这是一个进程中多个线程的操作5.一个进程中的数据可以直接被里面的多个线程共享，但是进程之间的数据是不能共享的6.JS引擎是单一的-threadedoperation4.浏览器渲染引擎的主要模块1.HTML解析器：解释HTML文档的解析器，主要功能是将HTML文本解释成DOM树2.CSS解析器：它的作用是3.JavaScript引擎：JavaScript引擎可以解释JavaScript代码，通过DOM接口和CSS接口修改网页内容和样??式信息，从而改变渲染结果4.Layout（布局）：DOM创建后，WebKit需要将元素对象与样式结合起来信息，计算出它们的大小和位置等布局信息，形成一个能够表达所有信息的内部表示模型。5.绘图模块（paint）：使用图形库将布局计算后的各个网页的节点绘制成图像结果。从上到下解析文档2.遇到HTML标签，调用HTML解析器解析成对应的token（token是标签文本的序列化），构建DOM树（即存储的一块内存令牌并建立它们之间的关系）3。遇到style/link标签，调用相应的解析器处理CSS标签，构建CSS样式树。4.遇见脚本标签，调用JavaScript引擎处理脚本标签，绑定事件，修改DOM树/CSS树等将树和CSS合并成渲染树6.根据渲染树进行渲染，计算出各自的几何信息节点（这个过程需要依赖GPU）7.最后在屏幕上绘制每个节点至尊星耀6.CSS阻塞情况及优化1.style标签中的样式：由HTML解析器解析，不会阻塞浏览器渲染（可能会产生“闪屏现象”），不会阻塞DOM解析2.链接引入的CSS样式：通过CSS解析浏览器解析会阻塞浏览器渲染，会阻塞后续js语句的执行，不会阻塞解析DOM设备）注：见下图，HTML和CSS是并行解析的，所以CSS不会阻塞HTML解析，但是会阻塞整个页面的渲染（因为最终CSS和HTML必须一起解析，在一个地方合成）7.JS阻塞问题1.js会阻塞后面DOM的解析，原因是：浏览器不知道后面脚本的内容，如果先解析后面的DOM，后面的js把后面的DOM全部删除，那么浏览器就有了donelessuselesswork,browsercan'tpredicted估计脚本中具体做了什么操作，比如document.write，干脆停止所有操作，等脚本执行完毕，浏览器会继续往下解析DOM2，js会阻塞页面渲染。原因是：js还可以为DOM设置样式，浏览器等待脚本执行完毕，渲染一个最终结果，避免无用功。3.js会阻塞后续js的执行。原因是为了维护依赖关系。例如：必须先引入jQuery，再引入bootstrap8。资源加载阻塞不管是css阻塞还是js阻塞，都不会阻塞浏览器加载外部资源（图片、视频、样式、脚本等）原因：浏览器一直处于“先发送请求”的工作模式，只要是关于网络请求的内容，不管是：图片，样式，还是脚本，都会先发送请求获取资源。至于资源什么时候在本地使用，由浏览器自己协调。这种方法非常有效。9、为什么CSS解析顺序是从左到右从右到左：1.第一次从父节点->子节点->孙节点12.第一次从父节点->子节点->孙子节点23.第一次从master节点->子节点->孙子节点3.如果匹配不到3次，至少要走3次：master节点->child节点->孙子节点。这是很多无用的工作。.如果是从右到左：1.第一次从孙节点1，找不到，停止2.第一次从孙节点2，找不到，停止3.第一次从孙节点3,cannotbefound我意识到，如果你停止这个，你可以尽快发现你找不到它，并尽快停止它，这样可以节省很多无用功。最强10、什么是重绘reflow1、重绘：重绘是一种浏览器行为，由一个元素的外观发生变化而触发，例如改变轮廓和背景色等属性。浏览器根据元素的新属性重新绘制元素，使元素焕然一新。重新绘制不会导致重新布局，因此它不一定会伴随回流。2.回流：渲染对象创建并添加到渲染树时，不包含位置和大小信息。计算这些值的过程叫做layout或者rearrangement，或者reflow3.“重绘”不一定要“重绘”。例如改变网页元素的颜色，只会触发“重绘”，不会触发“重排”，因为布局没有改变。4.“重排”在大多数情况下会导致“重绘”。例如改变网页元素的位置，会同时触发“重排”和“重绘”，因为布局发生了变化。11.触发重绘的属性`颜色背景*轮廓颜色*边框样式*背景图像*轮廓*边框半径*背景位置*轮廓样式*可见性*背景重复*轮廓宽度*文本装饰*背景大小*框阴影`12.触发回流的属性`widthtop*text-align*height*bottom*overflow-y*padding*left*font-weight*margin*right*overflow*display*position*font-family*border-width*float*line-height*border*clear*vertical-align*min-height*white-space`13.触发重绘reflow的常见行为1、当你增加、删除或修改DOM节点时，会引起Reflow，Repaint2，当你移动DOM的位置时3，当你修改CSS样式时。4.调整窗口大小时（移动端没有这个问题，因为移动端缩放不影响布局视口）5.修改网页默认字体时。6.获取DOM的高度或宽度时，如clientWidth,clientHeight,clientTop,clientLeft,offsetWidth,offsetHeight,offsetTop,offsetLeft,scrollWidth,scrollHeight,scrollTop,scrollLeft,scrollIntoView(),scrollIntoViewIfNeeded(),getComputedStyle(),getBounding(Client)Client,scrollTo()14.重绘和回流的优化方案1.移动和变换元素位置时尽量使用CSS3transform代替top,left等操作2.不使用表格布局3.合并操作多次更改样式属性为一次操作4.使用文档片段（documentFragment），vue使用此方法提高性能5.动画实现过程中，开启GPU硬件加速：transform:tranlateZ(0)6.新建层对于动画元素，提高动画元素的性能z-index7。写动画的时候尽量使用requestAnimationFrame15。浏览器缓存分类强缓存不会向服务器发送请求，直接从本地缓存中获取数据。请求资源的状态码为：200ok（来自内存缓存）优先级：cache-control>expires协商缓存向服务器发送请求，服务器会根据请求中的资源判断是否命中协商缓存请求标头。如果命中，会返回一个304状态码，通知浏览器从缓存中读取资源。Priority:Last-Modified和ETag如果可以一起使用，服务器会先验证ETag。如果一致，就会继续比较Last-Modified，最后决定是否返回304。结语我是林三鑫，一个狂热的前端菜鸟程序员。如果你有上进心，喜欢前端，想学前端，那我们可以交个朋友，一起钓鱼哈哈，摸摸鱼群，加我，请注意[思想]
