html页面渲染的原理及优化

一个html网页载入的大概过程

1.用户输入网址,(假定是第一次访问),浏览器向服务器发出请求,服务器返回html文件.

2.浏览器开始载入html代码,发现head标签内有一个link标签引用外部css文件。

3.浏览器又发出css文件的请求,服务器返回这个css文件。

4.浏览器继续载入<body>里面的代码,并且css代码已经拿到手了,开始渲染界面了。

5.浏览器在代码中发现了一个<img>标签引用了一张图片,向服务器发出请求,浏览器不会等到图片下载完,而是继续渲染后面的代码。

6.服务器返回图片文件,由于图片占据了一定面积,影响了后面的排版,因此浏览器需要回头重新渲染这部分代码。

7.浏览器发现了一行js代码的<script>的代码,赶快执行他。

8.js脚本执行了这条语句,它命令浏览器隐藏掉某个<div>,由于少了一个元素,浏览器不得不从新进行重新渲染这部分代码。

9.终于等到</html>的归来,浏览器泪流满面。

10.等等,还没完。用户点击了一下界面中的换肤按钮,js让浏览器换了一下<link>的css标签。

11.浏览器召集了在座的各位<div><span><ul><li>们,“大伙儿收拾收拾行李,咱得重新来过……”,浏览器向服务器请求了新的CSS文件,重新渲染页面。

js的阻塞特性:

其中js是阻塞式的加载,浏览器在加载js时,当浏览器在执行js代码时,不会做其他的事情,即<script>的每次出现都会让页面等待脚本的解析和执行,js代码执行后,才会继续渲染页面。新一代浏览器虽然支持并行下载。但是js下载仍会阻塞其他资源的下载(比如图片)。所以应该把js放到页面的底部。

js的优化:

1.要使用高效的选择器。

2.将选择器保存为局部变量

3先操作再显示。

时间: 2024-11-02 23:22:18

html页面渲染的原理及优化的相关文章

浏览器页面渲染机制及简单优化

浏览器的内核是指支持浏览器运行的最核心的程序,分为两个部分: 1:渲染引擎 2:JS引擎 目前市面上常见的浏览器内核可以分为这四种:Trident(IE).Gecko(火狐).Blink(Chrome.Opera).Webkit(Safari) 页面加载过程要点如下: 1:浏览器根据DNS服务器得到域名的IP地址 2:向这个IP的机器发送HTTP请求 3:服务器收到.处理并返回HTTP请求 4:浏览器得到返回内容 浏览器渲染过程: 1:浏览器会解析三个东西: ①.HTML/SVG/XHTML,H

深入学习页面优化之页面渲染原理

拾人牙慧理解并整理之 直奔主题,要考虑到页面性能优化,必须得理解浏览器的渲染机制才行. 1.原理 渲染引擎在这里就不展开了,可自行搜索解决.下面说说渲染流程,大致是这样的: 浏览器在接收到服务器返回的html页面后, 浏览器开始构建DOM TREE,遇到CSS样式会构建CSS RULER TREE, 遇到javascript会通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree,解析完成后, 浏览器引擎会通过DOM Tree 和 CSS Rule Tree 来

浏览器内核、引擎、页面呈现原理及其优化

浏览器内核.引擎.页面呈现原理及其优化 介绍浏览器内核.JavaScript 引擎以及页面呈现原理等基础知识,同时根据原理提出页面呈现优化方案. 浏览器内核 浏览器内核又叫渲染引擎,主要负责 HTML.CSS 的解析,页面布局.渲染与复合层合成.浏览器内核的不同带来的主要问题是对 CSS 的支持度与属性表现差异. 现在主流的内核有:Blink.Webkit.Gecko.EdgeHTML.Trident,这里面有几个需要注意的地方: Blink 是在 Webkit 的基础上的改进,是现在对新特性支

高性能滚动 scroll 及页面渲染优化

本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动.因为本文涉及了很多很多基础,可以对照上面的知识点,选择性跳到相应地方阅读.    滚动优化的由来 滚动优化其实也不仅仅指滚动(scroll 事件),还包括了例如 resize 这类会频繁触发的事件.简单的看看: 1 2 3 4 var i = 0; window.addEventListener('scroll',function(){   

【前端性能】高性能滚动 scroll 及页面渲染优化

最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动.因为本文涉及了很多很多基础,是我自己学习记录的一个过程,如果上面列出的知识点都了然于胸了,就可以不必往下看了.    滚动优化的由来 滚动优化其实也不仅仅指滚动(scroll 事件),还包括了例如 resize 这类会频繁触发的事件.简单的看

【前端性能】高性能滚动 scroll 及页面渲染优化--转发

本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动.因为本文涉及了很多很多基础,可以对照上面的知识点,选择性跳到相应地方阅读.    滚动优化的由来 滚动优化其实也不仅仅指滚动(scroll 事件),还包括了例如 resize 这类会频繁触发的事件.简单的看看: 1 2 3 4 var i = 0; window.addEventListener('scroll',function(){   

前端高性能滚动 scroll 及页面渲染优化

前言 最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作.本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动.因为本文涉及了很多很多基础,是我自己学习记录的一个过程,如果上面列出的知识点都了然于胸了,就可以不必往下看了. 滚动优化的由来 滚动优化其实也不仅仅指滚动(scroll 事件),还包括了例如 resize 这类会频繁触发的事件.简单的看看

How Javascript works (Javascript工作原理) (十一) 渲染引擎及性能优化小技巧

个人总结:读完这篇文章需要20分钟,这篇文章主要讲解了浏览器中引擎的渲染机制. DOMtree       ----|   |---->  RenderTree CSSOMtree  ----| 这是 JavaScript 工作原理的第十一章. 迄今为止,之前的 JavaScript 工作原理系列文章集中于关注 JavaScript 语言本身的功能,在浏览器中的执行情况,如何优化等等. 然而,当在构建网络应用的时候,不仅仅只是编写自己运行的 JavaScript 代码.所编写的 JavaScri

页面渲染过程分析

关于页面渲染,下面列出了很多相关的技术文章,这里再做一下总结和补充: 通过了解渲染过程来提高页面性能 Chrome 渲染优化 - 层模型 16毫秒的优化Web前端性能优化的微观分析 浏览器渲染Rendering那些事:repaint.reflow/relayout.restyle 浏览器内部工作原理 优化移动体验的HTML5技巧 页面渲染过程 1. 请求页面文档 2. 解析页面文档 2.1) 解析HTML,构建DOM树: 2.2) 遇到内联JS/CSS,阻塞页面文档的解析,并立即解析JS/CSS