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

时间: 2018-04-11阅读: 1064标签: 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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

关闭

web开发新手应该知晓的20件事

在我当初刚从事 web 开发的时候,有很多重要的事我并没有事先了解。现在看来,我的很多期望都和现实有很大的差距。在这篇文章里,我会告诉你 20 件事情,这些都是在你准备开始或者刚开始 web 开发不久的时候就应该知晓的

函数式 UI:Web开发终于摆脱了框架的束缚

用户界面都是响应式系统,因此可以使用一个纯响应函数,将用户界面接受的事件映射到接口系统上的动作来定义用户界面。利用函数式编程的实现技术可以让实现更接近规范,更易推理和测试。函数式 UI 可以让开发人员摆脱不兼容的 UI 和测试框架带来的麻烦

WebAR 如何改变增强现实的未来

增强现实技术在开发人员和智能手机用户中越来越受欢迎,但它还是没有在无所不在的技术中占据一席之地。要体验 AR,用户必须安装专用的程序,但经常会在用过几次后就将其删除,甚至根本去下载它

关于渐进式 Web 应用,你应该知道的一切

渐进式 Web 应用是利用现代浏览器的特性,可以添加到主屏幕上,表现得像原生应用程序一样的 Web 应用程序。

Web前端十种常用的技术

Web前端应用十种常用技术,随着JS与XHTML的应用普及,越来越多的web界面应用技术出现在网站上,比如我们常见的日历控件,搜索下拉框等,这些web界面应用技术大大的丰富了网站的表现形式

学习web的方法有哪些

Web技术的参与门槛低,工资高,发展前景良好,已成为近年来的热门岗位,很多IT公司在招聘时都希望招聘会web技术的人员,但是想学好web前端,特别是对于没有基础的初学者来说

W3C是什么?IETF是什么?

无规矩不成方圆,软件开发当然不能例外。Web开发涉及的厂商和技术非常多,所以必须要有参考的标准,而且需要一系列的标准。Web程序都是通过浏览器来解析执行的,通过页面的展示内容与用户互动,所以Web标准不仅要求各个浏览器都要遵循

如何迁移Flutter项目到Flutter Web?

这篇简单介绍下怎么将一个现有的 Flutter 项目转成 Flutter Web 项目。开始之前先浇一盆冷水,我们理想中的一套代码、多端运行的愿望是要破灭了,至少目前版本的 Flutter Web SDK 是没法做到的

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

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

开发者吐槽:谷歌引入 Web 新标准的方式过于专横

我和我在微软的同事们认为世界需要更多的 Clippy——也就是这个可爱的动画回形针。为此,我们在 Edge 6.0 中引入了一项新功能。Web 开发者现在可以使用 <clippy> 来调用一个动画虚拟助手了。

点击更多...

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