html页面的渲染And<script>位置的影响

周末加班敲代码的时用到了<script>标签,突然想到了一个问题:别的自测项目里面<script>我把他放在了不同位置,这里应该会对代码的执行与渲染后影响吧?于是今天专门进行了查询,趁机总结以下:

html 文档的解释方式&顺序:

预备知识:(需要简单理解同步/异步的区别)

同步,是所有的操作都做完,才返回给用户结果。即写完数据库之后,在相应用户,用户体验不好。

异步,不用等所有操作等做完,就相应用户请求。即先相应用户请求,然后慢慢去写数据库,用户体验较好。

  1. html文档的执行,从上到下解释
  2. 解释过程中遇到 <link>,<img> 标签就会异步进行加载/下载,然后继续向下进行代码的解释
  3. 遇到<script> 标签时情况相反,此时会开始同步请求JS文件,然后逐句执行JS文件中的代码,知道所有代码执行完再继续进行html剩余代码的解释

<script>标签引起的问题And位置的影响:

  • 解决<script>同步执行导致html脚本解释的阻塞问题:
  1. 方法一 => 将<script>放在<body>的最后一部分
  2. 给<script>标签添加 defer 属性;用法:
    <script type="text/javascript" defer="defer">defer 作用:属性规定是否对脚本执行进行延迟,直到页面加载为止。(注意:局限于IE浏览器;详细请参考=>请点击这里)当然也有缺点:就是如果多个JS脚本的时候没法确定脚本的执行先后顺序
  • <script>位置的影响:
          预备知识:(浏览器的工作流程)
          解析html文档成DOM树 => 解析CSS生成CSSDOM树 => CSSDOM树和DOM树结合形成Rending Tree => Layout => 渲染

    • 将<script>放在<head></head>之间,使其在主页和其他代码之前预先装载,可以实现例如:*.js 文件的提前调用
    • 将<script>放在<body></body>之间,则页面加载后运行(注意放在<body></body>中的位置,这里推荐放在最后)

小结:

    1. 在head里面,所有的function函数只加载不执行,执行的话是在某件事触发之后(如果有变量的初始化,会导致报错)
    2. 在body里面直接加载并执行

原文地址:https://www.cnblogs.com/gamecc666/p/11751735.html

时间: 2024-10-21 05:37:07

html页面的渲染And<script>位置的影响的相关文章

为什么我写的page页面无法渲染

场景:有用户使用tiny框架开发page页面,但是访问页面发生“白板”,什么内容也没有渲染出来.         经过代码审核,发现他的page页面写法是正确的,但是layout文件内容为空,缺少${pageContent}占位符,这样会导致模板引擎找不到而渲染失败. 对于tiny框架而言,一定要有一个默认的default.layout文件,layout的写法示例如下: 1234567891011121314 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

跳转页面定位到指定的位置(转)

跳转页面定位到指定的位置 明天要回家了,今天也没啥事做.就分享下做过的一个小需求,还有很多朋友问过我类似的问题,当时也是跟他们说说简单的思路,并没有分享.今天我就整理下吧. 需求是这样的A页面有的链接,跳转到B页面中.并且要根据A页面的链接不同定位的不同的内容区域.我贴个图你大概就理解了: A页面 B页面 当我点击A页面中3的链接的时候,就要跳转到B页面,并且定位到活动三内容区域: 这个都是一个简单的活动页面,当然你也可以很简单的实现,把B页面拆分成3个页面,分别对应A页面的3个不容的内容,但是

scroll 滚动到指定位置触发事件 and 点击一按钮/链接让页面定位在指定的位置

scroll 滚动到指定位置触发事件:$(function(){ $(window).scroll(function() { var s =$(window).scrollTop(); if (s>=782) {//782是导航条离页面顶部的距离(px) $('.nav').addClass('fixednav'); } else{ $('.nav').removeClass('fixednav'); } });}); .fixednav{ position:fixed; top:0px; le

laravel框架页面数据渲染HTML compact的用法

向视图中传递变量 我们在开发web应用当中,通常都不是为了写静态页面而生的,我们需要跟数据打交道,那么这个时候,问题就来了,在一个MVC的框架中,怎么将数据传给视图呢?比如我们要在 ArticleController 的 index 方法的视图输出一个 $title 的变量,在Laravel中,有下面几种常见的方法: 使用with()方法 public function index() { $title = '文章标题1'; return view('articles.lists')->with

SpringBoot入门篇--使用Thymeleaf模板引擎进行页面的渲染

在做WEB开发的时候,我们不可避免的就是在前端页面之间进行跳转,中间进行数据的查询等等操作.我们在使用SpringBoot之前包括我在内其实大部分都是用的是JSP页面,可以说使用的已经很熟悉.但是我们在使用springBoot开发框架以后我们会发现一个致命的问题,就是SpringBoot对Jsp的支持可以说是惨不忍睹,官方推荐我们进行使用的是Thymeleaf模板引擎进行.其实我这里也没搞清楚模板引擎原理是什么,以后有机会再深入了解,我们只需要学会怎么用就行,目前而言.当然模板引擎有很多,比如f

网页页面NULL值对浏览器兼容性的影响

网页页面NULL值对浏览器兼容性的影响       近期做项目中一个页面中的input radio出现浏览器兼容性问题. 主要问题: 在谷歌浏览器,360急速模式和搜狗急速模式中给radio初始动态赋值时.checked属性失效,无法选中.注:360急速模式和搜狗急速模式使用了谷歌chorme的内核(又称webkit内核). 在火狐浏览器中给radio初始动态赋值时,checked属性正常选中. 本来同事以为是浏览器兼容问题,始终未能解决这个问题.后来这个Bug交由我来改动. 初始接到任务时,也

Scrollbarstyle属性的设置对scrollbar位置的影响

ScrollbarStyl总共有四个属性:insideoverlay,insideInset,outsideinset,outsideoverlay.借助这个属性,可以控制scrollbar的风格和位置.scrollbar可以被插入到一个视图里,也可以被置于一个视图的上层.同样,scrollbar可以被置于view的padding的区域,也可以置于view的padding之外的区域. 分别具体说明四个属性对scrollbar的影响. 1. insideoverlay: 以覆盖的方式将scroll

为什么每个前端开发者都要理解页面的渲染?

渲染应该从最开始当页面布局被定义时就进行优化,样式和脚本在页面渲染中扮演着非常重要的角色.专业人员知道一些技巧以避免一些性能问题. 这篇文章不会深入研究浏览器的技术细节,而是提供一些通用的原则.不同浏览器引擎工作原理不同,这就使特定浏览器的学习更加复杂. 浏览器是怎样渲染一个页面的? 我们从浏览器渲染页面的大概过程开始说起: 由从服务器接收到的 HTML 形成 DOM(文档对象模型). 样式被加载和解析,形成 CSSOM(CSS 对象模型). 紧接着 DOM 和 CSSOM 创建了一个渲染树,这

为什么每个前端开发者都要理解页面的渲染?(转载 学习中。。。)

文章转载自:开源中国社区 [http://www.oschina.net] 今天我要将关注点放到页面渲染以及其重要性上.虽然已经有很多文章提到过这个主题了,但大部分信息都是零碎的片段.为了思考这件事情,我需要研究很多信息的来源.这也就是为什么我觉得我应该写这篇文章的原因.我相信这篇文章对新手会很有用,并且对想刷新和巩固他们已经了解的东西的高手也同样适用. 渲染应该从最开始当页面布局被定义时就进行优化,样式和脚本在页面渲染中扮演着非常重要的角色.专业人员知道一些技巧以避免一些性能问题. 这篇文章不