关于css,js放置位置的问题
一天，小明正在网上查找资料，项目中遇到的问题需要通过查阅资料来解决，他看到一个标题很有意思，觉得这应该是他要找的答案，于是他就点了进去，结果进入网站后几秒钟的时间，网页还是一片空白，过了好久才加载完成。
为什么会出现这种情况？
说到这那我们就有必要先了解一下网站加载的整个完整过程了。
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放置位置的问题的更多相关文章
- vue导入css,js和放置html代码
使用场景:我是从网上找的html前端页面模板,导入找的模板中的css和js到vue中使用. 1.在main.js中全局导入css和js import '@/assets/css/main.css' i ...
- django 关于html、css、js 目录位置
项目目录: project/ ---------------init.py ---------------views.py ---------------settings.py ----------- ...
- JS代码放置位置、变量与数据类型、运算符与逻辑表达运算符
内容简要: 1.JS代码放置位置的问题: 2.变量与数据类型: 3.运算符与逻辑表达式的运算符 我的位置 全局问题:为何在网页推荐位置(一般在<head></head>内部 ...
- WordPress引入css/js两种方法
WordPress引入css/js 是我们制作主题时首先面对的一个难点,任何一款主题都要加载自己的css,js,甚至很有可能还需要加载Jquery文件,网上方法特多,说法不一,我们今天借鉴wordpr ...
- 前端工程师面试问题归纳（一、问答类html/css/js基础）
一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...
- 一个小公司的前端笔试HTML CSS JS
网上有这套题的答案,版本也很多,我做了很多参考.本文就当个小笔记,可能有错误,还望指正~ 第1章 Html篇 1. 你做的网页在哪些浏览器测试过?这些浏览器的内核分别是什么? 浏览器类型 内核 Fi ...
- CSS & JS 制作滚动幻灯片
==================纯CSS方式==================== <!DOCTYPE html> <html> <head> <met ...
- jquery css事件编程 位置 操作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JavaScript放置位置区别
JavaScript放置位置区别 页面中的脚本会在页面载入浏览器后立即执行.我们并不总希望这样.有时,我们希望当页面载入时执行脚本,而另外的时候,我们则希望当用户触发事件时才执行脚本. 位于 head ...
随机推荐
- xml中CDATA包含问题
最近对接徐州一家医院,his是东联的,其中有个接口要求传入格式类似于 : <![CDATA[ <Request> <CardNo>000002629518</Car ...
- centos7制作本地yum源
创建想要挂载的路径 mkdir /mnt/cdrom 挂载本地镜像到创建的目录 mount -t iso9660 /dev/cdrom /mnt/cdrom/ mount: /dev/sr0 is w ...
- svn的基本使用方法
一,svn的介绍 Subversion(SVN) 是一个开源的版本控制系統, 也就是说 Subversion 管理着随时间改变的数据. 这些数据放置在一个中央资料档案库(repository) 中. ...
- MySQL数据库（二）－数据库的增删改查
简介: 以下是MySQL最基本的增删改查语句．在进行“增删改查”的操作之前,先建立一个包含数据表student的数据库,新建表grade(具体操作可以见上一篇)． 一.＂增＂-添加数据 1.1 为表中 ...
- 感知机、logistic回归 损失函数对比探讨
感知机.logistic回归 损失函数对比探讨 感知机 假如数据集是线性可分的,感知机学习的目标是求得一个能够将正负样本完全分开的分隔超平面 \(wx+b=0\) .其学习策略为,定义(经验)损失函数 ...
- MapGIS数据中心设计器 帮助文档
我以为是数据设计呢..数据设计按钮在哪里??? 数据库设计和管理(没mapgis k9那么好找)(可以编辑sql数据,可以开发吗?)文件中肯定是不行的,要网络发布,肯定是要导入sql数据库中的(或者是 ...
- JS中encodeURI()、decodeURI()、encodeURIComponent()和decodeURIComponent()编码与解码
编码解码问题. 解决这个问题大家一般都使用encodeURI或者encodeURIComponent方法,在这里做一下总结: 首先看看各个方法不同浏览器的支持程度 函数 描述 FF N IE deco ...
- 大众点评selfxss结合两个csrf变废为宝(已修复，故公开，不涉及真实参数)
大众点评selfxss结合两个csrf变废为宝 漏洞不值钱,但还是蛮好玩的 漏洞信息 类型:存储型xss 场景:收藏商户后,去已收藏的商户列表可以给指定商户添加tag(与下文html标签区别) 漏洞限 ...
- Shell文件权限-1
- shiro与项目集成开发
shiro与spring web项目开发 加入shiro的jar包 自定义realm /** * 自定义realm 继承授权realm * @author Administrator * */ pub ...