ເນື້ອຫາ
- ເລີ່ມຕົ້ນ
- ການເຂົ້າເຖິງ DOM
- ເຊືອກກໍ່ສ້າງ
- ວິທີທີ່ໄວທີ່ສຸດໃນກໍລະນີຫຼາຍທີ່ສຸດ:
- ເລັ່ງໃຫ້ພວກເຂົາມີວົງ
- ປ່ຽນຈາກ:
- ຫຼື:
- ຫລີກລ້ຽງ:
- ວິທີການໂທຫຼືຄຸນສົມບັດກ່ຽວກັບອົງປະກອບຂບວນ
- ຍົກຕົວຢ່າງ:
- ... ແມ່ນຊ້າກວ່າ:
- ທ້ອງຖິ່ນທຽບກັບຕົວແປທົ່ວໂລກ
- ສະຫຼຸບ
ປັບປຸງໃຫ້ທັນ: ຂ້າງລຸ່ມນີ້ແມ່ນການປັບປຸງ ໃໝ່ ຂອງບົດຂຽນຂອງຂ້ອຍ, ຮັບເອົາ ຄຳ ເຫັນແລະການພິຈາລະນາຈາກຜູ້ອ່ານຫລາຍໆຄົນໃນສອງສາມມື້ຜ່ານມານີ້. ແທນທີ່ຈະຖອດຖອນບົດຄວາມນີ້, ຂ້ອຍຕ້ອງການໂອກາດແກ້ໄຂມັນດ້ວຍຂໍ້ມູນທີ່ຖືກຕ້ອງ. ຂ້າພະເຈົ້າຮູ້ຈັກເວລາແລະຄວາມພະຍາຍາມທີ່ໄດ້ເຂົ້າໄປໃນການຕອບຮັບ. ພວກເຮົາອາໄສຢູ່ໃນສະພາບແວດລ້ອມດິຈິຕອລແລະມັນເປັນສິ່ງທີ່ຍິ່ງໃຫຍ່ທີ່ເປັນໄປໄດ້; ມັນ ໝາຍ ຄວາມວ່າພວກເຮົາຮຽນຢູ່ສະ ເໝີ.
JavaScript ໄດ້ກາຍເປັນສິ່ງ ຈຳ ເປັນ ສຳ ລັບ dotcom ທັງ ໝົດ ທີ່ຕ້ອງການໃຫ້ປະສົບການຂອງຜູ້ໃຊ້ທີ່ອຸດົມສົມບູນ, ໂດຍສະເພາະໃນໂຄງການທີ່ຮຽກຮ້ອງໃຫ້ທ່ານຫລີກລ້ຽງ Flash. ໃນຂະນະທີ່ ກຳ ລັງຂອງຄວາມກ້າວ ໜ້າ ຂອງຮາດແວຂອງຜູ້ບໍລິໂພກ, ຂໍ້ ຈຳ ກັດ ກຳ ລັງຈະ ໝົດ ໄປ, ເຊິ່ງເຮັດໃຫ້ເວັບໄຊທ໌ຂອງທ່ານປະຕິບັດວຽກງານທີ່ມີພຽງແຕ່ສອງສາມປີກ່ອນເທົ່ານັ້ນທີ່ຈະເຮັດໃຫ້ຕົວທ່ອງເວັບຢຸດເຊົາ. ເຖິງຢ່າງໃດກໍ່ຕາມ, ການເພີ່ມປະສິດທິພາບຂອງລະຫັດແມ່ນຍັງມີຄວາມ ສຳ ຄັນຕໍ່ປະສົບການຂອງຜູ້ໃຊ້ທີ່ບໍ່ມີສາຍ, ສະນັ້ນຂ້າພະເຈົ້າຢາກແບ່ງປັນກົດງ່າຍໆບາງຢ່າງທີ່ສາມາດຫຼຸດເວລາໃນການ ດຳ ເນີນການ JavaScript ຂອງທ່ານ, ໂດຍສະເພາະໃນໂປແກຼມທ່ອງເວັບເກົ່າ.
ການເພີ່ມປະສິດທິພາບຫຼາຍຢ່າງນີ້ອາດຈະບໍ່ສັງເກດໄດ້ຖ້າທ່ານບໍ່ເຮັດວຽກກັບຊຸດຂໍ້ມູນທີ່ ຈຳ ເປັນໃຫ້ທ່ານປະຕິບັດວຽກງານຫຼາຍຄັ້ງ - ແຕ່ເຖິງຢ່າງໃດກໍ່ຕາມ, ຂ້າພະເຈົ້າຂໍແນະ ນຳ ໃຫ້ປະຕິບັດຕາມ ຄຳ ແນະ ນຳ ທີ່ຢູ່ຂ້າງລຸ່ມບ່ອນທີ່ປະຕິບັດໄດ້. ວິທີນັ້ນ, ເມື່ອທ່ານ ຈຳ ເປັນຕ້ອງປັບໃຊ້ JavaScript ຂອງທ່ານ, ວຽກງານໃຫຍ່ໆກໍ່ຈະ ສຳ ເລັດແລ້ວ.
ມັນຍັງມີຄວາມ ສຳ ຄັນທີ່ຈະຮູ້ຜູ້ຊົມເປົ້າ ໝາຍ ຂອງທ່ານ, ກ່ຽວກັບໂປແກຼມທ່ອງເວັບແລະອຸປະກອນ. ຍົກຕົວຢ່າງ, ໃນບາງກໍລະນີ, ການທົດສອບ jsPerf ທີ່ເຮັດວຽກ (ເບິ່ງຂ້າງລຸ່ມນີ້) ໃນ iPhone ຫລື iPad ຂອງຂ້ອຍໄດ້ຮັບຜົນທີ່ແຕກຕ່າງກັນຫມົດກັບຕົວທ່ອງເວັບຂອງ desktop.
ເລີ່ມຕົ້ນ
ສິ່ງ ທຳ ອິດທີ່ທ່ານຄວນເຮັດແມ່ນຕິດຕັ້ງໂປຼແກຼມ JavaScript ຂອງທ່ານເພື່ອໃຫ້ເຂົ້າໃຈວ່າວິທີການໃດທີ່ໃຊ້ເວລາດົນນານໃນການປະຕິບັດ. ຂ້ອຍຂໍແນະ ນຳ ໃຫ້ໃຊ້ໂປແກຼມ profiler ຂອງ Firebug (ຖ້າທ່ານບໍ່ຮູ້ວ່າ Firebug ແມ່ນຫຍັງ, ຫຼັງຈາກນັ້ນໃຫ້ແນ່ໃຈວ່າທ່ານໄປແລະດາວໂຫລດມັນ, ດີກວ່າ ສຳ ລັບ Firefox, ກ່ອນທີ່ຈະສືບຕໍ່ອ່ານບົດຄວາມນີ້). ມັນງ່າຍທີ່ຈະໃຊ້, ແລະທ່ານສາມາດສ້າງລະຫັດຂອງທ່ານໄດ້ອຍ່າງລວດໄວໂດຍບໍ່ ຈຳ ເປັນຕ້ອງມີວຽກຫຍັງເພີ່ມເຕີມໃນສ່ວນຂອງທ່ານ.
ນອກນັ້ນຍັງມີ jsPerf, ເຊິ່ງເປັນວິທີການທີ່ດີໃນການສ້າງແລະແບ່ງປັນຄະດີການທົດສອບ, ເຖິງແມ່ນວ່າຈະບໍ່ໄວເທົ່າກັບໂປແກຼມ profiler ຂອງ FireBug ໃນແງ່ຂອງການໄດ້ຮັບ snapsnot ໄວ.
ການເຂົ້າເຖິງ DOM
ມັນອາດຈະແມ່ນວ່າ JavaScript ຂອງທ່ານຈະເຂົ້າໃຊ້ DOM, ແລະຕົວຈິງແລ້ວມັນອາດຈະເປັນສາເຫດຂອງບັນຫາການປະຕິບັດໃດໆ. ມັນເປັນສິ່ງ ສຳ ຄັນທີ່ສຸດທີ່ຈະເຂົ້າໃຈວ່ານີ້ແມ່ນວຽກທີ່ລາຄາແພງ, ຍ້ອນວ່າຕົວທ່ອງເວັບຕ້ອງເຮັດ ໜ້າ ຈໍຄືນ ໃໝ່ ທຸກໆຄັ້ງທີ່ DOM ປ່ຽນແປງ. ຂ້ອຍ ທຳ ອິດຈະພະຍາຍາມເອົາການໂທ DOM ຂອງເຈົ້າອອກມາເພື່ອວັດແທກວ່າມັນມີລາຄາແພງປານໃດກ່ອນທີ່ຈະແກ້ໄຂການປັບປຸງທີ່ນ້ອຍກວ່າຂ້າງລຸ່ມນີ້.
ຖ້າເປັນໄປໄດ້, ມັນສາມາດຈັດການ DOM ໄດ້ໄວກ່ວາ ໜຶ່ງ ຄັ້ງໃຫຍ່, ຫຼາຍກ່ວາລູກນ້ອຍ, ຫຼຸດ ຈຳ ນວນຄັ້ງທີ່ browser ຕ້ອງໄດ້ອັບເດດ. ແທນທີ່ຈະຕື່ມສ່ວນປະກອບຫຼາຍຢ່າງໂດຍກົງ, ພະຍາຍາມສັກເຂົ້າໄປໃນຊິ້ນສ່ວນເອກະສານ, ແລະຫຼັງຈາກນັ້ນຕື່ມໃສ່ຊິ້ນສ່ວນນັ້ນເຂົ້າໃນເອກະສານຂອງທ່ານ (ອ່ານເພີ່ມເຕີມກ່ຽວກັບຊິ້ນສ່ວນເອກະສານ).
ສາມາດເວົ້າໄດ້ຄືກັນກ່ຽວກັບການ ນຳ ໃຊ້ຮູບແບບໃນເສັ້ນໂດຍກົງໃສ່ອົງປະກອບຕ່າງໆ. ແທນທີ່ຈະ, ເພີ່ມແລະເອົາຊັ້ນຮຽນເພື່ອຫຼຸດຜ່ອນເວລາໃນການເຮັດວຽກຂອງ browser ໃຫ້ ໜ້ອຍ ທີ່ສຸດ.
ເຊືອກກໍ່ສ້າງ
Internet Explorer ຮຸ່ນເກົ່າ (ຮຸ່ນ 5-7: 8 ບໍ່ສະແດງບັນຫາດຽວກັນ) ຈະຊ້າລົງແລະຊ້າກວ່າສາຍຂອງທ່ານຍາວກວ່າ. ພວກເຮົາຈະແກ້ໄຂດ້ານລຸ່ມນີ້.
ໃຫ້ສັງເກດວ່າໃນຕົວທ່ອງເວັບທີ່ ໃໝ່ ກວ່າ, ທ່ານຈະບໍ່ເຫັນການປັບປຸງໃດໆ. ໃນຄວາມເປັນຈິງ, ໃນຫລາຍໆກໍລະນີທ່ານຈະເຫັນກົງກັນຂ້າມ - ມີເຫດຜົນຫຼາຍຂື້ນໃນການສ້າງລະຫັດຂອງທ່ານເພື່ອເບິ່ງວ່າຜົນປະໂຫຍດໃນຕົວທ່ອງເວັບທີ່ເກົ່າກວ່າຜົນກະທົບຈາກທາງເລືອກ ໃໝ່ ກວ່າເກົ່າແລະຕັດສິນໃຈວ່າຜູ້ຊົມເປົ້າ ໝາຍ ຂອງທ່ານຈະໄດ້ຮັບຜົນປະໂຫຍດຫຼາຍທີ່ສຸດ.
ຖ້າສາຍຂອງທ່ານສັ້ນ, ຕິດກັບວິທີ ທຳ ອິດທີ່ສະແດງຢູ່ດ້ານລຸ່ມ.
ວິທີທີ່ໄວທີ່ສຸດໃນກໍລະນີຫຼາຍທີ່ສຸດ:
var string = 'abc'; string + = 'def'; string + = 'ghi'; string + = 'jkl'; string + = 'mno'; ເຕືອນ (ຊ່ອຍແນ່);
ລອງເຮັດແບບນີ້ ສຳ ລັບໂປຣແກຣມທ່ອງເວັບເກົ່າທີ່ດີ້ນລົນເພື່ອເຮັດສາຍຂະ ໜາດ ໃຫຍ່ຂື້ນຢ່າງໄວວາ:
var string = ['abc ... ', 'def ... ', 'ghi ... ', 'jkl ... ', 'mno ... '] ການແຈ້ງເຕືອນ (string.join ("")) ;
ເລັ່ງໃຫ້ພວກເຂົາມີວົງ
ໂດຍພຽງແຕ່ການຈັດແຈງວົງແຫວນເທົ່ານັ້ນ, ທ່ານສາມາດບີບເອົາຜົນງານອອກມາເລັກນ້ອຍນອກຈາກລະຫັດຂອງທ່ານ.
ປ່ຽນຈາກ:
ສຳ ລັບ (var i = 0; i my_array.length; i ++) {}
ຫຼື:
ສຳ ລັບ (var i = 0; i myMethod (); i ++) {}
ແທນທີ່ຈະ, ທົດລອງການປ່ຽນແປງທີ່ອ່ອນໂຍນນີ້:
ສຳ ລັບ (var i = 0, len = my_array.length; i len; i ++) {}
ຫຼື:
var len = myMethod (); ສຳ ລັບ (var i = 0; i len; i ++) {}
Raymond Julin ໄດ້ກະ ທຳ ດ້ວຍຄວາມກະລຸນາໃນການທົດສອບ jsPerf ເພື່ອວ່າທ່ານຈະເຫັນຄວາມແຕກຕ່າງຂອງຕົວທ່ານເອງ. ໃນທຸກໆຕົວທ່ອງເວັບ, ທ່ານສາມາດເຫັນການເພີ່ມປະສິດທິພາບທີ່ດີ.
ຮັບປະກັນວ່າບໍ່ມີການໂທທີ່ບໍ່ ຈຳ ເປັນພາຍໃນວົງຈອນຂອງທ່ານ. ຖ້າທ່ານສາມາດເຮັດໄດ້ຄັ້ງດຽວ, ຢູ່ນອກວົງຈອນ, ມັນມັກຈະເປັນຄວາມຄິດທີ່ດີທີ່ຈະເຮັດ. ການເພີ່ມປະສິດທິພາບຈະຂຶ້ນກັບວ່າລາຄາຂອງ ໜ້າ ທີ່ມີລາຄາເທົ່າໃດ.
ຫລີກລ້ຽງ:
ສຳ ລັບ (var i = 0, len = my_array.length; i len; i ++) {var response = goDoSomething ();}
ຖ້າມັນ ເໝາະ ສົມ, ລອງ:
var response = goDoSomething (); ສຳ ລັບ (var i = 0, len = my_array.length; i len; i ++) {}
ການເພີ່ມປະສິດທິພາບອີກອັນ ໜຶ່ງ ທີ່ຄວນພິຈາລະນາ, ເມື່ອທ່ານບໍ່ໄດ້ອີງໃສ່ ຄຳ ສັ່ງຂອງ loop, ແມ່ນການຫຼຸດລົງແທນທີ່ຈະ:
var i = my_array.length; ໃນຂະນະທີ່ (i--) {}
ຂ້ອຍອາດຈະໃຊ້ວິທີການສຸດທ້າຍນີ້ຢ່າງບໍ່ຖືກຕ້ອງ: ມັນບໍ່ແມ່ນວິທີທີ່ສົມເຫດສົມຜົນທີ່ສຸດແລະອາດຈະເຮັດໃຫ້ມັນຍາກກວ່າເກົ່າ ສຳ ລັບນັກຂຽນໂປແກຼມອື່ນໆທີ່ ຈຳ ເປັນຕ້ອງເຂົ້າໃຈລະຫັດຂອງເຈົ້າ, ແຕ່ມັນກໍ່ຍັງເປັນປະໂຫຍດໃນສະຖານະການທີ່ຖືກຕ້ອງ.
ວິທີການໂທຫຼືຄຸນສົມບັດກ່ຽວກັບອົງປະກອບຂບວນ
ຖ້າທ່ານ ກຳ ລັງເຂົ້າເຖິງຄຸນສົມບັດຫລືວິທີການຕ່າງໆກ່ຽວກັບອົງປະກອບຕ່າງໆພາຍໃນຫລາຍໆຄັ້ງ, ມັນໄວກວ່າທີ່ຈະປະກາດຕົວປ່ຽນຖືສິນຄ້ານັ້ນ. ມັນສາມາດ ໝາຍ ຄວາມວ່າທ່ານຕ້ອງການລະຫັດພິເສດ, ແຕ່ຖ້າມັນເກີດຂື້ນເລື້ອຍໆ, ການເພີ່ມປະສິດທິພາບຂອງຜົນສາມາດເຮັດໃຫ້ມັນຄຸ້ມຄ່າ.
ຍົກຕົວຢ່າງ:
myArray [myIndex] .myMethod1 (); myArray [myIndex] .myMethod2 (); myArray [myIndex] .my_variable;
... ແມ່ນຊ້າກວ່າ:
var element = myArray [myIndex]; element.myMethod1 (); element.myMethod2 (); element.my_variable;
ອີກເທື່ອຫນຶ່ງ, Raymond ມີກໍລະນີທົດສອບ jsPerf ສໍາລັບບ່ອນນີ້ທີ່ທ່ານສາມາດເຫັນການປະຕິບັດໄດ້ຮັບຜົນດີໃນຕົວທ່ອງເວັບຕ່າງໆ.
ນີ້ກໍ່ແມ່ນຄວາມຈິງ ສຳ ລັບການຊອກຫາໃດໆ, ບໍ່ພຽງແຕ່ຈັດແຈງເທົ່ານັ້ນ. ຫຼາຍທ່ານສາມາດຫລີກລ້ຽງການເຮັດການຊອກຫາຫຼາຍໆຄັ້ງ, ຈະດີກວ່າ.
ທ້ອງຖິ່ນທຽບກັບຕົວແປທົ່ວໂລກ
ທຸກຄັ້ງທີ່ທ່ານອ້າງອິງຕົວແປ, JavaScript ຈະເບິ່ງຜ່ານຕ່ອງໂສ້ຂອບເຂດເພື່ອຊອກຫາມັນ. ຫນ້າທໍາອິດ, ມັນຈະເບິ່ງຜ່ານຕົວແປທ້ອງຖິ່ນພາຍໃນຂອບເຂດປະຈຸບັນ, ແລະຫຼັງຈາກນັ້ນກໍ່ສ້າງເສັ້ນທາງຂອງມັນຜ່ານລະບົບຕ່ອງໂສ້ໄປທົ່ວໂລກ. ດັ່ງນັ້ນ, ການເຂົ້າເຖິງຕົວແປທົ່ວໂລກແມ່ນຊ້າກວ່າການເຂົ້າຫາຕົວເມືອງ, ມີຜົນກະທົບທີ່ແຕກຕ່າງກັນໄປຕາມລະດັບຂອງຂອບເຂດທີ່ມີຮັງ.
ຍົກຕົວຢ່າງ:
var my_var = 1; MyClass = function () {var my_var = 1;}
ໃນຂອບເຂດວັດຖຸຂອງຊັ້ນຂ້າງເທິງ, my_var ແມ່ນຕົວແປທ້ອງຖິ່ນຂອງມັນແລະສະຖານທີ່ ທຳ ອິດພາຍໃນລະບົບຕ່ອງໂສ້ຂອບເຂດທີ່ JavaScript ຈະເບິ່ງ. ນີ້ແມ່ນໄວກ່ວາຖ້າຫາກວ່າການປະກາດໃນທ້ອງຖິ່ນບໍ່ມີ, ແລະມັນຕ້ອງໄດ້ຍົກສູງລະບົບຕ່ອງໂສ້ເພື່ອຊອກຫາຕົວແປທົ່ວໂລກ.
ບາງຄັ້ງມັນເປັນໄປໄດ້ທີ່ທ່ານຈະຕ້ອງການການເຂົ້າເຖິງຄຸນຄ່າຂອງໂລກພາຍໃນຂອບເຂດທີ່ແຕກຕ່າງກັນ, ໂດຍສະເພາະໃນວົງຈອນ, ໃນກໍລະນີນີ້ມັນຈະມີປະສິດທິພາບຫຼາຍກວ່າທີ່ຈະ ນຳ ເອົາຕົວແປນັ້ນເຂົ້າໄປໃນຂອບເຂດທ້ອງຖິ່ນຢ່າງບໍລິສຸດເພື່ອເຂົ້າເຖິງສະບັບທ້ອງຖິ່ນພາຍໃນການກະ ທຳ.
var global_var = 20; ໜ້າ ທີ່ MyFunc () {var local_var = global_var; ສຳ ລັບ (var i = 0, ຄວາມຍາວ = 999; i = ຄວາມຍາວ; i ++) {// ຕອນນີ້ທ່ານສາມາດເຂົ້າເບິ່ງເວີຊັນທ້ອງຖິ່ນ ສຳ ລັບເວລາເຂົ້າໃຊ້ໄດ້ໄວຂື້ນ. }}
ມັນຍັງຄວນຈື່ໄວ້ວ່າຖ້າທ່ານບໍ່ໃສ່ 'var' ຢູ່ທາງ ໜ້າ ຄຳ ປະກາດຂອງທ່ານ, ມັນຈະຖືກສ້າງຂື້ນເປັນຕົວແປທົ່ວໂລກໂດຍອັດຕະໂນມັດ. ດ້ວຍເຫດຜົນດຽວນີ້, ມັນເປັນການປະຕິບັດທີ່ດີໃນການປະກາດຂອບເຂດຂອງຕົວແປສະ ເໝີ ໄປ. ນີ້ຍັງສາມາດຊ່ວຍໄດ້ຖ້າທ່ານ ກຳ ລັງແກ້ໄຂບັນຫາຂອບເຂດ.
ສະຫຼຸບ
ເຕັກນິກບາງຢ່າງຂ້າງເທິງນີ້ຈະເຮັດໃຫ້ທ່ານມີປະສິດຕິພາບທີ່ບໍ່ສາມາດສັງເກດໄດ້ ໜ້ອຍ ກວ່າວິທີອື່ນ, ແລະມີເຕັກນິກຫຼາຍຢ່າງທີ່ຂ້າພະເຈົ້າບໍ່ໄດ້ກວມເອົາ (ຕົວຢ່າງ, ການປ່ຽນເລັກນ້ອຍ). ເຖິງຢ່າງໃດກໍ່ຕາມ, ນີ້ແມ່ນວິທີການທີ່ຂ້ອຍພົບວ່າມີປະສິດທິຜົນທີ່ສຸດ ສຳ ລັບການເຮັດວຽກອອກຈາກ JavaScript ຂອງຂ້ອຍໃນຕົວທ່ອງເວັບເກົ່າ. ຢ່າລືມທີ່ຈະເບິ່ງເຂົ້າໄປໃນການໂທ DOM ຂອງທ່ານກ່ອນ, ຍ້ອນວ່າມັນແພງກ່ວາເກົ່າແລະສາມາດປັບປຸງການປະຕິບັດໄດ້ດີກວ່າທີ່ສັງເກດເຫັນກ່ວາວິທີການອື່ນໆ.
ກະລຸນາຕື່ມ ຄຳ ເຫັນຂອງທ່ານຂ້າງລຸ່ມນີ້ເພື່ອແຈ້ງໃຫ້ຂ້ອຍຮູ້ຄວາມຄິດເຫັນຂອງເຈົ້າແລະວິທີທີ່ເຈົ້າໄດ້ຈັດການໃນການເຮັດວຽກກ່ຽວກັບບັນຫາທີ່ກ່ຽວຂ້ອງກັບການປະຕິບັດໃນ JavaScript ຂອງເຈົ້າເອງ.
