ເນື້ອຫາ
- ເວລາສະແດງ
- ເວລາຜ່ານໄປ
- ເວລາ CPU
- ການ ນຳ ໃຊ້ຊັບພະຍາກອນ
- ການນໍາໃຊ້ພະລັງງານ
- ຕອບສະ ໜອງ ຢ່າງວ່ອງໄວຕໍ່ການຮ້ອງຂໍຂອງເຄືອຂ່າຍ
- 01. ປ້ອງກັນການປ່ຽນເສັ້ນທາງ 3xx
- 02. ນຳ ໃຊ້ເຄືອຂ່າຍແຈກຢາຍເນື້ອຫາ (CDNs)
- 03. ເພີ່ມປະສິດທິພາບໃນການເຊື່ອມຕໍ່ພ້ອມກັນ
- 04. ເຂົ້າໃຈໄລຍະເວລາຂອງເຄືອຂ່າຍຂອງທ່ານ
- ດາວໂຫລດຂະ ໜາດ ນ້ອຍສຸດ
- 05. ດາວໂຫລດຊັບພະຍາກອນແລະໄບຕ໌ ໜ້ອຍ ລົງ
- 06. Gzip: ອັດການເຂົ້າຊົມເຄືອຂ່າຍ
- 07. ການລົງທືນເອກະສານມາດຕະຖານ
- ການສ້າງໂຄງສ້າງທີ່ມີປະສິດທິພາບ
- 08. ຫລີກລ້ຽງຈາກ ໂໝດ quirks
- 09. ຫລີກລ້ຽງເຫດການ JavaScript ໃນເສັ້ນ
- 10. ເຊື່ອມໂຍງແບບແຜນທີ່ຢູ່ດ້ານເທິງຂອງ ໜ້າ
- 11. ພຽງແຕ່ປະກອບມີຮູບແບບທີ່ ຈຳ ເປັນ
- 12. ເຊື່ອມໂຍງ JavaScript ຂອງທ່ານຢູ່ທາງລຸ່ມຂອງ ໜ້າ
- 13. ເຂົ້າໃຈຂໍ້ ຈຳ ກັດຂອງ tags HTML5
- 14. ມາດຕະຖານໃນກອບດຽວ
- ຢ່າປະກອບຕົວ ໜັງ ສືໃຫ້ເຢັນ
- ເພີ່ມປະສິດທິພາບການ ນຳ ໃຊ້ສື່
- 16. ຫຼຸດຜ່ອນ ຈຳ ນວນຮູບພາບ
- 17. ໃຊ້ເຄື່ອງປະດັບພາບ
- 18. ພິຈາລະນາຮູບແບບຮູບພາບໃດ ໜຶ່ງ ທີ່ທ່ານໃຊ້
- 19. ຫລີກລ້ຽງເສັ້ນທາງ SVG ທີ່ສັບສົນ
- 20. ລະບຸຕົວຢ່າງການສະແດງຮູບພາບ ສຳ ລັບວິດີໂອ HTML5
- 21. ຫຼຸດຜ່ອນການ ນຳ ໃຊ້ປັmediaກອິນຂອງສື່ໃຫ້ ໜ້ອຍ ທີ່ສຸດ
- ຂຽນ JavaScript ໄວ
- 22. ປັບຄ່າ JavaScript ຂອງທ່ານ
- ສະແດງໃນຮູບແບບມາດຕະຖານ
- 23. ນຳ ໃຊ້ມາດຕະຖານເວັບ
- ຕິດຕາມກວດກາການສະ ໝັກ ຂອງທ່ານ
- 24. ສົມທົບການຈັບເວລາໃນການສະ ໝັກ
- 25. ກວດເບິ່ງສະຖານະການເບິ່ງເຫັນຂອງແອັບ your ຂອງທ່ານ
- ສະຫຼຸບ
- ມັກນີ້ບໍ? ອ່ານເຫຼົ່ານີ້!
ສໍາລັບສອງສາມປີທີ່ຜ່ານມາຂ້ອຍໄດ້ເປັນສ່ວນ ໜຶ່ງ ຂອງທີມ IE ທີ່ບໍລິສັດ Microsoft ກຳ ລັງຊອກຫາວິທີຕ່າງໆເພື່ອປັບປຸງປະສົບການທາງອິນເຕີເນັດ. ຕາມວິທີທີ່ພວກເຮົາໄດ້ຮຽນຮູ້ຫຼາຍຢ່າງກ່ຽວກັບການເຮັດວຽກຂອງເວັບແລະພັດທະນາຄວາມເຂົ້າໃຈທີ່ເລິກເຊິ່ງກ່ຽວກັບສິ່ງທີ່ເຮັດໃຫ້ເວັບໄຊທ໌້ແລະແອັບ apps ຕ່າງໆໄວ.
ການສ້າງໂປແກຼມເວັບທີ່ມີປະສິດຕິພາບສູງແມ່ນມີຄວາມ ຈຳ ເປັນ ສຳ ລັບນັກພັດທະນາເວັບທຸກຄົນ, ບໍ່ວ່າພວກເຮົາຈະເວົ້າກ່ຽວກັບເວບໄຊທ໌ຕ່າງໆທີ່ໃຊ້ໃນໂປແກຼມທ່ອງເວັບທີ່ອີງໃສ່ມາດຕະຖານຫລືແອັບ ສຳ ລັບ Windows Store. ເປົ້າ ໝາຍ ຂອງນັກພັດທະນາແມ່ນເພື່ອປັບປຸງການເຮັດວຽກຂອງເວັບໂດຍການຫຼຸດປັດໃຈດັ່ງຕໍ່ໄປນີ້:
ເວລາສະແດງ
ຈຸດປະສົງທີ່ ສຳ ຄັນທີ່ສຸດແມ່ນສິ່ງທີ່ພວກເຮົາ ໝາຍ ເຖິງ 'ເວລາສະແດງ'. ນີ້ມີຫຼາຍຊື່ໃນທົ່ວອຸດສາຫະ ກຳ ລວມທັງ 'ເວລາທີ່ຈະແກ້ວ' ແລະ 'ສີປະຖົມ'. ສະແດງເວລາສະແດງເວລາຕັ້ງແຕ່ເວລາທີ່ຜູ້ໃຊ້ ດຳ ເນີນການຈົນກວ່າຜູ້ໃຊ້ຈະເຫັນຜົນຂອງການກະ ທຳ ນັ້ນຢູ່ ໜ້າ ຈໍ. ນີ້ແມ່ນໄລຍະເວລາຈາກເວລາທີ່ຜູ້ໃຊ້ ນຳ ທາງໄປຫາເວັບໄຊທ໌້ຈົນກ່ວາເວລາທີ່ເວບໄຊທ໌ ກຳ ລັງໂຫລດ ສຳ ເລັດ.
ເວລາຜ່ານໄປ
ສະຖານທີ່ສ່ວນໃຫຍ່ຍັງສືບຕໍ່ປະຕິບັດວຽກງານເພື່ອຕອບສະ ໜອງ ການກະ ທຳ ຂອງຜູ້ໃຊ້ຫຼັງຈາກເນື້ອຫາໄດ້ຖືກສະແດງຢູ່ ໜ້າ ຈໍ. ນີ້ອາດຈະປະກອບມີການດາວໂຫລດຂໍ້ມູນຂອງຜູ້ໃຊ້ (ເຊັ່ນການສົ່ງອີເມວ) ຫຼືສົ່ງການວິເຄາະກັບຄືນໄປຫາຜູ້ໃຫ້ບໍລິການ. ຈາກທັດສະນະຂອງຜູ້ຊົມໃຊ້, ເວັບໄຊທ໌້ອາດຈະຖືກໂຫລດ. ເຖິງຢ່າງໃດກໍ່ຕາມ, ວຽກງານທີ່ ສຳ ຄັນມັກຈະເກີດຂື້ນໃນພື້ນຫລັງ, ເຊິ່ງສົ່ງຜົນກະທົບຕໍ່ການຕອບສະ ໜອງ.
ເວລາ CPU
ຕົວທ່ອງເວັບຂອງເວັບໄຊຕ໌ເກືອບ ຈຳ ກັດໂດຍ CPU; ວຽກທີ່ຕົວທ່ອງເວັບປະຕິບັດໃນ CPU ແລະວິທີການເຮັດວຽກທີ່ມີປະສິດທິພາບຈະເຮັດໃຫ້ຜົນກະທົບໃຫຍ່ທີ່ສຸດຕໍ່ການປະຕິບັດງານ. ນັ້ນແມ່ນເຫດຜົນທີ່ການເຮັດວຽກກັບ GPU ເຮັດໃຫ້ມີຜົນກະທົບທີ່ ສຳ ຄັນຕໍ່ IE9 ແລະ IE10. ຈຳ ນວນເວລາຂອງ CPU ທີ່ ຈຳ ເປັນໃນການ ດຳ ເນີນການແລະປະສິດທິພາບຂອງ CPU ແມ່ນ ສຳ ຄັນ.
ການ ນຳ ໃຊ້ຊັບພະຍາກອນ
ການສ້າງໂປແກຼມທ່ອງເວັບໄວ ໝາຍ ເຖິງການຮັບປະກັນຊັບພະຍາກອນໃນທົ່ວຄອມພິວເຕີ້ທັງ ໝົດ ເຮັດວຽກໄດ້ດີ. ນີ້ປະກອບມີການ ນຳ ໃຊ້ເຄືອຂ່າຍ, ຮູບແບບການ ນຳ ໃຊ້ຫນ່ວຍຄວາມ ຈຳ, ການປະມວນຜົນ GPU, ຮູບພາບ, ຄວາມ ຈຳ ແລະຫຼາຍຮ້ອຍຂະ ໜາດ ອື່ນໆ. ເນື່ອງຈາກລູກຄ້າ ດຳ ເນີນການສະ ໝັກ ຫຼາຍໆຄັ້ງໃນເວລາດຽວກັນໃນຄອມພິວເຕີ້ຂອງພວກເຂົາ, ມັນ ສຳ ຄັນ ສຳ ລັບຕົວທ່ອງເວັບທີ່ຈະແບ່ງປັນຊັບພະຍາກອນເຫລົ່ານີ້ກັບແອັບພລິເຄຊັນອື່ນໆ.
ການນໍາໃຊ້ພະລັງງານ
ເມື່ອ ນຳ ໃຊ້ອຸປະກອນຄອມພິວເຕີທີ່ຕິດພັນ, ມັນເປັນສິ່ງ ສຳ ຄັນທີ່ຈະຕ້ອງໄດ້ພິຈາລະນາເຖິງການໃຊ້ພະລັງງານ. ຕົວທ່ອງເວັບໃຊ້ພະລັງງານຫຼາຍເທົ່າໃດ, ແບັດເຕີຣີທີ່ໃຊ້ໄດ້ດົນກວ່າຈະເປັນສະຖານະການໃນໂທລະສັບມືຖື, ຄ່າໄຟຟ້າທີ່ຕໍ່າກວ່າໃນການໃຊ້ງານອຸປະກອນ, ແລະຜົນກະທົບຕໍ່ສິ່ງແວດລ້ອມນ້ອຍກວ່າ. ພະລັງງານແລະການປະຕິບັດແມ່ນເປົ້າ ໝາຍ ເສີມ.
ຂ້ອຍຢາກແບ່ງປັນບາງສິ່ງບາງຢ່າງທີ່ຂ້ອຍໄດ້ຮຽນຮູ້ກ່ຽວກັບການພັດທະນາເວັບໄຊທ໌ແລະແອັບ apps ທີ່ໄວກວ່າແລະການປ່ຽນແປງຕ່າງໆທີ່ເຈົ້າສາມາດເຮັດໄດ້ໃນມື້ນີ້ເພື່ອປັບປຸງປະສິດຕິພາບ.
ມີຫຼັກການ 7 ຢ່າງທີ່ນັກພັດທະນາສາມາດພິຈາລະນາໄດ້:
- ຕອບສະ ໜອງ ຢ່າງວ່ອງໄວຕໍ່ການຮ້ອງຂໍຂອງເຄືອຂ່າຍ
- ຫຼຸດຂະ ໜາດ ໄບຕ໌ເພື່ອດາວໂຫລດ
- ການສ້າງໂຄງສ້າງທີ່ມີປະສິດທິພາບ
- ເພີ່ມປະສິດທິພາບການ ນຳ ໃຊ້ສື່
- ຂຽນ JavaScript ໄວ
- ສະແດງໃນຮູບແບບມາດຕະຖານ
- ຕິດຕາມກວດກາສິ່ງທີ່ app ຂອງທ່ານກໍາລັງເຮັດ
ພາຍໃນເຈັດຫຼັກການດັ່ງກ່າວນີ້, ຂ້າພະເຈົ້າໄດ້ລວມເອົາ ຄຳ ແນະ ນຳ ກ່ຽວກັບການປະຕິບັດທີ່ເປັນປະໂຫຍດຕໍ່ໄປນີ້ເຊິ່ງຈະເຮັດໃຫ້ເວັບໄຊທ໌ແລະໂປແກຼມ HTML5 ຂອງທ່ານ ດຳ ເນີນການໄດ້ໄວຂຶ້ນ (ເບິ່ງວິດີໂອການ ນຳ ສະ ເໜີ ທີ່ຂ້າພະເຈົ້າໄດ້ແນະ ນຳ ໃຫ້ມີ ຄຳ ແນະ ນຳ ກ່ຽວກັບ HTML5 ຫຼາຍກວ່ານີ້).
ຕອບສະ ໜອງ ຢ່າງວ່ອງໄວຕໍ່ການຮ້ອງຂໍຂອງເຄືອຂ່າຍ
01. ປ້ອງກັນການປ່ຽນເສັ້ນທາງ 3xx
ເມື່ອຜູ້ໃຊ້ຄລິກໃສ່ການເຊື່ອມຕໍ່, ພວກເຂົາຄາດຫວັງວ່າຈະໄດ້ຮັບເນື້ອຫາໄດ້ໄວເທົ່າທີ່ຈະໄວໄດ້. ການປ່ຽນເສັ້ນທາງ 3xx ສາມາດສ້າງຄວາມຊັກຊ້າ 250 ມິນລິລິດໃນໃບສະ ໝັກ. ນີ້ອາດເບິ່ງຄືວ່າເປັນການຊັກຊ້າ, ແຕ່ມັນປະມານ 10 ເປີເຊັນຂອງເວລາໂຫລດ ໜ້າ. ປະມານ 63 ເປີເຊັນຂອງເວັບໄຊທ໌ທາງເທີງຂອງໂລກປະກອບມີການປ່ຽນເສັ້ນທາງ 3xx.
02. ນຳ ໃຊ້ເຄືອຂ່າຍແຈກຢາຍເນື້ອຫາ (CDNs)
ດ້ວຍ CDNs ທ່ານສາມາດຄົ້ນຫາຂໍ້ມູນຂອງທ່ານໃກ້ກັບຜູ້ໃຊ້ຂອງທ່ານໄດ້ງ່າຍຂື້ນ. ການບໍລິການຕ່າງໆເຊັ່ນ Azure ຊ່ວຍໃນເລື່ອງນີ້ແລະສາມາດຊ່ວຍຫຼຸດຜ່ອນເວລາທີ່ເນື້ອຫາໃຊ້ຈ່າຍໃນການເດີນທາງລະຫວ່າງສະຖານທີ່ຕ່າງໆ. ໃນເຄືອຂ່າຍຂອງມື້ນີ້, ເຊິ່ງສາມາດປະຫຍັດເງິນໄດ້ເຖິງ 300 ມິນລິລິດ.
03. ເພີ່ມປະສິດທິພາບໃນການເຊື່ອມຕໍ່ພ້ອມກັນ
ໃນເວລາທີ່ປະຊາຊົນຄິດກ່ຽວກັບເຄືອຂ່າຍ, ພວກເຂົາມັກຈະຄິດເຖິງທໍ່ດຽວທີ່ເຮັດເນື້ອຫາກັບກັນແລະກັນ. ໃນຄວາມເປັນຈິງ, ຕົວທ່ອງເວັບສາມາດເຮັດໃຫ້ຫົກເຊື່ອມຕໍ່ພ້ອມໆກັນໃນເວລາໃດຫນຶ່ງ, ເຊິ່ງເຮັດໃຫ້ມັນສາມາດດາວໂຫລດຫົກຊັບພະຍາກອນໃນເວລາດຽວກັນ. ນີ້ສາມາດເຮັດໄດ້ໃນຫລາຍໆໂດເມນ: ໂດຍການແຈກຢາຍເນື້ອຫາຂອງທ່ານທ່ານສາມາດເພີ່ມ ຈຳ ນວນຊັບພະຍາກອນທີ່ທ່ານສາມາດດາວໂຫລດໄປພ້ອມໆກັນ. ຖ້າເວັບໄຊທ໌ຂອງທ່ານບັນຈຸພາບໃນ 6 ຫລືເຈັດໂດເມນ, ທ່ານສາມາດຫຼຸດຜ່ອນເວລາທີ່ ໜ້າ ເວບໄຊທ໌ໄດ້ໂຫລດ.
04. ເຂົ້າໃຈໄລຍະເວລາຂອງເຄືອຂ່າຍຂອງທ່ານ
ເຂົ້າໃຈເຖິງການແບ່ງເວລາຂອງເຄືອຂ່າຍຂອງທ່ານ - ການ ນຳ ທາງ, ການ ກຳ ນົດເວລາຂອງຊັບພະຍາກອນແລະການ ກຳ ນົດເວລາຂອງຜູ້ໃຊ້ - ແລະ ນຳ ໃຊ້ API ທີ່ອີງໃສ່ມາດຕະຖານທີ່ມີຢູ່ໃນຕົວທ່ອງເວັບທີ່ທັນສະ ໄໝ ເຊັ່ນ: IE10, ແລະໃນ Windows Store apps. ທ່ານສາມາດໄດ້ຮັບຂໍ້ມູນກ່ຽວກັບການ ກຳ ນົດເວລາທີ່ມີຄວາມລະອຽດສູງຂື້ນໃນການ ນຳ ທາງຂອງເອກະສານຂອງທ່ານ. ການ ກຳ ນົດເວລາໃນການ ນຳ ທາງຊ່ວຍໃຫ້ທ່ານເຂົ້າໃຈ ຈຳ ນວນເວລາທີ່ແອັບພລິເຄຊັນຂອງທ່ານໃຊ້ໃນຫລາຍໆໄລຍະ.
ດາວໂຫລດຂະ ໜາດ ນ້ອຍສຸດ
05. ດາວໂຫລດຊັບພະຍາກອນແລະໄບຕ໌ ໜ້ອຍ ລົງ
ຊັບພະຍາກອນ ໜ້ອຍ ທີ່ທ່ານສາມາດດາວໂຫລດໄດ້ດີກວ່າ. ຊອກຫາຢູ່ໃນຊັບພະຍາກອນທີ່ທ່ານກໍາລັງດາວໂຫລດແລະເຮັດວຽກຢູ່ບ່ອນທີ່ທ່ານສາມາດຕັດລົງໄດ້. ເວັບໄຊທ໌ສະເລ່ຍໃນມື້ນີ້ດາວໂຫລດຂໍ້ມູນ 777kB. ສ່ວນໃຫຍ່ຂອງໄບຕ໌ເຫລົ່ານີ້ແມ່ນຖືກຖ່າຍໂດຍຮູບພາບ, ຕາມມາດ້ວຍເນື້ອຫາຂອງ JavaScript ແລະ Flash.
06. Gzip: ອັດການເຂົ້າຊົມເຄືອຂ່າຍ
ວິທີທີ່ດີທີ່ສຸດທີ່ຈະດາວໂຫລດໄບຕ໌ ໜ້ອຍ ກວ່ານັ້ນກໍ່ຄືການ Gzip ເນື້ອຫາຂອງທ່ານ. ຄົນສ່ວນໃຫຍ່ຈະໄດ້ຮັບບໍລິການນີ້ໂດຍບໍ່ເສຍຄ່າເພາະເຊີຟເວີທີ່ພວກເຂົາ ກຳ ລັງໃຊ້ຢູ່, ແຕ່ວ່າຫຼາຍໆຄົນປິດການໃຊ້ເຕັກນິກການຖອດລະຫັດແບບນີ້ໂດຍບໍ່ຕັ້ງໃຈ.
07. ການລົງທືນເອກະສານມາດຕະຖານ
ສິ່ງນີ້ມັກຈະດຶງດູດຜູ້ຄົນໂດຍແປກໃຈ, ແຕ່ວ່າເຄື່ອງແມ່ຂ່າຍຈະເລືອກເອົາການປ່ຽນແປງໃນກໍລະນີທີ່ໃຫຍ່ / ຕ່ ຳ. ການຮ້ອງຂໍການດາວໂຫລດຕໍ່ໄປນີ້ແມ່ນສອງຢ່າງຂອງການຮ້ອງຂໍດຽວກັນ:
ກໍລະນີຕ່ ຳ ກວ່າ
img src = "icon.png" />
ກໍລະນີຫົວຂໍ້
img src = "Icon.png" />
ຈາກມຸມມອງເວທີຂອງເວບໄຊທ໌, ເຫຼົ່ານີ້ແມ່ນສອງໄຟລ໌ທີ່ແຕກຕ່າງກັນ. ດັ່ງນັ້ນ, ການຮ້ອງຂໍສອງເຄືອຂ່າຍທີ່ແຕກຕ່າງກັນຈະຖືກປະມວນຜົນເປັນຜົນ.
ການສ້າງໂຄງສ້າງທີ່ມີປະສິດທິພາບ
08. ຫລີກລ້ຽງຈາກ ໂໝດ quirks
ສະເຫມີໃຊ້ ຄຳ ສັບທີ່ອີງໃສ່ມາດຕະຖານເພື່ອຫລີກລ້ຽງໂຫມດ quirks. ເລີ່ມຕົ້ນດ້ວຍ! DOCTYPE html>. ເວບໄຊທ໌ທີ່ທັນສະ ໄໝ ບໍ່ມີບ່ອນ ສຳ ລັບຮູບແບບ quirks, ເຊິ່ງຖືກອອກແບບມາເພື່ອໃຫ້ເວບໄຊທ໌ໃນກາງຊຸມປີ 90 ຈະສາມາດ ນຳ ໃຊ້ໄດ້ໃນຕົວທ່ອງເວັບທີ່ທັນສະ ໄໝ ໃນຍຸກສະຕະວັດເຊັ່ນ IE6 ແລະ Firefox 2.
ເວບໄຊທ໌ສ່ວນໃຫຍ່ໃນປະຈຸບັນນີ້ສິ້ນສຸດລົງດ້ວຍຮູບແບບ quirks ໂດຍບັງເອີນ, ເຊິ່ງເປັນຜົນມາຈາກ ຄຳ ສອນທີ່ບໍ່ຖືກຕ້ອງຫລືຂໍ້ຄວາມທີ່ພິເສດກ່ອນ ຄຳ ວ່າ doctype. ນີ້ສາມາດເຮັດໃຫ້ບັນຫາການຈັດຮູບແບບແປກທີ່ຍາກທີ່ຈະແກ້ໄຂ.
09. ຫລີກລ້ຽງເຫດການ JavaScript ໃນເສັ້ນ
ລະມັດລະວັງວ່າທ່ານບໍ່ໄດ້ໃຊ້ເຫດການ JavaScript ພາຍໃນ HTML markup ຂອງທ່ານ. ຕົວຢ່າງ ໜຶ່ງ ຂອງສິ່ງນີ້ອາດຈະແມ່ນປຸ່ມ onclick = "validate ()"> ຢືນຢັນ / ປຸ່ມ>. ນີ້ແມ່ນການປະຕິບັດທີ່ ທຳ ລາຍການແຍກຕ່າງຫາກທີ່ສະອາດເຊິ່ງຄວນມີຢູ່ລະຫວ່າງເຄື່ອງ ໝາຍ, ການ ນຳ ສະ ເໜີ ແລະພຶດຕິ ກຳ.
ເຊັ່ນດຽວກັນ, ຖ້າສະຄິບຂອງທ່ານ ກຳ ລັງໂຫລດຢູ່ທາງລຸ່ມຂອງເອກະສານ, ມັນສາມາດເຮັດໃຫ້ຜູ້ໃຊ້ສາມາດພົວພັນກັບ ໜ້າ ເວັບ, ກະຕຸ້ນເຫດການແລະພະຍາຍາມໂທຫາສະຄິບທີ່ຍັງບໍ່ໄດ້ໂຫລດເທື່ອ, ເຊິ່ງຈະເຮັດໃຫ້ເກີດຄວາມຜິດພາດ.
10. ເຊື່ອມໂຍງແບບແຜນທີ່ຢູ່ດ້ານເທິງຂອງ ໜ້າ
ໂດຍການໃສ່ CSS ຢູ່ເທິງສຸດຂອງ ໜ້າ ເວັບ, browser ຈະອອກ ຄຳ ຮ້ອງຂໍນັ້ນກ່ອນແລະພ້ອມກັນຕັນສີຈົນກ່ວາ CSS ສຳ ເລັດ. ໂດຍການໃສ່ CSS ໃສ່ຫົວ, ຮູບພາບ, JavaScript ແລະຊັບພະຍາກອນທີ່ໃຊ້ເວລາອື່ນໆສາມາດດາວໂຫລດໄດ້ພາຍຫລັງ. ເພື່ອບັນລຸເປົ້າ ໝາຍ ດັ່ງກ່າວ, ພວກເຮົາຍັງຈະແນະ ນຳ ໃຫ້ຕໍ່ຕ້ານການເຊື່ອມໂຍງ CSS ຂອງທ່ານຢູ່ທາງລຸ່ມຂອງ ໜ້າ.
11. ພຽງແຕ່ປະກອບມີຮູບແບບທີ່ ຈຳ ເປັນ
ມັນອາດເບິ່ງຄືວ່າເປັນຄວາມຄິດທີ່ດີທີ່ຈະຖືເອກະສານ CSS ຂະ ໜາດ ໃຫຍ່ຫຼາຍທີ່ແບ່ງປັນທົ່ວເວັບໄຊທ໌ຂອງທ່ານ. ບາງເວັບໄຊທ໌ຂ່າວເທິງໃນໂລກໃຊ້ວິທີນີ້ໃນທຸກມື້ນີ້. ເວັບໄຊທ໌ຂ່າວ ໜຶ່ງ, ຕົວຢ່າງ, ມີເອກະສານສະບັບ ໜຶ່ງ ທີ່ມີກົດລະບຽບ 4,000 ໃນນັ້ນ, ໃນນັ້ນມີພຽງແຕ່ 5-10 ເປີເຊັນທີ່ຖືກ ນຳ ໃຊ້ໃນ ໜ້າ ດຽວ. ຕົວທ່ອງເວັບຕ້ອງດາວໂຫລດຮູບແບບທັງ ໝົດ ນີ້, ສົ່ງຜ່ານແລະສ້າງໂຄງສ້າງຂໍ້ມູນພາຍໃນເຊິ່ງສ່ວນໃຫຍ່ຈະບໍ່ຖືກ ນຳ ໃຊ້.
12. ເຊື່ອມໂຍງ JavaScript ຂອງທ່ານຢູ່ທາງລຸ່ມຂອງ ໜ້າ
ນີ້ແມ່ນການປະຕິບັດທີ່ດີທີ່ສຸດ. ທ່ານຄວນຮັບປະກັນວ່າຮູບແບບແລະສາຍຕາຈະຖືກດາວໂຫຼດກ່ອນ. ວິທີນັ້ນ, JavaScript ສາມາດຕິດຕາມພາຍຫຼັງແລະຈັດການກັບ ໜ້າ ເວັບທີ່ມັນມັກ. ເຖິງຢ່າງໃດກໍ່ຕາມ, ຖ້າທ່ານຕ້ອງເຊື່ອມໂຍງກັບ JavaScript ຢ່າງແນ່ນອນໃນຫົວ, ຕາມທີ່ໄດ້ ກຳ ນົດໂດຍລະບົບ CRM ຫຼືບໍລິການໂຮດຕິ້ງທີ່ທ່ານ ກຳ ລັງໃຊ້ຢູ່, ໃຫ້ແນ່ໃຈວ່າທ່ານຕ້ອງໃຊ້ແທັບ defer.
13. ເຂົ້າໃຈຂໍ້ ຈຳ ກັດຂອງ tags HTML5
ແທັກ HTML5 ໃໝ່ ເຊັ່ນ: ສ່ວນ>, header>, ແລະ footer> ປັບປຸງ semantics ຂອງ markup, ແຕ່ຕ້ອງໃຊ້ script shiv ພິເສດທີ່ຈະໃຊ້ໃນ Internet Explorer 6, 7, ແລະ 8, ຫຼືພວກເຂົາຈະບໍ່ຖືກຮັບຮູ້. ໜ້າ ທີ່ ຈຳ ເປັນຕ້ອງເຮັດວຽກກັບໂປແກຼມທ່ອງເວັບມໍລະດົກເຫຼົ່ານີ້, ເຖິງແມ່ນວ່າເວລາທີ່ສະຄຣິບຖືກປິດໃຊ້ງານ, ບໍ່ສາມາດໃຊ້ tags HTML5 ໃໝ່ ໄດ້. ການ ນຳ ໃຊ້ div ແລະອົງປະກອບ ທຳ ມະດາມັກຈະເປັນການປະຕິບັດທີ່ປອດໄພກວ່າ ສຳ ລັບກໍລະນີເຫຼົ່ານັ້ນ.
14. ມາດຕະຖານໃນກອບດຽວ
ມີຫລາຍພາສາ JavaScript ຢູ່ທີ່ນັ້ນແລະພວກມັນຫລາຍໆຢ່າງເຮັດແບບດຽວກັນໃນແງ່ຂອງການເຮັດວຽກ. ຕົວທ່ອງເວັບຕ້ອງດາວໂຫລດ JavaScript, ຜ່ານມັນແລະສ້າງໂຄງສ້າງຂໍ້ມູນພາຍໃນໂດຍບໍ່ຮູ້ວ່າທ່ານຈະປະຕິບັດຫຼືບໍ່. ໂດຍການຍຶດ ໝັ້ນ ກັບ ໜຶ່ງ ໂຄງຮ່າງດຽວ, ທ່ານຈະສາມາດປັບປຸງຜົນງານຂອງທ່ານໄດ້ຢ່າງຫຼວງຫຼາຍ.
ຢ່າປະກອບຕົວ ໜັງ ສືໃຫ້ເຢັນ
ມີຫຼາຍຄິບ 'ເຢັນ' ຢູ່ໃນນັ້ນ. ມັນງ່າຍແທ້ໆທີ່ຈະລວມເອົາເອກະສານສະຄິບທີ່ເຮັດບາງສິ່ງບາງຢ່າງ 'ເຢັນ' ໃນພື້ນຫລັງ, ແຕ່ວ່າເອກະສານສະຄິບນັ້ນ ກຳ ລັງແຂ່ງຂັນກັບຊັບພະຍາກອນຕ່າງໆໃນເວລາໂຫລດ ໜ້າ ຂອງທ່ານ. ທ່ານແນ່ໃຈບໍ່ວ່າມັນ ຈຳ ເປັນ?
ເພີ່ມປະສິດທິພາບການ ນຳ ໃຊ້ສື່
16. ຫຼຸດຜ່ອນ ຈຳ ນວນຮູບພາບ
ສ່ວນໃຫຍ່ຂອງໄບຕ໌ທີ່ດາວໂຫລດມາແມ່ນຮູບພາບ. ຈຳ ນວນຮູບພາບໂດຍສະເລ່ຍໃນເວັບໄຊທ໌ 100,000 ອັນດັບສູງສຸດແມ່ນ 58. ເມື່ອທ່ານເຂົ້າໄປຫລາຍກວ່າ 20-30 ຮູບພາບ, ທ່ານຈະເລີ່ມເຫັນຜົນຂອງການສະແດງ. ລອງເບິ່ງທຸກແຫຼ່ງຂໍ້ມູນຂອງເຈົ້າແລະຖາມຕົວເອງວ່າເຈົ້າຕ້ອງການຫຼືບໍ່.
17. ໃຊ້ເຄື່ອງປະດັບພາບ
ພາບພົດໃນຮູບພາບສາມາດຫຼຸດ ຈຳ ນວນຂໍ້ມູນທີ່ ຈຳ ເປັນຕ້ອງໄດ້ດາວໂຫລດ. ບ່ອນໃດທີ່ເປັນໄປໄດ້ສ້າງພາບພົດດ້ວຍມື.
18. ພິຈາລະນາຮູບແບບຮູບພາບໃດ ໜຶ່ງ ທີ່ທ່ານໃຊ້
PNG ໃຫ້ຄວາມສົມດຸນທີ່ມີປະສິດຕິພາບສູງສຸດລະຫວ່າງຄວາມເຂົ້າກັນໄດ້, ຂະ ໜາດ ເຂົ້າລະຫັດ, ເວລາອອກລະຫັດ CPU ແລະໄບຕ໌ທີ່ຕ້ອງການ ສຳ ລັບການຖອດລະຫັດ CPU. ມັນຍັງມີອັດຕາການບີບອັດທີ່ດີທີ່ສຸດ. ເຖິງຢ່າງໃດກໍ່ຕາມ, ສຳ ລັບຮູບຖ່າຍ, JPEG ມັກຈະເປັນຮູບແບບທີ່ດີກວ່າ.
19. ຫລີກລ້ຽງເສັ້ນທາງ SVG ທີ່ສັບສົນ
ເສັ້ນທາງ SVG ທີ່ສັບສົນໃຊ້ເວລາດົນນານຂອງຕົວທ່ອງເວັບເພື່ອດາວໂຫລດ, ຜ່ານແລະສ້າງໂຄງສ້າງຂໍ້ມູນພາຍໃນ. ຖ້າເປັນໄປໄດ້, ພະຍາຍາມສ້າງເສັ້ນທາງ SVG ທີ່ມີຄວາມຄ່ອງແຄ້ວທີ່ສຸດທີ່ທ່ານສາມາດເຮັດໄດ້. ມັນອາດໃຊ້ເວລາໄລຍະ ໜຶ່ງ, ແຕ່ການສ້າງເສັ້ນທາງ SVG ດ້ວຍມືກໍ່ສາມາດຊ່ວຍໄດ້.
20. ລະບຸຕົວຢ່າງການສະແດງຮູບພາບ ສຳ ລັບວິດີໂອ HTML5
ຖ້າທ່ານບໍ່ລະບຸຕົວຢ່າງການສະແດງຮູບພາບ, ຕົວທ່ອງເວັບຕ້ອງດາວໂຫລດວິດີໂອ, ຄິດອອກວ່າກອບ ທຳ ອິດແມ່ນຫຍັງ, ແລະຫຼັງຈາກນັ້ນສະແດງຮູບນັ້ນໃຫ້ຜູ້ໃຊ້ເຫັນ. ໂດຍການລະບຸຕົວຢ່າງການສະແດງຮູບພາບຕົວທ່ອງເວັບບໍ່ ຈຳ ເປັນຕ້ອງດາວໂຫລດວິດີໂອ, ມີແຕ່ຮູບພາບ. ມັນເລີ່ມຕົ້ນດາວໂຫລດວິດີໂອເມື່ອຜູ້ໃຊ້ຮ້ອງຂໍ.
21. ຫຼຸດຜ່ອນການ ນຳ ໃຊ້ປັmediaກອິນຂອງສື່ໃຫ້ ໜ້ອຍ ທີ່ສຸດ
ເຖິງວ່າຈະມີຄວາມຮັບຮູ້, ປັinsກອິນຂອງສື່ສ່ວນໃຫຍ່ຈະບໍ່ໄວເທົ່າກັບ HTML5 ໃນການເຮັດວິດີໂອ. ຍິ່ງໄປກວ່ານັ້ນ, ພວກເຂົາຈະແຂ່ງຂັນກັບການ ນຳ ໃຊ້ຊັບພະຍາກອນ.
ຂຽນ JavaScript ໄວ
22. ປັບຄ່າ JavaScript ຂອງທ່ານ
ຫຼາຍຄົນຄົງຈະຄຸ້ນເຄີຍກັບເຕັກນິກນີ້. ສິ່ງທີ່ ສຳ ຄັນ, ທ່ານເອົາ JavaScript ຂອງທ່ານອອກ, ເອົາບາງຕົວອັກສອນອອກ, ແລະຫຼັງຈາກນັ້ນໃຫ້ປ່ຽນແປງຕົວແປຕ່າງໆ. ສະແດງຢູ່ດ້ານລຸ່ມ:
ເບື້ອງຕົ້ນ (66 ຕົວອັກສອນ)
function Sum (ເບີ 1, ຈຳ ນວນ 2) {ກັບຄືນ (ເລກ 1 + ເບີ 2); }
ລັກສະນະທີ່ຖືກຍ້າຍອອກ (54 ຕົວອັກສອນ)
function Sum (ຈຳ ນວນ 1, ຈຳ ນວນ 2) {ກັບຄືນເລກ 1 + ເບີ 2;}
ປະສົມປະສານ (30 ຕົວອັກສອນ)
function Sum (a, b) {ກັບຄືນ a + b;}
ທ່ານຍັງເຫຼືອຢູ່ກັບ JS ໜ້ອຍ ທີ່ຈະດາວໂຫລດ, ແລະມີຜົນປະໂຫຍດທີ່ເຊື່ອງໄວ້: ການປະຕິບັດເວລາແລ່ນ. ດ້ວຍລະຫັດທີ່ເຄັ່ງຄັດແລະຊື່ຕົວແປທີ່ມີຂະ ໜາດ ນ້ອຍກວ່າ, ເວລາແລ່ນສາມາດຊອກຫາຕົວແປຕ່າງໆໄດ້ໄວຂຶ້ນ, ປັບປຸງການດາວໂຫລດພ້ອມທັງການປະຕິບັດງານຂອງເວລາແລ່ນ.
ນອກຈາກນັ້ນ, ເລີ່ມຕົ້ນ JavaScript ໃນຄວາມຕ້ອງການ. ຢ່າໂຫຼດຫ້ອງສະ ໝຸດ JavaScript ທັງ ໝົດ ຂອງທ່ານໃນເວລາໂຫລດ ໜ້າ ເວບໄຊທ໌ - ທ່ານສາມາດເຮັດມັນໄດ້ແບບເຄື່ອນໄຫວເມື່ອທ່ານຕ້ອງການ.
ສະແດງໃນຮູບແບບມາດຕະຖານ
23. ນຳ ໃຊ້ມາດຕະຖານເວັບ
ບໍ່ພຽງແຕ່ໃຊ້ມາດຕະຖານເວັບຊ່ວຍຫຼຸດຜ່ອນຄ່າໃຊ້ຈ່າຍໃນການພັດທະນາແລະຄວາມສັບສົນຂອງການທົດສອບໃນທົ່ວ browser ແລະອຸປະກອນຕ່າງໆ, ແຕ່ມັນຍັງສາມາດບັນລຸຜົນປະໂຫຍດໃນການປະຕິບັດທີ່ສັງເກດໄດ້. ໃນຄວາມເປັນຈິງ, ພວກເຮົາພົບວ່າເວັບໄຊທ໌ຕ່າງໆໃນ IE10 ມີເວລາໂຫຼດ ໜ້າ ສະເລ່ຍ 30 ເປີເຊັນເມື່ອພວກເຂົາປ່ຽນເປັນໂຫມດມາດຕະຖານ. ຜົນປະໂຫຍດແມ່ນຄ້າຍຄືກັນໃນ IE9 ເຊັ່ນກັນ.
ໂຫມດມາດຕະຖານແມ່ນຮູບແບບການສະແດງຜົນແບບເລີ່ມຕົ້ນຂອງທຸກໆໂປຣແກຣມທ່ອງເວັບແລະສະ ເໜີ ການຈັດຕັ້ງປະຕິບັດທີ່ດີທີ່ສຸດຂອງມາດຕະຖານເວັບທີ່ເຮັດວຽກດຽວກັນໃນທຸກ browser. ນອກເຫນືອໄປຈາກຮູບແບບມາດຕະຖານ, IE ໃຫ້ຮູບແບບທີ່ເຂົ້າກັນໄດ້ເພື່ອຮັກສາເວັບໄຊທ໌ທີ່ອອກແບບມາ ສຳ ລັບ IE ເກົ່າ. ສິ່ງນີ້ມີປະໂຫຍດໂດຍສະເພາະໃນໄລຍະຜ່ານມາເມື່ອມັນເປັນການປະຕິບັດ ທຳ ມະດາທີ່ຈະກວດພົບໂປແກຼມທ່ອງເວັບ ທຳ ອິດແລະຫຼັງຈາກນັ້ນໃຫ້ບໍລິການລະຫັດ ໝາຍ ເຖິງມັນເທົ່ານັ້ນ. ແຕ່ສິ່ງນີ້ບໍ່ ຈຳ ເປັນອີກຕໍ່ໄປໃນຫລາຍໆກໍລະນີເພາະວ່າລະຫັດມາດຕະຖານຂອງເວບໄຊທ໌ຖືກສະແດງຄ້າຍຄືກັນໃນເບົາເຊີທີ່ທັນສະ ໄໝ, ລວມທັງ IE10 ແລະ 9, ຜ່ານຮູບແບບມາດຕະຖານ. ການປະຕິບັດ ໃໝ່ ນີ້ແມ່ນເປັນທີ່ຮູ້ກັນທົ່ວໄປວ່າເປັນການກວດຫາຄຸນລັກສະນະແລະໄດ້ຖືກນິຍົມຈາກ Modernizr).
ຕິດຕາມກວດກາການສະ ໝັກ ຂອງທ່ານ
24. ສົມທົບການຈັບເວລາໃນການສະ ໝັກ
ຄໍາຮ້ອງສະຫມັກສ່ວນໃຫຍ່ໃນເວບໄຊທ໌ມື້ນີ້ມີເຄື່ອງຈັບເວລາ 5-10 ທີ່ໃຊ້ງານໄດ້ຕະຫຼອດເວລາ. ປະມານເຄິ່ງ ໜຶ່ງ ຂອງເຄື່ອງຈັບເວລານັ້ນແມ່ນບໍ່ມີປະໂຫຍດ. ຮັບປະກັນວ່າເຄື່ອງຈັບເວລາຫລື ລຳ ດັບບໍ່ໄດ້ເຮັດວຽກໂດຍບໍ່ ຈຳ ເປັນ. ເມື່ອເປັນໄປໄດ້, ສົມທົບການຈັບເວລາໃນການສະ ໝັກ ຂອງທ່ານແລະຖ້າທ່ານສາມາດ, ສ້າງໂມງຈັບເວລາ ໜຶ່ງ ທີ່ຄຸ້ມຄອງ ລຳ ດັບທັງ ໝົດ ຂອງທ່ານ.
25. ກວດເບິ່ງສະຖານະການເບິ່ງເຫັນຂອງແອັບ your ຂອງທ່ານ
ໂດຍບໍ່ຮູ້ສະຖານະພາບການເບິ່ງເຫັນຂອງແອັບພລິເຄຊັນຂອງທ່ານ, ທ່ານຖືກບັງຄັບໃຫ້ອອກແບບໃຫ້ມັນເບິ່ງເຫັນໄດ້ສະ ເໝີ. ການເບິ່ງເຫັນ ໜ້າ ເວັບແມ່ນ API ອີງຕາມມາດຕະຖານ ໃໝ່ ທີ່ຮອງຮັບໃນໂປແກຼມ IE10 ແລະ Windows Store, ພ້ອມທັງໂປຣແກຣມທ່ອງເວັບທີ່ທັນສະ ໄໝ ທີ່ສຸດ.
ການເບິ່ງເຫັນ ໜ້າ ເວັບຊ່ວຍໃຫ້ທ່ານສາມາດ ກຳ ນົດສະຖານະການເບິ່ງເຫັນຂອງແອັບພລິເຄຊັນ, ດັ່ງນັ້ນທ່ານສາມາດຫຼຸດຜ່ອນກິດຈະ ກຳ ຕ່າງໆເມື່ອທ່ານຮູ້ວ່າແອັບພລິເຄຊັນບໍ່ສາມາດເບິ່ງເຫັນໄດ້ແລະໃນການເຮັດດັ່ງນັ້ນ, ປະຢັດເວລາຂອງຊີພີຍູແລະຊ່ວຍເພີ່ມອາຍຸການໃຊ້ງານຂອງແບັດເຕີຣີ.
ສະຫຼຸບ
ການປະຕິບັດງານຂອງເວັບໄຊທ໌ທີ່ດີກວ່າສາມາດມີຜົນກະທົບອັນໃຫຍ່ຫຼວງຕໍ່ຜູ້ໃຊ້ຂອງທ່ານ. ການໂຫຼດເວບໄຊທ໌ຊ້າແມ່ນປັດໃຈຫຼັກທີ່ເຮັດໃຫ້ຜູ້ໃຊ້ປະຖິ້ມເວັບໄຊທ໌້, ສາມາດຫຼຸດຜ່ອນຄວາມ ໜ້າ ເຊື່ອຖືຂອງເວັບໄຊທ໌ທີ່ຮັບຮູ້ແລະສົ່ງຜົນກະທົບຕໍ່ການຂາຍຜະລິດຕະພັນ. ການປະຫຍັດເວລາຂອງບາງ ຄຳ ແນະ ນຳ ຂ້າງເທິງອາດເບິ່ງຄືວ່າຂ້ອນຂ້າງ ໜ້ອຍ, ແຕ່ເມື່ອປະຕິບັດຮ່ວມກັນ, ພວກເຂົາສາມາດສ້າງການປະຫຍັດເວລາໄດ້ຫຼາຍ. ຍິ່ງໄປກວ່ານັ້ນ, ພວກເຂົາຈະຊຸກຍູ້ທ່ານໃຫ້ຄິດປະສິດທິພາບກ່ອນແລະສ້າງແອັບ apps ແລະເວບໄຊທ໌ດ້ວຍປະສົບການຂອງຜູ້ໃຊ້ໃນລະດັບແຖວ ໜ້າ.
ຄຳ ເວົ້າ: ຈິຕຕະນະມະນີ
ບົດຂຽນນີ້ມີຢູ່ໃນວາລະສານ Net 244.
ມັກນີ້ບໍ? ອ່ານເຫຼົ່ານີ້!
- ຕົວອັກສອນເວັບທີ່ພວກເຮົາມັກ - ແລະພວກມັນຈະບໍ່ເສຍຄ່າໃຊ້ຈ່າຍ
- ວິທີການສ້າງແອັບ:: ລອງການສອນທີ່ດີເຫຼົ່ານີ້
- ກວດເບິ່ງຕົວຢ່າງ JavaScript ເທິງສຸດເຫລົ່ານີ້
ມີ ຄຳ ແນະ ນຳ HTML5 ທີ່ມີປະໂຫຍດບໍ? ແບ່ງປັນມັນໃນ ຄຳ ເຫັນ!
