自定义滚动条-控制内容滚动

  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>
自定义滚动条-控制内容滚动
原文地址:https://www.cnblogs.com/shangec/p/12802958.html