前端学习(4):chome浏览器

 

一、认识浏览器

浏览器是网页显示、运行的平台,常用的浏览器有IE、火狐(Firefox)、谷歌(Chrome)、Safari和Opera等。我们平时称为五大浏览器。IE最新版为Edge。

常用浏览器

二、浏览器市场份额

可以通过百度的统计网站查看:http://tongji.baidu.com/data/browser

浏览器市场份额报告_2017.05-2019.04.jpg

三、了解常用浏览器内核

浏览器内核是什么东西。英文叫做:Rendering Engine,中文翻译很多,排版引擎、解释引擎、渲染引擎,现在流行称为浏览器内核。

因为浏览器太多啦, 但是现在主要流行的就是下面几个:

浏览器内核备注

IETridentIE、猎豹安全、360极速浏览器、百度浏览器

firefoxGecko可惜这几年已经没落了,打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome

Safariwebkit现在很多人错误地把 webkit 叫做 chrome内核(即使 chrome内核已经是 blink 了)

chromeChromium/Blink在 Chromium 项目中研发 Blink 渲染引擎(即浏览器核心),内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发

Operablink现在跟随chrome用blink内核。

Microsoft EdgeChromium微软将Window 10内置默认浏览器Edge内核换成与谷歌浏览器一样的Chromium内核

拓展1:移动端的浏览器的内核

移动端的浏览器内核主要说的是系统内置浏览器的内核。

Android手机而言,使用率最高的就是Webkit内核,大部分国产浏览器宣称的自己的内核,基本上也是属于webkit二次开发。

iOS以及WP7平台上,由于系统原因,系统大部分自带浏览器内核,一般是Safari的内核webkit或者IE内核的Trident

拓展2:浏览器内核

浏览器内核包括两部分,渲染引擎js引擎。渲染引擎负责读取网页内容,整理讯息,计算网页的显示方式并显示页面,js引擎是解析执行js获取网页的动态效果。 后来 JS 引擎越来越独立,内核就倾向于只指渲染引擎。

四、Web标准

1、为什么要遵循WEB标准呢?

通过以上浏览器不同内核不同,我们知道他们显示页面或者排版就有些许差异。

Web标准

2、Web 标准的好处

遵循web标准可以让不同我们写的页面更标准更统一外,还有许多优点

1、让Web的发展前景更广阔

2、内容能被更广泛的设备访问

3、更容易被搜寻引擎搜索

4、降低网站流量费用

5、使网站更易于维护

6、提高页面浏览速度

3、Web 标准构成

构成:主要包括结构(Structure)表现(Presentation)行为(Behavior)三个方面。

结构用于对网页元素进行整理和分类,主要指的是HTML

表现用于设置网页元素的版式、颜色、大小等外观样式,主要指的是CSS

行为是指网页模型的定义及交互的编写,主要指的是Javascript

理想状态下,他们三层都是独立的, 放到不同的文件里面

Web标准不是某一个标准,而是由W3C组织和其他标准化组织制定的一系列标准的集合。

W3C 万维网联盟是国际最著名的标准化组织。1994年成立后,至今已发布近百项相关万维网的标准,对万维网发展做出了杰出的贡献。

w3c就类似于现实世界中的联合国。

由于浏览器内核不同,显示页面或者排版就有些许差异。开发者常常需要为多版本的开发而幸苦工作。所以需要执行web标准来统一样式。

