js基础

css和js 在网页中的放置顺序

js在网页的放置顺序

对于外部js的文件放置时,应该全部放在<head>标签内。但是这样的话,意味着必须等着全部的js代码都被下载、解析、执行完成后,才能呈现页面的内容(浏览器在遇到<body>标签时才开始呈现内容)。对于那些需要很多js 的页面来说,这无疑会导致浏览器在呈现页面时出现明显的延迟,而延迟期间的浏览器窗口中将是一片空白,为了避免这个问题,有时候会把外部的js文件放在<body>元素中页面内容的后面。

css在文件中的放置顺序

CSS一般放置在head标签内,要是页面在无CSS渲染的情况下先下载html的话将会面目全非,样式先行的话在加载html内容的时候可以同时渲染样式,避免fouc。
当css样式表和js外部文件同时在head标签中时,css样式表应该放置在js外部文件的上面

白屏和FOUC

当把css样式表放在底部或者使用@import方式引入样式、或将js放在头部造成其他内容阻塞加载时:

  • 一些浏览器例如chrome和ie,它的加载和渲染机制是等头部的js 和底部的CSS全部加载解析完成后再渲染展示页面,而这个等待的时间就是白屏。

  • 另一些浏览器例如firefox,它会在CSS未加载前先展现页面,等CSS加载后再重绘一次,这就造成了无样式内容闪烁(逐步加载无样式的内容,等CSS加载后页面突然展现样式)
    解决方法就是在head中运用css样式表。

async和defer的作用及其区别

加载

即获取资源文件的过程,不同的浏览器以及不同的版本在实现这一过程中会有不同的实现效果。
加载过程中遇到外部的CSS文件,浏览器另外发出一个请求来获取CSS文件。
遇到图片资源浏览器也会发出另外的一个请求来获取图片资源这是异步请求,并不会影响html文档进行加载,但是当文档加载过程中遇到js 文件,html文档会挂起渲染(加载解析渲染同步)的线程,不仅要等待文档中js文件加载完毕,还要等待解析执行完毕,才可以恢复html文档的渲染线程。

延迟脚本

html4.01为<script>标签定义了defer属性,这个属性的用途就是脚本会被 延迟到整个页面都被解析完毕后再运行,因此,defer属性告诉浏览器立即下载但是延迟执行。在现实中,两个延迟脚本的话,不一定按照顺序执行,因此最好只包含一个延迟脚本。
defer属性只适用于外部脚本文件。ie4~ie7还支持对嵌入脚本defer属性的支持,但是ie8及之后的版本则只适用于外部脚本的文件。
在xhtml文档中,要把defer属性设置为defer="defer"。

异步脚本

html5为<script>元素定义了async属性,这个属性与defer属性类似,都用于改变处理脚本的行为。同样与defer类似,async只适用于外部脚本文件,并告诉浏览器立即下载文件。但与defer不同的是,标记为async的两个脚本并不保证按照指定的它们的先后顺序执行。第二个脚本可能会在第一个脚本之前执行。指定async属性的目的就是不让页面等待两个脚本下载和执行,从而异步加载页面的其他内容。

简述网页的渲染顺序

如何渲染一个网页

  1. 在浏览器输入要访问的网页的url;
  2. 浏览器开始解析url,找寻其所属的协议,主机所在,所用的端口以及对应的路径;
  3. 浏览器通过进行dns查询将域名转为ip地址;
  4. 浏览器开启对应的通信端口并与解析出来的ip地址相连(通常会使用80端口);
  5. 当建立链接后,就会向主机地址发送一个http请求,包含了一些浏览器的基本属性和网页参数等。
  6. 主机将请求接收并转发给监听对应端口的服务器;
  7. 服务器解析请求路径,并根据设定的配置将其转交给对应的处理器处理(具体会根据不同语言而有所区别:php,pyhton等)
  8. 处理器接收请求,并着手准备回应请求;
  9. 根据具体情况,处理器可能会需要链接数据库获取数据来构建回应的内容(链接数据库-》执行查询-》获取并解析数据-》关闭数据库链接);
  10. 将所有的数据整合构成回应主体(对于网页而言是html字符串),加上必须要的元信息(http的header),以同样的协议返回给用户的浏览器;
  11. 浏览器接收回应的内容,根据回应的状态,如果有错误则进行处理,若无则进行解析。
  12. 浏览器会根据获得的内容(多数情况下为html)生成一个dom树;
  13. 然后针对其内引用的外部资源逐个发出请求获取,比如图片,样式,js等,此刻重复上述请求步骤;
  14. 浏览器获得返回的样式后开始解析其内容,将css构建cssom,而根据具体的属性来执行js的解析和执行;
  15. 针对更新后的dom和cssom,生成render tree即包含了视觉展现信息的树,浏览器根据render tree 来进行渲染,即你看到的页面;
  16. 根据css来对render tree进行布局、定位,然后再对定位好的部分进行painting,然后你就看到了呈现在你面前的页面。

