Chrome开发者工具：利用网络面板做性能分析

Chrome 开发者工具（简称 DevTools）是一组网页制作和调试的工具，内嵌于 Google Chrome 浏览器中。Chrome 开发者工具非常重要，所蕴含的内容也是非常多的，熟练使 用它能让你更加深入地了解浏览器内部工作原理。（Chrome 开发者工具也在不停地迭代 改进，如果你想使用最新版本，可以使用Chrome Canary。）
image.png

image.png
image.png
image.png
image.png

image.png

  1. 详细信息

image.png
image.png
image.png
image.png
image.png
image.png

☆DOM树：JavaScript是如何影响DOM树构建的？

image.png
image.png
image.png

image.png

js css等文件都会影响dom的生成

Chrome 浏览器做了很多优化，其中一个主要的优化是预解析操作。当渲染引擎收到 字节流之后，会开启一个预解析线程，用来分析 HTML 文件中包含的 JavaScript、CSS 等 相关文件，解析到相关文件之后，预解析线程会提前下载这些文件。
另外，如果 JavaScript 文件中没有操作 DOM 相关代码，就可以将该 JavaScript 脚本 设置为异步加载，通过 async 或 defer 来标记代码，
async 和 defer 虽然都是异步的，不过还有一些差异，使用 async 标志的脚本文件一旦加 载完成，会立即执行；而使用了 defer 标记的脚本文件，需要在 DOMContentLoaded 事 件之前执行。

而 JavaScript 引擎在解析 JavaScript 之前，是不知道 JavaScript 是否操纵了 CSSOM 的，所以渲染引擎在遇到 JavaScript 脚本时，不管该脚本是否操纵了 CSSOM，都会执行 CSS 文件下载，解析操作，再执行 JavaScript 脚本。

额外说明一下，渲染引擎还有一个安全检查模块叫 XSSAuditor，是用来检测词法安全的。 在分词器解析出来 Token 之后，它会检测这些模块是否安全，比如是否引用了外部脚本， 是否符合 CSP 规范，是否存在跨站点请求等。如果出现不符合规范的内容，XSSAuditor 会对该脚本或者下载任务进行拦截。

渲染流水线：CSS如何影响首次加载时的白屏时间？

image.png
需要特别注意：请求 HTML 数据和构建 DOM 中间有一段空闲时间，这个空闲时间有可能成为页面渲染的瓶颈。 image.png
image.png
image.png

影响页面展示的因素以及优化策略

image.png
所以要想缩短白屏时长，可以有以下策略：
image.png
defer：异步下载js文件，等待domcontendloaded事件后解析 执行，sync猜应该是async，异步下载js文件，下载完成后立即解析执行，media=’screen’ 电脑屏幕场景，media=’print’ 打印场景，orientation:landscope输出设备可见区域高度小于宽度；portrait 剩余场景。 

  1. 1:<script src="foo.js" type="text/javascript"></script>
  2. 2:<script defer src="foo.js" type="text/javascript"></script>
  3. 3:<script sync src="foo.js" type="text/javascript"></script>
  4. 4:<link rel="stylesheet" type="text/css" href="foo.css" />
  5. 5:<link rel="stylesheet" type="text/css" href="foo.css" media="screen"/>
  6. 6:<link rel="stylesheet" type="text/css" href="foo.css" media="print" />
  7. 7:<link rel="stylesheet" type="text/css" href="foo.css" media="orientation:landscape" />
  8. 8:<link rel="stylesheet" type="text/css" href="foo.css" media="orientation:portrait" />

在手机横屏幕下，会阻塞页面渲染的有：1 4 5 7

页面性能：如何系统地优化页面？

这里我们所谈论的页面优化，其实就是要让页面更快地显示和响应
image.png
image.png
image.png
image.png
交互阶段的优化： 一个大的原则就是让单个帧的生成速度变快
image.png
image.png
image.png
image.png
image.png

☆http 0.9-1.1

image.png
image.png
image.png
image.png
image.png
image.png

http 2 如何提升网络速度

我们知道 HTTP/1.1 为网络效率做了大量的优化，最核心的有如下三种方式：

  1. 增加了持久连接；
  2. 浏览器为每个域名最多同时维护 6 个 TCP 持久连接；
  3. 使用 CDN 的实现域名分片机制。

image.png
image.png
image.png
上面这句这才是http2的精髓所在。

image.png
image.png
image.png
image.png
但其实只要是基于tcp就一定会有数据包级别的队头阻塞问题，所以http2并没有真正解决队头阻塞的问题（它解决的只是请求级别的队头阻塞）。
image.png

http 3： 甩掉TCP、TLS 的包袱，构建高效网络

image.png
TCP 建立连接的延时
除了 TCP 队头阻塞之外，TCP 的握手过程也是影响传输效率的一个重要因素。
为了搞清楚 TCP 协议建立连接的延迟问题，我们还是先来回顾下网络延迟的概念，这会有 助于你对后面内容的理解。网络延迟又称为 RTT（Round Trip Time）。我们把从浏览器 发送一个数据包到服务器，再从服务器返回数据包到浏览器的整个往返时间称为 RTT。RTT 是反映网络性能的一个重要指标。
image.png
image.png
image.png
image.png

后续内容为浏览器安全等知识

同源策略：为什么XMLHttpRequest不能跨域请求资源？

第一个，DOM 层面。同源策略限制了来自不同源的 JavaScript 脚本对当前 DOM 对象读 和写的操作。
第二个，数据层面。同源策略限制了不同源的站点读取当前站点的 Cookie、IndexDB、 LocalStorage 等数据。由于同源策略，我们依然无法通过第二个页面的 opener 来访问第 一个页面中的 Cookie、IndexDB 或者 LocalStorage 等内容。
第三个，网络层面。同源策略限制了通过 XMLHttpRequest 等方式将站点的数据发送给不同源的站点。你还记得 XMLHttpRequest 在使用过程中所遇到的坑吗？其中第一个坑就是在默认情况下不能访问跨域的资源。

image.png
image.png
image.png

XSS：跨站脚本攻击

image.png
image.png

存储型xss攻击：
image.png
image.png
image.png

  1. 服务器对输入脚本进行过滤或转码

  2. image.png

    CSRF攻击：陌生链接不要随便点

    CSRF 攻击就是黑客利用了用户的登录状态，并通过第三方的站点来做一些坏事。
    image.png
    image.png
    image.png
    image.png
    发起 CSRF 攻击的三个必要条 件：
    第一个，目标站点一定要有 CSRF 漏洞；
    第二个，用户要登录过目标站点，并且在浏览器上保持有该站点的登录状态；
    第三个，需要用户打开一个第三方站点，可以是黑客的站点，也可以是一些论坛。

    满足以上三个条件之后，黑客就可以对用户进行 CSRF 攻击了。这里还需要额外注意一 点，与 XSS 攻击不同，CSRF 攻击不会往页面注入恶意脚本，因此黑客是无法通过 CSRF 攻击来获取用户页面数据的；其最关键的一点是要能找到服务器的漏洞，所以说对于 CSRF 攻击我们主要的防护手段是提升服务器的安全性。
    要让服务器避免遭受到 CSRF 攻击，通常有以下几种途径。

image.png
image.png
image.png
image.png
image.png
image.png