任何上过网的用户对浏览器是再熟悉不过了。只是用户看到仅仅只是浏览器本身,却很少能看到浏览器最核心的部分—浏览器内核。从第一款libwww(Library WorldWideWeb)浏览器发展至今已经经历了无数竞争与淘汰了。现在国内常见的浏览器有:IE、Firefox、QQ浏览器、Safari、Opera、Google Chrome、百度浏览器、搜狗浏览器、猎豹浏览器、360浏览器、UC浏览器、遨游浏览器、世界之窗浏览器等。但目前最为主流浏览器有五大款,分别是IE、Firefox、Google Chrome、Safari、Opera。
浏览器最重要的部分是浏览器的内核。浏览器内核是浏览器的核心,也称“渲染引擎”,用来解释网页语法并渲染到网页上。浏览器内核决定了浏览器该如何显示网页内容以及页面的格式信息。不同的浏览器内核对网页的语法解释也不同,因此网页开发者需要在不同内核的浏览器中测试网页的渲染效果。
简单介绍一下五大主流浏览器。(按时间顺序)
1、IE浏览器:
IE是微软公司旗下浏览器,是目国内用户量最多的浏览器。IE诞生于1994年,当时微软为了对抗市场份额占据将近百分之九十的网景Netscape Navigator,于是在Windows中开发了自己的浏览器Internet Explorer,自此也引发了第一次浏览器大战。结果可想而知,微软大获全胜,网景不得不将自己卖给AOL公司。但实际上事情并没有结束,网景后来开发了风靡一时的Firefox火狐,至今Firefox也成为世界五大浏览器之一。
1996年,微软从Spyglass手里拿到Spyglass Mosaic的源代码和授权,开始开发自己的浏览器IE。后来,微软以IE和Windows捆绑的模式不断向市场扩展份额,使IE成为市场的绝对主流。现在装了Windows系统的电脑基本无法卸载IE。
2、Opera浏览器:
Opera是挪威Opera Software ASA公司旗下的浏览器。1995年,opera公司发布第一版Opera浏览器,使用自己研发的Presto内核。当时opera公司的开发团队不断完善Presto内核,使Opera浏览器一度成为顶级浏览器。直到2016年奇虎360和昆仑万维收购了Oprea浏览器,从此也丢弃了强大的Presto内核,改用当时Google开源的webkit内核。后来Opera浏览器跟随Google将浏览器内核改为Blink内核。自此Presto内核也淡出了互联网市场。
3、Safari浏览器:
第二次浏览器大战是从苹果公司发布Safari浏览器开始的。2003年,苹果公司在苹果手机上开发Safari浏览器,利用自己得天独厚的手机市场份额使Safari浏览器迅速成为世界主流浏览器。Safari是最早使用webkit内核的浏览器也是现在苹果默认的浏览器。
4、Firefox浏览器:
Firefox浏览器使Mozilla公司旗下浏览器,也是刚才提到的网景公司后来的浏览器。网景被收购后,网景人员创办了Mozilla基金会,这是一个非盈利组织,他们在2004年推出自己的浏览器Firefox。Firefox采用Gecko作为内核。Gecko是一个开源的项目,代码完全公开,因此受到很多人的青睐。Firefox的问世加快了第二次浏览器大战的开始。第二次浏览器大战与第一次二元鼎力的局面不同,这一次的特点就是百家争鸣,也自此打破了IE浏览器从98年网景被收购后独步浏览器市场的局面。
5、Chrome浏览器:
Chrome浏览器是google旗下的浏览器。Chrome浏览器至发布以来一直讲究简洁、快速、安全,所以Chrome浏览器到现在一直受人追捧。最开始Chrome采用webkit作为浏览器内核,直到2013年,google宣布不再使用苹果的webkit内核,开始使用webkit的分支内核Blink。

以上是五大浏览器的简介,接下来是四大内核。在介绍五大浏览器的同时也已经顺便介绍了四大内核。四大内核分别是:Trident(也称IE内核)、webkit、Blink、Gecko。五大浏览器采用的都是单内核,而随着浏览器的发展现在也出现了双内核。像360浏览器、QQ浏览器都是采用双内核。
作为前端开发,熟悉四大内核是非常有必要的。四大内核的解析不同使网页渲染效果更具多样化。下面总结一下各常用浏览器所使用的内核。
1、IE浏览器内核:Trident内核,也是俗称的IE内核;
2、Chrome浏览器内核:统称为Chromium内核或Chrome内核,以前是Webkit内核,现在是Blink内核;
3、Firefox浏览器内核:Gecko内核,俗称Firefox内核;
4、Safari浏览器内核:Webkit内核;
5、Opera浏览器内核:最初是自己的Presto内核,后来是Webkit,现在是Blink内核;
6、360浏览器、猎豹浏览器内核:IE+Chrome双内核;
7、搜狗、遨游、QQ浏览器内核:Trident(兼容模式)+Webkit(高速模式);
8、百度浏览器、世界之窗内核:IE内核;
9、2345浏览器内核:以前是IE内核,现在也是IE+Chrome双内核;
 


 

 

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

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

相关文章

实战 IE8 开发人员工具

今天整理我收藏的漫画的时候发现 风云3 少了两集(486、487),这对于收藏者来说基本是不可忍受的; 从风云一到三,应该一集也不能少的; 决定上网去找找,不过溜达一圈常去的分享论坛,由于…

前端学习(6):javascript简介

我们需要思考以下六个问题: 1、javaScript是什么? 2、javaScript的用途是什么? 3、javaScript和ECMAScript的关系是什么? 4、javaScript由哪几部分组成? 5、javaScript的执行原理是怎样的? 6、在页面…

前端学习(7):web的三大技术

HTML(5) 是一门标记型语言,主要由一些具备特殊含义的标签构成(建筑物结构) 所谓HTML是“超文本标记语言”的英文缩写。我们上网所看到网页,多数都是由HTML写成的。“超文本”是指页面内可以包含图片、链接,甚至音乐、…

scala的foreach和for

一句印象深刻的话,Alan Kay(Smalltalk发明者)说得一句话:“I’m not against types, but I dont know of any typesystems that arent a complete pain, so I still like dynamic typing”。 并不是静态类型不好,只是静…

前端学习(8):HTML的基本属性和结构

一、HTML文档结构 <!DOCTYPE html> <html lang"zh-CN"> <head> <meta charset"UTF-8"> <title>css样式优先级</title> </head> <body> </body> </html> <!DOCTYPE html>声明为HTML5文…

借助云开发轻松实现后台数据批量导出丨实战

