› 看板 Soft_Job 關於我們 聯絡資訊
作者p52189 (鼠霸)
看板Soft_Job
標題[請益] 網頁程式怎麼改善效能？
時間Thu Oct 27 16:22:38 2016
不知道能不能發在這 我最近遇到了瓶頸 有一支程式，使用AngularJS 1.5.8 內容是印一個滿大的表格 (表格是後端程式印死的，不是動態生成) 然後有一個 AJAX 的動作去叫一支花費時間應該不會超過一秒的php程式 撈回來的資料約 10筆，配template ，ng-repeat 印出來 這支程式不明原因的很慢 大部分時間花在，後端寫死的大表格印完之後 ，AJAX撈東西回來的小表格即將印出之前 我開 Chrome 看著 timeline 看不出個所以然 有很大一部分是灰色的 other 狀態 scripting 跟 rendering 佔不多 表格cell數量大約是 15 * 500 我個人電腦記憶體是 2 G 請問大家遇到這種問題都怎麼找問題根源 如何解決的？ 因為是工作的程式不能給各位看 但是如果有描述不夠仔細的我會盡量補充 懇請懂網頁程式的大大，提點一下 感謝！！ ----- Sent from JPTT on my HTC_M9u. -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 36.227.160.185 ※ 文章網址: https://www.ptt.cc/bbs/Soft_Job/M.1477556563.A.F39.html
推 femlro: 記得順便去web板問 那邊高手也很多 10/27 16:25
→ p52189: 請問是Web_Design板嗎？ 10/27 16:27
推 femlro: 好像是XD 10/27 16:39
→ max241: 為什麼要寫死table 是後端生一個內容超大的table tag嗎? 10/27 16:43
→ p52189: 對，會這樣是因為後端那部分並不是我寫的，是有前輩寫了一 10/27 16:45
→ p52189: 版，拆過來用的結果 10/27 16:45
推 yyc1217: 先把資料量減少到一筆 並且先不要做多餘的工作 直接印出 10/27 17:11
→ yyc1217: 來看看 再逐步增加筆數 和想做的js 10/27 17:11
→ p52189: 筆數少的時候顯然比較快，不過也只知道這樣而已，再往底層 10/27 17:15
→ p52189: 的就不知從何下手了 10/27 17:15
推 iWRZ: 我可以說cgi嗎？(逃～) 10/27 17:18
推 BigTounge: 有用track by 嗎 10/27 19:05
→ JustGame: 每一個可中斷的點都 console.log 一些東西出來看？ 10/27 19:05
→ Hevak: 15x500是指每一筆資料有7500個cell，然後你一次要渲染7500* 10/27 19:56
→ Hevak: 格x10筆？ 10/27 19:56
推 Laluth: 參考看看吧 https://goo.gl/kYuuAC 10/27 20:43
推 dreamnook: 推樓上 很有幫助 10/27 21:30
→ enthos: https://www.charlesproxy.com/ 10/27 21:42
推 gerojeng: https://github.com/kamilkp/angular-vs-repeat/ 10/27 22:05
→ gerojeng: https://github.com/stackfull/angular-virtual-scroll 10/27 22:06
→ gerojeng: 用virtual mode 取代 ng-repeat 10/27 22:08
→ angusyu: https://goo.gl/NvpAQ0 <--- 看分數啊 10/27 22:18
→ pttworld: 換各家瀏覽器測試是第一步。 10/27 22:19
推 gerojeng: ajax call其實被重覆呼叫很多次? 10/27 22:56
推 fewen: 不要用前端處理資料啊 10/27 23:07
推 ccas: http://ui-grid.info/ angular-grid 畫大table 10/28 02:38
→ lovdkkkk: 不是很確定實際狀況 試試把 table 改 display none 10/28 13:20
→ lovdkkkk: 全跑完再把 display none 移掉 10/28 13:20
推 Gold740716: ajax 板？ 10/29 01:39
推 TETZ: 之前遇過這問題是用transform: translateZ(0)解 10/29 04:02
推 annua: 我之前遇到是因為雙向綁定關係，若資料是靜態，就盡量少用n 10/31 16:40
→ annua: g開頭的標籤，或是參考使用這個 http://github.com/Pasvas/ 10/31 16:40
→ annua: bindonce 10/31 16:40
→ p52189: 感謝各位，我一個個試試看 10/31 20:33