权威指南读书笔记 web浏览器中的javascript

web浏览器就是简单地操作系统

在 HTML中嵌入javascript

  • 内链嵌入,放置在script标签中
  • 放置在由script标签的src属性指定的外部文件
  • 放置在HTML事件处理程序中,该事件处理程序由onclick或onmouseover这样的HTML属性值指定
  • 放在一个URL里,这个URL使用特殊的"javascript:"协议

后两种不常使用

使用外部文件的优势

  • 有益于保持内容和行为的分离,从而简化HTML文件
  • 对于公用一个javascript文件的HTML来说,只需要维护一份代码即可。
  • 公用一个javascript文件的HTML来说,在客户端加载时只需要加载一次,之后使用缓存。
  • src属性值可以是任意的URL,因此来自一个web服务器的javascript程序或web页面可以使用由另一个web服务器提供的代码。

URL中的javascript

URL后面跟一个javascript:协议限定符,是另一种嵌入javascript代码到客户端的方式。这种协议类型指定URL内容为任意字符串,这个字符串是会被javascript解释器运行的javascript代码。他会被当做一行代码对待,因此语句间需使用分号。
javascript:url能识别的“资源”是转换成字符串的执行代码的返回值。该种方式可以使用在任何href的地方。部分浏览器会执行URL中的代码,并使用返回的字符串作为带显示新文档的内容。其他浏览器不允许URL像上面一样覆盖当前文档内容,他们会忽略代码的返回值。

同步、异步和延迟脚本

脚本的执行只在默认情况下是同步和阻塞的。
defer和async属性都在高速浏览器连接进来的脚本不会使用document.write(),也不会生成文档内容,因此浏览器可以在下载脚本时继续解析和渲染文档。

ascyn属性是得浏览器可以尽快执行脚本,而不用在下载脚本时阻塞文档的解析。
defer属性会使浏览器延迟脚本的执行,直到文档的在载入和解析完成。
如果同时使用两个属性,浏览器会遵照async属性忽略defer。

javascript单线程模式

HTML5 定义了一种并发的控制方式,叫做web worker,运行在web worker线程里的代码不能访问文档内容,不能和主线程或其他worker共享状态,只能和主线程和其他worker通过异步事件进行通信,所以主线程不能检测并发性。

javascript 时间线

  1. 浏览器创建document对象,解析web页面,把element对象中文本节点渲染到dom中,这个阶段 document.readystate = 'loading'。

2.同步加载的script元素,把元素添加到文档中,执行内部或外部脚本,并且在脚本下载和执行时解析器会暂停,这样脚本就可以用document.write()来把文本输入到输入流中。同步script会看见自己和他们之前的文档内容。

3.遇到异步script开始下载脚本,并继续解析文档。脚本会在他下载完成后尽快执行,但是解析器没有停下来等他下载。一步脚本禁止使用document.write()方法。

4.文档解析完成 document.readyState='interactive'

5.defer脚本在这里按出现顺序执行,异步脚本可能也会在这个时间执行,延迟脚本能访问文档树,禁止使用write()方法

6.浏览器触发DOMContentLoad事件,同步执行过渡到异步事件阶段。

7.文档解析完成,浏览器等待其他内容载入,如图片。所有内容完成载入,一步脚本完成载入或执行,document.readyState 属性改为complete,web浏览器触发window对象上load事件

8.此时起,会调异步事件。

同源策略以及跨域方案

使用jsonp进行get方式的跨域请求,更多移步文章

设置domain实现跨域

默认情况下属性domain存放的是载入服务器的主机名,可以设置这一属性,不过使用的字符串必须又有效的域前缀或他本身。domain值中必须有一个点号,不能设置为顶级域名。

如果两个窗口包含的脚本把domain设置成相同的值,那么这两个窗口不受同源策略的约束,可以互相读取对方的属性。

修改请求头部

服务器用头信息显示的列出可以访问的源。但是该种方式由后端设置。

跨文档消息(cross-documnet messaging )

调用window对象上的postMessage方法,可以异步传递消息事件到窗口的文档里。之后使用onmessage事件处理程序函数来处理它。

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

推荐阅读更多精彩内容