zoukankan      html  css  js  c++  java
  • 从用户输入浏览器输入url到页面最后呈现 有哪些过程?有什么办法能优化页面性能?

    1. 用户输入URL地址
    2. 浏览器解析URL解析出主机名
    3. 浏览器将主机名转换成服务器ip地址(浏览器先查找本地DNS缓存列表 没有的话 再向浏览器默认的DNS服务器发送查询请求 同时缓存)
    4. 浏览器将端口号从URL中解析出来
    5. 浏览器建立一条与目标Web服务器的TCP连接(三次握手)
    6. 浏览器向服务器发送一条HTTP请求报文
    7. 服务器向浏览器返回一条HTTP响应报文
    8. 关闭连接 浏览器解析文档
    9. 如果文档中有资源 重复6 7 8 动作 直至资源全部加载完毕

    重排:

    1. 定义:DOM结构中的各个元素都有自己的盒子(模型),这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置,这个过程称之为reflow。

    2. 触发Reflow:

      • 当你增加、删除、修改DOM结点时,会导致Reflow或Repaint
      • 当你移动DOM的位置,或是搞个动画的时候
      • 当你修改CSS样式的时候
      • 当你Resize窗口的时候(移动端没有这个问题),或者是滚动的时候
      • 当你修改网页的

      最常问:如何减少Reflow?或者避免Reflow?

    重绘:

    1. 定义:当各种盒子的位置、大小以及其他属性,例如颜色、字体大小等都确定下来后,浏览器于是便把这些元素都按照各自的特性绘制了一遍,于是页面的内容出现了,这个过程称之为repaint。

      页面要呈现的内容,通通都绘制到页面上。

    2. 触发Repaint

      • DOM改动
      • CSS改动
  • 相关阅读:
    [国家集训队]数颜色 / 维护队列
    【模板】二逼平衡树(线段树+平衡树)
    jenkins实现接口自动化持续集成(python+pytest+ Allure+git)
    Locust快速上手指南
    缓解多分类的样本不均衡问题
    PlayStation@4功能介绍及测试应用
    APP专项测试-弱网测试
    游戏自动化测试-局内战斗
    Windows下JMeter分布式压测环境搭建
    基于simhash的文本去重原理
  • 原文地址:https://www.cnblogs.com/liea/p/12499088.html
Copyright © 2011-2022 走看看