HTML页面中 的 charset 属性值
4.浏览器对HTML页面进行渲染和布局
浏览器开始载入html代码，发现＜head＞标签内有一个＜link＞标签引用外部CSS文件；
浏览器又发出CSS文件的请求，服务器返回这个CSS文件；
浏览器继续载入html中＜body＞部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了；
浏览器在代码中发现一个＜img＞标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；
浏览器发现了一个包含一行Javascript代码的＜script＞标签，赶快运行它；
Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个＜div＞ （style.display=”none”）。杯具啊，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码；
终于等到了＜/html＞的到来，浏览器泪流满面……
等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下＜link＞标签的CSS路径；
浏览器召集了在座的各位＜div＞＜span＞＜ul＞＜li＞们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请求了新的CSS文件，重新渲染页面。
★
注：win10打开host文件的方法：在运行（win+R）中输入：C:WindowsSystem32driversetc即可
”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 执行 一系列步骤 来解释和优化脚本：
首先它进行词法分析，就是将源代码分解成一系列具有明确含义的符号或字符串。
然后用语法分析器分析这些符号，将其构建成语法树。
接着四个 JIT（Just-In-Time）进程开始参与进来，分析和执行解析器所生成的字节码。简单来说，JavaScript 引擎会加载你的源代码，把它分解成字符串（又叫做分词），再 把这些字符串转换 成编译器可以理解的字节码，然后执行这些字节码。
Google 的 V8 引擎 是用 C++ 编写的，它也能够编译并执行 JavaScript 源代码、处理内存分配和垃圾回收。它被设计成由两个编译器组成，可以把源码直接编译成机器码：
Full-codegen：输出未优化代码的快速编译器
Crankshaft: 输出执行效率高、优化过的代码的慢速编译器如果 Crankshaft 确定需要优化的代码是由 Full-codegen 生成的未优化代码，它就会取代 Full-codegen，这个过程叫做“crankshafting”。一旦编译过程中产生了机器代码，引擎就会向浏览器暴露所有的数据类型、操作符、对象、在 ECMA 标准中指定的函数、或任何运行时需要使用的东西，NativeScript 就是如此。
3.Chrome浏览器的开发者工具面板介绍
这里写图片描述3.1 Chrome浏览器开发者工具的打开方式：
功能键F12或者Ctrl+Shift+j或者Ctrl+Shift+j打开；
打开浏览器右上角用户设置下拉菜单，选择更多工具，再选择开发者工具即可打开开发者工具。
3.2 开发者工具的工具栏中常用面板介绍
这里写图片描述
Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。Console:记录开发者开发过程中的日志信息，且可以作为与JS进行交互的命令行Shell。
Sources: Sources功能面板是资源面板,他主要分为四个部分,四个部分并不是独立的,他们互相关联,互动共同实现一个重要的功能:监控js在执行期的活动。简单来说就是断点啦。
Network:从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），可以根据这个进行网络性能优化。Timeline:记录并分析在网站的生命周期内所发生的各类事件，以此可以提高网页的运行时间的性能。Profiles:如果你需要Timeline所能提供的更多信息时，可以尝试一下Profiles,比如记录JS CPU执行时间细节、显示JS对象和相关的DOM节点的内存消耗、记录内存的分配细节。Application:记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。Security:判断当前网页是否安全。Audits:对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件等。
3.2.1 元素（Element）面板
Element面板打开方式:1)打开开发者工具后选择开发者工具面板中的Element页签;
2)打开浏览器之后,鼠标右键检查 (火狐浏览器是” 审查元素”)
Element面板的常用功能:1)实时编辑DOM节点在Element面板的DOM树视图中.呈现出了当前页面中的所有的DOM节点.鼠标双击任何DOM节点都可以修改其中的属性值,修改完成之后按回车键浏览器会立即显示出修改后的效果.注意:这种及时的修改只是临时的修改,只能做调试用,实际应用中往往是调试结束后再将正确的属性值在本地代码中修改.
这里写图片描述
2)实时编辑CSS样式在Element面板中也可以对当前页面的DOM元素的样式进行实时的修改,修改后元素的样式立即生效.实时修改某一DOM元素的样式的操作步骤:首先选中这个DOM元素.如果没有打开开发者工具,可以在要修改的DOM元素上右键–>审查元素,然后选择控制面板右侧的Style即可看到当前DOM元素的所有CSS样式,双击其中的CSS属性值就可以修改,修改后马上生效.如果已经打开了开发者工具,可以通过先点击开发者工具面板最左侧的放大镜,然后再去点击页面上要修改的DOM元素选中这个要调试的DOM元素.此时控制面板右侧的Style中就呈现出了当前选中的DOM元素的CSS属性双击属性值即可修改.注意:这种及时的修改只是临时的修改,只能做调试用,实际应用中往往是调试结束后再将正确的属性值在本地代码中修改.
这里写图片描述
3)打开盒子模型,调试边框参数点击右侧的Computed页签可以看到当前选中的元素的盒子模型参数,所有的值都是可以修改的.点击不同的位置(top,bottom,left,right)就可以修改元素的padding,border,margin属性值.也可以通过修改盒子模型中间的数据改变元素的width和height.修改的时候浏览器中的当前元素会响应地变化,同时在左侧Element面板中会自动添加上响应的Stylt属性值.当页面上显示的样式符合要求之后,即可停止修改,然后将Element中生成的属性值复制到代码中,样式即可永久修改.
3.2.2 控制台(Console) 面板
1)查看脚本运行过程中的异常信息;由于JavaScript属于弱语言类型,语法要求不严谨.并且JavaScript是解释型语言,在代码中输入中文的标点等错误也不会有提示,只有运行结束后才会抛出异常信息到控制台.
如果想查看具体的异常信息，直接点击右边的异常信息控制台将会把我们带到程序中错误出现的具体位置：
这里写图片描述
2)打印日志信息;
上边说到了简单的调试可以使用alert方法将想要看到的信息显示在弹窗中。但是alert存在弊端：阻断程序运行，不能显示对象的细节信息，弹出多个信息时必须点击确定才能看到下一个弹窗的信息。这些问题使用console提供的打印日志的方法可以完美解决。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方法时有提示。
通过document获取指定id的节点的方法是document.getElementById(“id”)但是因为MyEclipse，Eclipse中在写JavaScript时可能没提示，自己写太痛苦而且还容易写错。这时，就可以在控制台上通过方法提示来补全这个方法。
如上图：我们不需要完整输入方法名，根据提示使用键盘的上，下键选择需要的方法然后回车即可。
D）Console面板中的全局搜索（快捷键Ctrl+Shift+F）打开全局搜索，输入关键字，能够搜索到包含这个关键字的所有的文件。应用场景：刚到一个公司，对公司的业务不熟。登录页面有几千行代码，我只想找到登录的那个方法。这时，输入登录方法名就能搜索到登录登录方法所在的页面。点击进去就能够定位到这个方法了。
这里写图片描述3.2.3 资源(Source) 面板
Source资源面板中显示加载当前页面需要的所有资源。
这里写图片描述
在Source面板中可以找到当前浏览器加载的页面，然后对其中的JavaScript脚本进行断点调试。Chrome开发者工具使用中会具体说明。
3.2.4 网络(NetWork) 面板
NetWork面板可以记录页面上的网络请求的详细信息，从发起网页请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态google浏览器清除缓存，资源信息，大小，所用时间，Request和Response等），可以根据这个进行网络性能优化。
这里写图片描述
1.Controls 控制Network的外观和功能。2.Filters 控制Requests Table具体显示哪些内容。3.Overview 显示获取到资源的时间轴信息。4.Requests Table 按资源获取的前后顺序显示所有获取到的资源信息，点击资源名可以查看该资源的详细信息。5.Summary 显示总的请求数、数据传输量、加载时间信息。
NetWork面板的Requests Table 包含着HTTP请求和响应的具体信息，是比较常用的一块
Size 从服务器下载的文件和请求的资源大小。如果是从缓存中取得的资源则该列会显示(from cache)
Time 请求或下载的时间营销引流，从发起Request到获取到Response所用的总时间。
Timeline 显示所有网络请求的可视化瀑布流(时间状态轴)，点击时间轴，可以查看该请求的详细信息，点击列头则可以根据指定的字段可以排序。
查看具体资源的详情通过点击某个资源的Name可以查看该资源的详细信息，根据选择的资源类型显示的信息也不太一样，可能包括如下Tab信息：
这里写图片描述
预览响应数据
这里写图片描述
③ 查看资源HTTP的Response信息在Response标签里面可根据选择的资源类型（JSON、图片、文本、JS、CSS）显示相应资源的Response响应内容。下图显示的是当选择的资源是CSS格式时的响应内容。
这里写图片描述
④ 查看资源Cookies信息如果选择的资源在Request和Response过程中存在Cookies信息，则Cookies标签会自动显示出来，在里面可以查看所有的Cookies信息。
4.Chrome开发者工具之断点调试4.1 JavaScript脚本断点调试
第一步：打开开发者工具，按F12或者在浏览器页面上右键选择检查。
这里写图片描述
第二步：在Source面板中找到需要调试的文件。
这里写图片描述
第三步：设置断点。
第四步：触发调试部分程序的运行，开始调试。
调试过程中常用的按钮及快捷键：
跳到下一个断点：点击Sources面板右侧的“三角按钮”
快捷键：F8Ctrl+
跳到下一步（逐步跨方法）：点击Sources面板右侧的第二个按钮
快捷键：F10Ctrl+’跳进断点处的方法中：点击Sources面板右侧第三个按钮
快捷键：F11Ctrl+;跳出正在执行的方法：点击Sources面板右侧第四个按钮
快捷键：Shift+F11Ctrl+Shift+;
禁用断点：点击Sources面板右侧的第五个按钮
这里写图片描述
暂停在捕获到的异常处：点击Sources面板右侧的第六个按钮，然后勾选Pause On Caught Exception
这里写图片描述
暂停在未捕获的异常处：点击Sources右侧的第六个按钮，不勾选Pause On Caught Exception.
Sources面板调试过程中快捷键预览：
查看断点处，获取的数据的值：将鼠标光标停留在变量上面即可，也可以将变量赋值到Console的控制台上打印出来。
这里写图片描述
这里写图片描述
清除断点：在Source面板最右侧面板中，找到Breakpoints打开，可以看到你打的断点。在断点列表出右键选择Remove all breakpoints可以一次性删除所有断点。
这里写图片描述4.2 XHR断点调试
右侧调试区有一个 XHR Breakpoints，点击+ 并输入 URL 包含的字符串即可监听该 URL 的 Ajax 请求，输入内容就相当于 URL 的过滤器。如果什么都不填，那么就监听所有 XHR 请求。一旦 XHR 调用触发时就会在 request.send() 的地方中断。
4.3 事件监听断点
事件监听是对我们选定的是事件类型进行监听，当这个事件触发的时候，程序就会在这个事件处停止。有助于我们快速找到某一个元素上绑定的事件。应用场景：我们刚接手一个项目时，对业务不熟。想找到提交登录事件对应的方法，但是发现页面上登录按钮绑定事件写的不是很明确，而且处理登录业务的JavaScript脚本文件有几百行，想找到这个按钮很不容易。此时，我们就可以选定鼠标的点击事件进行监听，当我们点击登录按钮的时候控制台Sources面板会自动将我们带到登录方法处。事件监听断点使用步骤（以查找天猫首页登录方法为例）：
1.首先打开京东登录页面找到登录按钮；
2.在登录按钮上右键属性==》检查 打开开发者工具，然后打开Sources面板
这里写图片描述
3.打开Sources面板右侧的Event Listener Breakpoints 找到Mouse及鼠标事件下边的click然后勾选上。
点击登录按钮，触发鼠标的点击事件，发现程序中断在JavaScript文件中，点击面板下方的 “{}” 将代码格式化一下，此时就找到了登录按钮触发的点击事件了。
这里写图片描述
此时就可以一步一步的像下跟，知道跟到天猫的登录方法了。
5 其他设置5.1 设置开发者工具的位置：
Chrome刚安装好时，打开开发者工具，开发者工具默认在浏览器的左半边。
这里写图片描述
可以通过开发者工具面板右上角的设置开发者工具在浏览器中出现的位置。
这里写图片描述
视图1：开发者工具以一个独立的窗口存在；视图2：在浏览器下方显示；视图3：在浏览器右半边显示。
5.2 清除浏览器缓存的方法：
浏览器缓存（Browser Caching）是为了节约网络的资源加速浏览，浏览器在用户磁盘上对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从本地磁盘显示文档，这样就可以加速页面的阅览。但是，对开发人员来说，我们修改了JavaScript脚本之后需要立即看到修改的效果，所以需要清除缓存，清除缓存常用的方法有：
1.Ctrl + F5
F5通常只是刷新本地缓存；Ctrl+F5可以把INTERNET临时文件夹的文件删除再重新从服务器下载，也就是彻底刷新页面了。
2.开发者工具打开之后，快速清除缓存的方法：
开发者工具打开之后google浏览器清除缓存，浏览器刷新图标上右键会出现清空缓存并硬性重新加载。这一方法能够在开发者工具打开时快速清理缓存。
3.Ctrl + Shift + Del 快捷键清除缓存。选中地址栏中的URL
按快捷键：Ctrl + Shit + Del 会弹出一个清除浏览数据的弹窗，选择要清理的数据项之后，点击清除浏览数据即可。
这里写图片描述5.3 禁用页面的JavaScript脚本；
应用场景：在开发互联网电商项目时，需要一些商品图片，于是就去京东找到一个商品打开商品图片之后，想复制或者将这个图片另存为，此时，发现右键后什么都没有。
原因是，京东在图片上通过JavaScript脚本禁用了鼠标右键点击事件。此时，我们可以通过禁用当前页面的JavaScript事件，通过鼠标右键保存图片。
这里写图片描述
禁用网页JavaScript事件的方法：
1）开发者工具==》Settings
2）勾选Debugger下的Disable JavaScript 复选框。
这里写图片描述
