XFE 技术 生活 笔记 文集

javascript性能小记

🔖 javascript 👀 148 🕒 2018-05-17 👨‍🎓 戡玉

关注点分离

  • html+css+js

    游览器差异

  • 使用特性检测而不是代理嗅探

    DOM访问

    1.避免在循环中使用DOM访问
    2.将DOM引用分配给局部变量,并使用这些局部变量
    3.在可能的情况下使用select API
    4.当在HTML容器中反复使用时,缓存重复的次数

    操作DOM

    1.尽量减少更新DOM,可以将DOM的改变分批处理,并在文档树之外执行这些更新
    2.当需要创建一个相对较大的子树时,应该在其创建之后再添加到DOM树中
    3.在更新现有DOM部分时,仍然可以批处理。(先克隆现有子树,然后再克隆树上操作,然后用克隆树替换原来的子树)

    事件委托

  • 将事件绑定到dom上级,利用事件流进行操作

    长期运行脚本

    1.setTimeout分割
    2.web workers应用

    远程脚本

    1.XMLHttpRequest
    2.jsonp

    配置资源

    1.文件合并
    2.文件压缩

    传输资源

    1.采用gzip压缩
    2.设置expiress响应头
    3.使用cdn网络
    4.通过http块编码,分片发送网页

    载入javascript

    1.应用defer和async
    2.将script标签置底
    3.动态创建script载入
    4.延迟载入非初始化js
    5.预加载js