【JS提升】渲染引擎、声明HTML、渲染模式

已于 2022-05-22 16:18:52 修改
阅读量341 收藏
点赞数
分类专栏： # JS提升 文章标签： js
于 2021-07-21 15:30:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42647547/article/details/118964765
版权

一、渲染引擎

（1）浏览器组成部分

  1. 用户界面：用户看到的浏览器的样子
  2. 浏览器引擎：让浏览器运行的程序接口集合，主要是查询和操作渲染引擎
  3. 渲染引擎：解析HTML/CSS，将解析的结果渲染到页面的程序
  4. 网路：进行网络请求的程序
  5. UI后端：绘制组合选择框及对话框等基本组件的程序
  6. JS解释器：解释执行JS代码的程序
  7. 数据存储：浏览器存储相关的程序 cookie/storage

（2）浏览器的组成部分

在这里插入图片描述

（3）渲染的概念

渲染

用一个特定的软件将模型(一个程序)转化为用户能看到的图像的过程

渲染引擎

内部具备一套绘制图像方法集合，渲染引擎可以让特定的方法执行把HTML/CSS代码解析成图像显示在浏览器窗口中

（4）页面渲染过程

在这里插入图片描述

在这里插入图片描述

二、声明HTML

（1）声明HTML

  1. DOCTYPE（大小写不敏感）
  2. 写DOCTYPE：标准模式
  3. 不写DOCTYPE：怪异/混杂模式
  4. console.log(document.compatMod); 查看是哪种模式
  5. CSS1Compat（标准模式）与BackCompat（怪异模式）

三、渲染模式

（1）IE6以前的浏览器兼容性

在这里插入图片描述

  1. 百分比高度被准 确 应用
  2. 内联元素设置宽高影响尺寸
  3. table单元格中的图片的vertial-align默认值为bottom
  4. 某些元素的字体样式不继承body的设置，特别是font-size
  5. overflow:hidden在某些情况下不生效

（2）IE6开始的浏览器兼容性

问1：在各浏览器都有自己的渲染标准的背景下，造成了网页开发设计的发展迟缓，甚至阻碍了整个互联网技术的发展。

【解决方案】标准渲染模式（标准模式）的诞生（W3C标准解析渲染）

问2：之前建设的网站不支持标准模式

【解决方案】保留以前解析渲染的标准（混杂/怪异模式 -> 浏览器向后兼容）

（3）三种渲染模式

HTML5

<!DOCTYPE html>

HTML4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

（4）文档类型定义

  1. DTD：文档类型定义（Document Type Definition），它是一个标准
  2. 种类：严格版本（Strict）、过渡版本（Transitional）、框架版本（Frameset）
  3. Strict DTD：文档结构与表现形式实现了更高的分离，页面的外观采用CSS来控制
  4. Transitional DTD：包含了HTML4.01版本的全部标记，从HTML的使用过度到XHTML
  5. Frameset DTD：使用<frameset>以框架的形式将网页分为多个文档

标准

标准就是在进行解析的时候，可能不会有标签特性，或者给你解析成其他东西，或者不给你解析，或者直接容错进行兼容性样式设置（不是所有的兼容都会摒弃老的标准）

