技术标签: Html+Javascript
(1)下载和渲染顺序从上到下。下载渲染同时进行
(2) 遇到语义解释性标签嵌入文件(图片,css
样式),IE下载过程会启用单独链接进行下载
(3)样式表css
文件下载完成后会和以前样式表一起解析,重新渲染
(4)JS,CSS
如果有重定义,后定义函数覆盖前定义函数
(1)不能并行下载和解析(阻塞下载)。
(2)当引用了JS时候,浏览器发送1个JS request
就会一直等待该request
返回。因为浏览器需要一个稳定的DOM
树结构,而JS
中有可能有改变DOM
树的代码,如插入节点appendChild,document.write
或者location.href
等
所以,js
可以异步加载,也可以写在html
文档的最下面。
HTML
页面加载速度:1.页面减肥:
inline
(内嵌:写在HTML内)css,js
外链的形式导入HTML Tidy
工具检查HTML2.减少文件数量
http
连接数b.js、css
文件能合并就合并3.减少域名查询:DNS
查询和解析域名也需要消耗时间,减少对外部js
、css
、图片资源的引用,不同域名使用越少越好
4.缓存重用的数据
5.优化页面加载顺序:首先加载页面最初显示的内容和与之相关的js
和css
,然后加载html
相关的东西(最初不显示的图片、flash、视频等)
6.减少inline---js
的数量
7.使用合法的css
标签
8.不要使用嵌套table
html
:html
代码,发现标签有一个标签引用外部css
文件css
文件的请求,服务器返回这个css
html
中部分代码,并且css
文件下载好了,开始渲染页面js
代码的JS
基础知识——CSS
和JS
的放置顺序css,js
的放置位置FOUC
async
和defer
正确的放置姿势是,将css
文件放在head
中,将js
文件放在body
内,而且最好把js
放在body
的底部。
下面我们来探讨一下原因。
html
标签,构建dom tree
。css
标签,构建cssom tree
。dom tree
和cssom tree
组合成渲染树(render tree
)。如果我们把样式放在了底部的话,对于ie
浏览器,某些场景下(新窗口 ,刷新等情况下),页面会出现白屏现象,而不是内容逐步展现,即使是使用@import
标签,将css
放入link
,并且放在头部依然会出现白屏现象。
如果把js
文件放在前面会阻挡后面内容的呈现,会阻塞其后组件的下载。
对于图片和css
,在加载时会并发加载,但在加载js时,会禁用并发,并且阻止其它内容的下载,所以把js放在页面顶部会导致白屏现象。
FOUC
既然提到了白屏现象,那么我们再来看看另一个常常会出现的现象,无样式内容闪烁(FOUC
):
其实,有的是叫做浏览器样式闪缩,两种叫法都指的是,浏览器逐步加载无样式的内容,也就是先解析了html
,等加载了css
后再突然出现样式。
解决方法就是乖乖使用link
标签把css
文件放在head
中就好啦。
上述看来,难道js
只能在加载完html
,css
后才能被加载吗?我们的理想情况应该是js
的加载和其它文档的加载同时进行,而且不影响dom
的渲染,那么,下面我们来谈谈js
的异步加载。
平时,我们最常见的js
加载模式就是这样的同步加载模式,也叫做,阻塞模式,就像是塞车道路一样,得一辆辆的走,不能同时过好几辆。
<script src="script1.js"></script>
<script src="script2.js"></script>
<script src="script3.js"></script>
async
<script async src="script1.js"></script>
async
属性是HTML5
新增的属性,加载和渲染后续文档元素的过程将和script.js
的加载与执行并行进行,但是要在onload
事件触发之前完成。
“Firefox 3.6、Opera 10.5、IE 9 和 最新的Chrome 和 Safari 都支持 async 属性。可以同时使用 async 和 defer,这样IE 4之后的所有 IE 都支持异步加载,但是要注意,async会覆盖掉defer。”
defer
<script defer src="script1.js"></script>
添加了defer
后,加载后续文档元素的过程将和script.js
的加载并行进行,但是js
文件的执行要在所有元素解析完成后。这样的话,就可以把js
文件放在head
中了,而不用放在body
的底部。
“但是并非所有的浏览器都支持defer(对于一些modern浏览器,如果声明defer,其内部脚本将不会执行document.write及DOM渲染操作。IE4+均支持defer属性)。这意味着,如果想确保自己的延迟脚本能在文档加载后运行,就必须将所有延迟脚本的代码都封装在诸如jQuery之$(document).ready之类的结构中。这是值得的,因为差不多97%的访客都能享受到并行加载的好处,同时另外3%的访客仍然能使用功能完整的JavaScript。”
文章浏览阅读1k次。通过使用ajax方法跨域请求是浏览器所不允许的,浏览器出于安全考虑是禁止的。警告信息如下:不过jQuery对跨域问题也有解决方案,使用jsonp的方式解决,方法如下:$.ajax({ async:false, url: 'http://www.mysite.com/demo.do', // 跨域URL ty..._nginx不停的xhr
文章浏览阅读2k次。关于在 Oracle 中配置 extproc 以访问 ST_Geometry,也就是我们所说的 使用空间SQL 的方法,官方文档链接如下。http://desktop.arcgis.com/zh-cn/arcmap/latest/manage-data/gdbs-in-oracle/configure-oracle-extproc.htm其实简单总结一下,主要就分为以下几个步骤。..._extproc
文章浏览阅读1.5w次。linux下没有上面的两个函数,需要使用函数 mbstowcs和wcstombsmbstowcs将多字节编码转换为宽字节编码wcstombs将宽字节编码转换为多字节编码这两个函数,转换过程中受到系统编码类型的影响,需要通过设置来设定转换前和转换后的编码类型。通过函数setlocale进行系统编码的设置。linux下输入命名locale -a查看系统支持的编码_linux c++ gbk->utf8
文章浏览阅读750次。今天准备从生产库向测试库进行数据导入,结果在imp导入的时候遇到“ IMP-00009:导出文件异常结束” 错误,google一下,发现可能有如下原因导致imp的数据太大,没有写buffer和commit两个数据库字符集不同从低版本exp的dmp文件,向高版本imp导出的dmp文件出错传输dmp文件时,文件损坏解决办法:imp时指定..._imp-00009导出文件异常结束
文章浏览阅读143次。当下是一个大数据的时代,各个行业都离不开数据的支持。因此,网络爬虫就应运而生。网络爬虫当下最为火热的是Python,Python开发爬虫相对简单,而且功能库相当完善,力压众多开发语言。本次教程我们爬取前程无忧的招聘信息来分析Python程序员需要掌握那些编程技术。首先在谷歌浏览器打开前程无忧的首页,按F12打开浏览器的开发者工具。浏览器开发者工具是用于捕捉网站的请求信息,通过分析请求信息可以了解请..._初级python程序员能力要求
文章浏览阅读7.6k次,点赞2次,收藏6次。@Service标注的bean,类名:ABDemoService查看源码后发现,原来是经过一个特殊处理:当类的名字是以两个或以上的大写字母开头的话,bean的名字会与类名保持一致public class AnnotationBeanNameGenerator implements BeanNameGenerator { private static final String C..._@service beanname
文章浏览阅读6.9w次,点赞73次,收藏463次。1.前序创建#include<stdio.h>#include<string.h>#include<stdlib.h>#include<malloc.h>#include<iostream>#include<stack>#include<queue>using namespace std;typed_二叉树的建立
文章浏览阅读7.1k次。在Asp.net上使用Excel导出功能,如果文件名出现中文,便会以乱码视之。 解决方法: fileName = HttpUtility.UrlEncode(fileName, System.Text.Encoding.UTF8);_asp.net utf8 导出中文字符乱码
文章浏览阅读2.1k次,点赞4次,收藏23次。第一次实验 词法分析实验报告设计思想词法分析的主要任务是根据文法的词汇表以及对应约定的编码进行一定的识别,找出文件中所有的合法的单词,并给出一定的信息作为最后的结果,用于后续语法分析程序的使用;本实验针对 PL/0 语言 的文法、词汇表编写一个词法分析程序,对于每个单词根据词汇表输出: (单词种类, 单词的值) 二元对。词汇表:种别编码单词符号助记符0beginb..._对pl/0作以下修改扩充。增加单词
文章浏览阅读773次。我在使用adb.exe时遇到了麻烦.我想使用与bash相同的adb.exe shell提示符,所以我决定更改默认的bash二进制文件(当然二进制文件是交叉编译的,一切都很完美)更改bash二进制文件遵循以下顺序> adb remount> adb push bash / system / bin /> adb shell> cd / system / bin> chm..._adb shell mv 权限
文章浏览阅读6.8k次,点赞12次,收藏125次。1. 单目相机标定引言相机标定已经研究多年,标定的算法可以分为基于摄影测量的标定和自标定。其中,应用最为广泛的还是张正友标定法。这是一种简单灵活、高鲁棒性、低成本的相机标定算法。仅需要一台相机和一块平面标定板构建相机标定系统,在标定过程中,相机拍摄多个角度下(至少两个角度,推荐10~20个角度)的标定板图像(相机和标定板都可以移动),即可对相机的内外参数进行标定。下面介绍张氏标定法(以下也这么称呼)的原理。原理相机模型和单应矩阵相机标定,就是对相机的内外参数进行计算的过程,从而得到物体到图像的投影_相机-投影仪标定
文章浏览阅读2.2k次。文章目录Wayland 架构Wayland 渲染Wayland的 硬件支持简 述: 翻译一篇关于和 wayland 有关的技术文章, 其英文标题为Wayland Architecture .Wayland 架构若是想要更好的理解 Wayland 架构及其与 X (X11 or X Window System) 结构;一种很好的方法是将事件从输入设备就开始跟踪, 查看期间所有的屏幕上出现的变化。这就是我们现在对 X 的理解。 内核是从一个输入设备中获取一个事件,并通过 evdev 输入_wayland