浏览器抓取网页(新的CSS文件，重新渲染页面的charset属性值！)
优采云 发布时间: 2021-10-27 09:14浏览器抓取网页(新的CSS文件，重新渲染页面的charset属性值！)
3）HTML 页面中的字符集属性值
4.浏览器对HTML页面进行渲染和布局：
1)。浏览器开始加载html代码，发现<head>标签中有一个<link>标签，引用了外部的CSS文件；
2)。浏览器再次发送CSS文件请求，服务器返回这个CSS文件；
3)。浏览器继续加载html<body>部分的代码，已经获取到css文件，可以渲染页面了；
4)。浏览器在代码中找到引用图像的 <img> 标记并向服务器发送请求。这时候浏览器不会等到图片下载完成，而是会继续渲染后面的代码；
服务器返回图片文件。由于图片占用一定面积，影响后面段落的排列，浏览器需要返回，重新渲染这部分代码；
5)。浏览器发现<script>标签收录一行Javascript代码，快速运行；
6)。Javascript 脚本执行了这个语句，它指示浏览器在代码中隐藏某个 <div> (style.display="none")。杯具，这样的元素突然少了，浏览器不得不重新渲染这部分代码；
7)。终于等到了</html>的到来，浏览器泪流满面……
8)。等等，还没完，用户点击界面中的“皮肤”按钮，Javascript让浏览器改变<link>标签的CSS路径；
9)。浏览器把大家召集到这里<div><span><ul><li>，“大家收拾收拾，我们要回来了……”，浏览器向服务器CSS文件请求更新，重新渲染页面.
注意：Win10打开host文件的方法：在运行中输入（win+R）：C:\Windows\System32\drivers\etc。
2.2 JavaScript 引擎2.2.1 什么是 JavaScript 引擎？
“JavaScript 引擎”通常被称为一种虚拟机。“虚拟机”是指给定计算机系统的软件驱动模拟器。虚拟机的种类很多，根据它们模拟或替代真实物理机的准确程度来分类。
2.2.2 JavaScript 引擎是做什么的？
JavaScript 的基本工作是将开发者编写的 JavaScript 代码转换为浏览器可以理解甚至在应用程序中使用的最优化的快捷代码。例如，当你写 var a = 1 + 1; 这样一段代码，JavaScript引擎所做的就是理解（解析）你的代码，并将a的值改为2。
2.2.3 主要的 JavaScript 引擎有哪些？
WebKit 的 JavaScriptCore 和 Google 的 V8 引擎。
2.2.4 JavaScriptCore和V8引擎解析源码的过程
JavaScriptCore 执行一系列步骤来解释和优化脚本：
1） 首先进行词法分析，即将源代码分解为一系列具有明确含义的符号或字符串。
2) 然后用语法分析器对这些符号进行分析，构建成语法树。
3） 然后四个JIT（Just-In-Time）进程开始参与，分析并执行解析器生成的字节码。
简单来说，JavaScript 引擎会加载你的源代码，将其分解为字符串（也称为分词），将这些字符串转换为编译器可以理解的字节码，然后执行这些字节码。
Google 的 V8 引擎是用 C++ 编写的，它还可以编译和执行 JavaScript 源代码，处理内存分配和垃圾采集。它被设计为由两个编译器组成，可以直接将源代码编译成机器码：
1) Full-codegen：输出未优化代码的快速编译器
2) Crankshaft：输出高效和优化代码的慢速编译器
如果 Crankshaft 确定要优化的代码是 Full-codegen 生成的未优化代码，它将替换 Full-codegen。这个过程称为“曲轴加工”。
一旦在编译过程中生成机器码，引擎就会向浏览器公开所有数据类型、运算符、对象、ECMA 标准中指定的函数或任何需要在运行时使用的内容。NativeScript 就是这种情况。
3.Chrome浏览器的开发者工具面板介绍3.1 Chrome浏览器的开发者工具如何打开：1）功能键F12或Ctrl+Shift+j或Ctrl+Shift+j打开；
2） 打开浏览器右上角的用户设置下拉菜单，选择更多工具，然后选择开发者工具打开开发者工具。
3.2 开发者工具工具栏中常用面板介绍
元素：在网页源代码HTML中查找任意元素，手动修改任意元素的属性和样式，在浏览器中实时获取反馈。
Console：记录开发者在开发过程中的日志信息，可以作为命令行Shell与JS交互。
Sources：Sources 功能面板是一个资源面板。它主要分为四个部分。这四个部分不是独立的。它们相互关联，相互作用，实现了一个重要的功能：监控js在执行期间的活动。简单地说，它是一个断点。
网络：对网页发起请求后，分析分析HTTP请求后得到的请求资源信息（包括状态、资源类型、大小、花费时间等）。基于此可以优化网络性能。
Timeline：记录并分析网站生命周期中发生的各种事件，从而提高网页运行时间的性能。
Profiles：如果你需要更多Timeline可以提供的信息，可以尝试Profiles，比如记录JS CPU执行时间细节，显示JS对象和相关DOM节点的内存消耗，记录内存分配细节。
Application：记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。
安全性：判断当前网页是否安全。
审计：诊断当前网页使用情况和网页性能，并给出一些优化建议。例如，列出所有未使用的 CSS 文件。
3.2.1 元素面板 如何打开元素面板：
1) 打开开发者工具后，在开发者工具面板中选择Element选项卡；
2) 打开浏览器后，右击查看（火狐浏览器是“评论元素”）
元素面板的常用功能：
1)实时编辑DOM节点
在 Element 面板的 DOM 树视图中，呈现了当前页面中的所有 DOM 节点。用鼠标双击任意 DOM 节点来修改属性值。修改完成后，按回车键。浏览器将立即显示修改后的效果。
注意：这种及时的修改只是临时修改，只能用于调试。在实际应用中，调试后往往在本地代码中修改正确的属性值。
2)实时编辑CSS样式
在Element面板中还可以实时修改当前页面DOM元素的样式，修改后的元素样式会立即生效。
实时修改 DOM 元素样式的步骤：
首先选择这个 DOM 元素。如果没有打开开发者工具，可以在要修改的DOM元素上右键-->查看元素，然后在控制面板右侧选择Style，可以看到当前所有的CSS样式DOM元素，双击即可修改 的CSS属性值，修改立即生效。如果你已经打开了开发者工具，可以先点击开发者工具面板最左边的放大镜，然后在页面上点击要修改的DOM元素，选择这个要调试的DOM元素。此时，控制面板右侧的 Style 显示了当前选择的 DOM 元素的 CSS 属性。双击属性值进行修改。
注意：这种及时的修改只是临时修改，只能用于调试。在实际应用中，调试后往往在本地代码中修改正确的属性值。
3)打开盒子模型，调试框架参数
点击右边的Computed选项卡可以看到当前选中元素的box模型参数，所有的值都可以修改。点击不同位置（上、下、左、右）可以修改padding、border、margin属性的值。也可以通过修改盒子模型中间的数据来改变元素的宽高。浏览器中的当前元素在修改时会响应式变化，左侧的Element面板会自动添加对应的Stylt属性值，当页面显示的样式符合要求时，可以停止修改，然后复制将Element中生成的属性值写入代码中，样式可以永久修改。
3.2.2 控制台面板
1)查看脚本运行过程中的异常信息；
因为 JavaScript 是弱语言类型，所以语法要求不严格。而且JavaScript是解释型语言，代码中不会出现中文标点等错误提示，只有运行结束才会向控制台抛出异常。
如果想查看具体的异常信息，直接点击右边的异常信息控制台，带我们到程序中出错的具体位置：
2)打印日志信息；
上面说到简单的调试，可以使用alert方法在弹窗中显示想要查看的信息。但是，警报有一个缺点：它会阻塞程序，无法显示对象的详细信息。当弹出多条消息时，您必须单击确定才能在下一个弹出窗口中查看信息。这些问题可以通过使用控制台提供的打印日志的方法完美解决。
Console中打印日志常用的方法有：
A) console.log("info") 显示一般的基本日志信息。当需要显示的基本日志信息过多时，可以使用console.grop()方法对日志进行分组；
B) Console.warn("info") 显示带有*敏*感*词*小图标的警告信息；
C) Console.error("info") 用红色小图标显示错误信息；
Console打印日志的使用场景：
A) 在代码中使用console.log()打印日志信息：
B) 使用 console.log() 直接在控制台打印信息：
C) 如何清除控制台中的信息：
直接在控制台输出console.clear()方法，按回车清除控制台上的信息。另一种方法是直接点击控制台左上角的清除日志按钮来清除日志信息。
3)运行 JavaScript 脚本
控制台还有一个神奇的功能就是可以运行你输入的JavaScript脚本，非常实用。
实际场景一：快速验证JavaScript中的方法。
根据输出一个十进制数，要求：只保留两位小数。通过查看JavaScript API，发现Number对象有一个toFixed方法来指定小数位的长度，但是没有例子。最快的尝试方法是在控制台上验证：
console.log(new Number("3.1415926").toFixed(2));
实际场景二：在控制台输入JavaScript方法时有提示。
通过文档获取指定id的节点的方法是document.getElementById("id")。但是由于MyEclipse，在Eclipse中编写JavaScript时可能没有提示。太痛苦了，容易出错。这时候就可以通过控制台上的方法提示来完成方法了。
如上图：我们不需要完全输入方法名称，只需使用键盘的上下键选择需要的方法，根据提示按回车即可。
D) 控制台面板中的全局搜索（快捷键 Ctrl+Shift+F）
打开全局搜索，输入关键字，可以搜索到所有收录该关键字的文件。
应用场景：刚到公司，不熟悉公司业务。登录页面有几千行代码，我就是想找个登录方式，这时候输入登录方式名就可以搜索到登录方式所在的页面了。单击它可以找到此方法。
3.2.3 源面板
源资源面板显示加载当前页面所需的所有资源。
在 Source 面板中，您可以找到当前浏览器加载的页面，然后调试其中的 JavaScript 脚本。在使用 Chrome 开发者工具的过程中会给出具体说明。
3.2.4 网络（网络）面板
网络面板可以在页面上记录网络请求的详细信息。请求发起后，对HTTP请求进行解析后得到的请求资源信息（包括状态、资源信息、大小、使用时间、Request和Response等）可以基于此进行网络性能优化。
控件控制网络的外观和功能。过滤器精确控制请求表中显示的内容。概览显示获取资源的时间线信息。Requests Table 显示了获取资源前后的所有资源信息。单击资源名称可以查看资源的详细信息。摘要显示请求总数、数据传输量和加载时间信息。
NetWork面板的Requests Table收录了HTTP请求和响应的具体信息，是常用的。
命名资源名称，点击名称可以查看资源的详细信息，包括Headers、Preview、Response、Cookies、Timing。StatusHTTP 状态代码。类型 请求的资源 MIME 类型。Initiator 标记发起请求的对象或进程（请求源）。解析器：请求是由 Chrome 的 HTML 解析器发起的。重定向：请求由 HTTP 页面重定向发起。Script：请求由Script脚本发起。其他：请求由其他进程发起，例如用户点击链接跳转到另一个页面或在地址栏中输入 URL 地址。大小 从服务器下载的文件和请求资源的大小。如果是从缓存中获取的资源，这一栏会显示(from cache) Time 请求或下载的时间，从发起请求到获得响应的总时间。时间线显示所有网络请求的视觉瀑布（时间状态轴）。点击时间轴可以查看请求的详细信息，点击列头可以根据指定的字段进行排序。
查看特定资源的详细信息
点击资源名称，可以查看资源的详细信息。根据选择的资源类型显示的信息也不同，可能包括以下Tab信息：
Headers 资源的 HTTP 头信息。预览根据您选择的资源类型（JSON、图像、文本）显示相应的预览。响应显示 HTTP 响应信息。Cookies 显示资源在 HTTP Request 和 Response 过程中的 cookie 信息。Timing 显示了资源各部分在整个请求生命周期中所花费的时间。
对以上4个Tab详细解释每个功能：
