javascript的加载、解析、执行对浏览器渲染的影响
javascript的加载方式,总得来说是在页面上使用script来声明,以及动态的加载这些方式,而动态的加载,在很多js库中都能够很好的去处 理,从而不至于阻塞其他资源的加载,并与其并行加载下来。这样的动态异步的加载方式罗列起来有:Ajax的方式、DOM Element Insert、Iframe、document.write、defer等等。这些都能够很好的处理js在加载的时候不会阻塞资源加载的问题,但是,js 的执行仍然会阻塞浏览器的渲染。或许这是不得不需要付出的代价,有没有一些方式去缓解js在执行的时候对浏览器的渲染所造成的延迟的影响呢?
首先,让我们从UI Thread、UI Queue、UI Upate的角度去分析整个页面和javascript的行为。浏览器在加载HTML到最后呈现出来的这段过程,整个就是一个UI Thread进程,这个UI Thread里是一个浏览器的响应队列,而UI Queue则是浏览器的行为队列,包括UI Update,javascript的执行行为。那么在页面加载的过程中,UI Queue里面就储存了UI Update、js加载、js解析、js执行等。不管是UI Thread,还是UI Queue,都是按照顺序来的。页面在刚开始未遇到js的加载和执行的时候,是UI Update的一个过程,一旦遇到js,就会等待js的加载、解析、执行完毕之后,接着又开始UI Update,如此这样的一个相应顺序。
那么当js的加载是异步了之后呢,这个时候,js的加载和解析不会在UI Queue的执行队列里,而是等到js加载、解析完毕,一到执行的时候,就添加到UI Queue队列中,从而阻塞了UI Queue中后面的行为(UI Update)的执行。这就是开头所说的在js的执行期总会阻塞页面的渲染,也就是UI Update。但是这个动态加载的方式跟普通在页面中使用script标签来加载的时候的优势是:将js的加载、解析的行为独立出来,不影响浏览器的UI Update,知道执行期才阻塞。这就很多的程度上加快了页面的渲染和展现。
再来说说defer和async属性,defer属性最开始是为IE所实现的,现代的浏览器也都逐渐实现了,那么它的工作原理是什么呢。它的作用跟上 面动态加载的优势很相同,js的加载和解析是独立的,但是有一点不同的是:使用了defer属性之后,js代码会等到DOM加载完成的时候才执行,这个时 候就又更大限度的让浏览器尽快的UI Update部分完成,让js的执行对浏览器的渲染所造成的影响更小化。那么async呢,是跟上面所说的动态加载js的优势是一样的,也是独立js的加 载、解析,解析完成的时候就立即添加到UI Queue队列中去等待执行,阻塞后面的UI Update行为。
那么怎样将js的执行对UI Update的影响更小呢?使用HTML5的Worker机制吧,将复杂的js执行交给Worker去执行,Worker是一个独立的js执行环境,这个 环境里没有window、DOM的概念,只是用来处理复杂的运算,再将处理后的结果通过postMessage方法发送会浏览器,Worker和页面之间 通过postMessage方法来实现跟浏览器的数据交换。这样,将复杂运算交给Worker之后,在页面中所执行的js代码,将会是大大的减小,减小到 只需要处理一个onmessage事件,将页面的js执行时间最小化。
杯具的还是defer、async、Worker还不能够完全的被目前市面上流行的浏览器所兼容,期待浏览器统一的那一天
javascript的加载、解析、执行对浏览器渲染的影响的更多相关文章
- 浏览器中Javascript的加载和执行
在刚学习Javascript时曾对该问题在小组内做个一次StudyReport,发现其中的基础还是值得分析的. 从标题分析,可以加个Javascript的加载和执行分为两个阶段:加载.执行.而加载即浏 ...
- 浏览器环境下Javascript脚本加载与执行探析之DOMContentLoaded
在”浏览器环境下Javascript脚本加载与执行探析“系列文章的前几篇,分别针对浏览器环境下JavaScript加载与执行相关的知识点或者属性进行了探究,感兴趣的同学可以先行阅读前几篇文章,了解相关 ...
- 浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
在<浏览器环境下JavaScript脚本加载与执行探析之defer与async特性>中,我们研究了延迟脚本(defer)和异步脚本(async)的执行时机.浏览器支持情况.浏览器bug以及 ...
- 浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
defer和async特性相信是很多JavaScript开发者"熟悉而又不熟悉"的两个特性,从字面上来看,二者的功能很好理解,分别是"延迟脚本"和"异 ...
- 前端性能优化:细说JavaScript的加载与执行
本文主要是从性能优化的角度来探讨JavaScript在加载与执行过程中的优化思路与实践方法,既是细说,文中在涉及原理性的地方,不免会多说几句,还望各位读者保持耐心,仔细理解,请相信,您的耐心付出一定会 ...
- <script>标签的加载解析执行
转自原文 <script>标签的加载解析执行 看了很多网上的文章,都是大同小异.总结一下.内部原理还没有搞清楚,有机会再学习. 一.<script>标签的加载解析执行顺序 ht ...
- 浏览器环境下JavaScript脚本加载与执行探析之代码执行顺序
本文主要基于向HTML页面引入JavaScript的几种方式,分析HTML中JavaScript脚本的执行顺序问题 1. 关于JavaScript脚本执行的阻塞性 JavaScript在浏览器中被解析 ...
- 高性能JavaScript(加载和执行)
当浏览器遇到 <script> 标签时,它是没办法知道 JavaScript 是否会向DOM中添加内容或引入其他元素,甚至关闭某一个标签.因此这个时候浏览器就会停止处理页面,先执行Java ...
- 如何加快JavaScript的加载与执行
JS 有个很无语的阻塞特性,就是当浏览器在执行JS 代码时,不能同时做其他任何事情,无论其代码是内嵌的还是外部的. 浏览器在碰到一个引入外部JS 文件的<script>标签时会停下所有工作 ...
随机推荐
- H264子宏块的划分有哪些?
每个分割或子宏块都有一个独立的运动补偿.每个 MV 必须被编码.传输,分割的选择也需编 码到压缩比特流中.对大的分割尺寸而言,MV 选择和分割类型只需少量的比特,但运动补偿残差 在多细节区域能量将非常 ...
- PhotoPicker 从头到脚
1. 简介 PhotoPicker, 是一款开源的图片选择器.效果上和微信相似. 2. 使用方法 2.1 添加依赖 dependencies { compile 'me.iwf.photopicker ...
- Golang使用MongoDB通用操作
MongoDB是Nosql中常用的一种数据库,今天笔者就简单总结一下Golang如何使用这些通用的供能的,不喜勿喷... 研究的事例结构如下: type LikeBest struct { Autho ...
- JavaScript例子
模态框(JavaScript) <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- mysql 存储过程查询语句
可以用 命令"show PROCEDURE status"查看所有的存储过程或检索系统表"mysql.proc"来查询已有的存储过程.例如:用show PROC ...
- 【框架】Django入门学习笔记
教程 Demo 教材2 教材3 [转] Django处理请求的工作机制 记住: 1.用manage.py runserver 启动Django服务器时就载入了在同一目录下的settings.py.该文 ...
- vue前端开发那些事——vue开发遇到的问题
vue web开发并不是孤立的.它需要众多插件的配合以及其它js框架的支持.本篇想把vue web开发的一些问题,拿出来讨论下. 1.web界面采用哪个UI框架?项目中引用了layui框架.引入框架 ...
- 洛谷P1306 斐波那契公约数
题目描述 对于Fibonacci数列:1,1,2,3,5,8,13......大家应该很熟悉吧~~~但是现在有一个很“简单”问题:第n项和第m项的最大公约数是多少? 输入输出格式 输入格式: 两个正整 ...
- 十二、python沉淀之路--内置函数
1.abs函数,求绝对值. a = abs(-3) print(a) 返回:3 2.all函数:判断是否是可迭代对象. 官方解释:Return True if bool(x) is True for ...
- 笔记:开源协议 Apache 2 和 GPL 兼容
笔记:开源协议 Apache 2 和 GPL 兼容 Apache 2 和 GPL v3 兼容. GPL 分了很多版本,LGPL 为最宽松的 GPL,而 AGPL 为最严格的 GPL 协议. Linux ...