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改动
  • 相关阅读:
    mysql导入导出数据
    Linux符号连接的层数过多
    win10下docker安装和配置镜像仓库
    PHP资源列表(转)
    php中正则案例分析
    基于CSS3自定义美化复选框Checkbox组合
    基于HTML5 Canvas粒子效果文字动画特效
    基于jQuery商品分类选择提交表单代码
    基于jquery右侧悬浮加入购物车代码
    基于jquery带时间轴的图片轮播切换代码
  • 原文地址:https://www.cnblogs.com/liea/p/12499088.html
Copyright © 2011-2022 走看看