zoukankan      html  css  js  c++  java
  • 高性能JavaScript读后感

    这本书让lz对js性能优化有了更深刻的理解,现在因为我们通常用第三方构建工具webpack、gulp等诸如此类,之前总是听说什么dom操作影响性能呢,对这个概念总是有点模糊,但看完这本书之后后,相对而言比较清晰了。
    书中有句话说的比较形象,js与dom之间有座桥梁,当我们去访问dom时,无疑是要交过路费的,所以性能优化的最好方式,所以一些操作尽量放在js层面这边来做。时下比较流行的vue、react之类就是如此
    虽然现在我们用vue、react这些库比较多,但是像lz上家就要维护以往的项目(jq),当时就遇到js操作dom太多,浏览器卡死的情况。我当时用的是用定时器分批次操作dom,尽量不要一下子操作,因为浏览器是单线程的,js脚本执行的时候,页面就不会响应。
    以下是lz看书总结一些性能优化的方面,不尽全,想更深入了解的,可以去看这本书

    1. 脚本文件放在最html文件底部
    多数浏览器使用单一线程处理界面刷新和脚本执行,也就是说浏览器同一时间只可以做一件事,如果脚本放在顶部会导致明显的延迟
    2. 减少页面中外链脚本文件的数量
    也就是说当一个应用依赖多个js文件时,多个文件合并成一个script标签,就可减少性能消耗
    3. 无阻塞加载脚本
    使用script标签的defer属性
    使用动态创建的script元素来下载并执行代码
    使用XHR对象下载js代码并注入到页面中
    4. 尽量使用局部变量
    因为其位于作用域链的起始位置,查找速度更快
    5. 使用querySelectAll()的api
    6. 合并dom操作,使用文档片段对象,尽量减少重排与重绘
    7. 事件委托减少事件处理器的数量
    8. 少用if else与switch,通过数组,对象的方式
    
    
  • 相关阅读:
    修改UISearchBar的Cancel按钮为中文等本地化问题
    Xcode6 运行程序后,右侧Debug区域的Memory显示空白解决方法
    vuec常用插件
    clipboard 实现复制
    vue 表单操作
    vue 常用功能和命令
    关闭警告&关闭eslint
    vue 添加 fastclick的支持
    url编码函数encodeURI和encodeURIComponent
    jsencrypt加解密 &&cryptico
  • 原文地址:https://www.cnblogs.com/raind/p/10159275.html
Copyright © 2011-2022 走看看