浏览器加载和渲染html的顺序,Div和Table的区别

简介:



浏览器加载和渲染html的顺序

http://my.oschina.net/ydsakyclguozi/blog/209730


Div和Table的区别

http://www.cnblogs.com/lovebear/archive/2012/04/18/2456081.html



摘要:

div 和 table 的差异不是速度,而是加载方式,速度只能是指网络速度,如果速度足够快,是没有差异的:

div 的加载方式是即读即加载,遇到 <div> 没有遇到 </div> 的时候一样加载 div 中的内容,读多少加载多少;table 的加载方式是完成后加载,遇到 <table> 后,在读到 </table> 之前,table 中的内容不加载,或者传输中断了(document.onload()事件)的时候加载,这是因为TABLE牵涉到多行多列问题,所以只有当TABLE所有内容加载完毕,IE才知道该怎么显示


如果页面首尾加 table ,那么必须等整个页面读完了才加载

如果页面首尾加 div ,无任何影响




如何加快HTML页面加载速度



恩,能不用Table就尽量不用,最好都用Ul li处理。除非复杂的表格数据。





      本文转自许琴 51CTO博客,原文链接:
http://blog.51cto.com/xuqin/1384508
,如需转载请自行联系原作者


相关文章
|
11天前
|
移动开发 前端开发 HTML5
Twaver-HTML5基础学习(20)数据容器(3)_数据的批量加载(节省性能方法)
本文介绍了Twaver HTML5中数据的批量加载方法,通过使用`box.startBatch()`可以在大量数据加载时提高性能。文章通过示例代码展示了如何在React组件中使用批量加载功能,以减少界面重绘次数并提升效率。
26 1
Twaver-HTML5基础学习(20)数据容器(3)_数据的批量加载(节省性能方法)
|
6天前
|
存储 JavaScript 前端开发
用HTML DOM实现有条件地渲染网页元素(下)
用HTML DOM实现有条件地渲染网页元素(下)
|
6天前
|
JavaScript 前端开发 容器
用HTML DOM实现有条件地渲染网页元素(上)
用HTML DOM实现有条件地渲染网页元素(上)
|
11天前
|
移动开发 前端开发 JavaScript
Twaver-HTML5基础学习(10)嵌入Table
本文介绍了如何在Twaver HTML5中嵌入表格(Table),并设置表格的列(Column)和样式。通过示例代码展示了如何在React组件中创建表格并添加数据,以及如何通过样式设置表格元素的颜色。
22 2
Twaver-HTML5基础学习(10)嵌入Table
|
15天前
|
前端开发
HTML 颜色的不用写法和最终显示效果的区别
HTML 中色彩的指定有多种方式,包括十六进制(如 `#FF5733`)、RGB(如 `rgb(255, 87, 51)`)、RGBA(如 `rgba(255, 87, 51, 0.5)`)、HSL(如 `hsl(14, 100%, 60%)`)、HSLA(如 `hsla(14, 100%, 60%, 0.5)`)以及直接使用颜色名称(如 `orange`)。这些方法虽然最终显示效果可能相同,但在使用场景和灵活性上各具优势。十六进制和 RGB 更常用,HSL 则便于调整颜色属性,而 RGBA 和 HSLA 增加了透明度选项,颜色名称则提高了代码的可读性。
WK
|
9天前
|
存储 移动开发 前端开发
HTML5和CSS5有什么区别
HTML5和CSS5在网页设计中扮演不同角色。HTML5是超文本标记语言的第五版,通过新特性如实时更新、跨平台运行及更好的安全性等,定义网页内容和结构。尽管常说CSS5,实际最新的CSS版本包含多个模块如CSS Grid和Flexbox,主要用于控制网页布局和样式,提供强大的选择器、动画支持和响应式设计,与HTML5相辅相成,共同构建现代网页的基础架构。
WK
25 3
|
10天前
|
缓存 前端开发 JavaScript
html最大限度提高加载速度
要提高HTML页面的加载速度,可以采用多种策略:优化HTML结构,精简标签和合并文件;使用异步加载资源,如添加`async`或`defer`属性;压缩文件,利用HTMLMinifier减小文件大小;优化图片,采用合适格式和尺寸;利用CDN托管静态资源;设置HTTP缓存头以利用浏览器缓存;减少HTTP请求,合并文件;启用Gzip压缩;优化服务器响应时间;使用优雅降级和渐进增强确保兼容性。综合应用这些方法能显著提升加载速度和用户体验。
|
9天前
|
移动开发 数据可视化 HTML5
Twaver-HTML5基础学习(40)表格可视化视图组件(Table)
本文介绍了如何在Twaver-HTML5中使用表格可视化视图组件(Table),包括创建表格、定义列对象、实现数据绑定和排序,以及处理表格事件和获取表格数据的方法。
22 1
|
26天前
|
前端开发 JavaScript
html中id和class的相同和不同之处及用法的规范与区别
在HTML中,`id`和`class`都用于标识和选择元素,但存在一些关键差异。
|
2月前
|
移动开发 前端开发 JavaScript
下一篇
无影云桌面