UDN-企业互联网技术人气社区

板块导航

浏览  : 446
回复  : 2

[原生js] 撰寫高效能的 JavaScript 小技巧

[复制链接]
cat77的头像 楼主
发表于 2016-12-28 15:08:37 | 显示全部楼层 |阅读模式
  這篇文章將會介紹簡單的技巧來優化我們的程式碼讓 JavaScript 編譯的過程更具效率,最終我們的程式碼可以執行的更加快速。

  特別是當您在遊戲類型的專案上發現掉禎或記憶體回收機制(garbage collector)遇到大量資料無法被回收的情況。這些技巧可以協助我們增加程式碼的效能。

  單態(Monomorphism)

  當我們定義一個函式搭配兩個參數的時候,如果函數的參數型別,數量,傳回的型別改變編譯器會遵循我們的指令,但效能便會開始下降。因為一般程式會預期一個單態的資料結構且相同的參數。
  1. functionexample(a, b){
  2.   console.log(++a, ++b)
  3. }

  4. example() // 糟糕
  5. example(1) // 還是糟糕
  6. example("1", 2) // 很糟糕

  7. example(1, 2) // 良好
复制代码

  展開(Unfolding)

  編譯器可以在編譯時期解析變數的值並且在最好的情況下可以將其展開,盡可能在程式實際執行前解析出其資料。

  常數和變數只要是不需要等到執行時期才能夠計算的值都會被展開。
  1. const a = 42; // 能夠被簡單的展開
  2. const b = 1337 * 2; // 表達式也能夠被計算
  3. const c = a + b; // 可以被解析計算
  4. const d = Math.random() * c; // 只有 c 可以被展開,Math.random() 要等到執行時期才能得到值
  5. const e = "Hello " + "Medium"; // 字串格式也是可以被展開的

  6. // 展開之前
  7. a;
  8. b;
  9. c;
  10. d;
  11. e;

  12. // 展開之後
  13. // 在編譯時期就可以得到下面的結果
  14. 42
  15. 2674
  16. 2716
  17. Math.random() * 2716
  18. "Hello Medium"
复制代码

  內嵌(Inlining)

  JIT 編譯器可以知道我們程式碼哪些段落特別常被執行。透過拆分 function 為更小的片段程式碼,就可以在編譯時期將其內嵌並追蹤特別常被使用的 function 同時提升效能。
  1. // Likely gets inlined 可能被內嵌的條件
  2. // [✓] Single return statement 回傳單一語句
  3. // [✓] Always returns 總是回傳
  4. // [✓] Monomorphic return type 回傳單態型別
  5. // [✓] Likely monomorphic parameters 可能是單態的參數
  6. // [✓] Single body statement 單一語句
  7. // [✓] Isn't wrapped inside another function 內部沒有其他 function
  8. // 等等
  9. functionisNumeric(n){
  10.   return (
  11.     n >= 48 && n <= 57
  12.   );
  13. };

  14. let cc = "8".charCodeAt(0); // 56

  15. // before inlining 內嵌之前
  16. if (isNumeric(cc)) {

  17. }

  18. // after inlining 內嵌之後
  19. if (cc >= 48 && cc <= 57) {

  20. }
复制代码

  宣告

  避免宣告函式/閉包和物件在經常被調用的任務中。物件會被堆進 heap 這會影響記憶體回收造成回收上的困擾。
  1. // 糟糕

  2. functiona(){
  3.   // 請避免在 function 裡面宣告 function
  4.   // 如此在每一次被調用時都在配置一次
  5.   let doSomething = function(){
  6.     return (1)
  7.   }

  8.   return (doSomething())
  9. }

  10. // 較好的作法

  11. let doSomething = function(){
  12.   return (1)
  13. }

  14. functionb(){
  15.   return (doSomething());
  16. }
复制代码

  引數(Arguments)

  調用函式是很耗費效能的。盡可能減少直接使用 arguments 並且不要在函式內部修改它們
  1. functionmul(a, b){
  2.   return (arguments[0] * arguments[1]); // 非常慢
  3.   return (a * b); // 良好
  4. };

  5. functiontest(a, b){
  6.   a = 5; // 糟糕, 不要直接修改引數
  7.   let tmp = a; // 良好
  8.   tmp *= 2;
  9. };
复制代码

  資料型別(Data Types)

  盡可能使用 Number 和 Boolean 他們相對於其他資料型別快非常多。
  1. const ROBOT = 0;
  2. const HUMAN = 1;
  3. const SPIDER = 2;

  4. let E_TYPE = {
  5.   Robot: ROBOT,
  6.   Human: HUMAN,
  7.   Spider: SPIDER
  8. };

  9. // 糟糕
  10. // 在常被使用的函式或程式碼中避免直接使用字串來判斷
  11. if (entity.type === "Robot") {

  12. }

  13. // 良好
  14. if (entity.type === E_TYPE.Robot) {

  15. }

  16. // 完美
  17. if (entity.type === ROBOT) {

  18. }
复制代码

  嚴格與轉換型別運算子(Strict and abstract operators)

  盡量使用 === 而不是 == 由於嚴格比對模式下編譯器不需要執行額外的轉換因此效能會比較好。

  致命傷

  下列功能盡可能避免使用會造成嚴重的效能問題

  • eval
  • with
  • try/catch

  物件 

  物件實例通常會分享一個隱藏且相同的類別,注意在替物件實例加上新的屬性時會建立一個新的隱藏類別,這件事對編譯器來說挺複雜的。
  1. // 隱藏的類別 'hc_0'
  2. classVector{
  3.   constructor(x, y) {
  4.     // 編譯器預期屬性成員在這邊被宣告了
  5.     this.x = x;
  6.     this.y = y;
  7.   }
  8. };

  9. // 兩個 vector 物件共用隱藏類別 'hc_0'
  10. let vec1 = new Vector(0, 0);
  11. let vec2 = new Vector(2, 2);

  12. // 糟糕, vec2 現在產生了新的隱藏類別 'hc_1'
  13. vec2.z = 0;

  14. // 良好, 編譯器已知的屬性
  15. vec2.x = 1;
复制代码

  迴圈 

  盡量使用單一型別的陣列。減少使用 for .. in 來遍歷物件,效能很差。

  在迴圈中 continue 和 break 效能比 if 條件式要快。盡可能讓迴圈要處理的資料在外頭。另外使用 ++i 而不是 i++ 這可以得到一點點的效能提升。
  1. let badarray = [1, true, 0]; // 糟糕, 盡量不要混合型別
  2. let array = [1, 0, 1]; // 良好

  3. // 糟糕
  4. for (let key in array) {

  5. };

  6. // 較好的作法
  7. let i = 0;
  8. for (; i < array.length; ++i) {
  9.   key = array[i];
  10. };

  11. // 良好
  12. let i = 0;
  13. let key = null;
  14. let length = array.length;
  15. for (; i < length; ++i) {
  16.   key = array[i];
  17. };
复制代码

相关帖子

发表于 2016-12-28 15:09:10 | 显示全部楼层
js是要逆天的节奏js虽然不错,但是天生也是有缺陷,局限性。。。
使用道具 举报

回复

发表于 2016-12-31 03:57:38 来自手机 | 显示全部楼层
鄙视楼下的顶帖没我快,哈哈
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部