本文详细介绍了HTML渲染机制，包括语义化、BFC、重绘与回流的概念，以及如何通过优化CSS和JavaScript的使用来减少回流和重绘。同时，提供了HTML页面加载速度提升的技巧，如减少HTTP请求、利用缓存和优化加载顺序。此外，还探讨了HTML头部meta标签的作用，如字符编码、浏览器兼容性和SEO优化。
meta标签配置
怎么理解语义化
对人：
便于团队的开发和维护。
在没有加载 CSS 的情况下也能呈现较好的内容结构与代码结构，易于阅读。
对机器：
有利于 SEO ，搜索引擎的爬虫依赖于标签来确定上下文和各个关键字的权重。
其他设备的解析（如屏幕阅读器、盲人阅读器等），利于无障碍阅读，提高可访问性。
BFC是什么?怎么触发?
1>,BFC全称叫做（Block Formatting Context）中文叫块级格式化上下文，是一个网页的概念。
2>,浮动元素：float 除 none 以外的值。
绝对定位元素：position (absolute、fixed)。
display 为 inline-block、table-cells、flex。
overflow 除了 visible 以外的值 (hidden、auto、scroll)。
标准的html结构
<!DOCTYPE html>
<html>
<head>
<!-- 国际统一字符编码集一定要写在最前面 -->
<meta charset="UTF-8">
<!-- 解决浏览器兼容，以webkit内核解析，ie 以最高内核解析或以谷歌内核 -->
<meta name="renderer" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>宇宙界</title>
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<meta name="keywords" content="宇宙界"/>
<meta name="description" content="宇宙界"/>
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"/>
</head>
<body>
<div id="root"></div>
</body>
</html>
标准的h5
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>宇宙界</title>
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<meta name="keywords" content="宇宙界"/>
<meta name="description" content="宇宙界"/>
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"/>
<!-- m 站 start -->
<meta name="viewport" content="initial-scale=1,width=device-width,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="address=no">
<!-- m 站 end -->
</head>
<body class="body">
<div id="root"></div>
</body>
</html>
重绘与回流
- 重绘: 当元素属性发生改变且不影响布局时（背景颜色、透明度、字体样式等），产生重绘，相当于 不刷新页面，动态更新内容。
- 回流： 当元素属性发生改变且影响布局时（宽度、高度、内外边距等），产生回流，相当于 刷新页面。
重绘不一定引起回流，回流必将引起重绘
如何减少回流和重绘？
- 使用 transform 替代 top
- 使用 visibility 替换 display: none ，因为前者只会引起重绘，后者会引发回流（改变了布局）
- 不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局
- 动画实现的速度的选择，动画速度越快，回流次数越多，也可以选择使用requestAnimationFrame
- CSS 选择符从右往左匹配查找，避免节点层级过多
- 将频繁重绘或者回流的节点设置为图层，图层能够阻止该节点的渲染行为影响别的节点。比如对于 video 标签来说，浏览器会自动将该节点变为图层。
HTML渲染机制
- 用户输入url请求服务器，服务器返回html文件
- 浏览器开始载入html代码，发现标签内有一个标签引用外部CSS文件
- 浏览器又发出CSS文件的请求，服务器返回这个CSS文件。
- 浏览器继续载入html中部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了。
- 浏览器在代码中发现一个标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码。
- 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码。
- 浏览器发现了一个包含一行Javascript代码的
如何提高HTML页面加载速度
1、页面减肥：
a. 页面的肥瘦是影响加载速度最重要的因素。
b. 删除不必要的空格、注释。
c. 将inline的script和css移到外部文件。
d. 可以使用HTML Tidy来给HTML减肥，还可以使用一些压缩工具来给JavaScript减肥。
2、.减少文件数量：
a. 减少页面上引用的文件数量可以减少HTTP连接数。
b. 许多JavaScript、CSS文件可以合并最好合并。
3、减少域名查询：
a. DNS查询和解析域名也是消耗时间的，所以要减少对外部JavaScript、CSS、图片等资源的引用，不同域名的使用越少越好。
4、缓存重用数据：
a. 对重复使用的数据进行缓存。
5、优化页面元素加载顺序：
a. 首先加载页面最初显示的内容和与之相关的JavaScript和CSS，然后加载HTML相关的东西，像什么不是最初显示相关的图片、flash、视频等很肥的资源就最后加载。
6、减少inline JavaScript的数量：
a. 浏览器parser会假设inline JavaScript会改变页面结构，所以使用inline JavaScript开销较大。
b. 不要使用document.write()这种输出内容的方法，使用现代W3C DOM方法来为现代浏览器处理页面内容。
7、使用现代CSS和合法的标签：
a. 使用现代CSS来减少标签和图像，例如使用现代CSS+文字完全可以替代一些只有文字的图片。
b. 使用合法的标签避免浏览器解析HTML时做“error correction”等操作，还可以被HTML Tidy来给HTML减肥。
8、 Chunk your content：
a. 不要使用嵌套table，而使用非嵌套table或者div。将基于大块嵌套的table的layout分解成多个小table，这样就不需要等到整个页面（或大table）内容全部加载完才显示。
9、指定图像和table的大小：
a. 如果浏览器可以立即决定图像或table的大小，那么它就可以马上显示页面而不要重新做一些布局安排的工作。
b. 这不仅加快了页面的显示，也预防了页面完成加载后布局的一些不当的改变。
c. image使用height和width。
扫一扫
3022
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
