前端程序员对浏览器的理解

浏览的基础理解

浏览器的主要功能是：将通过网络访问到服务器，并且把响应的内容渲染呈现给用户。这里的内容是多种多样的，文本、图片、脚本、视频、声音等。并且对一般的html文件的依照W3C组织制定的标准进行解析和渲染。
W3C 组织是负责制定html css 标准的组织。

浏览器的内核和shell

浏览器可以分为两个部分组成：内核和shell。内核是指：是浏览器用来解析显示网页内容的核心组件。shell 是指浏览器的外壳。其中内核一般也包括两个部分：渲染引擎和JS引擎。

市场目前有的内核有哪些？

1. Trident（MSHTML）：这是Windows平台上的默认浏览器内核，由微软开发，也称为Internet Explorer内核。该内核主要被Internet Explorer和Microsoft Edge（旧版）使用。
2. Gecko：这是一个由Mozilla基金会与社区共同开发的开源布局引擎，被Firefox等浏览器采用。Gecko能够解析网页内容（如HTML、XML和SVG）并呈现为图像。
3. Blink：Blink是一个由Google和OperaSo ftware开发的浏览器排版引擎，作为Chromium计划的一部分，并且是Google Chrome与Chromium网页浏览器使用的默认HTML渲染引擎。Blink是WebKit的一个分支，并且移除了一些代码，以便提高渲染速度和安全性。
4. Presto：Presto是Opera Software开发的浏览器排版引擎，用于Opera 7.0至Opera 12.16版。Presto的特点是渲染速度的优化和灵活性，它完美地支持CSS2、CSS3和部分CSS4标准。然而，Presto内核因为存在诸多专利和授权问题，Opera已改用基于Chromium的Blink内核。
5. WebKit：WebKit是一个开源的浏览器引擎，最初由Apple公司开发，后来被其他浏览器项目采纳。WebKit的主要特点是源代码结构清晰、渲染速度极快。不过，WebKit在解析网页时对于出错的宽容度不高，不如Trident和Gecko。

浏览器的内核决定了网页在浏览器上的呈现效果，不同的内核对网页的解析方式和渲染效果可能存在差异。因此，开发者在编写网页时需要考虑到不同浏览器的兼容性。

市场常见浏览器的内核都是什么？

1. Chrome： Blink内核
2. Safari： Webkit 内核
3. 360浏览器： IE + Chrome 双内核
4. Firefox： Gecko 内核
5. Opera：Presto->Webkit->Blink
6. iE： Trident 内核
7. 搜狗、QQ 浏览器： Trident（兼容模式）+ Webkit（高速模式）

浏览的渲染过程

浏览器的渲染过程是一个复杂的过程，主要包括以下步骤：

1. DNS查询：当用户在浏览器中输入网址并按下回车时，浏览器首先会进行DNS查询，将网址转换为对应的IP地址。
2. 建立TCP连接：浏览器与服务器之间建立TCP连接，以便进行数据传输。
3. 发出HTTP请求：浏览器通过TCP连接向服务器发出HTTP请求，请求获取网页的内容。
4. 等待服务器响应：服务器收到请求后，会处理请求并返回网页的内容，通常是HTML、CSS和JavaScript文件。
5. 渲染内容：浏览器接收到这些文件后，会开始渲染网页内容。

渲染内容流程

这个过程可以细分为以下几个步骤：

1. 处理HTML，构建DOM树（文档对象模型）：浏览器使用HTML解析器解析HTML文件，将其转换为DOM树。DOM树是网页内容的结构化表示，包含了网页中所有的元素和属性。
2. 处理CSS，构建CSSOM（CSS对象模型）：浏览器使用CSS解析器解析CSS文件，并计算出DOM节点的样式，构建CSSOM。CSSOM是网页样式的结构化表示，包含了所有CSS规则和样式。
3. 以DOM和CSSOM为基础，构建渲染树：浏览器将DOM树和CSSOM合并，构建渲染树。渲染树是网页内容的可视化表示，包含了需要显示在屏幕上的元素和样式。
4. 布局（Layout）：浏览器根据渲染树中的元素和样式，计算每个元素在屏幕上的位置和大小，确定网页的布局。
5. 绘制（Painting）：浏览器根据布局信息，将元素绘制到屏幕上，完成网页的渲染。
   在这个过程中，JavaScript可能会对DOM或CSSOM进行修改，这可能会导致浏览器重新计算布局或重新绘制页面。因此，JavaScript的性能对网页的渲染性能有很大影响。

