Javascript高级程序设计(四)

 

1. <script> 以及关键字async, defer

默认是放在head里面,逐行阻塞加载, 从上而下下载, 解析和解释都完成后, 才能渲染页面(浏览器解析到body才会开始渲染)。如果有许多行的javascript, 会导致页面渲染有明显延迟, 最好把script放入到body里面。

1) Defer可以在整个页面解析完成后再执行, 但是下载会先下载

- DomContentLoaded之前执行(不过实际不一定)

-多个Defer会按照顺序,先后执行(不过实际也不一定, 最好只有一个defer

-支持defer的从IE4Firefox3.5 , Safari5Chorme7

2) Async会告诉浏览器直接下载,但标记async不能保证案出现的次序执行。加了这个关键字, 不用等脚本下载和执行完后再执行页面加载或加载其他脚本。所以, 异步的脚本不应该操作dom.

-一定会在loaded前执行, 不一定在DomContentLoaded前或者后执行

-立即下载脚本, 但不能阻止其他页面动作,比如资源下载和其他脚本加载

3) Integrity保证资源的完整性

2. 行内代码和外部文件

最好使用外部文件, 因为独立的js方便维护, 因为缓存,只需要加载一次, 适应未来(带宽的考虑, SPDY/HTTP2

SPDY对当前的HTTP协议有4个改进:

多路复用请求;

对请求划分优先级;

压缩HTTP头;(与http2的算法不同)

服务器推送流(即Server Push技术);

SPDY试图保留HTTP的现有语义,所以cookiesETags等特性都是可用的

 HTTP/1.xHTTP/2 在底层传输做了很大的改动和优化:

HTTP/2 采用二进制格式传输数据,而非 HTTP/1.x 的文本格式。二进制格式在协议的解析和优化扩展上带来更多的优势和可能。

HTTP/2 对消息头采用 HPACK 进行压缩传输,能够节省消息头占用的网络的流量。而 HTTP/1.x 每次请求,都会携带大量冗余头信息,浪费了很多带宽资源。头压缩能够很好的解决该问题。

多路复用,直白的说就是所有的请求都是通过一个 TCP 连接并发完成。HTTP/1.x 虽然通过 pipeline 也能并发请求,但是多个请求之间的响应会被阻塞的,所以 pipeline 至今也没有被普及应用,而 HTTP/2 做到了真正的并发请求。同时,流还支持优先级和流量控制。

Server Push:服务端能够更快的把资源推送给客户端。例如服务端可以主动把 JS CSS 文件推送给客户端,而不需要客户端解析 HTML 再发送这些请求。当客户端需要的时候,它已经在客户端了。

HTTP/2 主要是 HTTP/1.x 在底层传输机制上的完全重构,HTTP/2 是基本兼容 HTTP/1.x 的语义的(详细兼容性说明请戳 这里)。Content-Type 仍然是 Content-Type,只不过它不再是文本传输了。

 

3. 一个 HTML 文档被加载和解析完成后,DOMContentLoaded 事件便会被触发

https://zhuanlan.zhihu.com/p/25876048

Defer: Html parsing -> css parsing -> defer script -> DomContentLoaded -> image downloading -> load

Async是独立于流程

Html parsing(when async appears, 将不会阻塞htmlparseing, 下载完后,直接执行, async script downing)-> async executation -> css parsing -> DOmcontentLoaded -> image downloading ->load

因为不会阻塞html parsing, 可能执行的时候, cssdom已经好了, 所以conentLoaded已经执行好了, 所以可能在contentloaded之后。

 

4. 正则

退格, 匹配单词边界

/javascript/inew Regrex(“\b”+”javascript”+”\b”,”i”)

D === /^d/ /非数字

千分位的方法

https://www.w3school.com.cn/jsref/jsref_replace.asp 

String(Number).replace(/(d)(?=(d{3})+$)/g, "$1,");

Number.toLocaleString('en-US');

 

function format (num) {  

    var reg=/d{1,3}(?=(d{3})+$)/g;   

    return (num + '').replace(reg, '$&,');  

}

正则表达式 d{1,3}(?=(d{3})+$)  表示前面有1~3个数字后面的至少由一组3个数字结尾

????

?=表示正向引用,可以作为匹配的条件,但匹配到的内容不获取,并且作为下一次查询的开始

$& 表示与正则表达式相匹配的内容,具体的可查看 w3school的replace()方法

 

 

原文地址:https://www.cnblogs.com/connie313/p/13698076.html