1.浏览器加载和渲染html的顺序
1、IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。
2、在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完)
3、如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载。
4、并且在下载后进行解析,解析过程中,停止页面所有往下元素的下载。阻塞加载
5、样式表在下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以前已经渲染的)重新进行渲染。
6、JS、CSS中如有重定义,后定义函数将覆盖前定义函数
2. JS的加载
2.1 不能并行下载和解析(阻塞下载)
2.2 当引用了JS的时候,浏览器发送1个js request就会一直等待该request的返回。因为浏览器需要1个稳定的DOM树结构,而JS中很有可能有代码直接改变了DOM树结构,比如使用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转,浏览器为了防止出现JS修改DOM树,需要重新构建DOM树的情况,所以 就会阻塞其他的下载和呈现。
3.如何加快HTML页面加载速度
1,页面减肥
页面的肥瘦是影响加载速度最重要的因素
删除不必要的空格、注释
将inline的script和css移到外部文件
可以使用HTML Tidy来给HTML减肥,还可以使用一些压缩工具来给JavaScript减肥
2,减少文件数量
减少页面上引用的文件数量可以减少HTTP连接数
许多JavaScript、CSS文件可以合并最好合并
3,减少域名查询
DNS查询和解析域名也是消耗时间的,所以要减少对外部JavaScript、CSS、图片等资源的引用,不同域名的使用越少越好
4,缓存重用数据
使用缓存
5,优化页面素加载顺序
首先加载页面最初显示的内容和与之相关的JavaScript和CSS
然后加载DHTML相关的东西
像什么不是最初显示相关的图片、flash、视频等很肥的资源就最后加载
6,减少inline JavaScript的数量
浏览器parser会假设inline JavaScript会改变页面结构,所以使用inline JavaScript开销较大
(比如我们在一个HTML对象生成过程中,使用了inline方式定义的函数,那么这个元素生成几次,那个函数也就要同时生成几次。)
不要使用document.write()这种输出内容的方法,使用现代W3C DOM方法来为现代浏览器处理页面内容
7,使用现代CSS和合法的标签
使用现代CSS来减少标签和图像,例如使用现代CSS+文字完全可以替代一些只有文字的图片
使用合法的标签避免浏览器解析HTML时做“error correction”等操作,还可以被HTML Tidy来给HTML减肥
8,Chunk your content
不要使用嵌套tables
将基于大块嵌套的tables的layout分解成小tables,这样显示时不用加载整个页面(或大table)的内容
9,指定图像和tables的大小
如果浏览器可以立即决定图像或tables的大小,那么它就可以马上显示页面而不要重新做一些布局安排的工作
这不仅加快了页面的显示,也预防了页面完成加载后布局的一些不当的改变
image使用height和width
table使用table-layout: fixed并使用col和colgroup标签指定columns的width
10,根据用户浏览器明智的选择策略
IE、Firefox、Safari等等等等
11,页面结构的例子
· HTML
· HEAD
· LINK …
CSS files required for page appearance. Minimize the number of files for performance while keeping unrelated CSS in separate files for maintenance.
· SCRIPT. …
JavaScript. files for functions required during the loading of the page, but not any DHTML that can only run after page loads.
Minimize the number of files for performance while keeping unrelated JavaScript. in separate files for maintenance.
· BODY
· User visible page content in small chunks (tables / divs) that can be displayed without waiting for the full page to download.
· SCRIPT. …
Any scripts which will be used to perform. DHTML. DHTML script. typically can only run after the page has completely loaded and all necessary objects have been initialized. There is no need to load these scripts before the page content. That only slows down
the initial appearance of the page load.
Minimize the number of files for performance while keeping unrelated JavaScript. in separate files for maintenance.
If any images are used for rollover effects, you should preload them here after the page content has downloaded.
4.HTML页面加载和解析流程
1.用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件;
2.浏览器开始载入html代码,发现<head>标签内有一个<link>标签引用外部CSS文件;
3.浏览器又发出CSS文件的请求,服务器返回这个CSS文件;
4.浏览器继续载入html中<body>部分的代码,并且CSS文件已经拿到手了,可以开始渲染页面了;
5.浏览器在代码中发现一个<img>标签引用了一张图片,向服务器发出请求。此时浏览器不会等到图片下载完,而是继续渲染后面的代码;
6.服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排布,因此浏览器需要回过头来重新渲染这部分代码;
7.浏览器发现了一个包含一行Javascript代码的<script>标签,赶快运行它;
8.Javascript脚本执行了这条语句,它命令浏览器隐藏掉代码中的某个<div> (style.display=”none”)。突然少了这么一个元素,浏览器不得不重新渲染这部分代码;
9.终于等到了</html>的到来,浏览器泪流满面……
10.等等,还没完,用户点了一下界面中的“换肤”按钮,Javascript让浏览器换了一下<link>标签的CSS路径;
11.浏览器召集了在座的各位<div><span><ul><li>们,“大伙儿收拾收拾行李,咱得重新来过……”,浏览器向服务器请求了新的CSS文件,重新渲染页面。
互联网:摘选+整理
分享到:
相关推荐
根据一些CSS写作经验,如何提高渲染效率及所占用消耗的资源,我们来浅谈一下CSS的渲染效率,书写高效的CSS
critical-path-css-rails, 在 Rails 中,只加载初始viewport所需的CSS ! critical-path-css-rails 仅加载 Rails 中初始viewport所需的CSS !这个 gem 让你只需要在初始页面视图中加载所需的CSS 。 这给你 blazin'...
浏览器加载、渲染和解析过程的黑箱分析,对于渲染,利用 Fiddler 将网速调慢,可以看到 css 下载后会马上渲染到页面,渲染和下载同步进行,需要的朋友可以参考下
- 浏览器加载页面和渲染过程 - 性能优化 - Web 安全 本小节会从浏览器的加载过程开始讲解,然后介绍如何进行性能优化,最后介绍下 Web 开发中常见的安全问题和预防。 ----- ## 加载页面和渲染过程 可将加载过程...
用于切换CSS功能的devtools扩展,以后开发人员查看页面/应用在浏览器中的渲染方式
github-markdown-css 复制GitHub Markdown样式的最少CSS 安装 从或npm 下载: $ npm install github-markdown-css 用法 导入github-markdown.css文件,并将markdown-body类添加到渲染的Markdown的容器中,并为其...
各浏览器加载策略,ie6/7/8/9,firefox,chrom.同步模型,JS阻塞,JS执行策略 ,Inline Script,阻塞渲染,浏览器的优化
一个由CSS驱动的新砌体组件,可以快速加载并且没有jQuery或其他依赖项。 专为Vue.js项目构建。 :smiling_face_with_sunglasses:为什么? Ex由CSS提供支持的新砌体组件,可快速加载并且没有jQuery或其他依赖项。 专为...
主要介绍了在浏览器加载CSS 时防止影响页面渲染的方法,其中以非阻塞CSS加载字体的技术为重点讲解,,需要的朋友可以参考下
babel-plugin-css-modules-transform :party_popper: 兼容Babel 6和Babel 7 :warning_selector: 1.4.0中添加了Babel 7兼容性此Babel插件查找css模块文件的所有require ,并将其替换为哈希,其中键是类名,值是生成的...
由于Web 端的远程加载受到浏览器的 CORS 跨域策略限制,如果对方服务器禁止跨域访问,那么会加载失败,而且在 WebGL 渲染模式下,即便对方服务器允许 http 请求成功之后也无法渲染,这是 WebGL 的安全策略的限制 ...
今天给大家分享一篇文章,关于静态HTML页面加载和解析的相关显示流程的。浏览器加载和渲染html的顺序。
cytoscape-css-渲染器 描述 Cytoscape 渲染器使用 CSS 转换来提供 HTML 标签。 查看演示: : : 依赖关系 Cytoscape.js >=2.3.5 使用说明 下载库: 通过 npm: npm install cytoscape-css-renderer , 通过凉亭:...
css:渲染 和html元素的整合★ 选择器★ 属性(了解) 字体 文本 列表 背景 尺寸 浮动 分类 框模型(理解) 扩展: 颜色取值 javascript JS的输出 js和html整合 js中变量声明 js的数据类型 js:事件...
Echarts高级进阶教程(2):appendData异步加载大数据量分片加载数据和增量渲染的解决方案
CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式. Look! Styles and colors Manipulate Text Colors, Boxes and more… 尝试一下 – 实例 本例演示如何使用添加到 部分的样式信息对 HTML 进行格式化...
element-ui动态渲染表格
浏览器的分类和发展史 浏览器工作细节----渲染原理 浏览器内核结构 蠕虫攻击原理
浏览器性能优化-渲染性能1