嘿,这里有一份网站建设的知识,对web标准的理解赶快收好,今天把这篇干货分享出来,现在就来和小编一起来看看吧。
浏览器的主要功能是将用户选择的web资源呈现出来,它需要从服务器请求资源,并将其显示在浏览器窗口中,资源的格式通常是HTML,也包括PDF、image及其他格式。用户用URI(Uniform Resource Identifier统一资源标识符)来指定所请求资源的位置,关于URI的部分在之后的HTTP协议这部分再进行详细的研究。
一、对web标准的理解:
1. web标准是一系列标准的集合,主要由三部分组成:
结构(Structure)——HTML
表现(Presentation)——CSS
行为(Behavior)——JavaScript(DOM+ES)
对于结构要求:标签小写且闭合、不允许随意嵌套
对于表现和行为要求:
外链CSS与JS,结构表现行为分为三块符合W3C规范;
id和class属性命名规范,减少维护难度,易改版
2. web标准的优点:
易维护:只修改CSS就能改变整站的样式
响应快:HTML文档体积更小
可访问性好:语义化HTML 编写的网页,更易被屏幕阅读器识别
兼容性:不同样式表可以让网页在不同的设备上呈现不同样式
SEO:语义化HTML更易被搜索引擎解析,提升排名
二、浏览器内核:
1. 浏览器内核——渲染引擎+JS引擎,取得网页内容、整理讯息、计算网页显示方式输出至显示器;
执行JS语言实现网页动态效果;不同浏览器内核对网页编写语法的解释不同
2. 五(四)大内核:
Trident:IE、腾讯、遨游、360、猎豹、世界之窗、2345 存在很多兼容性问题
Gecko:Firefox 最大优势跨平台 开源,开放程度高
Webkit:Safari、早期Chrome 、360和搜狗的高速模式 开源,相对安全
Blink:现在Chrome(28—)、Opera(15—)内核 2013年4月发布
三、浏览器的主要构成
1.用户界面 - 包括地址栏、后退、前进按钮、书签目录等,也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分
2.浏览器引擎 - 用来查询及操作渲染引擎的接口。
3.渲染引擎 - 显示请求的内容,如果请求内容为html,他负责解析html及css,并将解析后的结果显示出来。
4.网络 - 用来完成网络调用,例如Http请求,它具有平台无关的接口,可以在不同平台上工作。
5.UI后端 - 用来绘制类似组合选择框对话框等基本组件,具有不特定某个平台的通用接口,底层使用操作系统的用户接口。
6.JS解释器 - 用来解释执行JS代码
7.数据存储 - 属于持久层,浏览器需要在硬盘中保存类似cookie的各种数据,html5定义了web database技术,这是一种轻量级完整的客户端存储技术。
四、浏览器渲染原理
基本原理展示图
1.流程:JS > style > layout > paint > composite
JS:实现动画效果与DOM元素操作
Style(计算样式):确定每个DOM元素应该用什么CSS规则
Layout(布局):计算每个DOM元素大小位置;reflow(回流) web页面元素是相对的,其中任意一元素位置发生变化,会联动其他元素发生变化
Paint(绘制):绘制DOM元素的文字、颜色、图像、边框和阴影
Composite(渲染层合并):合并图层显示屏幕
2.优化渲染性能
优化JS执行效率:避免使用setTimeout和setInterval尽量使用requestAnimationFrame
耗时长的JS代码放到Web Workers中做
降低样式的计算范围和复杂度:尽量保持CLASS简短
避免大规模复杂布局:使用Flexbox替代老布局
简化绘制的复杂度、减少绘制区域
本文地址:网站建设教程频道 https://www.dayku.cn/jiaocheng/3243.html,武汉易企推建站公司提供一站式网站制作开发服务:武汉网站建设、网站开发、高端网站设计制作、手机网站开发,微信小程序开发等建站服务,制作周期短,价格实惠,效果满意;以及全网营销、网站优化服务、百科词条创建修改、新媒体引流、公司负面公关处理等