标签：HTTP Javascript 高级 parsing async 程序设计 执行 下载 加载

 

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

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

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

- DomContentLoaded之前执行（不过实际不一定）

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

-支持defer的从IE4， Firefox3.5 , Safari5，Chorme7

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

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

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

3） Integrity保证资源的完整性

 

2. 行内代码和外部文件

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

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

多路复用请求；

对请求划分优先级；

压缩HTTP头；（与http2的算法不同）

服务器推送流（即Server Push技术）；

SPDY试图保留HTTP的现有语义，所以cookies、ETags等特性都是可用的

 HTTP/1.x，HTTP/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. 正则

\b退格， 匹配单词边界

/\bjavascript\b/i， new 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()方法

 

 

 

标签：HTTP,Javascript,高级,parsing,async,程序设计,执行,下载,加载
来源： https://www.cnblogs.com/connie313/p/13698076.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。