js阻塞问题 |
您所在的位置：网站首页 › 前端浏览器渲染机制 › js阻塞问题 |
|
今天来聊聊前端性能问题中的js阻塞问题。 浏览器渲染机制首先先来看看浏览器渲染机制，大致分为以下几步 1、浏览器根据服务器响应回来的html，进行解析后构建一颗DOM节点树； 2、根据css文件，构建得到CSSOM树； 3、将DOM树与CSSOM树结合，精确计算每个节点的位置、尺寸等等属性，构建出渲染树； 4、渲染至用户页面结论：从这个我们可以看出，css不会影响DOM的解析，但是会影响DOM的渲染过程。 浏览器引擎浏览器引擎分为渲染引擎以及js引擎，其实之前是区分这2个概念的，但是慢慢地大家发现有必要将二者进行独立区分 1、渲染引擎：主要负责html解析以及css等相关文件 2、js引擎：负责js代码运行与解析尽管浏览器在加载页面的时候是多线程的，但是浏览器在渲染页面的时候却是一个单线程过程，那么也就是说，渲染引擎与js引擎不能同时工作，所以也就引出了js阻塞问题。 js阻塞问题js阻塞问题是指当浏览器在解析文档或者渲染页面时，遇见了js代码，需要渲染引擎中断，而运行js引擎，从而阻塞浏览器原本的工作状态。 1、script标签放在头部加载：由于需要加载js代码，所以会阻塞后面html的解析与加载； 2、放在中间与放在头部道理一样； 3、放在底部(body闭合之前)：此时由于DOM已经加载解析完了，浏览器可以专心地加载js代码 解决方法： 1、通常我们会将script标签放在body闭合时的上方； 2、利用dom动态创建script标签； 3、将script标签放在头部，但是要加上async或者defer属性 async、defer区别 1、共同点：可以让浏览器进行异步加载js代码，而不会出现js阻塞的情况 2、区别： async：当js代码加载会之后会异步执行js代码； defer：当js代码加载完之后回等到dom解析完之后，在DocumentContentLoaded之前执行js代码，在一定程度上可以保证js代码加载的顺序。 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |