Skip to content

[js] 第86天 把Script标签放在页面最底部的</body>之前和之后有什么区别?浏览器会如何解析它们? #598

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

第86天 把Script标签放在页面最底部的</body>之前和之后有什么区别?浏览器会如何解析它们?

Activity

changed the title [-][js] 第86天 把Script标签放在页面最底部的`</body>`之前和之后有什么区别?浏览器会如何解析它们?[/-] [+][js] 第86天 把Script标签放在页面最底部的</body>之前和之后有什么区别?浏览器会如何解析它们?[/+] on Jul 10, 2019
AnsonZnl

AnsonZnl commented on Jul 11, 2019

@AnsonZnl
Contributor

因为js 可以操作DOM ,所以浏览器在渲染HTML代码时,遇到<script>标签会先解析所有的js,解析完成之后继续向下解析。所以<script>放在底部最后加载比较好,大多数都是这样的。
但是如果你的js会改变全局的样式,比如一个js文件会改变所有的字体,那就应该放在前了,,让它优先解析。

dondonZh

dondonZh commented on Jul 11, 2019

@dondonZh

前面:先解析完js再渲染界面
后面:渲染完界面再解析

pokerLife

pokerLife commented on Jul 11, 2019

@pokerLife

虚拟dom就不需要考虑这个了:dog:

zqzxy

zqzxy commented on Jul 11, 2019

@zqzxy

HTML 2.0起放在“body标签闭合之后”就是不合标准的。之所以但是浏览器却不会报错,是因为如果在“body标签闭合之后”后再出现script或任何元素的开始标签,都是parse error,浏览器会忽略之前的,即视作仍旧在body内。所以实际效果和写在“body标签闭合之前”之前是没有区别的。所以要么放head标签里,要么放 </body> 之前。

nowherebutup

nowherebutup commented on Jul 11, 2019

@nowherebutup

放在之前,解析到script标签的时候,解析中断,并且阻断其他HTML解析(因为HTML并不知道js里面会不会有什么改变DOM结构,故在此中断);
放在之后,DOM渲染完成,不过,用户操作页面的时候,有可能js还没响应

Vi-jay

Vi-jay commented on Aug 1, 2019

@Vi-jay

放在DOM之前 先解析 执行完js再解析DOM 放在之后 则先解析渲染完DOM在执行js 所以放在DOM之前js拿不到DOM

smile-2008

smile-2008 commented on Feb 26, 2021

@smile-2008

前面:先解析完js再渲染界面
后面:渲染完界面再解析

zxcdsaqwe123

zxcdsaqwe123 commented on Dec 14, 2021

@zxcdsaqwe123

由于浏览器的解析顺序是由上至下,由左至右的,如果script放在body上面,其代码可能无法获取到body里的元素,除非是写在window.onload里面

xiaoqiangz

xiaoqiangz commented on Jun 22, 2022

@xiaoqiangz

浏览器解析顺序是从下到下,如果script放在body上面,可能会导致js代码里无法获取dom元素,一般是在window.onload触发后再去操作dom元素,或着放在body下面等待dom元素先挂载完毕。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    jsJavaScript

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @smile-2008@haizhilin2013@xiaoqiangz@Vi-jay@dondonZh

        Issue actions

          [js] 第86天 把Script标签放在页面最底部的</body>之前和之后有什么区别?浏览器会如何解析它们? · Issue #598 · haizlin/fe-interview