自定義滾動條-控制內容滾動

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <title></title>
  6         <style>
  7              #parent{width: 600px;height:20px;background-color:#CCC;position: relative; margin: 10px auto;}
  8             #div1{width: 20px;height:20px;background-color:red;position: absolute;left: 0;top: 0;}
  9             #div2{width: 400px;height:300px;border: 1px solid black; overflow: hidden; position: relative;}
 10             #div3{position: absolute; left: 0;top: 0px;padding: 4px;}
 11         </style>
 12         <script>
 13             window.onload=function(){
 14                 var oDiv=document.getElementById('div1');
 15                 var oDiv2=document.getElementById('div2');
 16                 var oDiv3=document.getElementById('div3');
 17                 var oParent=document.getElementById('parent');
 18                 var disX=0;
 19 
 20                 oDiv.onmousedown=function(ev){
 21                     var oEvent=ev||event;
 22 
 23                     disX=oEvent.clientX-oDiv.offsetLeft;
 24 
 25                     document.onmousemove=function(ev){
 26                         var oEvent=ev||event;
 27                         var l=oEvent.clientX-disX;
 28 
 29                         if(l<0){
 30                             l=0;
 31                         }
 32                         else if(l>oParent.offsetWidth-oDiv.offsetWidth){
 33                             l=oParent.offsetWidth-oDiv.offsetWidth;
 34                         }
 35 
 36                         oDiv.style.left=l+'px';
 37 
 38                         var scale=l/(oParent.offsetWidth-oDiv.offsetWidth);
 39 
 40                         document.title=scale;
 41 
 42                         oDiv3.style.top=-scale*(oDiv3.offsetHeight-oDiv2.offsetHeight)+'px';
 43                     }
 44 
 45                     document.onmouseup=function(ev){
 46                         document.onmousemove=null;
 47                         document.onmouseup=null;
 48                     }
 49 
 50                     return false;
 51                 }
 52             }
 53         </script>
 54     </head>
 55     <body>
 56         <div id="parent">
 57             <div id="div1">
 58             </div>
 59         </div>
 60         <div id="div2">
 61             <div id="div3">
 62                 疑問
 63 
 64 剛剛接觸ASP.NET CORE 項目的同學可能會有如下疑問:
 65 
 66   ASP.NET CORE 項目的啓動過程是怎麼樣的?
 67 爲什麼ASP.NET CORE項目可以在控制檯中運行啓動後變成了一個網站程序?
 68 
 69 現在我這裏使用.NETCORE 3.1 最新穩定發佈版本來進行以上問題的解析,帶大家解決以上問題的疑惑,學習完大家會對ASP.NETCORE 項目會有一個不一樣的理解和領悟.
 70 
 71 
 72 啓動過程
 73 
 74 剛剛接觸ASP.NET core 的同學們估計都會覺得和之前的ASP.NET 設計大不一樣,代碼風格也有很大的變化,以前的ASP.NET 是全家桶框架模式,裏面包含了所有的實現,你用的到的用不到的都集成在裏面;然而ASP.NET CORE 框架做了大的改變,以最小化抽象設計,通過擴展方法完成易用性擴展.
 75 
 76 解讀過源代碼的同學們都可以發現大多api都是最小化單元抽象接口方式進行設計,其他複雜的方法api都是通過擴展方法進行擴展提供,這也是.NET Core 高效易擴展的一大優勢原因.
 77 
 78  對於ASP.NET Core應用程序來說,我們要記住非常重要的一點是:其本質上是一個獨立的控制檯應用,它並不是必需在IIS內部託管且並不需要IIS來啓動運行(而這正是ASP.NET Core跨平臺的基石)。ASP.NET Core應用程序擁有一個內置的Self-Hosted(自託管)的Web Server(Web服務器),用來處理外部請求。
 79 
 80 不管是託管還是自託管,都離不開Host(宿主)。在ASP.NET Core應用中通過配置並啓動一個Host來完成應用程序的啓動和其生命週期的管理。而Host的主要的職責就是Web Server的配置和Pilpeline(請求處理管道)的構建。
 81 
 82 一、背景
 83     明源雲ERP開放平臺提供了強大的基於實體的ORM框架:“實體服務”,它可以讓開發人員只需專注於業務邏輯代碼的編寫,不用關心數據庫相關的操作,大大提高了開發效率。
 84     在行業中所有基於實體的ORM框架,均存在同一個問題:在批量操作數據時,性能表現乏力。因爲在批量保存數據時,可能既包含新增的記錄,又包含更新或刪除的記錄,一般的ORM框架必須爲每一條記錄生成一條SQL語句,然後一條一條的執行,這樣執行的性能非常差,而通常的優化方案是將數據分批保存,但在數據量特別大時,保存的性能表現依然無法接受。在ERP的業務中,存在很多這種批量操作大量數據的場景,例如通過Excel批量導入大量數據,而且這類功能基本都出現在覈心的業務模塊,所以我們必須要攻克這個問題。
 85     本文將介紹我們如何通過技術上不斷的優化,最終大幅提升實體服務性能的過程。
 86 
 87 二、初步優化
 88     如前所述,ORM框架之所以在大批量數據保存時性能差,主要原因是它必須一條一條的執行SQL,熟悉數據庫技術的同學應該清楚,每次SQL執行都會用到數據庫連接,而頻繁開啓連接會給數據庫造成巨大壓力。所以我們一開始想到的優化方案,就是將這批SQL一次性發給數據庫執行,只開一次數據庫連接。
 89     我們將SQL一次性發給數據庫執行,確實大幅減少了開啓數據庫連接的次數,但依然存在性能問題。經過技術分析,我們發現原因在於發給數據庫執行的SQL語句太大,造成了網絡傳輸延遲過大。比如本次要批量保存的數據行數有10萬,字段超過50個,需執行的SQL語句就有10萬條,雖然是一次性執行,但SQL本身可能有幾兆。
 90     爲了解決這個問題,我們需要將10萬條SQL語句合併起來,變成幾條SQL去執行。
 91 
 92 三、第二輪優化
 93    我們實現合併SQL語句方案時,遇到的第一個問題是:批量保存的數據,其中每一行的狀態是不一樣的,有些行可能是新增,有些行可能是更新,有些可能是刪除,不同類型的數據如何合併SQL?
 94     解決方案:將新增、更新、刪除三種類型的數據,分別合併成三條不同形式的SQL語句進行執行。
 95     我們緊接着遇到了第二個問題:要更新的每一行數據中,更新的字段也不一樣,可能第一行要更新A字段,第二行要更新B字段,每一行的Update語句都不一樣,如何合併成一條SQL?
 96     解決方案:不管每一行要更新哪些字段,我們合併後的SQL都更新所有字段,然後再使用一個標識字段表示該字段是否需要插入或更新,這樣就能用同一條SQL更新所有行。
 97             </div>
 98         </div>
 99     </body>
100 </html>
自定義滾動條-控制內容滾動

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章