自定义滚动条-控制内容滚动
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>