浏览器基础知识

  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,一经查实,立即删除!

相关文章

MongoDB简介、在node中使用MongoDB

MongoDB数据库简介&#xff1a; 使用MongoDB的好处是不用SQL语句&#xff0c;它提供了对应的API&#xff0c;其功能和MYSQL基本相同&#xff0c;是最像关系型数据库的非关系型数据库&#xff1b;不需要设计表的结构&#xff0c;文档相当于json&#xff0c;如果想要了解更多&am…

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

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

Linux下实现自动设置SSH代理

SSH的巨大价值体现在能够配置为代理服务器上。不像在Windows下每次还需要手动登录设置&#xff0c;Linux有很好的工具链能够实现自动设置SSH代理&#xff0c;就是expect和ssh的联合使用&#xff0c;再加上proxychains&#xff0c;任何程序都可以享用代理了&#xff0c;在此我简…

node中操作MySQL

node操作MySQL数据库&#xff1a; 在node中操作MySQL数据库的基本流程如下&#xff1a; // node操作MySQL需要在npm官网下载mysql包并载入node执行代码&#xff1a;// 1.载入MySQL数据库包var mysql require(mysql);// 2.创建连接&#xff1a;var connection mysql.createCo…

百度UEditor编辑器使用(二)

本文摘自&#xff1a;http://www.cnblogs.com/pmpen/archive/2011/09/19/2181811.html 首先感谢分享 百度WEB前端设计部推出一款开源的编辑器UEditor http://ueditor.baidu.com/index.html &#xff0c;这款编辑器相当强大&#xff0c;它提供了百度地图&#xff0c;google地图…

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

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

AssetManager asset的使用

Android 系统为每一个新设计的程序提供了/assets文件夹&#xff0c;这个文件夹保存的文件能够打包在程序里。/res 和/assets的不同点是&#xff0c;android不为/assets下的文件生成ID。假设使用/assets下的文件&#xff0c;须要指定文件的路径和文件名称。以下这个样例&#xf…

vmware 快照用关机吗_PS板绘上色的骚操作,打破初学者上色残的瓶颈!|快照|绘画|初学者|配色|色阶...

PS板绘上色的骚操作&#xff0c;打破初学者上色残的瓶颈&#xff01;初学者如何入门绘画&#xff1f;学习板画难吗&#xff1f;怎样才能学习好绘画&#xff1f;想必这些都是绘画初学者们经常在想的问题吧&#xff0c;就是不知道如何才能学习好绘画&#xff0c;然后绘画出自己想…

vue概述、vue文件特点、vue核心思想、双向数据流、单文件、启动一个vue项目、声明式渲染

vue介绍&#xff1a; Vue&#xff1a;当前较火的MVVM框架&#xff0c;轻量、简介、高效、组件化、数据驱动&#xff0c;模块和渲染函数的弹性选择&#xff0c;简单的语法及项目创建&#xff0c;渲染速度极快&#xff0c;基于Virtual Dom&#xff0c;利用虚拟DOM实现快速渲染&a…

jQuery特效手风琴特效 手写手风琴网页特效

今天写一个简单的手风琴效果&#xff0c;不用插件&#xff0c;利用强大的jQuery&#xff0c;写一个手风琴效果。 页面预览&#xff0c;请点击这里预览&#xff1a; 手风琴预览案例分析&#xff1a; html结构 就是一个大盒子里面放着5个li&#xff0c;每个li的小小是200像素&a…

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

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

javascript中es6语法

es6语法简介&#xff1a; // 1.历史&#xff1a;// 1995-----JavaScript诞生// 1997-----ECMAScript标准确立// 1999-----ES3出现&#xff0c;与此同时IE5风靡一时// 2009-----ES5出现&#xff0c;现在绝大所数使用的是ES5// 2015-----ES6/ECMAScript2015出现// 2.函数的Rest参…

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

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

vue项目目录结构分析、过滤器、vue文件中基础template、script、style

项目目录结构&#xff1a; 1.在一个项目中一般的目录结构为&#xff1a;my_project------------项目文件夹|____src--------------------------------存放人可以看懂的源代码&#xff0c;具备一定功能划分&#xff0c;mvc思想|____dist-------------------------------存放真实…

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;轴手性联芳基二醇化合物的合成受到广泛关注且已经取得了…

vue中自定义指令、组件化、生命周期、节流和防抖、获取DOM、mint-ui简介、过渡和动画

自定义指令&#xff1a; vue中通过directive方法自定义指令&#xff0c;如&#xff1a;自定义一个v-focus指令&#xff1a; <script>Vue.directive(focus, {//通过directive(指令名,{配置})注册全局指令inserted: function (el) {//inserted:表示当自定义指令插入元素后…

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…

vue-router路由、mixin混入、vue-resource、axios、计算属性watch、moment.js、vuex、vue-cli、数据双向绑定、搭建vue环境、vue实例、配置启动项

路由vue-router介绍: // 1.前端路由核心&#xff1a;锚点值的改变&#xff0c;根据不同的锚点值&#xff0c;渲染指定dom位置的不同数据。// 2.vue中&#xff0c;模板数据不是通过ajax请求的&#xff0c;而是调用函数获取到模板内容// 3.vue-router使用方式&#xff1a;// 1.下…