web浏览器基础知识【web前端】

时间: 2018-04-11阅读: 1440标签: web

Web浏览器的主要功能是展示网页资源,即请求服务器并将结果展示在窗口中。


地址栏输入URL到页面显示经历的过程

1、操作系统访问DNS服务器,把域名转化为IP

2、浏览器发起http请求

3、找到指定的资源,可能访问数据库,构建并返回http响应消息

4、浏览器接收并解析响应消息

5、浏览器缓存接收到的响应消息,解析并渲染响应内容


浏览器的主要组件

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

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

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

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

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

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

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

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



浏览器渲染

关于浏览器的渲染原理,这里有篇流传很广很不错的文章——《How browsers work》(英文版,中文翻译版

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


来源:https://blog.csdn.net/csdn_Sandy/article/details/79883796


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/618

web页面的回流和重绘

什么是回流? 回流也叫重排(reflow),当页面中的元素发生影响布局的变化,比如:改变宽高,修改显示影藏。页面需要重新布局,就会触发重排。 简单的说就是,页面布局改变,就会触发重排。

Web前端知识体系精简

Web前端技术由 html、css 和 javascript 三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学者很难理清楚整个体系的脉络结构。

Web的26项基本概念和技术

Web开发是比较费神的,需要掌握很多很多的东西,特别是从事前端开发的朋友,需要通十行才行。今天,本文向初学者介绍一些Web开发中的基本概念和用到的技术,从A到Z总共26项,每项对应一个概念或者技术。

Web服务常用的几种开发方法

Web服务,即通过程序实现网页服务,服务启动后,一般用户可通过访问URL获取到网站提供的网页服务,如网页浏览、留言、商品购买等。开发Web服务的技术有很多,有Java、Python、ASP.NET、脚本语言等

Web认证_介绍Web开发中几种常用的认证机制

如今web服务随处可见,成千上万的web程序被部署到公网上供用户访问,有些系统只针对指定用户开放,属于安全级别较高的web应用,他们需要有一种认证机制以保护系统资源的安全,本文将探讨五种常用的认证机制及优缺点。

成为 Web 开发大师你必须知道的 7 件事情

曾经是这样的,懂点编码,并可以偶尔耍点酷,那么你就会被认为是一个Web开发大师。但是现在,情况再也不是这样的了。Web开发已经朝着主流方向发展,开发人员数量显著增加。

Web 前端中的增强现实(AR)开发技术

增强现实(以下简称 AR)浪潮正滚滚而来,Web 浏览器作为人们最唾手可得的人机交互终端,正在大力发展 AR 技术。AR 可以简单的理解为一种实时将虚拟图像叠加在现实场景中的技术

如何提升学习Web前端的效率

当下是个追求效率的社会,对于IT行业而言,尤其如此。如何在短时间内提升学习Web前端的效率,成为很多同学关注的焦点。接下来分享一些快速学习Web前端的方法。

web页面录屏实现

如果你的应用有接入到web apm系统中,那么你可能就知道apm系统能帮你捕获到页面发生的未捕获错误,给出错误栈,帮助你定位到BUG。但是,有些时候,当你不知道用户的具体操作时,是没有办法重现这个错误的,这时候,如果有操作录屏,你就可以清楚地了解到用户的操作路径

移动Web深度剖析

随着前端技术的急速发展,随着互联网行业的日益发展,HTML5作为一种比较新型的开发技术早已经被很多大的企业所应用,通过HTML5语言可以开发适用于任何设备上的酷炫网站页面

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!