浏览器基础知识

  Web浏览器的主要功能是展示网页资源,即请求服务器并将结果展示在窗口中。工作原理大概如下:


  地址栏输入URL

  浏览器根据输入的URL查找域名的IP地址,DNS查找过程如下:

  • 浏览器缓存——浏览器会缓存DNS记录一段时间,不同浏览器默认缓存时间不一样,IE默认为30分钟,Firefox默认是1分钟。
  • 系统缓存——如果在浏览器缓存里没有找到需要的缓存记录,浏览器会到系统缓存中查找。
  • 路由器缓存——如果系统缓存中也没有,就会将请求发给路由器并在其DNS缓存中查找。
  • ISP缓存——如果路由器缓存中没有,就会将请求发给ISP的DNS缓存服务器并在其记录中查找。
  • 访问根域名服务器——如果ISP缓存中没有,就会由ISP向根域名服务器进行递归搜索,查找到对应记录并返回。

  浏览器与对应Web服务器建立TCP连接,并发送HTTP请求,Web服务器接收到请求后进行一系列分析处理(关于HTTP请求响应的详细过程以后再进行剖析)并返回HTML文件。


  浏览器解析HTML

  浏览器接收到服务器返回的HTML文件,解析<head>标签:

  • 关于页面的一些配置标签,例如<title>、<meta>、<base>等,以后再进行剖析,这些会对页面属性进行设置。
  • 碰到内联CSS和JS会立即解析执行。
  • 碰到外部CSS和JS会并发请求相关资源,然后解析执行。不同浏览器针对同一域的同一时间默认并发连接数会有不同,一般在10个以内。

  接着,浏览器开始解析<body>里的内容:

  • 碰到需要获取其他地址内容的标签,例如<img>、<script>,会并发请求相关资源。

  当HTML解析器遇到<script>标签时,默认必须先执行脚本,然后再恢复文档的解析和渲染。脚本的执行只在默认情况下是同步和阻塞的。<script>标签可以通过defer和async属性来改变脚本的执行方式。使用defer和async属性,可以让浏览器在下载脚本时继续解析和渲染文档。defer属性使浏览器延迟脚本的执行,直到文档的载入和解析完成。async属性使浏览器可以尽快地执行脚本,而不用在下载脚本时阻塞文档解析。如果<script>标签同时拥有这两个属性,同时支持这两者的浏览器会执行async属性并忽略defer属性。延迟脚本会按照他们在文档里的出现顺序来执行,而异步脚本在他们载入后执行,可能会无序执行。


  浏览器渲染原理

  关于浏览器的渲染原理,这里有篇流传很广很不错的文章——《How browsers work》(英文版,中文翻译版),就不细说了。简要分析几点:

  • 浏览器的主要组件

  1. 用户界面——包括地址栏、后退/前进按钮、书签目录等,也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分。

  2. 浏览器引擎——用来查询及操作渲染引擎的接口。

  3. 渲染引擎——用来显示请求的内容,例如,如果请求内容为HTML,它负责解析HTML及CSS,并将解析后的结果显示出来。

  4. 网络——用来完成网络调用,例如HTTP请求,它具有平台无关的接口,可以在不同平台上工作。

  5. UI后端——用来绘制类似组合选择框及对话框等基本组件,具有不特定于某个平台的通用接口,底层使用操作系统的用户接口。

  6. JS解释器——用来解释执行JS代码。

  7. 数据存储——属于持久层,浏览器需要在硬盘中保存类似cookie的各种数据,HTML5定义了web database技术,这是一种轻量级完整的客户端存储技术。

图1:浏览器主要组件

  Chrome为每个Tab分配了各自的渲染引擎实例,每个Tab就是一个独立的进程。

  • reflow和repaint

  浏览器渲染过程中经常伴随着reflow和repaint,如果只是改变某个元素的背景色、文字颜色等不影响Dom布局的属性时会引起浏览器进行repaint,相对而言,如果改变影响Dom布局的属性时就会引起浏览器进行reflow,而reflow比repaint开销要大很多,因此应尽量避免。

转载于:https://www.cnblogs.com/ywang1724/p/3916633.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/575306.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

喜用神最正确的算法_各种电磁仿真算法的优缺点和适用范围(FDTD, FEM和MOM等)...

