web前端学习之JavaScript 和css 阻塞

web前端学习之JavaScript 和css 阻塞,JavaScript 是客户端和服务器端的脚本语言,可以插入HTML 页函中, 并且是目前较热门的Web 开发语言。同时, JavaScript 也是面向对象的编程语言。JavaScript 是一个可以被引入HTML 页面的编程语言。这两种语言并不完全相互依赖,而是针对不同的意图而设计的。JavaScript是客户端脚本语言,它称为非结构化编程。

JavaScript 的阻塞特性是所有浏览器在下载JavaScript 代码的时候, 会阻止其他一切活动,比如其他资源的下载, 内容的呈现等,直到JavaScript 代码下载、解析、执行完毕后才开始继续并行下载其他资源并渲染内容。

为了提高用户体验, 新一代浏览器都支持并行下载JavaScript 代码,但是Java Script 代码的下载仍然会阻塞其他资源的下载(例如图片、css 文件等) 。为了防止JavaScript 修改DOM 树,浏览器需要重新构建DOM 积仁所以就会阻塞其他资源的下载和渲染。

嵌入的JavaScr ipt 代码会阻塞所有内容的呈现,而外部JavaScript 代码只会阻塞其后内容的显示,两种方式都会阻塞其后资源的下载。也就是说,外部脚本不会阻塞外部脚本的力口载,但会阻塞外部脚本的执行。

css 本来是可以并行加载的,但是当css 后面跟着嵌入的JavaScript 代码的时候,该css 就会阻塞后面资源的下载。而当把嵌入的JavaScript 代码放到 css 前面时,就不会出现阻塞的情况了(在IE6 下css 都会阻塞加载)。

根本原因是因为浏览器会维持HTML 中css 和JavaScript 代码的顺序,样式表必须在嵌入的JavaScript 代码执行前先加载、解析完。而嵌入的JavaScript 代码会阻塞后面的资源力口载,所以就会出现css 阻塞资源、加载的情况。

欢迎大家在评论区评论留言,小编会及时给大家解答疑惑的

打开APP阅读更多精彩内容