前端浏览器渲染和性能优化详细过程

1.从输入URL到加载html的详细过程
加载资源的过程

1.根据输入的域名先查找本地hosts文件是否有对应的域名IP关系,如果有,则向其IP地址发送请求,如果没有,再去DNS服务器查找IP.
DNS根据域名查找IP地址的过程：
浏览器客户端向本地DNS服务器发送一个含有域名www.xxx.com的DNS查询报文。本地DNS服务器把查询报文转发到根DNS服务器，根DNS服务器注意到其com后缀，于是向本地DNS服务器返回comDNS服务器的IP地址A(正常情况下,本地DNS服务器的缓存中已有comDNS服务器的地址,因此请求根域名服务器这一步不是必需的)。本地DNS服务器再次向comDNS服务器发送查询请求，comDNS服务器注意到其www.xxx.com后缀并用负责该域名的权威DNS服务器的IP地址B作为回应。浏览器继续向返回的服务器地址发送请求,得到www.xxx.com的实际IP地址C。最后,本地DNS服务器将含有www.xxx.com的IP地址C的响应报文发送给客户端。

2.建立TCP链接,三次握手。
客户端发送一个带有SYN标志的数据包给服务端，服务端收到后，回传一个带有SYN/ACK标志的数据包以示传达确认信息，最后客户端再回传一个带ACK标志的数据包，代表握手结束，连接成功。

3.发送HTTP请求。

请求行包括请求方法、URI、HTTP版本

4.服务器处理请求
服务器端收到请求后由web服务器（准确说应该是http服务器）处理请求，诸如Apache、Ngnix、IIS等。web服务器解析用户请求，知道了需要调度哪些资源文件，再通过相应的这些资源文件处理用户请求和参数，并调用数据库信息，最后将结果通过web服务器返回给浏览器客户端。

5.返回状态码和响应结果

根据首位数字，状态码可以分为五类:

6.关闭TCP连接
为了避免服务器与客户端双方的资源占用和损耗，当双方没有请求或响应传递时，任意一方都可以发起关闭请求。与创建TCP连接的3次握手类似，关闭TCP连接，需要4次握手。

7.浏览器解析HTML,布局渲染

浏览器渲染页面的过程

1.解析HTML结构生成DOM树
2.解析CSS生成CSSOM规则树
3.将DOM树和CSSOM规则树合并在一起生成渲染树。
4.遍历渲染树开始布局,计算每个节点的位置大小信息。
5.将渲染树每个节点绘制到屏幕。

渲染阻塞

当浏览器遇到一个 script 标记时，DOM 构建将暂停，直至脚本完成执行，然后继续构建DOM。每次去执行JavaScript脚本都会严重地阻塞DOM树的构建，如果JavaScript脚本还操作了CSSOM，而正好这个CSSOM还没有下载和构建，浏览器甚至会延迟脚本执行和构建DOM，直至完成其CSSOM的下载和构建。
所以，script 标签的位置很重要。实际使用时，可以遵循下面两个原则：

CSS优先：引入顺序上,CSS 资源先于 JavaScript 资源。
JS置后：我们通常把JS代码放到页面底部,且JavaScript 应尽量少影响 DOM 的构建。
在绘制阶段,遍历渲染树,调用渲染器的paint()方法在屏幕上显示其内容。渲染树的绘制工作是由浏览器的UI后端组件完成的。
reflow(回流)与repaint(重绘)：
根据渲染树布局，计算CSS样式，即每个节点在页面中的大小和位置等几何信息。HTML默认是流式布局的，CSS和js会打破这种布局，改变DOM的外观样式以及大小和位置。这时就要提到两个重要概念：replaint和reflow。
repaint：屏幕的一部分重画，不影响整体布局，比如某个CSS的背景色变了，但元素的几何尺寸和位置不变。
reflow： 意味着元件的几何尺寸变了，我们需要重新验证并计算渲染树。是渲染树的一部分或全部发生了变化。这就是Reflow，或是Layout。
所以我们应该尽量减少reflow和repaint，我想这也是为什么现在很少有用table布局的原因之一。

display:none 会触发 reflow，visibility: hidden属性并不算是不可见属性，它的语义是隐藏元素，但元素仍然占据着布局空间，它会被渲染成一个空框，所以visibility:hidden 只会触发 repaint，因为没有发生位置变化。

有些情况下，比如修改了元素的样式，浏览器并不会立刻 reflow 或 repaint 一次，而是会把这样的操作积攒一批，然后做一次 reflow，这又叫异步 reflow 或增量异步 reflow。
有些情况下，比如 resize 窗口，改变了页面默认的字体等。对于这些操作，浏览器会马上进行 reflow。

2.性能优化

加载资源优化

静态资源的压缩和并
静态资源缓存
使用CDN让资源加载更快
使用SSR后端渲染,数据直接输出到HTML中(VUE React SSR渲染,单页应用SPA)
渲染优化
CSS放前面，JS放后面
懒加载(图片懒加载，下拉加载更多)

<img id="img1" src="preview.png" data-realsrc="abc.png"/>
<script type="text/javascript">
    var img1 = document.getElementById('img1')
        img1.src = img1.getAttribute('data-realsrc')
</script>

减少DOM查询，对DOM查询做缓存

减少DOM操作，多个操作尽量合并在一起执行
事件节流

var textarea = document.getElementById('text')
var timeoutId
textarea.addEventListener('keyup',function(){
  if(timeoutId){
    clearTimeout(timeoutId)
  }
  timeoutId = setTimeout(function(){
    //输入事件停下的时候触发事件
  },100)
})

尽早执行操作DOMContentLoaded、load

3.安全性

XSS跨站脚本攻击
举例:在博客写一篇文章，同时插入一段script,攻击代码中，获取cookie，发送自己的服务器，发布博客，有人查看博客会把查看者的cookie发送到攻击者的服务器
解决方案：前端替换关键字，例如替换<为’&lt’ >为’&gt’
XSRF跨站请求伪造
举例:登陆一个购物网站,正在浏览商品,付费接口是xxx.com/pay?id=100但是没有任何验证,然后你收到一封邮件,隐藏着 xxx.com/pay?id=100,你查看邮件的时候就已经悄悄付费了
解决方案:增加验证流程,如输入指纹,密码,短线验证码