css和js加载顺序

js

  • 默认下,js的加载时同步的,即遇到<script>标签后立刻就会开始解析js,如果js本身是外部资源,则还会先去请求获取后再解析,同时dom的解析也会因此而暂停,一直等待js解析执行后才会继续。
  • 对于外部引用的js,开发者可以通过给script标签增加defer属性来使js滞后加载,这样就不会影响到dom的解析了,其也会在dom解析后执行,但这种情况下,务必要保证js中不会用到document.write()这种直接创建dom node的语句;
  • 除了defer,h5中新引入了async属性,可以让js 保持异步加载,如此js的解析执行就是在另一个线程中进行了。就和dom的解析互不影响了,当然,同样的,这种情况下,js中也不能有类似document.write()的函数;
  • 同时,引擎方面目前也有一定的优化,一般来说,webkit或者firefox所用的引擎都会在执行某个脚本的同时,开启另一个线程继续处理下面的文档并请求所需的外部资源。

CSS

虽然css不会影响dom的结构,但是因为js对css有获取权限,所以css加载也会因为js的不同而有所不同。
firefox会在保证css加载后才会加载js;
webkit则智能些,它只会延迟加载那些会因为css未加载而受到影响的js。
即css的执行要优先于js。

js关键词

js

操作网页内容,实现功能或效果。是客户端(浏览器(pc/app嵌入浏览器/手机上))脚本语言

标识符

是指变量、函数、属性的名字或者函数的参数。
特征:区分大小写;
第一个字符必须是字母、下划线、或者是$。
后面的可以是字母、数字、下划线、$。
命名规约:使用有实际意义的单词。
变量使用驼峰规则,第一个单词首字母小写,后面的单词首字母大写。变量使用名词,方法函数使用动词开头,常量全部用大写字母,函数创建对象首字母大写。

变量

在js中变量是用来保存值的占位符,定义变量的时候要使用var运算符,后面跟一个作为名称的标识符即可。

弱类型

强类型:在声明变量的时候就要标识其类型。
弱类型:一个变量用来保存任何类型的数据、变量的类型。不是由声明时决定(声明时只是用了var运算符)而是在程序执行阶段由其值的类型决定的,随着程序运行其值类型改变,变量类型也会发生改变。

语句是为了完成某种任务而进行的操作。比如:var a=1+2这条语句先用var运算符,声明了变量a,然后将1+2的运算结果赋值给变量a。js中语句以;结束,一行可以包含多条语句,如果省略分号不会产生语法错误,解释器会自动判断语句结束。

注释

//单行注释
/**/ 多行注释

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容

  • ======================第一部分===================== =========...
    65_刘璐阅读 555评论 0 1
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,725评论 1 92
  • 问答 1、CSS和JS在网页中的放置顺序是怎样的? 一般来说css 放在Head标签里;Js放在body标签里最后...
    Maggie_77阅读 240评论 0 0
  • 一、css和js在网页中的放置顺序是怎么样的? css一般放在 标签里面。因为浏览器需先渲染css。 js一般放在...
    疯小儿阅读 210评论 0 0
  • 伸手拥抱月光, 用两分钟时间, 倒空心里的满。
    霁青阅读 216评论 0 0