学习node.js前,浏览器的一些工作原理知识的补充

浏览器概述

1、人机交互(UI)
2、网络请求部分(Socket)
3、JavaScript引擎(解析执行JavaScript)
4、渲染引擎(渲染HTML,CSS)又叫排版引擎或浏览器内核
5、数据库存储(cookie、HTML5的本地存储Localstorage、SessionStorage)

渲染引擎

主流的渲染引擎有
Chrome浏览器:Blink引擎 (WebKit的一个分支) .
Safari浏览器:WebKit引擎,(windows版本2008年3月18日推 出正式版,但苹果已于2012年7月25日停止开发Windows版的Safari.)

FireFox浏览器: Gecko引擎
Opera浏览器: Blink引擎(早期版使用Presto引擎,后改为Blink引擎)
Internet Explorer浏览器: Trident引擎 。(最后一个版本 IE 11)
Microsoft Edge浏览器: EdgeHTML引擎(Trident的一个分支) 

工作原理

1.解析HTML构建Dom树(Document object Model,文档对象模型),DOM 是W3C组织推荐的处理可扩展置标语言的标准编程接口

渲染引擎会将页面所有CSS解析生成CSS规则树

渲染树=DOM树+CSS规则树

2.构建渲染树,渲染树并不等同于Dom树,因为像head标签或display: none这样的元素就没有必要放到渲染树
中了,但是它们在Dom树。(渲染树剔除一些没有必要显示的元素)

3.对渲染树进行布局,定位坐标和大小、确定是否换行、确定position、 overflow- z- index等等, 这个过程叫"layout"(先布局) 或"reflow"(后进行重新调整)

"注意:尽量避免频繁使用layout和reflow,会影响性能"

4.绘制渲染树,调用操作系统底层API进行绘图操作。


解析DOM树---->构建渲染树---->渲染树布局---->绘制渲染树

浏览器访问网站过程

1、浏览器中输入网址
2、浏览器对URL网址请求报文封装
3、浏览器发起DNS解析请求,将域名转为IP地址
4、浏览器将请求报文发送到服务器
5、服务器接收请求报文,并解析
6、服务器处理用户请求,并将处理结果封装成HTTP响应报文。
7、服务器将HTTP响应报文发送给浏览器
8、浏览器接收到服务器响应的HPPT报文,并解析
9、浏览器解析HTML页面并渲染,在解析HTML页面时遇到新的资源需要再次发起请求
10、最终浏览器渲染出完整页面

热门文章

暂无图片
编程学习 ·

共识算法 POW/POS

POW/POS在区块链系统中,共识算法是区块链保持数据安全、不可篡改、透明性等特色的关键技术。共识机制是区块链的灵魂,是区块链建立信任的基础。一个区块链项目选择使用何种共识机制,决定了这个项目是否能建立起完善的激励机制,从而起到鼓励更多节点参与到项目中,进而增加系…
暂无图片
编程学习 ·

Web服务器防护技术你了解多少?

技术的迅速发展,给人们提供便利的同时,也给人们带来了威胁。通常情况下,黑客、病毒会利用系统的漏洞来进行网络攻击,如篡改网页、蔓延病毒等,从而造成用户信息的窃取、重要数据的破坏。因此,要对web服务器的安全问题引起足够的重视,要加大安全防护力度、构建安全防护系统…
暂无图片
编程学习 ·

删除和关闭docker容器

查看所有正在运行容器 docker ps 查看所有容器 docker ps -a 查看所有容器ID docker ps -a -q 停止某个具体容器 docker stop 容器ID stop停止所有容器 docker stop $(docker ps -a -q) remove删除容器 docker rm 容器ID remove删除所有容器 docker rm $(docker ps -a -q) ps查…
暂无图片
编程学习 ·

windows使用小技巧——Windows 10 HEVC扩展要收费怎么办?教你怎么免费下载HEVC扩展

平时我一般都使用potplayer打开视频,但在整理视频的时候mov格式的文件总是不能显示缩略图。如果用windows10自带图片查看器打开时会提示下载HEVC,点击后会要求付7元下载。本来已经准备支付宝了,结果发现要将支付宝账号加入windows账号下。。。算了算了,还是看看有没有别的办…
暂无图片
编程学习 ·

趣谈:C++中引用和只指针的区别

1.引用必须初始化,不可以为空,不可以null;指针可以位NULL,可以在任何时候初始化. 2.引用一生只爱一次,一生只爱一个人,一旦绑定一个对象,就不能换对象;指针是情场老手,可以随意的更换对象. 3.引用沉溺爱情,丧失了自己,如果使用sizeof(&),返回的是他对象的大小,而指针是他自…
暂无图片
编程学习 ·

PAT 甲级 1013 Battle Over Cities (25分)

题目 1013 Battle Over Cities (25分) It is vitally important to have all the cities connected by highways in a war. If a city is occupied by the enemy, all the highways from/toward that city are closed. We must know immediately if we need to repair any othe…
暂无图片
编程学习 ·

一些个人感觉很不错的特效