从实际工程应用的角度谈一下我对这几种算法的理解。先说结论&#xff0c;FDTD算的快但是不精确&#xff0c;可以用来算电大尺寸的物体&#xff0c;要是一个物体的尺寸大于10个波长&#xff0c;一般的服务站是跑不动FEM的&#xff0c;那必须得用FDTD了。FEM最经典的电磁仿真软件…

护士资格证延续注册WEB服务调用失败_服务熔断

熔断机制是应对服务雪崩效应的一种微服务链路保护机制&#xff0c;当扇出链路的某个微服务不可用或者响应时间太长时&#xff0c;会进行服务的降级&#xff0c;进而熔断该节点微服务的调用&#xff0c;快速返回”错误”的响应信息。当检测到该节点微服务响应正常后恢复调用链路…

db2 删除索引_MYSQL进阶——索引

索引模型hash索引hash索引主要适用于等值查询的场景&#xff0c;排序&#xff0c;模糊搜索等场景并不适用有序数组有序数组可用于非等值查询&#xff0c;排序等场景&#xff0c;但是由于写数据时需要对数组中的元素进行位移&#xff0c;所以一般用于静态数据的场景二叉树二叉树…

react 导航条选中颜色_调整安卓手机的颜色以更好地查看一切

并非所有人都有相同的区分颜色的能力。我们对屏幕上色彩配置的需求甚至口味可能会因人而异。幸运的是&#xff0c;Android为我们提供了多种本地工具&#xff0c;能够调整手机的颜色。我们的手机显示数百万种音调&#xff0c;这些音调是由屏幕配置或终端如何解释从某些应用程序接…

linux进程调度之 FIFO 和 RR 调度策略

转载 http://blog.chinaunix.net/uid-24774106-id-3379478.html linux进程调度之 FIFO 和 RR 调度策略 2012-10-19 18:16:43分类&#xff1a; LINUX 作者&#xff1a;manuscola.beangmail.com 博客地址&#xff1a;bean.blog.chinaunix.net 最近花了10几天的时间&#xff0…

echarts 获取点击的y轴数值_有机磷酸催化对醌的不对称直接加成反应合成轴手性芳基醌类化合物...

有机磷酸催化对醌的不对称直接加成反应合成轴手性芳基醌类化合物本文作者&#xff1a;Summer轴手性联芳基二醇骨架广泛存在于天然产物、生物活性分子、有用的手性配体以及催化剂中(Figure 1a)&#xff0c;因此&#xff0c;轴手性联芳基二醇化合物的合成受到广泛关注且已经取得了…

H264解码的一个測试程序

网上看到的一个H264视频格式的解码測试程序&#xff0c;能够用来參考其逻辑流程。 代码例如以下&#xff1a; Test_Display_H264(){ in_fd open(H264_INPUT_FILE, O_RDONLY); //video file open fstat(in_fd, &s); …

spring框架 web开发_go语言web开发框架学习:Iris框架讲解(一)

Golang介绍Go语言是谷歌推出的一种全新的编程语言&#xff0c;可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克(Rob Pike)说&#xff1a;我们之所以开发Go&#xff0c;是因为过去10多年间软件开发的难度令人沮丧。谷歌资深软件工程师罗布派克(R…

linux终端的背景_如何在终端显示图像缩略图 | Linux 中国

lsix 是一个简单的命令行实用程序&#xff0c;旨在使用 Sixel 图形格式在终端中显示缩略图。-- Sk不久前&#xff0c;我们讨论了 Fim[1]&#xff0c;这是一个轻量级的命令行图像查看器应用程序&#xff0c;用于从命令行显示各种类型的图像&#xff0c;如 bmp、gif、jpeg 和 png…

混合App开发,HBuilder开发移动App

使用HBuilder开发混合App&#xff1a; Hbuilder&#xff1a;是一个在线打包工具&#xff0c;不需要在本地配置开发环境&#xff1b;直接将做好的网站&#xff0c;通过一些简单的操作&#xff0c;就能在线打包为一个App&#xff1b; 混合APP开发常见技术&#xff1a;Html5、Re…

fanuc roboguide_ROBOGUIDE软件:机器人产线输送带输送物料虚拟仿真操作

概述输送带在机器人生产线或工作站中是常见的物料传送设备&#xff0c;它能够将物料从一个工位自动传送到另一个工位&#xff0c;是实现自动化生产制造必不可少的装置设备之一。虚拟仿真是对真实的工业机器人生产线或工作站的图形化再现&#xff0c;因此&#xff0c;对于具有输…

