页面加载过程

客户端发起一个请求,服务器端经过一系列处理,将响应以http报文的形式发送给客户端;此时客户端获取到的只是一个页面。然后,客户端浏览器解析这个页面,请求资源文件(比如:js、css等)。浏览器在解析的时候是从上往下顺序执行的。

上面代码的输出结果是这样的:

one --> null --> two --> three --> zhangsan --> four --> zhangsan

上述结果说明以下几点:

1、jquery的$(function())方法是在dom加载完成之后才开始执行的;

2、放在<script>标签里面、方法体之外的js代码在浏览器解释的时候顺序执行;

3、浏览器从上往下顺序执行;

4、<script>标签可以放在任何位置

补充:

head标签是前于body标签处理的,在head标签的所有文件加载完前是没法进行body内容的展示和渲染。如果js代码较多、文件较大或者数量较多很有可能导致用户需要较长的等待时间才能看到页面的结构和内容,这对于良好的用户体验设计而言是非常不好,此时可以将这样的script标签放置于body标签的底部。

时间: 2024-10-12 08:57:55

页面加载过程的相关文章

页面加载中的图片性能优化【转】

我的大部分性能优化工作都集中在JavaScript和CSS上,从早期的Move Scripts to the Bottom和Put Stylesheets at the Top规则.为了强调这些规则的重要性,我甚至说过,“JS和CSS是页面上最重要的部分”. 几个月后,我意识到这是错误的.图片才是页面上最重要的部分. 我关注JS和CSS的重点也是如何能够更快地下载图片.图片是用户可以直观看到的.他们并不会关注JS和CSS.确实,JS和CSS会影响图片内容 的展示,尤其是会影响图片的展示方式(比如

javascript 实现页面加载完再显示页面

document.onreadystatechange = function () { if (document.readyState == "complete") { document.body.style.display = "block"; } else { document.body.style.display = "none"; }; }; document.onreadystatechange  是用来监听页面加载过程中的状态! re

如何提升页面加载速度,并简述原理

页面的加载过程主要分为下载.解析.渲染三个步骤,下面从这三个方面阐述提升加载速度的方法: 1.加快文件下载速度,减小资源文件下载对页面解析的阻塞.页面加载过程首先会下载 HTML 文件,然后自上而下开始解析,解析过程中如果遇到外部资源则会开始下载,直至下载完成才会继续解析.所以,加快文件下载速度方式是有效的提升页面加载速度的方法.具体可以是 1)通过设置 CDN.HTTP 缓存等方式,减少 HTTP 传输时间: 2)对文件进行压缩,减小文件体积: 3)对 script.CSS 文件引用标签设置异

【转】 从输入 URL 到页面加载完成的过程中都发生了什么事情?

该问题总结 一. 往浏览器输入URL后给你一个页面,你天天在使用的东西,学过计算机网络的知道是怎么回事,就DNS解析然后页面的回馈,不过要讲好还是有难度. 之前fex团队的nwind专门写过这个问题的博客: http://fex.baidu.com/blog/2014/05/what-happen/ 厉害的地方是将整个计算机体系和硬件都涉及进来,很广很深,太强大了. 然后找到一个StackOverFlow的答案: what happens when you type in a URL in br

从输入URL 到页面加载完成的过程

转载自:http://www.tuicool.com/articles/V7JN32Z 根据 URL 请求页面过程 说实话,这类文章网上一抓一大把,而我仍想写这篇博客,一方面是想再仔细缕一下这个过程,另一方面是希望用清晰的语言和结构来解释,也算是小小地挑战一下自己. 过程概述 浏览器查找域名对应的 IP 地址: 浏览器根据 IP 地址与服务器建立 socket 连接: 浏览器与服务器通信: 浏览器请求,服务器处理请求: 浏览器与服务器断开连接. 天啦撸,结束了?也太简单了吧...各位看官,不急,

页面加载的过程

浏览器加载和渲染html的顺序 1. IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的. 2. 在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完). 3. 如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载. 4. 样式表在下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以前已经渲染的)重新进行渲染. 5. JS.CSS中如有重定义,后定义函

从输入 URL 到页面加载完成的过程中都发生了什么(转)

从输入 URL 到页面加载完成的过程中都发生了什么 过程描述 浏览器查找域名对应的 IP 地址: 浏览器根据 IP 地址与服务器建立 socket 连接: 浏览器与服务器通信: 浏览器请求,服务器处理请求: 浏览器与服务器断开连接. 根据域名查找IP地址 概念解析 IP地址:IP协议为互联网上的每一个网络和每一台主机分配的一个逻辑地址.IP地址如同门牌号码,通过 IP地址才能确定一台主机位置.服务器本质也是一台主机,想要访问某个服务器,必须先知道它的IP地址: 域名(HOST):IP 地址由四个

从输入 URL 到页面加载显示完成的过程

前言:"一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?" 这个问题我想大多数人都不会陌生,好像是前端面试题经常会出现的,在此我也好好梳理梳理了一番,总结成这篇文章,希望能对和我一样在前端道路上奋进的小白们有所帮助,一起学习,交流. 我把这个问题拆解成两个过程: 1. 用户输入 url ---> 客户端(浏览器)拿到服务端的数据 2. 浏览器拿到数据 ---> 呈现页面(也就是浏览器工作过程) 搞清楚这两个过程后,我们也算是完整的回答了前言部分所提的问题

jsp页面的加载过程

1. java是在服务器端运行的代码,jsp在服务器的servlet里运行,而javascript和html都是在浏览器端运行的代码.所以加载执行顺序是是java>jsp>js. js代码时html代码的一部分,所以页面加载的时候是由上而下加载.所以js加载的顺序也就是页面中<script>标签出现的顺序.<script>标签里面的或者是引入的外部js文件的执行顺序都是其语句出现的顺序,其中js执行的过程也是页面装载的一部分. 2.1 在js脚本中定义的全局变量和函数,