一天，小明正在网上查找资料，项目中遇到的问题需要通过查阅资料来解决，他看到一个标题很有意思，觉得这应该是他要找的答案，于是他就点了进去，结果进入网站后几秒钟的时间，网页还是一片空白，过了好久才加载完成。

为什么会出现这种情况？

说到这那我们就有必要先了解一下网站加载的整个完整过程了。

1.首先浏览器从服务器接收到html代码，然后开始解析html

2.构建DOM树（根据html代码自顶向下进行构建），并且在同时构建渲染树

3.遇到js文件加载执行，将阻塞DOM树的构建；遇到css文件，将阻塞渲染树的构建

（script标签中的defer属性：构建DOM树的过程和js文件的加载异步（并行）进行，但是js文件执行需要在DOM树构建完成之后

script标签中的async属性：构建DOM树、渲染树的过程和js文件的加载和执行异步（并行）进行）

为什么要对css，js的放置位置进行调整？

从以上过程可以知道，当js文件放在head中时，浏览器构建DOM树的时候遇到js文件加载会阻塞，也就是说，浏览器不会加载body中的标签，一旦这个js文件的数量和内容都比较大，那么就会造成刚刚小明遇到的那种情况，就不会给用户一个十分良好的可视化回馈，而在前端开发中，给予用户的可视化回馈十分重要。

我们现在十分青睐于用进度条来描述一个过程，而对用户的可视化回馈，就是网页加载的进度条。

对于现如今有着快节奏的人们，如果一个网页打开后在两秒钟内没有反应，或者加载很慢，那么用户就会很不耐烦的关掉它，想当于被直接宣判死刑了。

应该放在哪里？

综上所述，script标签最好放在</body>标签的前面，因为放在所有body中的标签后面就不会出现网页加载时出现空白的情况，可以持续的给用户提供视觉反馈，同时在有些情况下，会降低错误的发生。

而css标签应该放在<head></head>标签之间，因为如果放在</body>标签的前面，那么当DOM树构建完成了，渲染树才构建，那么当渲染树构建完成，浏览器不得不再重新渲染整个页面，这样造成了资源的浪费。效率也不高。如果放在<head></head>之间，浏览器边构建边渲染，效率要高的多。

（个人愚见，如有不足，或者错误的地方，还请大家不吝赐教）

关于css,js放置位置的问题的更多相关文章

  1. vue导入css,js和放置html代码

    使用场景:我是从网上找的html前端页面模板,导入找的模板中的css和js到vue中使用. 1.在main.js中全局导入css和js import '@/assets/css/main.css' i ...

  2. django 关于html、css、js 目录位置

    项目目录: project/ ---------------init.py ---------------views.py ---------------settings.py ----------- ...

  3. JS代码放置位置、变量与数据类型、运算符与逻辑表达运算符

    内容简要: 1.JS代码放置位置的问题: 2.变量与数据类型: 3.运算符与逻辑表达式的运算符   我的位置 全局问题:为何在网页推荐位置(一般在<head></head>内部 ...

  4. WordPress引入css/js两种方法

    WordPress引入css/js 是我们制作主题时首先面对的一个难点,任何一款主题都要加载自己的css,js,甚至很有可能还需要加载Jquery文件,网上方法特多,说法不一,我们今天借鉴wordpr ...

  5. 前端工程师面试问题归纳（一、问答类html/css/js基础）

    一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...

  6. 一个小公司的前端笔试HTML CSS JS

    网上有这套题的答案,版本也很多,我做了很多参考.本文就当个小笔记,可能有错误,还望指正~ 第1章  Html篇 1. 你做的网页在哪些浏览器测试过?这些浏览器的内核分别是什么? 浏览器类型 内核 Fi ...

  7. CSS & JS 制作滚动幻灯片

    ==================纯CSS方式==================== <!DOCTYPE html> <html> <head> <met ...

  8. jquery css事件编程 位置 操作

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. JavaScript放置位置区别

    JavaScript放置位置区别 页面中的脚本会在页面载入浏览器后立即执行.我们并不总希望这样.有时,我们希望当页面载入时执行脚本,而另外的时候,我们则希望当用户触发事件时才执行脚本. 位于 head ...

随机推荐

  1. 【此处有干货~】jmeter+ant+jenkins持续集成配置及过程中问题解决思路

    本人是一枚工作近三年的小测试,大学正好专业为软件测试,在工作中用到最多的是功能测试.接口测试.压力测试.偶尔会涉及到性能测试......(小白,很多观念技术跟大佬差距太大,勿喷) 在接口测试过程当中, ...

  2. JAVA 8 主要新特性 ----------------(七)新时间日期 API -----LocalDateTime

    一.LocalDateTime简介 二.实战讲解 LocalDateTime localDateMax = LocalDateTime.MAX; System.out.println("lo ...

  3. python 0228

    01 cpu 内存 硬盘 操作系统 CPU:中央处理器,相当于人大脑. 飞机 内存:临时存储数据. 8g,16g, 高铁 1,成本高. 2,断电即消失. 硬盘:长期存储大量的数据. 1T 512G等等 ...

  4. Solaris：你好奇的十件事

    想想你周围的人,看看他们正在使用的操作系统.绝大部分人的电脑都在用主流操作系统:Windows,MacOS,甚至是Ubuntu.当说到Solaris,Unix和BSD的时候,其他人还以为你说鸟语呢.除 ...

  5. B树/[oracle]connect BY语句

    读大神的书,出现很多没有见过的函数和便捷操作,特此记录 connect by 之前没有接触过,为了学习这个语句,先了解一下B树数据类型是最好的方法. [本人摘自以下博客] https://www.cn ...

  6. POJ2947-Widget Factory

    工厂里每件期间的生产时间为3-9天,告诉你有N个器件和M个计划,每个计划都是说明生产1-N号器件的时间,最后问你每件器件的生产时间.或者多解或没有解. 例如样例 2 3 2 MON THU 1 2 3 ...

  7. HTML基本格式和文本元素(标签)介绍

    <!doctype html>//声明文档类型 <html lang="zh-cn">//文档开始,后面是声明是中文页面的意思,en是英语的意思 <h ...

  8. 关于QList<T>的内存释放

    当T为指针类型时,List.clear()不能释放其内存,需加上qDeleteAll()函数, //class Person ---> Person(int id_,QString name_) ...

  9. OPC转发阿里云alink工具

    这个最近还在做 2019-04-24 今天抽空吧基本mqtt上传,OPC遍历,导出物模型功能先做了 上报操作日志,上报错误信息,导入参数,导出参数还没做 有需要可以联系微信NBDX123

  10. 利用Qt Designer 进行 空间提升propomotion 的时候异常： NO such file or directory

    1. 因为在提升的时候,只设置了 类名,以及文件名,但是没有给定Qt 的uic 的指定搜索路径,因此报错 在生成的ui_xxxx.h文件必然找不到这个文件. 如下图: 2. 解决方法 在项目的属性中: ...