另外，现代浏览器为了提高渲染性能，通常会采用一些优化策略，如异步加载、懒加载、缓存等。这些策略可以减少网络请求、降低内存占用、提高渲染速度，从而提升用户体验。

作为开发者可以做的优化渲染的工作有哪些？

1.标签使用注意事项：

• 把script 标签放在body标签之后，或者引用第三方js脚本，使用async 属性和 defer 属性异步加载的方式。

async 是在下载完成之后，立即异步加载，加载好后立即执行，多个带async属性的标签，不能保证加载的顺序；
defer 是在下载完成之后，立即异步加载。加载好后，如果 DOM 树还没构建好，则先等 DOM 树解析好再执行；如果DOM树已经准备好，则立即执行。多个带defer属性的标签，按照顺序执行。

• CSS有三种使用方式，ink、@import、内联样式。导入外部样式使用link，而不用@import。如果css少，尽可能采用内嵌样式，直接写在style标签中。

link：浏览器会派发一个新等线程(HTTP线程)去加载资源文件，并且不阻碍往下继续渲染。
@import：GUI渲染线程会暂时停止渲染。

2. 编写html代码中dom层级不要太深，多用语义化标签，css代码中也是层级不要太深。js编码不要过多操作dom。

浏览器的缓存

浏览器的缓存分为：内存缓存和磁盘缓存。通过使用浏览器缓存加速网页加载，节约用户流量，优化用户体验。

如何让浏览器对资源执行缓存策略？

主要通过HTTP响应头中的几个字段来实现，如Cache-Control、Expires、ETag、Last-Modified以及通过服务器端配置、CDN（内容分发网络）、者服务器端配置来设置。

浏览器缓存的过程是什么？

浏览器缓存的过程主要涉及两个主要阶段：强缓存和协商缓存。以下是这两个阶段的详细过程：

1. 强缓存
   当浏览器进行资源请求时，会首先根据请求的URL在浏览器缓存中查找是否存在对应的缓存对象。如果存在，并且这个缓存对象还没有过期（通过检查缓存对象的Expires或者Cache-Control等HTTP头信息来判断），那么浏览器就会直接使用这个缓存对象，而不会向服务器发送请求。这就是强缓存的工作过程。

在浏览器的开发者工具（如Chrome的Network标签页）中，如果请求的资源被强缓存命中，那么该请求的响应状态码会显示为200，并且Size列会显示为from disk cache（从磁盘缓存中读取）或者from memory cache（从内存缓存中读取）。

2. 协商缓存
   如果强缓存没有命中，浏览器会向服务器发送一个带有If-None-Match和If-Modified-Since头的请求，这两个头包含了缓存对象的标识（如Etag）和最后修改时间（如Last-Modified）。服务器收到这个请求后，会检查请求中的头信息和资源本身的信息是否匹配。如果匹配，说明资源没有发生变化，服务器返回新的响应header信息更新缓存中的对应header信息， 服务器会返回一个304 Not Modified的响应，并不返回资源内容，它会告知浏览器可以直接从缓存获取。这就是协商缓存的工作过程。

在浏览器的开发者工具中，如果请求的资源被协商缓存命中，那么该请求的响应状态码会显示为304，并且Size列会显示为0（因为没有返回实际的资源内容）。

总结一下，浏览器缓存的过程就是先尝试使用强缓存，如果强缓存没有命中，则尝试使用协商缓存。这两个缓存机制共同提高了网页的加载速度，减少了不必要的网络请求。

浏览器缓存有什么优点？

使用浏览器缓存，有以下优点：

● 减少了服务器的负担，提高了网站的性能
● 加快了客户端网页的加载速度
● 减少了多余网络数据传输

点击刷新按钮或者按 F5、按 Ctrl+F5 （强制刷新）、地址栏回车有什么区别？

● 点击刷新按钮或者按 F5：浏览器直接对本地的缓存文件过期，但是会带上If-Modifed-Since，If-None-Match，这就意味着服务器会对文件检查新鲜度，返回结果可能是 304，也有可能是 200。
● 用户按 Ctrl+F5（强制刷新）：浏览器不仅会对本地文件过期，而且不会带上 If-Modifed-Since，If-None-Match，相当于之前从来没有请求过，返回结果是 200。
● 地址栏回车： 浏览器发起请求，按照正常流程，本地检查是否过期，然后服务器检查新鲜度，最后返回内容。