html5 canvas绘制3D森林场景拖动特效https://www.mk2048.com/demo/demo_target_desc_h0ccka0cib.html基于canvas 卡通风格的3D森林场景拖动旋转展示特效。video.js在线视频播放器插件点击》video.js在线视频播放器插件html5 video.js mp4视频播放器插件支持点击全屏、播放 spac…
暂无图片
编程学习 ·

Python爬虫入门教程 72-100 分布式爬虫初步解析-配好环境肝完一半

写在前面 最近该系列的爬虫更新比较慢了,原因是实在写不动了,70多篇博客,每一篇都是一个案例,在写好多都不是篇博客可以容纳的了,而且爬虫的技术在70多篇中都有所涉及了,但是flag既然历下了,那么就必须要把它完成,接下来进入一些稍微稍微麻烦一点的内容,第一个咱就写分…
暂无图片
编程学习 ·

【LEETCODE】718.最长重复子数组-动态规划+滑动窗口

题目 给两个整数数组 A 和 B ,返回两个数组中公共的、长度最长的子数组的长度。 思路 设数组A长度为n,B长度为m动态规划: 设置动态规划数组dp[n+1][m+1],dp[n][m]=0。 从A[n-1]和B[m-1]开始向前遍历比较,可以得出伪代码: if A[i]==B[j]:dp[i][j]=dp[i+1][j+1]+1; else if …
暂无图片
编程学习 ·

JVM-面试题

一、什么是Java虚拟机?为什么Java被称作是“平台无关的编程语言”?Java虚拟机是一个可以执行Java字节码的虚拟机进程。Java源文件被编译成能被Java虚拟机执行的字节码文件。 Java被设计成允许应用程序可以运行在任意的平台,而不需要程序员为每一个平台单独重写或者是重新编译…
暂无图片
编程学习 ·

Django开发

一.创建django项目二.新建应用 1. 建立应用python manage.py startapp 应用名2. 在[setting]->[INSTALLED_APPS]建立应用三. 建立数据库 1. 编写文章数据模型类2. 建立迁移文件 python manage.py makemigrations3. 生成数据库 python manage.py migrate四.建立超级管理员 p…
暂无图片
编程学习 ·

SwiftUI 2.0 实现无限滚动的分页列表(高性能含源码)

本文价值与收获 看完本文后,您将能够作出下面的界面实战需求 我们平时构建的应用基本上都是列表类应用,例如待办事项列表、微博、微信朋友圈和视频列表等。这些列表都是可以无限滚动的,那这个功能该如何实现呢。本篇文章将告诉大家个非常简单高效的构建无限滚动List的方法,…
暂无图片
编程学习 ·

闭包的理解

JS闭包理解及使用 JS中的闭包,其本质就是在函数内部再创建一个函数。 当外部函数执行环境被销毁后,内部函数的作用域链依然保持着对外部函数活动对象的引用,简而言之,闭包就是能够读取其他函数内部变量的函数。 我们可以将闭包理解为:对于外部函数f1,内部函数f2, 当f1终…
暂无图片
编程学习 ·

ssm实现用户管理系统

ssm实现用户管理系统(2) @RequestMapping("/add.do") public String add(User user){userService.add(user);return "redirect:findAll.do"; } @RequestMapping("/toUpdate.do") public ModelAndView toUpdate(int id){User user=userService.…
暂无图片
编程学习 ·

英语口语293之每日十句口语

2020/07/02每日十句英语口语associated 相关的、相关联的associative container 关联式容器(对应sequential container)asynchronous 异步的atomic 原子的atomic operation 原子操作attribute 特性、属性authentication service 验证服务authorization 授权audio 音频关注博客…
暂无图片
编程学习 ·

liunx-搭建hadoop(2.7.1)和使用

1.搭建 1.集群jdk安装 配置JDK环境变量在局域网中关闭防火墙 service iptables stop设置主机映射 1. 打开配置文件vim /etc/hosts 2. 内容192.168.80.111 server1192.168.80.112 server2192.168.80.110 server3配置SSH免密登录 1. 生成私钥ssh-keygen -t dsa -P -f ~/.ssh/id_…
暂无图片
编程学习 ·

SpringBoot的demo创建

SpringBoot的demo创建 springBoot项目的创建又多种方式本次就说一种比较简单的方式 选择Spring Initializr,点击确定(选择这种方式的创建,需要又网络环境,这相当于在spring.io官网下载demo) 这些看个人需求,进行修改,没有修改的可以直接下一步 这个界面是选取SpringBoot…
暂无图片
编程学习 ·

二、三层交换机与路由器的工作原理总结

交换原理 转发决策 交换机的转发决策有三种操作:丢弃、转发和扩散。 丢弃:当本端口下的主机访问已知本端口下的主机时丢弃。 转发:当某端口下的主机访问已知某端口下的主机时转发。 扩散:当某端口下的主机访问未知端口下的主机时要扩散。 每个操作都要记录下发包端的源MAC地…
暂无图片
编程学习 ·

1 dx存储jj

文章目录1.1和传统网络存储的区别1.1.1数据的管理方式 1.1和传统网络存储的区别要理解对象存储,先谈传统的网络存储。 传统的网络存储主要,NAS和SAN。Network Attached Storage 一个提供了存储功能和文件系统的网络服务器。 客户端可访问NAS上的文件系统,还可上传和下载文件。 …