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()方法