小管打天下
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML模板渲染引擎Hogan
Edison.困的博客
08-25 736
Hogan的安装和使用 通过npm安装hogan: npm install hogan.js --save-dev CommonJs下的使用方式： // 引入hogan var hogan = require('hogan.js'); // 渲染所需模板 var template = 'Hey! I am {{name}}!'; // 渲染所需数据 var
如何用php直接渲染页面,总结浏览器渲染页面的方法
weixin_33212263的博客
03-10 1096
转载自web fundamental构建对象模型浏览器渲染页面前需要先构建 DOM 和 CSSOM 树。因此，我们需要确保尽快将 HTML 和 CSS 都提供给浏览器。字节 → 字符 → 标记 → 节点 → 对象模型。HTML 标记转换成文档对象模型 (DOM)；CSS 标记转换成 CSS 对象模型 (CSSOM)。DOM 和 CSSOM 是独立的数据结构。Chrome DevTools Time...
html 渲染引擎,浏览器之渲染引擎(WebKit)
weixin_30242741的博客
06-08 665
前言一探浏览器幕后的《三俩事》上一篇的介绍让大家对浏览器的组成有了个模糊的认识:浏览器是什么?浏览器(chromium)基本架构浏览器主要组件浏览器内核是什么?JavaScript(js)引擎渲染引擎今天呢做渲染模块(WebKit)展开学习讨论。首先作为顺序介绍来说。我应该具体介绍实现一个浏览器应该包含哪些内容(介绍一下chromium实现包含了哪些内容)。但是考虑在前端话题的介绍。只做简单的列举...
浏览器是如何渲染页面的？（看这一篇就够了！！！！）
最新发布
2303_77986104的博客
07-19 1080
只有真正了解到浏览器渲染网页的每个步骤机制，才能在开发的过程中对每个步骤进行优化。
html 渲染引擎,浏览器渲染引擎
weixin_39714113的博客
06-08 561
浏览器的内核中主要分为渲染引擎和 javascript 引擎，本篇主要围绕渲染引擎介绍一下浏览器的工作原理。渲染引擎简介本文所讨论的浏览器——Firefox、Chrome和Safari是基于两种渲染引擎构建的，Firefox使用Geoko——Mozilla自主研发的渲染引擎，Safari和Chrome都使用webkit。渲染主流程渲染引擎首先通过网络获得所请求文档的内容，通常以8K分块的方式完成。...
推荐轻量级HTML渲染引擎——litehtml
gitblog_00037的博客
05-13 545
推荐轻量级HTML渲染引擎——litehtml 项目地址:https://gitcode.com/litehtml/litehtml 在数字化时代，HTML和CSS已成为展示丰富文本内容的标准方式。而litehtml正是一个专为简单HTML显示设计的轻量级渲染引擎，它支持CSS2和CSS3，并且具备高度可定制性。 1. 项目介绍 litehtml是一个不依赖任何图像或字体库的HTML解析器，仅负责...
各种浏览器的页面渲染引擎简介
05-16 436
<br />经常听到“XX浏览器搭载了最新版页面渲染引擎，速度大幅提升”之类的报道，以前只知道页面渲染引擎是浏览器的灵魂，IE、Firefox、Safari、Opera浏览器的渲染引擎各不相同。今天从《秦爱网志》ZT一篇介绍各种浏览器页面渲染引擎的博文，很好很全面的那种<br /><br />网页浏览器的页面渲染引擎负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的
深入理解指定IE浏览器渲染方式
09-22
- 设置为`edge`时，IE浏览器会使用最高级别的可用模式来显示内容，也就是最新的IE版本的渲染模式，这通常用于保证网站能够使用最新的技术特性。 - 对于`IE=EmulateIE7`，这种模式允许IE使用DOCTYPE声明来决定是使用...
浅谈React 服务器端渲染的使用
10-18
在传统的客户端渲染模式中，服务器仅仅提供 HTML 文件，而像数据绑定、事件处理这样的应用逻辑则是在浏览器中完成的。这种方式可能会导致用户面对一个空白页面直到所有脚本下载并执行完毕。相比之下，服务器端渲染...
前端面试题，包含HTML，css，js
11-07
3. **Quirks模式与Standards模式**：Quirks模式是浏览器按照旧的、非标准的方式渲染页面，而Standards模式遵循W3C的HTML和CSS标准，提供更一致的渲染效果。 4. **div+css布局与table布局**：div+css布局更灵活，...
web 静态网页设计与制作-基于HTML+CSS+JS 实现旅游摄影网站.docx
02-27
DOCTYPE html>`确保浏览器以标准模式渲染页面；`<html>`标签用于定义整个HTML文档，而`lang`属性则指定了文档的语言为英语（"en"）。接下来是`<head>`部分，包含了文档的元数据如字符集、视口设置等，这些对于移动端...
2DHTML5渲染引擎CutJS.zip
07-16
CutJS 是一个轻量级的、快速的、可交互的 2D HTML5 渲染引擎，用于跨平台的游戏开发。可用来开发 Web 游戏、iOS 和 Android 等游戏。CutJS 是一个开源的 Canvas 库。 示例代码： // Create new app Cut(function(root, container) {   // Subscribe to Cut.Mouse   Cut.Mouse(root, container);   // Set view box   root.viewbox(500, 300);   // Create an image node   Cut.image("base:box").appendTo(root)     // on mouse click on this node     .on(Cut.Mouse.CLICK, function(ev, point) {       // Tween scale values of this node       this.tween().clear().pin({         scaleX : Math.random()   0.5,         scaleY : Math.random()   0.5       });       return true;     }); }); // Register an image texture Cut.addTexture({   name : "base",   imagePath : "base.png",   cutouts : [     { name : "box", x : 0, y : 0, width : 30, height : 30 }   ] }); 标签：CutJS
最小的html渲染引擎,一个很好的Html渲染引擎
weixin_34174789的博客
05-31 176
您可能想要检查’ASP.NET MVC’.> Visual Studio 2010实际上是一个很棒的Web开发工具.我对javascript支持感到特别高兴.到目前为止,我在所有编辑器中都没有看到更好的(这是最着名的免费编辑器).它支持所有使用的语言的自动完成.它还警告Html验证错误.它还有一个免费的快递版本.>您可以使用选择服务器端语言. vb.net或C#.你可以选择更具可读性的...
[HTML]浏览器渲染模式
kungfu_panda的专栏
09-15 657
浏览器渲染模式分为2种,一种是 怪异模式[Quirksmode] 和 标准模式 [Standars mode]。   由于历史的原因，各个浏览器在对页面的渲染上存在差异，甚至同一浏览器在不同版本中，对页面的渲染也不同。在W3C标准出台以前，浏览器在对页面的渲染上没有统一规范，产生了差异(Quirks mode或者称为Compatibility Mode)；由于W3C标准的推出，浏览器渲染页面有
页面渲染
小七的博客
10-16 450
1）浏览器会解析三个东西： 一个是HTML/SVG/XHTML，事实上，Webkit有三个C++的类对应这三类文档。解析这三种文件会产生一个DOM Tree。 CSS，解析CSS会产生CSS规则树。 Javascript，脚本，主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree. 2）解析完成后，浏览器引擎会通过DOM Tree 和 CS
最小的html渲染引擎,关于前端:浏览器之渲染引擎WebKit
weixin_32459553的博客
05-31 255
前言一探浏览器幕后的《三俩事》上一篇的介绍让大家对浏览器的组成有了个含糊的意识:浏览器是什么?浏览器(chromium)根本架构浏览器次要组件浏览器内核是什么?JavaScript(js)引擎渲染引擎明天呢做渲染模块(WebKit)开展学习探讨。首先作为程序介绍来说。我应该具体介绍实现一个浏览器应该蕴含哪些内容(介绍一下chromium实现蕴含了哪些内容)。然而思考在前端话题的介绍。只做简略的列举...
网页页面渲染模式
panying0903的专栏
12-12 1715
在国内有一个比较特别的现象，很多网站对浏览器的兼容性比较差，特别是一些网上银行、公共服务网站等，虽然现在IE浏览器已经推出了IE11版本，但是这些网站目前只支持IE8及以下版本。所以目前在国内使用IE6\IE7\IE8等旧版浏览器的用户占比还比较多。另一外方便，有些比较现代的网站，采用了很多HTML5、CSS3等最新的网络标准，IE8这些老旧的浏览器是无法支持的，而其他非IE浏览器对这些标准支持程
html渲染引擎开发,数据可视化初探-从零开始开发一个渲染引擎概述
weixin_42608299的博客
06-09 269
项目地址在这里，欢迎fork和star简介：在之前而有的生过脑单近需一相涯前网选近需一相涯的项目中用过一些图表，比如Echart、chart.js等。遂对其比较感兴趣，恰好最近在看canvas相关的知识，故尝试写了一下可视化的渲染引擎。经过断断续续的开发，目前已实现了大部分基础图形览需下有都视事房站有行移域图于带近器求了点差图态子的等定动上标的的近器求了点差图态子的等定动上标的的近器求了点差图态子...
Html模板渲染引擎Hogan
weixin_34159110的博客
12-08 177
Github：https://github.com/twitter/hogan.js 最简单的使用教程：http://www.imooc.com/article/18493
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值