小程序导出数据到excel表&#xff0c;借助云开发后台实现excel数据的保存 我们在开发小程序的过程中&#xff0c;可能会有这样的需求&#xff1a;如何将云数据库里的数据批量导出到excel表里&#xff1f; 这个需求可以用强大的云开发轻松实现&#xff01; 这里需要用到云函数&a…

Storm的ack机制在项目应用中的坑

正在学习storm的大兄弟们&#xff0c;我又来传道授业解惑了&#xff0c;是不是觉得自己会用ack了。好吧&#xff0c;那就让我开始啪啪打你们脸吧。 先说一下ACK机制&#xff1a; 为了保证数据能正确的被处理, 对于spout产生的每一个tuple, storm都会进行跟踪。 这里面涉及到ac…

云开发数据库VS传统数据库丨云开发101

云开发数据库与传统数据库的不同 在小程序云开发中&#xff0c;最核心的便是三大组件&#xff1a;数据库、云存储和云函数&#xff0c;从今天开始&#xff0c;我们将开始隔日更的专栏文章&#xff0c;云开发101&#xff0c;在第一周&#xff0c;我们将从最最核心的数据库开始说…

前端学习(10):HTML语义化

我理解的HTML语义化 经过查看别人博文中的一些描述&#xff0c;我将HTML的语义化总结为&#xff1a; 用最恰当的标签来标记内容。 该如何理解呢&#xff1f;比如需要加入一个标题&#xff0c;这个标题的字体比正文的要大写&#xff0c;还要加粗。能够实现这种效果的方法有很多…

博客中gitalk最新评论的获取 github api使用

博客中&#xff0c;对于网友的评论以及每篇文章的评论数还是很重要的。但是基于静态的页面想要存储动态的评论数据是比较难的&#xff0c;一般博客主题中都内置了评论插件&#xff0c;但是博客主题中对于最新评论的支持显示还是很少的&#xff0c;至少目前我是没怎么发现。博客…

前端学习(11):标题和段落

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>标题和段落</title> </head> <body><h1>我是歌谣</h1><h2>我是歌谣</h2><h3>我是歌谣</h3>&l…

Kafka文件存储机制

Kafka是什么 Kafka是最初由Linkedin公司开发&#xff0c;是一个分布式、分区的、多副本的、多订阅者&#xff0c;基于zookeeper协调的分布式日志系统(也可以当做MQ系统)&#xff0c;常见可以用于web/nginx日志、访问日志&#xff0c;消息服务等等&#xff0c;Linkedin于2010年贡…

云开发0基础训练营第二期热力来袭!

第二期云开发0基础训练营热力来袭&#xff01;课程升级、更佳体验、依旧免费&#xff01;每年的 “金九银十” 都是传说中的学习黄金期&#xff01;这期间在校的小伙伴面临开学季/求职季/考研季挑战&#xff0c;已经步入社会的也即将步入年终前的冲刺阶段。所以&#xff0c;这段…

前端学习(14):相对路径和绝对路径

目录结构 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv"X-UA-Compatible" conte…

discuz数据从godaddy主机中导出的mysql数据乱码变问号???的解决方法

从godaddy主机导出的mysql数据安装在本地电脑上发现原来的中文都变成了问号&#xff1f;godaddy主机中的数据库版本是5.0.67&#xff0c;charsetutf8 collationutf8_general_ci 而我的supesite的版本是gbk的&#xff0c;导出的数据也是 CREATE TABLE cdb_access (……) ENGINE…

jvm的新生代和老年代简介

新生代分为三个区域&#xff0c;一个Eden区和两个Survivor区&#xff0c;它们之间的比例为&#xff08;8&#xff1a;1&#xff1a;1&#xff09;&#xff0c;这个比例也是可以修改的。通常情况下&#xff0c;对象主要分配在新生代的Eden区上&#xff0c;少数情况下也可能会直接…

NIO核心框架介绍

NIO共引入了4个概念&#xff1a; - 缓存区&#xff1a;表示数据存放的容器&#xff0c;提供可读写的数据缓存区&#xff1b; - 字符集&#xff1a;用来对缓存数据进行解码和编码&#xff0c;在字节和Unicode字符之间转换&#xff1b; - 通道&#xff1a;用来接收或发送数据&…

前端学习(16):跳转链接小练习

点击图片实现跳转 目录结构 header.html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv&q…

云开发的数据库权限机制解读丨云开发101

在使用云开发进行开发时&#xff0c;数据库权限是一个让不少人困扰的部分&#xff0c;四种数据库权限&#xff0c;到底是什么意思&#xff1f;其各自的权限、应用场景都是什么&#xff1f;大多数人对于这个机制&#xff0c;还是模糊的。为了帮助大家进行更好的开发&#xff0c;…

Java中的NIO非阻塞编程

在JDK1.4以前&#xff0c;Java的IO操作集中在java.io这个包中&#xff0c;是基于流的阻塞API。对于大多数应用来说&#xff0c;这样的API使用很方便&#xff0c;然而&#xff0c;一些对性能要求较高的应用&#xff0c;尤其是服务端应用&#xff0c;往往需要一个更为有效的方式来…