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

     

     

  • 相关阅读:
    HTML5
    js实现查找字符串中最多的字符的个数
    get和post的区别
    第十七篇 类的特殊成员
    第十八篇 面向对象修饰符
    MariaDB+Keepalived双主高可用配置MySQL-HA
    linux命令详解——crontab
    Java的内存泄漏
    jvm监控工具jconsole进行远程监控配置
    loadrunner执行场景时报Error -27040: Data Format Extension: Init: Internal error问题解决
  • 原文地址:https://www.cnblogs.com/connie313/p/13698076.html
Copyright © 2020-2023  润新知