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

为什么会出现这种情况?

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

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. 在 ASP.NET Core 中发送邮件遇到的坑_学习笔记

    功能需求 因为项目需要有个忘记密码验证邮箱再重新修改密码的功能,然后我选用了很简单的一个方案,通过验证登录用户的邮箱然后发送邮件,通过这个邮件发送的链接地址来最后实现密码修改的小功能. 项目环境及实现 ...

  2. 通过java读取excle数据的方法,今天用到了留下来供以后参考使用

    近期项目属于一个棋牌类项目 用到的配置表比较多 所以在这里 贴一下代码,留下来可以参考.也希望对有需要的朋友有所帮助哦 >1.需求将一个excle表格中的数据 读取 然后封装成自定义的对象,本项 ...

  3. Linux的历史发展及应用

    Linux的基本介绍: Linux的历史: 操作系统,英语Operating System简称为OS.说道操作系统就需要先讲一讲Unix,UNIX操作系统,是一个强大的多用户.多任务操作系统,支持多种 ...

  4. temp--贵州银行

    -------住宿----泊乐酒店----8905----与朱聿一起住 2018年  1月3日晚 1月4日晚  1月5日晚 1月6日晚  1月7日晚 1月8日晚  1月9日晚 已结清! ======= ...

  5. 第48章:MongoDB-备份和恢复

    ①文件系统快照(snapshot) 生成文件系统快照这个方法需要满足两个条件: 1:文件系统本身支持快照技术 2:运行mongod时必须开启日记系统 其恢复就是快照的恢复,当然,恢复的时候,确保mon ...

  6. GitHub上最受欢迎的 5 大 Java 项目

    1. Mockito Mockito 并不是无酒精混合饮料的意思.Mockito 是一个针对 Java 的 mocking 框架.它与 EasyMock 和jMock 很相似,但是通过在执行后校验什么 ...

  7. java 调用 api接口

    /* * Copyright 2018 textile.com All right reserved. This software is the * confidential and propriet ...

  8. Breathe me

    Help, I have done it again 帮帮我,我又做错了. I have been here many times before 哪怕这已经不是一两次了. Hurt myself ag ...

  9. #254 Find the Longest Word in a String

    找出最长单词 在句子中找出最长的单词,并返回它的长度. 函数的返回值应该是一个数字. 当你完成不了挑战的时候,记得开大招'Read-Search-Ask'. 这是一些对你有帮助的资源: String. ...

  10. navibar记录

    @import (reference) "kmc-common.less"; .kmc{ font-family: PingFangSC-Reguxlar; font-weight ...