`

html页面加载

阅读更多

浏览器加载显示html的顺序:

 

1IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。

2、在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完)

3、如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载。

4、并且在下载后进行解析,解析过程中,停止页面所有往下元素的下载。阻塞加载

5、样式表在下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以前已经渲染的)重新进行渲染。

6JSCSS中如有重定义,后定义函数将覆盖前定义函数

 

JS的加载:

 

不能并行下载和解析(阻塞下载)

当引用了JS的时候,浏览器发送1js request就会一直等待该request的返回。因为浏览器需要1个稳定的DOM树结构,而JS中很有可能有代码直接改变了DOM树结构,比如使用 document.write appendChild,甚至是直接使用的location.href进行跳转,浏览器为了防止出现JS修改DOM树,需要重新构建DOM树的情况,所以 就会阻塞其他的下载和呈现.

 

嵌入JS应该放在什么位置


   1、放在底部,虽然放在底部照样会阻塞所有呈现,但不会阻塞资源下载。
   
  
2、如果嵌入JS放在head中,请把嵌入JS放在CSS头部。
   
  
3、使用defer
   
   4
、不要在嵌入的JS中调用运行时间较长的函数,如果一定要用,可以用setTimeout来调用

 

 

浏览器的连接数:

 

针对同一个域名,浏览器的并非连接数限制:

 

IE8的并发连接数限制为10IE8之前,对HTTP1.1的并发连接数默认限制为2个。

 

Firefox 3.6.8chrome 5.0的并发连接数都为6

 

以上是默认值,是可以手工修改的

 

分享到:
评论

相关推荐

    手风琴导航 选项卡效果+动态html页面加载

    传统的网页加载方式是用户每次点击链接都会请求整个新的HTML页面,而动态HTML页面加载(通常称为AJAX,Asynchronous JavaScript and XML)改变了这一模式。它利用XMLHttpRequest对象在后台与服务器通信,只更新部分...

    静态HTML页面加载和解析

    今天给大家分享一篇文章,关于静态HTML页面加载和解析的相关显示流程的。浏览器加载和渲染html的顺序。

    html5 网页加载中效果

    在网页加载中,HTML5提供了一些方法和元素来优化用户体验,尤其是对于那些需要等待内容加载的场景。本话题将深入探讨如何利用HTML5实现网页加载中的效果,以及如何模拟安卓Toast提示和iOS7.0的删除确认提示。 首先...

    js实现的简单的Html页面加载滚动条

    用js实现的简单的Html页面加载滚动条。

    四款由html+css+js实现的精美网页加载页面动画源码

    本资源提供了四款由HTML、CSS和JavaScript共同实现的精美网页加载页面动画源码,旨在帮助开发者或设计师打造更具吸引力的网站。 1. HTML基础与结构 HTML(超文本标记语言)是网页的基础,负责构建页面的结构。在这...

    页面加载进度条

    页面加载进度条是一种常见的用户体验设计元素,特别是在网页和应用程序中,它向用户显示了页面内容正在加载的过程。这种视觉反馈可以提升用户体验,因为用户能够清楚地看到页面正在逐步加载,而不是面对一片空白屏幕...

    酷炫 html5页面加载 loading动画效果 demo 基于原生无第三方依赖

    HTML5页面加载动画是网页设计中的一个重要元素,它在页面内容完全加载之前为用户提供视觉反馈,使得用户体验更加流畅。本示例"酷炫html5页面加载loading动画效果demo"是基于原生JavaScript和CSS实现的,无需任何第三...

    使用jQuery加载html页面到指定的div实现方法

    一、jQuery加载一个html页面到指定的div里 把a.html里面的某一部份的内容加载到b.html的一个div里。 比如:加载a.html里面的“row”>这个div里面的所有内容加载到b.html的这个div里”content”> 用jquery ajax 可以...

    html加载动画(js+css)

    HTML加载动画是网页设计中一种常见的用户体验元素,用于在页面内容加载时提供视觉反馈,以增强用户交互。本文将深入探讨如何使用JavaScript(js)和CSS(层叠样式表)来创建一个2秒后自动跳转至目标网页的加载动画。...

    html5页面滚动图片动画加载特效

    HTML5页面滚动图片动画加载特效是现代网页设计中一种常见的视觉增强手法,它能提升用户体验,使得页面在滚动时图片的加载更为动态和流畅。这种技术主要基于HTML5的新特性,如`<canvas>`元素、CSS3动画以及JavaScript...

    html5实现的页面滚动图片动画加载特效源码.zip

    在本资源"html5实现的页面滚动图片动画加载特效源码.zip"中,我们可以深入探讨HTML5如何实现页面滚动时的图片动画加载效果。 首先,HTML5的新特性之一是其离线存储机制,如离线存储API(Application Programming ...

    手机网页遮罩动态加载效果.zip

    "手机网页遮罩动态加载效果"是一个利用jQuery和HTML5技术实现的加载动画,旨在提升用户在等待页面内容加载时的视觉体验。下面我们将详细探讨这个主题。 首先,jQuery是一个广泛使用的JavaScript库,它简化了...

    页面加载时 提示 正在加载中

    在网页设计和开发中,用户体验是...总的来说,`loading.jsp`是利用JSP、HTML、CSS和JavaScript技术实现的一种页面加载提示机制,它提升了用户在等待页面加载过程中的体验,同时也展现了Web开发中对用户体验的细致考虑。

    页面加载出现等待

    1. **事件监听**:在HTML页面加载过程中,我们可以监听`window.onload`或`document.DOMContentLoaded`事件。这两个事件分别表示整个页面及其所有资源(如图片、脚本等)加载完毕,或者仅HTML文档结构加载完成。在...

    两种方法实现在HTML页面加载完毕后运行某个js

    在网页开发中,确保JavaScript代码在HTML页面完全加载完毕后再执行是至关重要的,因为这可以避免因元素未加载而导致的错误。本文将介绍两种方法来实现在HTML页面加载完成后运行JavaScript代码。 首先,我们来看传统...

    页面加载中js 页面加载中js 页面加载中js

    在网页开发中,"页面加载中js"是一个关键的概念,涉及到用户体验和页面性能优化。页面加载过程中,JavaScript(js)的执行对用户感知的页面加载速度有着直接影响。在这个主题下,我们将深入探讨JavaScript如何影响...

    6种显示网页正在加载中的代码

    在网页设计中,当用户点击链接或提交表单时,页面加载的过程可能会花费一些时间,尤其是在数据量大或者网络环境不理想的情况下。为了让用户知道页面正在处理请求并且没有出现故障,开发者通常会在页面加载期间展示一...

    延迟加载 html优化

    HTML页面中,我们可以通过设置特殊的类名或数据属性来标记需要延迟加载的图像,然后在JavaScript库中识别并处理这些标记。 总的来说,延迟加载HTML优化是一个强大的工具,可以显著提升网页性能。通过合理使用如`...

    网页页面加载动画(含有HTML字符实体+CSS动画animation+js事件onbeforeunload、onload).zip

    这些技术的结合使得开发者能够创建出既美观又实用的网页加载动画,提升用户体验,同时也展示了前端开发中的灵活性和创造性。对于学习和提升前端技能的开发者来说,这是一个非常有价值的实践案例。

    13款html5 svg页面loading加载动画效果

    总的来说,"13款html5 svg页面loading加载动画效果"是一个展示HTML5与SVG结合使用,以及CSS3动画技术在创建现代网页交互元素方面的强大能力的实例集。这些技术的应用不仅提升了用户体验,也反映了Web开发的最新趋势...

Global site tag (gtag.js) - Google Analytics