从用户输入浏览器输入url到页面最后呈现 有哪些过程？有什么办法能优化页面性能？

2. 解析URL解析出主机名

3. 将主机名转换成服务器ip地址

   • （浏览器先查找本地DNS缓存列表 没有的话 再向浏览器默认的DNS服务器发送查询请求 同时缓存）

4. 解析URL解析出端口号

5. 建立一条与目标Web服务器的TCP连接（三次握手）

6. 浏览器向服务器发送一条HTTP请求报文

7. 服务器向浏览器返回一条HTTP响应报文

8. 关闭连接 浏览器解析文档

9. 如果文档中有资源 重复6 7 8 动作 直至资源全部加载完毕

你知道有哪些原因是影响页面性能的？

• • 复杂的页面逻辑(JS设计)
• 重度的DOM操作
  • • 大量的数据
  • • HTTP请求
  • • 服务端响应

有哪些办法可以加速我们的页面性能？

• 资源压缩与合并（代码打包）

• 异步加载

• DNS预解析

  1. 用meta信息来告知浏览器, 当前页面要做DNS预解析:

  2. 在页面header中使用link标签来强制对DNS预解析:

  • PS：dns-prefetch需慎用，多页面重复DNS预解析会增加重复DNS查询次数

  • PS：DNS预解析主要是用于网站前端页面优化，在SEO中的作用还未作验证，但作为增强用户体验的一部分rel="dns-prefetch"或许值得大家慢慢发现。

• 缓存

• CDN

渲染进程是多线程的

• GUI渲染线程- 负责渲染浏览器界面

  • 解析HTML，CSS，构建DOM树和RenderObject树，布局和绘制等。
  • 当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时，该线程就会执行

• js引擎线程- 也称为JS内核，负责处理Javascript脚本程序。（例如V8引擎）

  • JS引擎线程负责解析Javascript脚本，运行代码。

  • JS引擎一直等待任务队列中任务的到来，然后加以处理，一个Tab页（renderer进程）中只有一个JS线程在运行

• GUI渲染线程与JS引擎线程是互斥的

  • 当JS引擎执行时GUI线程会被挂起，GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行

  • 所以如果JS执行的时间过长，要放在body下面，否则就会导致页面渲染加载阻塞

• css加载不会阻塞DOM树解析（异步加载时DOM照常构建），但会阻塞render树渲染（渲染时需等css加载完毕，因为render树需要css信息）