JavaScript学习整理1

一、关于CSS和JS在网页中的放置顺序。

  1. 通常将css放在页面的上面<head></head>里,js放在下面挨着</body>。2.如果遇到css文件很多很大,会加大白屏时间,也会放在底部。而有的js必须放在页面之前加载的,需要放到顶部。可以把必须的js和css放顶部,把不那么重要的css和js放底部。3.js放前面加defer属性。这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说,脚本会被延迟到整个页面都解析完毕后再运行。但采用这种方法,会有一种缺陷。在有些浏览器中。并不会按照你自己文件的顺序执行下来。并且有的浏览器还会忽略这种属性。
  2. 浏览器的解析方式。
  • 浏览器端通过HTTP协议向要打开的IP地址所在服务器发起请求,服务器接受到请求之后等待处理,最后向浏览器端发回响应,此时在HTTP协议下,浏览器从服务器接收到 text/html类型的代码,浏览器开始显示此html,并获取其中内嵌资源地址,然后浏览器再发起请求来获取这些资源,并在浏览器的html中显示。
  • 遇到js时下载一个,解释一个。因为浏览器需要1个稳定的DOM树结构,而JS中很有可能有代 码直接改变了DOM树结构,比如使用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转,浏览器为了防止出现JS修改DOM树,需要重新构建DOM树的情况,所以 就会阻塞其他的下载和呈现.
  • CSS文件的下载也使用连接的话,也是串行下载。样式文件和JS文件一样也是下载完一个解析一个。
  • JS函数的执行会阻塞其他渲染,下载。css进行渲染下载时,是不是也会停止其他元素的下载?

3 . 网页的渲染机制。
浏览器解析html页面下载html,在内存中把html代码转化成Dom Tree->解析 CSS 标签, 构建 CSSOM 树->把 DOM 和 CSSOM 组合成 渲染树 (render tree)->在渲染树的基础上进行布局, 计算每个节点的几何结构->把每个节点绘制到屏幕上 (painting)。

4 . js阻塞
引用的外部js放在下面,原因是js会阻塞加载,会影响页面加载的速度,如果js文件比较大,算法也比较复杂的话,影响更大。CSS放在前端是页面渲染时首先是根据DOM结构生成一个DOM树然后加上CSS样式生成一个渲染树,如果CSS放在后面可能页面会出现闪跳的感觉,或者是白屏或者布局混乱样式很丑直到CSS加载完成。
js阻塞下载的原因:
**JS 有可能会修改 DOM. **典型的,可能会有 document.write. 这意味着,在当前 JS 加载和执行完成前,后续所有资源的下载有可能是没必要的。这是 JS 阻塞后续资源下载的根本原因。
JS 的执行有可能依赖最新样式。比如,可能会有 var width = $('#id').width(). 这意味着,JS 代码在执行前,浏览器必须保证在此 JS 之前的所有 css(无论外链还是内嵌)都已下载和解析完成。这是 CSS 阻塞后续 JS 执行的根本原因。
现代浏览器很聪明,会进行 prefetch 优化。性能是如此重要,现代浏览器在竞争中,在 UI update 线程之外,还会开启另一个线程,对后续 JS 和 CSS 提前下载(注意,仅提前下载,并不执行)。有了 prefetch 优化,这意味着,在不存在任何阻塞的情况下,理论上 JS 和 CSS 的下载时机都非常优先,和位置无关。
js非阻塞加载解决方案:用defer标签

二、白屏和FOUC(无样式内容闪烁)问题、加载异步

  • 如果把样式放在底部,对于IE浏览器,在某些场景下(新窗口打开,刷新等)页面会出现白屏,而不是内容逐步展现,如果使用 @import标签,即使 CSS 放入 link, 并且放在头部,也可能出现白屏
  • 不同的浏览器对于CSS和HTML的处理方式不同,有的是等待CSS加载完成之后,对HTML元素进行渲染和展示(白屏问题)。有的是先对HTML元素进行展示,然后等待CSS加载完成之后重新对样式进行修改(FOUC无样式内容闪烁)
  • 如果把CSS样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现 FOUC 现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式).对于 Firefox 会一直表现出 FOUC 。
  • 如果把js文件放在头部,脚本会阻塞后面内容的呈现,脚本会阻塞其后组件的下载,出现白屏问题。
    加载异步

<pre>
1.<script src="script.js"></script>
2.<script defer src="script.js"></script>
</pre>

async:加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步)。
defer:加载后续文档元素的过程将和 script.js 的加载并行进行(异步),但 script.js 的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成。
若无defer 或 async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。

三、JavaScript 定义了几种数据类型? 哪些是简单类型?哪些是复杂类型?

6种数据类型:
数值(number):整数和小数(比如1和3.14)
字符串(string):字符组成的文本(比如"Hello World")
布尔值(boolean):true(真)和false(假)两个特定值
undefined:表示“未定义”或不存在,即此处目前没有任何值
null:表示空缺,即此处应该有一个值,但目前为空
对象(object):各种值组成的集合

简单类型都是按值访问,值不能添加属性,值在内存中占据固定的空间大小,在栈中保存,一个变量向另一个变量复制简单类型的值时会创建这个值的副本。复杂数据类型可以由多个值构成对象,js不允许直接访问对象在内存中的位置,在操作对象时,是在操作对象的引用。对象保存在堆内存中,包含引用类型值的变量实际上包含的并不是对象本身,而是一个指向该对象的指针。从一个变量向另一个变量复制引用类型的值,复制的其实是指针,因此两个变量最终都指向同一个对象。
最基本的数据类型(简单类型):数值\字符串\布尔值
特殊值(简单类型):undefined\null
合成类型(复杂类型):对象

四、NaN、undefined、null

  1. NaN:not a number,表示非数字,NaN和任何值都不相等,包括它自己,该属性用于指示某个值不是数字。可以把 Number 对象设置为该值,来指示其不是数字值。语法:Number.NaN。
    NaN == NaN; //false
    typeof(NaN)结果确是number。
    isNaN()来判断这个数字是不是NaN,包含着隐式类型转换Number()。

  2. undefined:undefined的类型只有一个值,就是特殊的undefined,使用var申明但未对其加以初始化时,这个变量的值就是undefined。
    对未申明的变量执行typeof返回undefined值。为初始化的变量typeof同样会返回undefined值。原因可能是实际上都没有对他们进行实际性的操作(即初始化)。

3 .null:第二个只有一个值的数据类型,其值为特殊的null。null可以理解为空对象指针。
null是一个表示"无"的对象,转为数值时为0;
undefined是一个表示"无"的原始值,转为数值时为NaN。
Number(null)结果为0,Number(undefined)结果为NaN。

五、typeof和instanceof的作用和区别

  1. typeof:
    typeof 是一个一元运算,放在一个运算数之前,运算数可以是任意类型。返回值是一个字符串,该字符串说明运算数的类型,返回结果有number,boolean,
    string,function,object,undefined。可以使用 typeof 来获取一个变量是否已经赋值,如 if(typeof a!="undefined"){alert("ok")}。
  2. instanceof :判断一个变量是否是某个对象(类)的实例,返回值是布尔类型。一般说来只有使用构造函数创建的对象才会返回true,否则返回false,不过数组是一个例外,都会返回true。
    x instanceof y?alert("true"):alert("false"); //x是y的实例?真:假
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,491评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,856评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,745评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,196评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,073评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,112评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,531评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,215评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,485评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,578评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,356评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,215评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,583评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,898评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,497评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,697评论 2 335

推荐阅读更多精彩内容