双电阻差分电流采样_小小的采样电阻,还真有点门道!

电流检测电阻的基本原理根据欧姆定律,当被测电流流过电阻时,电阻两端的电压与电流成正比.当1W的电阻通过的电流为几百毫安时,这种设计是没有问题的.然而如果电流达到10-20A,情况就完全不同,因为在电阻上损耗的功率(PI2xR)就不容忽视了.我们可以通过降低电阻阻值来降低功率损耗,…

jpa in查询_优选在shopee虾皮怎么发货价格查询皮皮虾云仓

优选在shopee虾皮怎么发货价格查询皮皮虾云仓皮皮虾云仓物流系统为现代化管理系统&#xff0c;可集中化&#xff0c;高效化的处理本土店物流订单。物流系统可对接主流的的电商平台ERP可以实现高效的订单处理。如lazada&#xff0c;shopee&#xff0c;1688、速卖通、eaby、shopi…

html5+、ReactNative、Weex、Ionic之间的区别、(配置java、python、Android环境)、ReactNative(react-native-cli)、yarn、Weex

html5、ReactNative、Weex、Ionic之间的区别&#xff1a; html5和Ionic&#xff1a; 在开发原理上基本相同&#xff0c;都是需要先开发出一个完整的网站&#xff0c;再通过html5或Ionic提供的打包技术对网站进行打包成移动app&#xff0c;它们实际还是一个网站&#xff0c;并非…

delphi listview失去焦点后的颜色_阴阳师姑获鸟和惠比寿建模更新对比 爷爷帅了 觉醒后鸟姐颜值提升...

阴阳师体验服近期更新了人气式神姑获鸟还有惠比寿的相关建模&#xff0c;本次特别奉上有关这两位式神的建模形象对比图&#xff0c;对比后发现经过修改和优化之后&#xff0c;爷爷更帅了&#xff0c;而觉醒后的鸟姐颜值也有所提升&#xff0c;一起来看看吧。惠比寿觉醒前觉醒前…

kibana 显示 @timestamp 时间问题(utc or browser当前时间)自动转换显示

https://github.com/elasticsearch/kibana/issues/95 可以统一timestamp时间字段为当前信息时区的时间&#xff01; http://www.elasticsearch.org/guide/en/elasticsearch/reference/current/mapping-date-format.html 转载于:https://www.cnblogs.com/sunxucool/p/3939701.ht…

React简介、虚拟DOM、Diff算法、创建React项目、JSX语法、组件、组件声明方式、组件传值props和state、组件的生命周期

React简介&#xff1a; 前面只是简单介绍移动APP开发&#xff0c;后面还会继续深入介绍移动app开发&#xff1b;其中想要用ReactNative开发出更出色的应用&#xff0c;那么就得学好React&#xff0c;下面将介绍React&#xff1a; React 是一个由 Facebook 开发用于构建用户界…

去掉 edittext 长按全选_开封消毒湿巾全选

开封消毒湿巾全选   其实&#xff0c;带有杀菌效果的清洁产品大多通过降低微生物的繁殖力达到预期的杀菌效果&#xff0c;所添加的每种杀菌成分都针对特定细菌&#xff0c;无法杀灭所有细菌。如果产品中的杀菌剂浓度总是不能将细菌完全杀灭&#xff0c;就可能导致细菌对该类杀…

代数余子式之和怎么算_小明说养老 | 养老金怎么算之月平均缴费指数怎么来的?...

上一期小明分享了企业职工养老保险退休待遇怎么算&#xff0c;具体可戳小明说养老|养老金怎么算&#xff1f;小明来教你。在以张阿姨为例的计算举例中&#xff0c;提到张阿姨15年的平均缴费指数为0.8209。对这个平均缴费指数的概念提问较多&#xff0c;今天就来解释一下月平均缴…

ReactNative简介、开发环境、调试、常用组件、useState状态、FlatList组件、SectionList组件、Platform 模块、定义样式、图片组件、触摸事件、打包apk发布版

ReactNative简介&#xff1a; ReactNative是基于React语法来进行开发移动app的框架&#xff1b; ReactNative中提供了移动端专用的一些组件&#xff0c;我们要使用ReactNative固有的组件代替网页中使用的一些元素&#xff0c;如&#xff1a;div, p, img 都不能用了&#xff1…