关于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 ...
随机推荐
- java下载Excel模板(工具类)
一次文件下载记录 一次不成熟的文件下载操作记录,希望能对需要的人有所帮助. 1.前端代码 $("#downloadModel").click(function(){ var mod ...
- 函数append()和html()的区别
它们的功能缺失有点相似,但是实际上本质上是有区别: append()函数是为指定元素尾部附加内容,而html()函数是重置元素内部的html内容.·
- LOJ-10109(欧拉回路)
题目链接:传送门 思路: 就是简单的找欧拉回路,不过要注意dfs边时要将边的编号/2,不然会分不清那条边每被遍历. #include<iostream> #include<cstdi ...
- suse11 安装 python3.6 python3 安装步骤
首先需要去网上下载Python-3.6.4.tgz,libopenssl-devel-0.9.8j-2.1.x86_64.rpm zlib-devel-1.2.7-3.14.x86_64.rpm li ...
- 【ProtoBuffer】windows上安装ProtoBuffer3.1.0 (附已编译资源)
------- 17.9.17更新 --- 以下这些方法都是扯淡,对我的机器不适用,我后来花了最后成功安装并亲测可用的方法不是靠vs编过的,vs生成的库引入后函数全部报undefine refere ...
- future项目上报
private String name;//预警名称 private String detail;//详细 用于定义位置和报错信息,越多越好private String code;//编码 1001是 ...
- HTML 列表中的dl,dt,dd,ul,li,ol区别及应用
无序列表 无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记. 无序列表始于 <ul> 标签.每个列表项始于 <li>. 有序列表 同样,有序列表也是 ...
- Python之路【第三篇】编码
Python代码——>字节码——>机器码——>计算机 Windows: cmd ==> python 文件路径 cmd ==>python >> 输入命令 L ...
- 使用ILSpy软件反编译.Net应用程序的方法及注意事项
今天遇到之前同事写的代码没有源码了,但是客户要在原来的基础上修改程序!好在没有做加壳处理,所以就用了ILSpy软件进行反编译!下面把步骤及遇到的问题写下来: 1.打开ILSpy软件,点击File , ...
- 凌华Express CVC D2550 Win7 64-bit无法正常关机的解决办法
[问题现象]: 在Windows点击shutdown按钮后,显示器一直停在“正在关闭...”的界面上: 此时硬盘已经停止工作了: CPU没有发送S5信号,因此,主板上的电没有被切断: [解决办法]: ...