您的位置: 首页  >  文章  >  01浏览器及前端优化概述

01浏览器及前端优化概述

分类: 文章 • 2024-10-03 16:26:46

浏览器工作原理

浏览器组成

  1. 人机交互（ui）
  2. 网络请求部分（socket）
  3. js引擎(v8引擎)
  4. html、css渲染引擎（六大浏览器引擎区别）
    • Webkit: Chrome(Blink分支) Opera(Presto改Blink 分支) edge(EdgeHtml改Blik) Safari
    • Gecko: Firefox
    • Trident: IE
      • 双核浏览器即:带两个主流渲染引擎
  5. 数据存储部分（cookie、LocalStroage、、）

内核（渲染引擎）工作步骤

  1. 解析html,构建Dom树

    • Parsing HTML to construct the DOM tree
    • 包括head标签 display:none等 不显示的全部标签/元素都在其中
    • Document Object Model,文档对象模型,dom 是w3c组织推荐的处理可扩展置标语言的标准编程接口

  2. 构建渲染树,

    • Render tree construction
    • 与Dom树不同,把Dom树中页面不显示的标签/元素剔除

  3. 布局渲染树(也叫layout/Webkit引擎 reflow/Gecko引擎)

    • Layout of the render tree
    • 定位坐标和大小 . 是否换行 . 确定position.overflow.z-index等

  4. 绘制渲染树

    • Painting the render tree
    • 调用操作系统底层api进行绘图操作
  • 渲染图解(对应四个步骤)
    01浏览器及前端优化概述
    01浏览器及前端优化概述

01浏览器及前端优化概述

浏览器性能优化

  • 对渲染树进行布局时即:layout(reflow),会对所有要渲染的标签位置和大小等排版.

  1. 对标签(如图片)固定大小,如图片加载完成后,只需填充选定位置,不会导致其它地方的重新渲染.

  2. 少用appenchild()直接添加元素,

    • 将要创建的元素写到一个字符串上，然后一次性写到innerHTML上，这种利用浏览器对innerHTML的解析确实是相比上面的多次插入快了很多。但是构造字符串灵活性上面比较差，很难符合创建各种各样的DOM元素的需求.
    • 对于火狐和chrome浏览器,插入元素用document.createDocumentFragment()创建文档片段(存在内存里),把要插入的元素都插入其中,一次添加到文档里,减少渲染次数.

浏览器访问网站过程

  1. 在浏览器地址栏输入网址

  2. 通过地址栏（html中标签src、href）的URL,构建HTTP请求报文

  3. 浏览器发起DNS解析请求,将域名转换为IP地址

  4. 浏览器将请求报文发送给服务器

  5. 服务器接收报文,并解析

  6. 服务器处理用户请求,生成封装HTTP响应报文

  7. 服务器发送HTTP响应报文给浏览器

  8. 浏览器接收报文,并解析

  9. 浏览器解析HTML并显示,发现新资源请求（html中标签src、href等请求）则再次发起请求

  10. 展示最终页面

http请求/响应报文格式

  1. 请求行/响应行

    • 请求行：请求方法、路径（包括search和hash部分）、协议
    • 响应行：响应协议、状态码、状态消息

  2. 请求报文头/响应报文头

    • 报文头和体之间需 空一行

  3. 请求报文体/响应报文体

    • 请求报文体：post方法提交的信息，get方法无请求报文体，信息直接在提交路径中提交。
    • 响应报文体：html、css、js、图片等浏览器请求的资源
  • 请求报文体：post方法提交的信息，get方法无请求报文体，信息直接在提交路径中提交。
  • 响应报文体：html、css、js、图片等浏览器请求的资源

相关推荐