专业IT网络知识平台,分享IT百科知识、生活百科知识解答!

易企推科技
易企推科技

网站建设中对web标准的理解及浏览器知识

来源:小易整编  作者:小易  发布时间:2022-05-19 04:24
摘要:嘿,这里有一份网站建设的知识,对web标准的理解赶快收好,今天把这篇干货分享出来,现在就来和小编一起来看看吧。 浏览器的主要功能是将用户选择的web资源呈现出来,它需要从服务器请求资源,并将其显示在浏览器窗口中,资源的格式通常是HTML,也包括PDF、i...

嘿,这里有一份网站建设的知识,对web标准的理解赶快收好,今天把这篇干货分享出来,现在就来和小编一起来看看吧。

浏览器的主要功能是将用户选择的web资源呈现出来,它需要从服务器请求资源,并将其显示在浏览器窗口中,资源的格式通常是HTML,也包括PDF、image及其他格式。用户用URI(Uniform Resource Identifier统一资源标识符)来指定所请求资源的位置,关于URI的部分在之后的HTTP协议这部分再进行详细的研究。

一、对web标准的理解:

网站建设中对web标准的理解及浏览器知识

1. web标准是一系列标准的集合,主要由三部分组成:

结构(Structure)——HTML

表现(Presentation)——CSS

行为(Behavior)——JavaScript(DOM+ES)

对于结构要求:标签小写且闭合、不允许随意嵌套

对于表现和行为要求:

外链CSS与JS,结构表现行为分为三块符合W3C规范;

id和class属性命名规范,减少维护难度,易改版

网站建设中对web标准的理解及浏览器知识

2. web标准的优点:

易维护:只修改CSS就能改变整站的样式

响应快:HTML文档体积更小

可访问性好:语义化HTML 编写的网页,更易被屏幕阅读器识别

兼容性:不同样式表可以让网页在不同的设备上呈现不同样式

SEO:语义化HTML更易被搜索引擎解析,提升排名

二、浏览器内核:

1. 浏览器内核——渲染引擎+JS引擎,取得网页内容、整理讯息、计算网页显示方式输出至显示器;

执行JS语言实现网页动态效果;不同浏览器内核对网页编写语法的解释不同

网站建设中对web标准的理解及浏览器知识

2. 五(四)大内核:

Trident:IE、腾讯、遨游、360、猎豹、世界之窗、2345 存在很多兼容性问题

Gecko:Firefox 最大优势跨平台 开源,开放程度高

Webkit:Safari、早期Chrome 、360和搜狗的高速模式 开源,相对安全

Blink:现在Chrome(28—)、Opera(15—)内核 2013年4月发布

网站建设中对web标准的理解及浏览器知识

​​​​​​​

三、浏览器的主要构成

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

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

3.渲染引擎 - 显示请求的内容,如果请求内容为html,他负责解析html及css,并将解析后的结果显示出来。

网站建设中对web标准的理解及浏览器知识

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

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

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

网站建设中对web标准的理解及浏览器知识

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

四、浏览器渲染原理

基本原理展示图

网站建设中对web标准的理解及浏览器知识

1.流程:JS > style > layout > paint > composite

JS:实现动画效果与DOM元素操作

Style(计算样式):确定每个DOM元素应该用什么CSS规则

Layout(布局):计算每个DOM元素大小位置;reflow(回流) web页面元素是相对的,其中任意一元素位置发生变化,会联动其他元素发生变化

Paint(绘制):绘制DOM元素的文字、颜色、图像、边框和阴影

Composite(渲染层合并):合并图层显示屏幕

2.优化渲染性能

网站建设中对web标准的理解及浏览器知识

优化JS执行效率:避免使用setTimeoutsetInterval尽量使用requestAnimationFrame

耗时长的JS代码放到Web Workers中做

降低样式的计算范围和复杂度:尽量保持CLASS简短

避免大规模复杂布局:使用Flexbox替代老布局

简化绘制的复杂度、减少绘制区域



本文地址:营销网站建设频道 https://www.hkm168.com/web-yxwz/2243.html,易企推百科一个免费的知识分享平台,本站部分文章来网络分享,本着互联网分享的精神,如有涉及到您的权益,请联系我们处理,谢谢!


营销网站建设
小编:小易整编
相关文章相关阅读
  • c语言的输入函数有哪些

    c语言的输入函数有哪些

    c语言的输入函数有:1、scanf()函数、从标准输入stdin读取格式化输入;2、getchar()函数,从标准输入stdin获取一个字符;3、gets()函数,从标准输入stdin读取一行;4、getch()函数,从stdin流中读取字...

  • 奇异值分解(SVD)简介及其在图片压缩中的示例

    奇异值分解(SVD)简介及其在图片压缩中的示例

    奇异值分解(SVD)是一种用于矩阵分解的方法。它将一个矩阵分解为三个矩阵的乘积,分别是左奇异向量矩阵、右奇异向量矩阵和奇异值矩阵。SVD在数据降维、信号处理、推荐系统等领域广泛应用。通过SVD,我们可以将高维数据降低到低维空间,从而提取出数...

  • 用U盘轻松实现一键重装系统的小白装机教程

    用U盘轻松实现一键重装系统的小白装机教程

    在现代社会,电脑已经成为人们生活中不可或缺的工具。然而,由于各种原因,我们有时候需要重装电脑系统来解决一些问题或提升性能。但是,对于一些小白用户来说,重装系统可能是一项困难的任务。因此,本文将介绍一款小白一键重装系统的u盘装机教程,帮助小白...

  • 因特网能提供的最基本服务有哪些

    因特网能提供的最基本服务有哪些

    因特网能提供的最基本服务有:1、www服务;2、电子邮件e-mail服务;3、远程登录telnet服务;4、文件传输ftp服务;5、usenet网络新闻组服务;6、电子公告牌服务。本教程操作环境:windows7系统、DellG3电脑。因...

  • 某台微机安装的是64位操作系统中,64位指的是什么

    某台微机安装的是64位操作系统中,64位指的是什么

    某台微机安装的是64位操作系统中,64位指的是cpu的字长,即cpu每次能处理64位二进制数据。字长是cpu的主要技术指标之一,指的是cpu一次能并行处理的二进制位数,字长总是8的整数倍,通常pc机的字长为32位,64位。本教程操作环境:w...

  • 总结CreateJS的详细介绍

    总结CreateJS的详细介绍

    CreateJS库是一款HTML5游戏开发的引擎,是一套可以构建丰富交互体验的HTML5游戏的开源工具包,旨在降低HTML5项目的开发难度和成本,让开发者以熟悉的方式打造更具现代感的网络交互体验。掌握了CreateJS可以更方便的完成HTM...

  • 修复:在 Xbox 应用上的 Halo Infinite(Campaign)安装错误代

    修复:在 Xbox 应用上的 Halo Infinite(Campaign)安装错误代码 0X80070032、0X80070424 或 0X80070005

    haloinfinite(campaign)是一款第一人称射击视频游戏,于2021年11月推出,可供单人和多用户使用。该游戏是halo系列的延续,适用于windows、xboxone和xbox系列的用户x|s。最近...

  • 有没有录制电脑屏幕的方法

    有没有录制电脑屏幕的方法

    电脑屏幕有录制的方法吗有两个方法一是用win10电脑自带的录屏软件来录,打游戏的时候按一下【win+g】就行了二是用其他的录制软件来录制,比如“迅捷屏幕录像工具”,操作方法如下:1、首先在电脑上将这个工具下载下来。下载完成后打开工具,主页...

  • 周排行
  • 月排行
  • 年排行