草庐IT

第一章、权衡的艺术

小胖子的快乐 2023-03-28 原文

小记: 本章 主要了解命令式、声明式、性能与可维护性的权衡、虚拟Dom的性能、运行时和编译时。Vue就是通过权衡这几种方式的优缺点进行框架设计

  1. 命令式、声明式
    1.  对比
      框架对比 命令式 声明式
      特点 只关注过程 只关注结果
      优点 性能最高 心智负担小,维护性高
      优缺点   心智负担大、维护性差 性能较高
      代码对比
      给div实现点击事件
      const div = document.querySelector('#app')
      div.addEventListener('click', () => { alert('绑定OK') })
      <div @click="()=>alert('ok')">点我</div>
  2. 性能与可维护性进行权衡

      结论 :声明式代码的性能不优于命令式代码的性能

      a.  在命令式代码中我们修改某个元素或者内容,直接操作即可 : div.textContent = ' hello'
      b.  在Vue中,修改某个元素的属性或内容,我们得先找到前后的差异,并更新差异  (这个地方可了解diff)
      上述性能对比:
        记: A = 直接修改性能得消耗,  B = 寻找差异得性能消耗
      那么  a  = A    b = A+B
      上述验证符合我们得结论
    Vue为啥用声明式呢?
      主要原因就是声明式代码的可维护性强,所以在权衡可维护性和性能时,Vue要做的就是在保证可维护性得同时让代码的性能损失最小

   3. 虚拟DOM的性能到底如何
    1. 先了解一下 innerHtml 的性能
      innerHtml 在创建的过程中将一串模板字符串解析为Dom树
      虚拟DOM创建页面的过程分为两步
        创建JS对象==》真实DOM的描述

        递归遍历虚拟DOM并创建真实DOM

      在上述前提下,我们会觉得innerHtml性能会和虚拟DOM差不多
      当涉及大量元素修改的时候,innerHtml每次都得销毁所有DOM重新渲染,而虚拟DOM只需要查找不一样的进行渲染
      综上。innerHtml的性能是与数据量有关系的,而虚拟DOM与数据变化量有关

    2.innerHtml、 虚拟DOM、元素JS性能对比

innerHtml 模板 虚拟DOM 原生Js
心智负担中等 心智负担小 心智负担大
性能差  性能不错 性能高
可维护性差 可维护性强 可维护性差


 注: 涉及DOM层面的计算要比JS层面的计算性能要差的多

    4. 运行时、编译时

      结论    Vue3.js是一个运行时加编译时的框架, 在保证灵活的前提下,通过分析用户提供的内容尽可能提升性能

      1. 运行时: 

        每一个元素编译之后都是一个js对象  tag  children 
        我们直接创建这样的对象进行reder渲染  称为运行时框架

      2. 运行时+ 编译时

        我们创建html  在调用compiler编译  在用render渲染   
        消耗性能
      3. 编译时

        用户直接将html编译为命令式代码 直接操作dom  性能 非常高
        灵活性差

