JavaScript 页面渲染

1. 从输入url到得到html的详细过程

  1.1 加载资源的形式

       输入 URL 或跳转页面 加载 html

  1.2 加载一个资源的过程

    浏览器根据DNS服务器得到域名的IP地址

    向这个IP的机器发送http请求

    服务器收到后 处理并返回 http请求

    浏览器得到返回内容

  1.3 浏览器渲染页面的过程

    根据 HTML 结构生成 DOM Tree

根据 CSS 生成 CSSOM

    将 DOM 和 CSSOM 整合形成 RenderTree 渲染树

    浏览器根据 渲染树 开始渲染

    遇到 <script> 时 会执行并阻塞渲染 因为js有权利改变 dom 结构 所以要等着js脚本执行

2. window.onload 和 DOMContentLoaded 的区别

原文地址:https://www.cnblogs.com/xiaozhumaopao/p/10885454.html

时间: 05-18

JavaScript 页面渲染的相关文章

高性能滚动 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 这类会频繁触发的事件.简单的看

javascript 获取渲染样式

渲染样式获取方法: ie : domOjbect.currentStyle.xxx domOject DOM对象 xxx 可以是属性.方法.样式属性值(写法和标准有差别) 具体:http://www.jb51.net/shouce/dhtml/objects/currentStyle.html 注意点:样式获取的结果包含单位.如其中,border应写为borderStyle. currentStyle 返回反映页面所应用的样式设置的值,但可能并不反映获取值时渲染所采用的值.例如,样式值设置为 "

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

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

CSS 异步加载技术 不影响页面渲染

本文展示了一种技术,它能通过异步下载样式表,以阻止它们的下载阻塞页面的渲染,从而尽可能快的让访问者获取到信息内容. 警告! 我发这篇帖子全是好意,但是它并不负责让读它的人意识到下面将会遇到的问题. 社区很快地给了我许多的反馈 (有些反馈我很感激) ,而越来越明显的是这项技术并不如我所希望的那样稳定. 不像我那样的成功地对它进行了测试和利用,许多开发者在 IE 和 Firefox 中都遇到了问题( F F测试版中直接崩溃) 而其他人则报告在 Chrome 和 Safari 中是成功的.我现在的建议

加载 CSS 时不影响页面渲染

转自:http://www.oschina.net/translate/loading-css-without-blocking-render 本文展示了一种技术,它能通过异步下载样式表,以阻止它们的下载阻塞页面的渲染,从而尽可能快的让访问者获取到信息内容. 警告! 我发这篇帖子全是好意,但是它并不负责让读它的人意识到下面将会遇到的问题. 社区很快地给了我许多的反馈 (有些反馈我很感激) ,而越来越明显的是这项技术并不如我所希望的那样稳定. 不像我那样的成功地对它进行了测试和利用,许多开发者在

django数据库中的时间格式与页面渲染出来的时间格式不一致的处理

django数据库中的时间格式与页面渲染出来的时间格式不一致的处理. 在数据库里,时间是这样显示的: date: 2012-07-21 12:27:22 | date | datetime | NO | | NULL | | +-----------+-------------+------+-----+---------+----------------+ 在模板里用: <span>{{ post.date }}</span> 打印出来,时间格式是这样的: July 21, 20

Javascript高性能动画与页面渲染

转自:http://www.infoq.com/cn/articles/javascript-high-performance-animation-and-page-rendering No setTimeout, No setInterval 如果你不得不使用setTimeout或者setInterval来实现动画,那么原因只能是你需要精确的控制动画.但我认为至少在现在这个时间点,高级浏览器.甚至手机浏览器的普及程度足够让你有理由有条件在实现动画时使用更高效的方式. 什么是高效 页面是每一帧变

python django 业务树形结构规划及页面渲染

概述: 在项目中,父级到子级结构并不少见,如果仅仅的两层树形结构,我们可以使用数据库的外键设计轻松做到,子级业务表设计一字段外键到父级业务表,这样子到父.父到子的查询都非常简单. 但是往往父子结构会有一级二级三级等等多层规划,因为子结构的层数是不定的,子可以有子,再子:这样的树形下去,外键设计就不可行了. 项目说明 设计一个 业务 树形结构规划,多层灵活型结构, 从 建表设计 到  浏览器前端展示 整体的结构规划 使用 python django web框架:和一个js 树形结构插件treevi

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

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