再谈DOMContentLoaded与渲染阻塞—分析html页面事件与资源加载

浏览器的多线程中,有的线程负责加载资源,有的线程负责执行脚本,有的线程负责渲染界面,有的线程负责轮询.监听用户事件. 这些线程,根据浏览器自身特点以及web标准等等,有的会被浏览器特意的阻塞.两个很明显的阻塞就是:脚本执行时对其他线程的阻塞和脚本加载时对其他线程的阻塞. 这两个阻塞发生在HTML页面初次解析时,它们对性能的影响较大,原因是: document对象绑定了一个事件:DOMContentLoaded.这个事件会在DOM解析完成之后触发.这个事件触发之后(而不是window.load事件…

细谈unity资源加载和卸载

转载请标明出处:http://www.cnblogs.com/zblade/ 一.概要在了解unity的资源管理方式之后,接下来细谈一下Unity的资源是如何从磁盘中加载到运行时的内存中,以及又是如何被卸载的.这部分较为繁琐,可能会写较多的过程. 二.脚本资源的加载和卸载在unity中的脚本资源,大体可以分为C++编译的引擎dll文件,c#编译的dll文件,lua脚本文件(基于lua热更的方式下). 2.1 dll文件的加载和卸载在工程的Library/ScriptAssemblies文件…

【原】从一个bug浅谈YUI3组件的资源加载

篇前声明:为了不涉及业务细节,篇内信息统一以某游戏,某功能代替前不久,某游戏准备内测客户端,开发人员测试过程中发现某功能突然不灵了,之前的测试一切ok,没有发现任何异常,第一反应是,游戏内浏览器都是自己包装的,是不是做了什么改造,触发了某个盲点. 游戏方表示浏览器还是以前包装的Chromium,不过还真有不同的,就是UA改了,而且不是在原UA后加的后缀标识,而是完全替换,使用了游戏名称做UA,问题应该就在这里了,从代码上来看,不会触发任何雷区,理论上不会有问题,如果有问题,极有可能出现在框架中…

Spring源码分析（十一）bean的加载

摘要:本文结合<Spring源码深度解析>来分析Spring 5.0.6版本的源代码.若有描述错误之处,欢迎指正. 经过前面的分析,我们终于结束了对XML配置文件的解析,接下来将会面临更大的挑战,就是对bean加载的探索.bean加载的功能实现远比bean的解析要复杂得多.同样,我们还是以最开始的示例为基础,对于加载bean的功能,在Spring中的调用方式是: MySpringBean bean = (MySpringBean) beanFactory.getBean("mySpr…

NET Core微服务之路：再谈分布式系统中一致性问题分析

前言一致性:很多时候表现在IT系统中,通常在分布式系统中,必须(或最终)为多个节点的数据保持一致.世间万物,也有存在相同的特征或相似,比如儿时的双胞胎,一批工厂流水线的产品,当然,我们不去讨论非IT以外的知识点. 注:我们一定要明白一个词叫“信息不对称”,不论是人.事.物,信息不对称是永远都存在的,要知道,在IT系统中,能引起信息不对称的因素有很多,比如网络上,有丢包.有延迟.硬件上,有不同性能的计算能力和处理能力. 在传统的IT时代,一致性通常是指强一致性,比如一个单体的WEB程序中,从数据…

React Native 断点调试跨域资源加载出错问题的原因分析

写在前面 ————如果从头开始看还没解决,试试文章最后的绝招闲来无事,折腾了一下React Native,相比之前,开发体验好了不少.但在真机断点调试那里遇到了跨域资源加载出错的问题,一番探索总算解决,目测是RN新版本调试服务的bug. 遇到类似问题的同学应该不少,这里做下记录,有需要的可以参考下. 如何断点调试首先,在真机上加载运行RN应用(过程略). 然后,摇动手机,弹出开发菜单,选择“Debug JS Remotely”. chrome会自动打开调试界面,地址是 http://loca…

高性能javascript 文件加载阻塞

高性能javascript javascript脚本执行过程中会中断页面加载,直到脚本执行完毕,此操作阻塞了页面加载,造成性能问题. 脚本位置和加载顺序:如果将脚本放在head内,那么再脚本执行完毕之前,显示给用户的始终是一片空白,用户只能傻傻的看着屏幕等待脚本执行完毕.而且,如果页面引入多个脚本,那么后面的脚本文件必须等待前面的脚本文件下载完毕并且执行完毕之后才能开始下载并运行.不过IE8,FF,SAFARI,CHROME已经允许脚本文件可以同时下载,不过尽管如此,javascript脚本…

再谈 webpack build 及加载优化

之前项目多,事情忙,一直没时间写博客,现在空闲下来了,总结一下之前讲过了关于 build 压缩文件的方法,有兴趣的可以看下: 点击查看现在讲讲一个页面的首屏加载速度该如何提升提前说明需要 webpack-bundle-analyzer 插件来进行 build 文件的分析异步文件和必须文件首先是异步文件,可以按功能分,也可以按照路由分块,目的就是尽量较少首次加载的必须代码的大小即登录,注册和必须存在的组件是必须加载组件,优先度最高,这些组件是不能为异步的,其他尽量都要设置为异步组件…

浏览器加载和渲染HTML的过程（标准定义的过程以及现代浏览器的优化）

先看一下标准定义的浏览器渲染过程(网上找的): 浏览器打开网页的过程用户第一次访问网址,浏览器向服务器发出请求,服务器返回html文件: 浏览器开始载入html代码,发现 head 标签内有一个 link 标签引用外部CSS或JS文件: 浏览器又发出CSS及JS文件的请求,服务器返回这个CSS,JS文件: 浏览器继续载入html中 body 部分的代码,并且CSS,JS文件已经拿到手了,可以开始渲染页面了: 浏览器在代码中发现一个 img 标签引用了一张图片,向服务器发出请求.此时浏览器不会等…

jQuery实现DOM加载方法源码分析

传统的判断dom加载的方法使用 dom0级 onload事件来进行触发所有浏览器都支持在最初是很流行的写法我们都熟悉这种写法: window.onload=function(){ ... } 但是onload事件触发过于缓慢,尤其是在存在很多外部图片或者视频文件的时候,为了更好的了解这一点有必要知道一个html文档是如何进行加载的,这里引用一个园友的表述: 1.用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件: 2.浏览器开始载入htm…

无阻塞加载和defer、async

无阻塞加载把js放在head里,浏览器是怎么去执行它的呢,是按顺序加载还是并行加载呢?在旧的浏览器下,都是按照先后顺序来加载的,这就保证了加载的js依赖不会发生问题.但是少部分新的浏览器已经开始允许并行加载js了,也就是说可以同时下载js文件,但是还是按先后顺序执行文件的. 下载是异步的没问题,但是每个javascript执行的时候还是同步的,就是先出现的script标签一定是先执行,即使是并行下载它是最后一个下载完成的,除非标有defer的script标签.任何javascript在执行的时…

javascript的加载、解析、执行对浏览器渲染的影响

javascript的加载方式,总得来说是在页面上使用script来声明,以及动态的加载这些方式,而动态的加载,在很多js库中都能够很好的去处理,从而不至于阻塞其他资源的加载,并与其并行加载下来.这样的动态异步的加载方式罗列起来有:Ajax的方式.DOM Element Insert.Iframe.document.write.defer等等.这些都能够很好的处理js在加载的时候不会阻塞资源加载的问题,但是,js 的执行仍然会阻塞浏览器的渲染.或许这是不得不需要付出的代价,有没有一些方式去缓解…

CSS加载会阻塞页面显示？

可能大家都知道,js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?接下来,我们就一起来分析一下. 原理解析那么为什么会出现上面的现象呢?我们从浏览器的渲染过程来解析下. 不同的浏览器使用的内核不同,所以他们的渲染过程也是不一样的.目前主要有两个: webkit渲染过程 Gecko渲染过程从上面两个流程图我们可以看出来,浏览器渲染的流程如下: HTML解析文件,生成DOM Tree,解析CSS文件生成CSSOM Tree 将Dom Tree和CSSOM Tree结…

在HTML中使用JavaScript（浏览器对js的加载机制分析）

前言: 向HTML页面中插入JavaScrip的主要方法,就是使用<script>标签.主要探讨<script>标签的在HTML页面的渲染机制.对应的业务场景:从js的加载机制,去优化首次加载页面白屏时间过长的问题要点: 1.script标签用外链的src引入文件时,内嵌的js代码无效. 2.只要不存在defer和async属性,浏览器都会按照script元素在页面中出现的先后顺序对他们依次进行解析(文件下载和代码执行).换句话说,在第一个外链script下载 -> 执行,…

探真无阻塞加载javascript脚本技术，我们会发现很多意想不到的秘密

下面的图片是我使用firefox和chrome浏览百度首页时候记录的http请求下面是firefox: 下面是chrome: 在浏览百度首页前我都将浏览器的缓存全部清理掉,让这个场景最接近第一次访问百度首页的情景. 在firefox的请求瀑布图里有个表现非常之明显:就是javascript文件下载完毕后,有一段时间是没有网络请求被处理的,这段时间过后http请求才会接着执行,这段空闲时间就是所谓的http请求被阻塞. 浏览器里的http请求被阻塞一般都是由javascript所引起,具体原因是…

css加载会造成阻塞吗

本文由云+社区发表作者:嘿嘿嘿可能大家都知道,js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?接下来,我就来对css加载对DOM树的解析和渲染的影响做一个测试. 为了完成本次测试,先来科普一下,如何利用chrome来设置下载速度 \1. 打开chrome控制台(按下F12),可以看到下图,重点在我画红圈的地方点击我画红圈的地方(No throttling),会看到下图,我们选择GPRS这个选项 \2. 点击我画红圈的地方(No throttling),会看到…

对于HTML页面中CSS, JS, HTML的加载与执行过程的简单分析

来自 https://blog.csdn.net/u011088260/article/details/79563315 最近在研究HTML页面中JavaScript的执行顺序问题.在JavaScript中,定义一个方法或者函数有很多方式,最常见的有2中,function语句式与函数直接量方式. 对于function语句式,解释器会优先解释.即加载了这个js文件后,会扫描一下所有的js代码,然后把该优先执行的东西先执行了,然后再从上到下按顺序执行.所以,定义的代码可以在执行的代码后边.就…

定时器详解和应用、js加载阻塞、css加载阻塞

1.setTimeout().setInterval()详解和应用 1.1 详解: setTimeout.setInterval执行时机 1.2 存在问题: setInterval重复定时器可能存在的问题.解决方案 1.3 应用: Yeilding Processes(进程暂停) 运行在浏览器中的JavaScript都被分配了一个确定数量的资源,不同于桌面应用往往能够随意控制他们要的内存大小和处理时间,Javascript被严格限制了,以防止恶意的Web程序员吧用的计算机搞挂了,其中一个限制…

浏览器加载渲染HTML、DOM、CSS、 JAVASCRIPT、IMAGE、FLASH、IFRAME、SRC属性等资源的顺序总结

页面响应加载的顺序: 1.域名解析->加载html->加载js和css->加载图片等其他信息 DOM详细的步骤如下: 解析HTML结构. 加载外部脚本和样式表文件. 解析并执行脚本代码. 构造HTML DOM模型. 加载图片等外部文件. 页面加载完毕. <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Title&…

前端性能优化_css加载会造成哪些阻塞现象？

css的加载是不会阻塞DOM的解析,但是会阻塞DOM的渲染,会阻塞link后面js语句的执行.这是由于浏览器为了防止html页面的重复渲染而降低性能,所以浏览器只会在加载的时候去解析dom树,然后等在css加载完成之后才进行dom的渲染以及执行后面的js语句.这就是造成在css下载完成之前,页面刚开始会出现白屏现象的原因. 浏览器渲染流程: 浏览器开始解析目标HTML文件,执行流的顺序为自上而下. HTML解析器将HTML结构转换为基础的DOM(文档对象模型),构建DOM树完成后,触发DomCo…

（转载）Flash Loader加载完成不发送COMPLETE和ERROR事件的问题分析

(转载)http://blog.dou.li/flash-loader%E5%8A%A0%E8%BD%BD%E5%AE%8C%E6%88%90%E4%B8%8D%E5%8F%91%E9%80%81complete%E5%92%8Cerror%E4%BA%8B%E4%BB%B6%E7%9A%84%E9%97%AE%E9%A2%98%E5%88%86%E6%9E%90.html Flash进行资源加载时常会“停住”,表现为加载进度卡在某个地方.跟踪发现Loader的progress为100%,但未发…