有关第一章、权衡的艺术的更多相关文章

  1. ruby - 是否有将图像文件转换为 ASCII 艺术的命令行程序或库? - 2

    有这样的事吗?我想在Ruby程序中使用它。 最佳答案 试试这个http://csl.sublevel3.org/jp2a/此外,Imagemagick可能还有一些东西 关于ruby-是否有将图像文件转换为ASCII艺术的命令行程序或库?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/6510445/

  2. ruby-on-rails - CarrierWave - PDF - 只选择第一页 - 2

    我的Rails应用程序中安装了carrierwave。但是,当用户上传多页pdf时,我只希望应用程序获取文档中的第一页并将其转换为jpeg。这可能吗?用什么命令?这是我的uploader。#encoding:utf-8classImageUploader[200,300]##defscale(width,height)##dosomething#end#Createdifferentversionsofyouruploadedfiles:version:thumbdoprocess:resize_to_fill=>[150,210]process:convert=>:jpgdefful

  3. ruby - 如何跳过 CSV 文件的第一行并将第二行作为标题 - 2

    有没有办法跳过CSV文件的第一行,让第二行作为标题?我有一个CSV文件,第一行是日期,第二行是标题,所以我需要能够在遍历它时跳过第一行。我尝试使用slice但它会将CSV转换为数组,我真的很想将其读取为CSV,以便我可以利用header。 最佳答案 根据您的数据,您可以使用另一种方法和skip_lines-option此示例跳过所有以#开头的行require'csv'CSV.parse(DATA.read,:col_sep=>';',:headers=>true,:skip_lines=>/^#/#Markcomments!)do|

  4. arrays - 在一行中选择数组的第一个和最后一个元素 - 2

    我的任务是从数组中选择最高和最低的数字。我想我很清楚我想做什么,但只是努力以正确的格式访问信息以满足通过标准。defhigh_and_low(numbers)array=numbers.split("").map!{|x|x.to_i}array.sort!{|a,b|ba}putsarray[0,-1]end数字可能看起来像"80917234100",要通过,我需要输出"9234"。我正在尝试putsarray.first.last,但一直无法弄明白。 最佳答案 有Array#minmax完全满足您需要的方法:array=[80,

  5. ruby-on-rails - Ruby 或 Rails 有只将第一个字符大写的方法吗? - 2

    或者好像我必须自己写方法?(保持DHA不变):ruby-1.9.2-p180:001>s='omega-3(DHA)'=>"omega-3(DHA)"ruby-1.9.2-p180:002>s.capitalize=>"Omega-3(dha)"ruby-1.9.2-p180:003>s.titleize=>"Omega3(Dha)"ruby-1.9.2-p180:005>s[0].upcase+s[1..-1]=>"Omega-3(DHA)" 最佳答案 如果我的回答只是垃圾,我深表歉意(我不做ruby)。但我相信我已经为您找到了答

  6. ruby - gsub 删除第一个逗号前的所有内容 - 2

    我有这个字符串:auteur="comtedeFlandreetHainaut,Baudouin,Jacques,Thierry"我想删除第一个逗号之前的所有内容,即在这种情况下保留“Baudouin,Jacques,Thierry”试过这个:nom=auteur.gsub(/.*,/,'')但这会删除最后一个逗号之前的每个逗号,只保留“Thierry”。 最佳答案 auteur.partition(",").last#=>"Baudouin,Jacques,Thierry" 关于rub

  7. ruby-on-rails - Order Hash 并删除第一个键值对 - 2

    我有一个以时间戳为键的哈希。hash={"2016-05-31T22:30:58+02:00"=>{"path"=>"/","method"=>"GET"},"2016-05-31T22:31:23+02:00"=>{"path"=>"/tour","method"=>"GET"},"2016-05-31T22:31:05+02:00"=>{"path"=>"/contact_us","method"=>"GET"}}我订购了这个系列并得到了第一双这样的:hash.sort_by{|k,_|k}.first.first但是我该如何删除它呢?删除方法requiresyou知道key的准确

  8. arrays - 字符串数组中字符串第一部分的总和 - 2

    我有一个字符串数组,我需要从中提取第一个单词,将它们转换为整数并获得它们的总和。示例:["5Apple","5Orange","15Grapes"]预期输出=>25我的尝试:["5","5","15"].map(&:to_i).sum 最佳答案 我从你的问题中找到了答案。["5Apple","5Orange","15Grapes"].map(&:to_i).sum在数组中,如果存在任何整数可转换值,那么它将自动转换为整数。 关于arrays-字符串数组中字符串第一部分的总和,我们在Sta

  9. ruby-on-rails - Rails 3 : Looping through array of objects, 忽略数组中的第一个对象? - 2

    在我看来,我正在尝试显示一个对象表,这是我的代码:CategoriesCBB's">然而这是抛出一个错误说:can'tconvertCapabilityBuildingBlockintoArray关系是正确的,错误来self尝试在此处减去数组的第一个对象的行:有什么方法可以忽略数组中的第一个对象来遍历数组吗?谢谢 最佳答案 尝试使用Array.drop-http://www.ruby-doc.org/core/classes/Array.html#M000294 关于ruby-on-ra

  10. ruby-on-rails - 我如何跳过前三行而不是 FasterCSV 中的第一行 - 2

    我正在使用FasterCSV我正在循环使用这样的foreachFasterCSV.foreach("#{Rails.public_path}/uploads/transfer.csv",:encoding=>'u',:headers=>:first_row)do|row|但问题是我的csv将前3行作为标题...有什么方法可以使fasterCSV跳过前三行而不是仅跳过第一行?? 最佳答案 不确定FasterCSV,但在Ruby1.9标准CSV库(由FasterCSV制作)中,我可以执行以下操作:c=CSV.open'/path/to/

随机推荐