• 前端优化


    从输入url到页面显示发生了什么

    1. DNS,其实也是网络协议

    2. TCP 不容易丢包

    3. Http/SSL 缓存etag在这个协议、 header变大

    4. 响应解析 (SPA,SSR(同构渲染), 宏观框架 )

    5. 浏览器渲染 howbrowserwork 前端优化

    url->dns获取ip->建立tcp->解析响应-》l浏览器渲染

    tcp(可靠) udp(dns,不可靠, 发出去不管了)

    websocket就是tcp中间件抽象层

    udp有telnet 发图片SMTPHTTPRPC室内门票TFTP

    浏览器进行问询, 无需dns解析。 <link rel="dns-prefetch" href="//g.tcdn.cn"/>

    1、输入URL
    2、查找DNS缓存获取ip地址,存在直接读取,反之发起DNS解析请求
    3、读取http缓存,如果存在强缓存,直接读取,状态码为200,如果缓存过期或者缓存类型为协商缓存,则需要发起http请求
    4、建立TCP连接
    5、发送http请求,如果资源无更新,返回状态码304,告知浏览器继续从缓存读取,反之,服务端返回最新资源,状态码为200
    6、解析html 生成DOM Tree
    7、解析过程中如果遇到js、css、img等资源,则继续发起请求,过程同步骤3 4 5
    8、html解析过程中如果遇到js,则执行js会阻塞解析,如果是script获取资源,会根据script 是否有defer async属性具体分析:
    8.1 如果没有属性,则请求js并执行,会阻塞html解析
    8.2 如果有async,则请求js和html解析并行执行,js请求回来,阻塞html解析,执行js
    8.3 如果有defer,则请求和解析并行,请求完成继续解析html,等dom加载完成,再执行js
    9. 解析css 生成styleSheets(以前叫CSSOM Tree)
    10. DOM Tree 和 styleSheets合并成layout Tree
    11、layout tree 生成图层树
    12、绘制图层,生成绘制列表
    13、合成图层(栅格化)
    14、合成图片,提交给浏览器进程、显示

    5.浏览器渲染:

    1.浏览器解析html源码,然后创建一个 DOM树。并行请求 css/image/js在DOM树中,每一个HTML标签都有一个对应的节点,并且每一个文本也都会有一个对应的文本节点。DOM树的根节点就是 documentElement,对应的是html标签。

    2.浏览器解析CSS代码,计算出最终的样式数据。构建CSSOM树。对CSS代码中非法的语法它会直接忽略掉。解析CSS的时候会按照如下顺序来定义优先级:浏览器默认设置 < 用户设置 < 外链样式 < 内联样式 < html中的style。

    3.DOM Tree + CSSOM --> 渲染树(rendering tree)。渲染树和DOM树有点像,但是是有区别的。

    DOM树完全和html标签一一对应,但是渲染树会忽略掉不需要渲染的元素,比如head、display:none的元素等。而且一大段文本中的每一个行在渲染树中都是独立的一个节点。渲染树中的每一个节点都存储有对应的css属性。

    4.一旦渲染树创建好了,浏览器就可以根据渲染树直接把页面绘制到屏幕上。

    以上四个步骤并不是一次性顺序完成的。如果DOM或者CSSOM被修改,以上过程会被重复执行。实际上,CSS和JavaScript往往会多次修改DOM或者CSSOM。

    6.回流和重绘

    回流:当render tree 的一部分或全部的元素因改变了自身的宽高,布局,显示或隐藏,或者元素内部的文字结构发生变化 导致需要重新构建页面的时候,回流就产生了.重绘:当一个元素自身的宽高,布局,及显示或隐藏没有改变,而只是改变了元素的外观风格的时候,就会产生重绘。例如你改变了元素的background-color....

    7. script defer async 

  • 相关阅读:
    Java High Level REST Client 中文API(仅供参考)
    3.2_springBoot2.1.x检索之JestClient操作ElasticSearch
    3.1_springboot2.x检索之elasticsearch安装&快速入门
    2.2_springboot2.x消息RabbitMQ整合&amqpAdmin管理组件的使用
    2.1_springboot2.x消息介绍&RabbitMQ运行机制
    1.2_springboot2.x中redis缓存&原理介绍
    1.1_springboot2.x与缓存原理介绍&使用缓存
    JavaWeb-----Get请求和Post请求
    Java基础(basis)-----TCP通信
    Java基础(basis)-----泛型详解
  • 原文地址:https://www.cnblogs.com/connie313/p/13531689.html
Copyright © 2020-2023  润新知