网站前端做出来后台怎么做,宁波正规seo推广公司,网站宝建站助手,网站规划设计是什么前端加载百万条数据列表#xff0c;如果采用真实的DOM插入100万个div#xff08;或li#xff09;标签#xff0c;肯定是非常卡顿的。这就不得不使用虚拟列表技术方案#xff0c;但是虚拟列表技术方案网上有很详细的实现方法#xff0c;今天我就来谈谈根据网上的方案…
前端加载百万条数据列表如果采用真实的DOM插入100万个div或li标签肯定是非常卡顿的。这就不得不使用虚拟列表技术方案但是虚拟列表技术方案网上有很详细的实现方法今天我就来谈谈根据网上的方案把虚拟列表改造成虚拟表格的过程。
我就直接列出代码
index.html,里面需要引入hyperHTML-min.js我也提供了。
!DOCTYPE html
htmlheadmeta charsetutf-8titlevirtual table/titlestyle.list-container {overflow: auto;border: 1px solid black;height: 500px;width: 700px;box-sizing: border-box;}.list-container-inner{}.list-container-inner .box{}.list-container-inner .box .layer1{display: table;width: 100%;height:100%;font-size:0;line-height: 0;margin: 0;padding: 0;}.list-container-inner .box .layer1 .row-box{overflow: hidden;}.list-container-inner .box .layer1 .row{box-sizing: border-box;height:calc(100% 2px);position: relative;}.list-container-inner .box .layer1 .row .cell-box{box-sizing: border-box;position: absolute;height: 100%;overflow: hidden;}.list-container-inner .box .layer1 .cell{font-size:12px;line-height: 12px;}
/* .list-container-inner .boxdivdiv:first-child{border-left: 0px solid red;}.list-container-inner .boxdivdiv:last-child{border-right: 0px solid red;} */.list-container-inner .box .layer1divdiv:active{border: 0px solid red;}.wh100{width: calc(100% 1px);padding-right: 1px;box-sizing: border-box;height: 100%;}/stylescript src./hyperHTML-min.js/script/headbodydiv idroot/div!-- 外部容器用来固定列表容器的高度同时生成滚动条 --div classlist-container!-- 内部容器用来装元素高度是所有元素高度的和 --div classlist-container-innerdiv classboxdiv classlayer1/divdiv classlayer2/div/div/div/divscript/** --------- 一些基本变量 -------- */const itemHeight 60const columnWidth 100const width 700const height 500const random (min, max) {return Math.floor(Math.random() * (max - min)) min;}const getRandomColor () {let colors [red,blue,yellow,orange,brown,purple,pink,green,gray,mauve]return colors[random(0,10)]}/** --------- 生成数据 -------- */const getRandomHeight () {// 返回 [60, 150] 之间的随机数return Math.floor(Math.random() * (80 - itemHeight 1) itemHeight)}const getRandomWidth () {// 返回 [60, 150] 之间的随机数return Math.floor(Math.random() * (220 - columnWidth 1) columnWidth)}const columns () {const data []for (let i 0; i 50; i) {data.push({content:i,width:getRandomWidth(),color: getRandomColor()})}return data}const _columns columns()const initData () {const data []for (let i 0; i 500000; i) {data.push({content: _columns,rowIndex:i,height: getRandomHeight(),color: i % 2 ? blue : red})}return data}const data initData()const cacheWidthMap {}const cacheHeightMap {}const outerContainer document.querySelector(.list-container)const scrollCallback () {//let contentWidth 0let paddingLeft 0let upperWidth 0let startColIndexlet endColIndex//let contentHeight 0let paddingTop 0let upperHeight 0let startIndexlet endIndexconst innerContainer document.querySelector(.list-container-inner)const scrollTop Math.max(outerContainer.scrollTop, 0)const scrollLeft Math.max(outerContainer.scrollLeft, 0)for (let i 0; i (data[0] ? (data[0].content || []) : []).length; i) {const cacheWidth cacheWidthMap[i]const usedWidth cacheWidth undefined ? columnWidth : cacheWidthcontentWidth usedWidth;if (contentWidth scrollLeft startColIndex undefined) {startColIndex ipaddingLeft contentWidth - usedWidth}if (contentWidth scrollLeft width endColIndex undefined) {endColIndex iupperWidth contentWidth}}// 遍历所有的元素获取当前元素的高度、列表总高度、startIndex、endIndexfor (let i 0; i data.length; i) {// 初始化的时候因为元素还没有渲染无法获取元素的高度// 所以用元素的最小高度itemHeight来进行计算保证渲染的元素个数能占满列表const cacheHeight cacheHeightMap[i]const usedHeight cacheHeight undefined ? itemHeight : cacheHeightcontentHeight usedHeightif (contentHeight scrollTop startIndex undefined) {startIndex ipaddingTop contentHeight - usedHeight}if (contentHeight scrollTop height endIndex undefined) {endIndex i// console.log(endIndex,startIndex endIndex, contentHeight, scrollTop height) upperHeight contentHeight}}if(endColIndex undefined) {endColIndex (data[0] ? (data[0].content || []) : []).length - 1upperWidth contentWidth}// 应对列表所有元素没有占满整个容器的情况if (endIndex undefined) {endIndex data.length - 1upperHeight contentHeight}const paddingRight contentWidth - upperWidth// innerContainer.setAttribute(style, padding-left: ${paddingLeft}px; padding-bottom: ${paddingRight}px)// 未渲染的元素的高度由padding-top和padding-bottom代替保证滚动条位置正确// 这里如果把设置pading的操作放在渲染元素之后部分浏览器滚动到最后一个元素时会有问题const paddingBottom contentHeight - upperHeightinnerContainer.setAttribute(style, padding-left: ${paddingLeft}px; padding-right: ${paddingRight}px;padding-top: ${paddingTop}px; padding-bottom: ${paddingBottom}px)// 从data取出要渲染的元素并渲染到容器中const viewData data.slice(startIndex, endIndex 1).map((item,index) {let _item {...item, content: item.content.slice(startColIndex, endColIndex 1)}_item.content _item.content.map((item,index) {if(index0) {item.left 0} else {item.left _item.content[index - 1].left _item.content[index - 1].width}return item})return _item})// ${itemData.content.map(column div classcell-box stylewidth:${column.width}px;left:${column.left}px;div classwh100 cell stylebackground:${getRandomColor()}第${itemData.rowIndex}行第${column.content}列/div/div)}innerContainer.querySelector(.box).style.width (viewData[0] ? viewData[0].content : []).reduce(function(accumulator, column) {return accumulator column.width;}, 0) pxinnerContainer.querySelector(.box).style.height viewData.map(item item.height).reduce(function(accumulator, currentValue) {return accumulator currentValue;}, 0) pxfunction update(render, state) {render${state.viewData.map(itemData hyperHTML.wire(itemData)section classrow-box styleheight: ${itemData.height}px;background: ${itemData.color}div classrow
${itemData.content.map(column div classcell-box stylewidth:${column.width}px;left:${column.left}px;div classwh100 cell stylebackground:${getRandomColor()}第${itemData.rowIndex}行第${column.content}列/div/div)}/div/section )};}const render hyperHTML.bind(innerContainer.querySelector(.box .layer1))update(render, {viewData:viewData})// 存储已经渲染出来的元素的高度供后面使用const children innerContainer.querySelector(.box .layer1).childrenconst columnChildren innerContainer.querySelector(.box .layer1 .row).childrenlet widthFlag startColIndexfor (const child of columnChildren) {cacheWidthMap[widthFlag] child.clientHeightwidthFlag}let flag startIndexfor (const child of children) {cacheHeightMap[flag] child.clientHeightflag}}// 首屏渲染scrollCallback()// 监听外部容器的滚动事件outerContainer.addEventListener(scroll, scrollCallback)/script/body
/html hyperHTML-min.js
/*! (c) Andrea Giammarchi (ISC) */var hyperHTMLfunction(N){use strict;var t{};try{t.WeakMapWeakMap}catch(e){t.WeakMapfunction(t,e){var ne.defineProperty,re.hasOwnProperty,ia.prototype;return i.deletefunction(e){return this.has(e)delete e[this._]},i.getfunction(e){return this.has(e)?e[this._]:void 0},i.hasfunction(e){return r.call(e,this._)},i.setfunction(e,t){return n(e,this._,{configurable:!0,value:t}),this},a;function a(e){n(this,_,{value:_ungap/weakmapt}),ee.forEach(o,this)}function o(e){this.set(e[0],e[1])}}(Math.random(),Object)}var st.WeakMap,i{};try{i.WeakSetWeakSet}catch(e){!function(e,t){var nr.prototype;function r(){t(this,_,{value:_ungap/weakmape})}n.addfunction(e){return this.has(e)||t(e,this._,{value:!0,configurable:!0}),this},n.hasfunction(e){return this.hasOwnProperty.call(e,this._)},n.deletefunction(e){return this.has(e)delete e[this._]},i.WeakSetr}(Math.random(),Object.defineProperty)}function m(e,t,n,r,i,a){for(var o(selectedIndexin t),uo;ri;){var c,le(n[r],1);t.insertBefore(l,a),oul.selected(u!u,ct.selectedIndex,t.selectedIndexc0?r:f.call(t.querySelectorAll(option),l)),r}}function y(e,t){return et}function b(e){return e}function w(e,t,n,r,i,a,o){var ua-i;if(u1)return-1;for(;un-t;){for(var ct,li;cnlao(e[c],r[l]);)c,l;if(la)return t;tc1}return-1}function x(e,t,n,r,i){return nr?e(t[n],0):0n?e(t[n-1],-0).nextSibling:i}function E(e,t,n,r){for(;nr;)a(e(t[n],-1))}function C(e,t,n,r,i,a,o,u,c,l,s,f,h){!function(e,t,n,r,i,a,o,u,c){for(var l[],se.length,fo,h0;hs;)switch(e[h]){case 0:i,f;break;case 1:l.push(r[i]),m(t,n,r,i,i,fu?t(a[f],0):c);break;case-1:f}for(h0;hs;)switch(e[h]){case 0:o;break;case-1:-1l.indexOf(a[o])?o:E(t,a,o,o)}}(function(e,t,n,r,i,a,o){var u,c,l,s,f,h,dna,v[];e:for(m0;md;m){if(50m)return null;for(hm-1,sm?v[m-1]:[0,0],fv[m][],u-m;um;u2){for(c(lu-m||u!ms[hu-1]s[hu1]?s[hu1]:s[hu-1]1)-u;lacno(r[il],e[tc]);)l,c;if(lacn)break e;f[mu]l}}for(var pArray(m/2d/2),gp.length-1,mv.length-1;0m;m--){for(;0l0co(r[il-1],e[tc-1]);)p[g--]0,l--,c--;if(!m)break;hm-1,sm?v[m-1]:[0,0],(ul-c)-m||u!ms[hu-1]s[hu1]?(c--,p[g--]1):(l--,p[g--]-1)}return p}(n,r,a,o,u,l,f)||function(e,t,n,r,i,a,o,u){var c0,lru?r:u,sArray(l),fArray(l);f[0]-1;for(var h1;hl;h)f[h]o;for(var di.slice(a,o),vt;vn;v){var p,gd.indexOf(e[v]);-1g(-1(ck(f,l,pga))(f[c]p,s[c]{newi:v,oldi:p,prev:s[c-1]}))}for(c--l,--o;f[c]o;)--c;lur-c;var mArray(l),ys[c];for(--n;y;){for(var by.newi,wy.oldi;bn;)m[--l]1,--n;for(;wo;)m[--l]-1,--o;m[--l]0,--n,--o,yy.prev}for(;tn;)m[--l]1,--n;for(;ao;)m[--l]-1,--o;return m}(n,r,i,a,o,u,c,l),e,t,n,r,o,u,s,h)}var ei.WeakSet,f[].indexOf,kfunction(e,t,n){for(var r1,it;ri;){var a(ri)/20;ne[a]?ia:r1a}return r},afunction(e){return(e.remove||function(){var ethis.parentNode;ee.removeChild(this)}).call(e)};function l(e,t,n,r){for(var i(rr||{}).compare||y,ar.node||b,onullr.before?null:a(r.before,0),ut.length,cu,l0,sn.length,f0;lcfsi(t[l],n[f]);)l,f;for(;lcfsi(t[c-1],n[s-1]);)c--,s--;var hlc,dfs;if(hd)return n;if(hfs)return m(a,e,n,f,s,x(a,t,l,u,o)),n;if(dlc)return E(a,t,l,c),n;var vc-l,ps-f,g-1;if(vp){if(-1(gw(n,f,s,t,l,c,i)))return m(a,e,n,f,g,a(t[l],0)),m(a,e,n,gv,s,x(a,t,c,u,o)),n}else if(pv-1(gw(t,l,c,n,f,s,i)))return E(a,t,l,g),E(a,t,gp,c),n;return v2||p2?(m(a,e,n,f,s,a(t[l],0)),E(a,t,l,c)):vpfunction(e,t,n,r,i,a){for(;ria(n[r],e[t-1]);)r,t--;return 0t}(n,s,t,l,c,i)?m(a,e,n,f,s,x(a,t,c,u,o)):C(a,e,n,f,s,p,t,l,c,v,u,i,o),n}var n,r{};function o(e,t){tt||{};var nN.createEvent(CustomEvent);return n.initCustomEvent(e,!!t.bubbles,!!t.cancelable,t.detail),n}r.CustomEventfunctiontypeof CustomEvent?CustomEvent:(o[nprototype]new o().constructor[n],o);var ur.CustomEvent,c{};try{c.MapMap}catch(e){c.Mapfunction(){var n0,i[],a[];return{delete:function(e){var tr(e);return t(i.splice(n,1),a.splice(n,1)),t},forEach:function(n,r){i.forEach(function(e,t){n.call(r,a[t],e,this)},this)},get:function(e){return r(e)?a[n]:void 0},has:r,set:function(e,t){return a[r(e)?n:i.push(e)-1]t,this}};function r(e){return-1(ni.indexOf(e))}}}var hc.Map;function d(){return this}function v(e,t){var n_e$;return{get:function(){return this[n]||p(this,n,t.call(this,e))},set:function(e){p(this,n,e)}}}var pfunction(e,t,n){return Object.defineProperty(e,t,{configurable:!0,value:functiontypeof n?function(){return e._wire$n.apply(this,arguments)}:n})[t]};Object.defineProperties(d.prototype,{ELEMENT_NODE:{value:1},nodeType:{value:-1}});var g,A,S,O,T,M,_{},j{},L[],Pj.hasOwnProperty,D0,W{attributes:_,define:function(e,t){e.indexOf(-)0?(e in j||(DL.push(e)),j[e]t):_[e]t},invoke:function(e,t){for(var n0;nD;n){var rL[n];if(P.call(e,r))return j[r](e[r],t)}}},$Array.isArray||(A(g{}.toString).call([]),function(e){return g.call(e)A}),R(SN,Ofragment,Mcontentin H(Ttemplate)?function(e){var tH(T);return t.innerHTMLe,t.content}:function(e){var t,nH(O),rH(T);return F(n,/^[^\S]*?(col(?:group)?|t(?:head|body|foot|r|d|h))/i.test(e)?(tRegExp.$1,r.innerHTMLtablee/table,r.querySelectorAll(t)):(r.innerHTMLe,r.childNodes)),n},function(e,t){return(svgt?function(e){var tH(O),nH(div);return n.innerHTMLsvg xmlnshttp://www.w3.org/2000/svge/svg,F(t,n.firstChild.childNodes),t}:M)(e)});function F(e,t){for(var nt.length;n--;)e.appendChild(t[0])}function H(e){return eO?S.createDocumentFragment():S.createElementNS(http://www.w3.org/1999/xhtml,e)}var I,z,V,Z,G,q,B,J,K,Q,U(zappendChild,VcloneNode,ZcreateTextNode,q(GimportNode)in(IN),(BI.createDocumentFragment())[z](I[Z](g)),B[z](I[Z]()),(q?I[G](B,!0):B[V](!0)).childNodes.length2?function e(t,n){for(var rt[V](),it.childNodes||[],ai.length,o0;noa;o)r[z](e(i[o],n));return r}:q?I[G]:function(e,t){return e[V](!!t)}),X.trim||function(){return String(this).replace(/^\s|\s/g,)},Y-Math.random().toFixed(6)%,ee!1;try{JN.createElement(template),Qtabindex,(Kcontent)in J(J.innerHTMLp QY/p,J[K].childNodes[0].getAttribute(Q)Y)||(Y_dt: Y.slice(1,-1);,ee!0)}catch(e){}var te\x3c!--Y--\x3e,ne8,re1,ie3,ae/^(?:style|textarea)$/i,oe/^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i;var ue \\f\\n\\r\\t,ce[^ue\\/\],le[ue]ce,se([A-Za-z][A-Za-z0-9:._-]*)((?:,fe(?:\\s*\\s*(?:[^]*?|\[^\]*?\|[^]*?|ce.replace(\\/,)))?),henew RegExp(selefe)([ue]*/?),g),denew RegExp(selefe*)([ue]*/),g),venew RegExp((le\\s*\\s*)([\]?)te\\2,gi);function pe(e,t,n,r){returntn.replace(ve,ge)r}function ge(e,t,n){return t(n||)Y(n||)}function me(e,t,n){return oe.test(t)?e:tn/t}var yeee?function(e,t){var nt.join( );return t.slice.call(e,0).sort(function(e,t){return n.indexOf(e.name)n.indexOf(t.name)?-1:1})}:function(e,t){return t.slice.call(e,0)};function be(e,t,n,r){for(var ie.childNodes,ai.length,o0;oa;){var ui[o];switch(u.nodeType){case re:var cr.concat(o);!function(e,t,n,r){var i,ae.attributes,o[],u[],cye(a,n),lc.length,s0;for(;sl;){var fc[s],hf.valueY;if(h||1(if.value.split(te)).length){var df.name;if(o.indexOf(d)0){o.push(d);var vn.shift().replace(h?/^(?:|[\S\s]*?\s)(\S?)\s*\s*(|)?$/:new RegExp(^(?:|[\\S\\s]*?\\s)(d)\\s*\\s*(|\)[\\S\\s]*,i),$1),pa[v]||a[v.toLowerCase()];if(h)t.push(we(p,r,v,null));else{for(var gi.length-2;g--;)n.shift();t.push(we(p,r,v,i))}}u.push(f)}}lu.length;var m(s0)lee!(ownerSVGElementin e);for(;sl;){var yu[s];m(y.value),e.removeAttribute(y.name)}var be.nodeName;if(/^script$/i.test(b)){var wN.createElement(b);for(la.length,s0;sl;)w.setAttributeNode(a[s].cloneNode(!0));w.textContente.textContent,e.parentNode.replaceChild(w,e)}}(u,t,n,c),be(u,t,n,c);break;case ne:var lu.textContent;if(lY)n.shift(),t.push(ae.test(e.nodeName)?Ne(e,r):{type:any,node:u,path:r.concat(o)});else switch(l.slice(0,2)){case/*:if(*/!l.slice(-2))break;case馃懟:e.removeChild(u),o--,a--}break;case ie:ae.test(e.nodeName)X.call(u.textContent)te(n.shift(),t.push(Ne(e,r)))}o}}function we(e,t,n,r){return{type:attr,node:e,path:t,name:n,sparse:r}}function Ne(e,t){return{type:text,node:e,path:t}}var xe,Ee(xenew s,{get:function(e){return xe.get(e)},set:function(e,t){return xe.set(e,t),t}});function Ce(o,f){var e(o.convert||function(e){return e.join(te).replace(de,me).replace(he,pe)})(f),to.transform;t(et(e));var nR(e,o.type);Se(n);var u[];return be(n,u,f.slice(0),[]),{content:n,updates:function(c){for(var l[],su.length,e0,t0;es;){var nu[e],rfunction(e,t){for(var nt.length,r0;rn;)ee.childNodes[t[r]];return e}(c,n.path);switch(n.type){caseany:l.push({fn:o.any(r,[]),sparse:!1});break;caseattr:var in.sparse,ao.attribute(r,n.name,n.node);nulli?l.push({fn:a,sparse:!1}):(ti.length-2,l.push({fn:a,sparse:!0,values:i}));break;casetext:l.push({fn:o.text(r),sparse:!1}),r.textContent}}return st,function(){var earguments.length;if(s!e-1)throw new Error(e-1 values instead of s\nf.join(${value}));for(var t1,n1;te;){var rl[t-n];if(r.sparse){var ir.values,ai[0],o1,ui.length;for(nu-2;ou;)aarguments[t]i[o];r.fn(a)}else r.fn(arguments[t])}return c}}}}var ke[];function Ae(i){var ake,oSe;return function(e){var t,n,r;return a!e(ti,nae,rEe.get(n)||Ee.set(n,Ce(t,n)),or.updates(U.call(N,r.content,!0))),o.apply(null,arguments)}}function Se(e){for(var te.childNodes,nt.length;n--;){var rt[n];1!r.nodeType0X.call(r.textContent).lengthe.removeChild(r)}}var Oe,Te,Me(Oe/acit|ex(?:s|g|n|p|$)|rph|ows|mnc|ntw|ine[ch]|zoo|^ord/i,Te/([^A-Z])([A-Z])/g,function(e,t){returnownerSVGElementin e?function(e,t){var n;return(nt?t.cloneNode(!0):(e.setAttribute(style,--hyper:style;),e.getAttributeNode(style))).value,e.setAttributeNode(n),je(n,!0)}(e,t):je(e.style,!1)});function _e(e,t,n){return t-n.toLowerCase()}function je(a,o){var u,c;return function(e){var t,n,r,i;switch(typeof e){caseobject:if(e){if(objectu){if(!oc!e)for(n in c)n in e||(a[n])}else o?a.value:a.cssText;for(n in to?{}:a,e)rnumber!typeof(ie[n])||Oe.test(n)?i:ipx,!o/^--/.test(n)?t.setProperty(n,r):t[n]r;uobject,o?a.valuefunction(e){var t,n[];for(t in e)n.push(t.replace(Te,_e),:,e[t],;);return n.join()}(ct):ce;break}default:c!e(ustring,ce,o?a.valuee||:a.cssTexte||)}}}var Le,Pe,De(Le[].slice,(PeWe.prototype).ELEMENT_NODE1,Pe.nodeType111,Pe.removefunction(e){var t,nthis.childNodes,rthis.firstChild,ithis.lastChild;return this._null,e2n.length?i.parentNode.removeChild(i):((tthis.ownerDocument.createRange()).setStartBefore(e?n[1]:r),t.setEndAfter(i),t.deleteContents()),r},Pe.valueOffunction(e){var tthis._,nnullt;if(n(tthis._this.ownerDocument.createDocumentFragment()),n||e)for(var rthis.childNodes,i0,ar.length;ia;i)t.appendChild(r[i]);return t},We);function We(e){var tthis.childNodesLe.call(e,0);this.firstChildt[0],this.lastChildt[t.length-1],this.ownerDocumentt[0].ownerDocument,this._null}function $e(e){return{html:e}}function Re(e,t){switch(e.nodeType){case Ke:return 1/t0?t?e.remove(!0):e.lastChild:t?e.valueOf(!0):e.firstChild;case Je:return Re(e.render(),t);default:return e}}function Fe(e,t){t(e.placeholder),textin e?Promise.resolve(e.text).then(String).then(t):anyin e?Promise.resolve(e.any).then(t):htmlin e?Promise.resolve(e.html).then($e).then(t):Promise.resolve(W.invoke(e,t)).then(t)}function He(e){return null!ethenin e}var Ie,ze,Ve,Ze,Ge,qeownerSVGElement,Beconnected,Jed.prototype.nodeType,KeDe.prototype.nodeType,Qe(ze(Ie{Event:u,WeakSet:e}).Event,VeIe.WeakSet,Ze!0,Genull,function(e){return Ze(Ze!Ze,Genew Ve,function(t){var inew Ve,anew Ve;try{new MutationObserver(u).observe(t,{subtree:!0,childList:!0})}catch(e){var n0,r[],ofunction(e){r.push(e),clearTimeout(n),nsetTimeout(function(){u(r.splice(n0,r.length))},0)};t.addEventListener(DOMNodeRemoved,function(e){o({addedNodes:[],removedNodes:[e.target]})},!0),t.addEventListener(DOMNodeInserted,function(e){o({addedNodes:[e.target],removedNodes:[]})},!0)}function u(e){for(var t,ne.length,r0;rn;r)c((te[r]).removedNodes,disconnected,a,i),c(t.addedNodes,connected,i,a)}function c(e,t,n,r){for(var i,anew ze(t),oe.length,u0;uo;1(ie[u]).nodeTypefunction e(t,n,r,i,a){Ge.has(t)!i.has(t)(a.delete(t),i.add(t),t.dispatchEvent(n));for(var ot.children||[],uo.length,c0;cu;e(o[c],n,r,i,a));}(i,a,t,n,r));}}(e.ownerDocument)),Ge.add(e),e}),Ue/^(?:form|list)$/i,Xe[].slice;function Ye(e){return this.typee,Ae(this)}var et!(Ye.prototype{attribute:function(n,r,e){var i,tqe in n;if(styler)return Me(n,e,t);if(.r.slice(0,1))return ln,sr.slice(1),t?function(t){try{l[s]t}catch(e){l.setAttribute(s,t)}}:function(e){l[s]e};if(?r.slice(0,1))return on,ur.slice(1),function(e){c!!!e((c!!e)?o.setAttribute(u,):o.removeAttribute(u))};if(/^on/.test(r)){var ar.slice(2);return aBe||disconnecteda?Qe(n):r.toLowerCase()in n(aa.toLowerCase()),function(e){i!e(in.removeEventListener(a,i,!1),(ie)n.addEventListener(a,e,!1))}}if(datar||!tr in n!Ue.test(r))return function(e){i!e(ie,n[r]!enulle?(n[r],n.removeAttribute(r)):n[r]e)};if(r in W.attributes)return function(e){var tW.attributes[r](n,e);i!t(null(it)?n.removeAttribute(r):n.setAttribute(r,t))};var o,u,c,l,s,f!1,he.cloneNode(!0);return function(e){i!e(ie,h.value!e(nulle?(f(f!1,n.removeAttributeNode(h)),h.valuee):(h.valuee,f||(f!0,n.setAttributeNode(h)))))}},any:function(r,i){var a,o{node:Re,before:r},uqe in r?svg:html,c!1;return function e(t){switch(typeof t){casestring:casenumber:caseboolean:c?a!t(at,i[0].textContentt):(c!0,at,il(r.parentNode,i,[(nt,r.ownerDocument.createTextNode(n))],o));break;casefunction:e(t(r));break;caseobject:caseundefined:if(nullt){c!1,il(r.parentNode,i,[],o);break}default:if(c!1,$(at))if(0t.length)i.length(il(r.parentNode,i,[],o));else switch(typeof t[0]){casestring:casenumber:caseboolean:e({html:t});break;caseobject:if($(t[0])(tt.concat.apply([],t)),He(t[0])){Promise.all(t).then(e);break}default:il(r.parentNode,i,t,o)}elseELEMENT_NODEin t?il(r.parentNode,i,11t.nodeType?Xe.call(t.childNodes):[t],o):He(t)?t.then(e):placeholderin t?Fe(t,e):textin t?e(String(t.text)):anyin t?e(t.any):htmlin t?il(r.parentNode,i,Xe.call(R([].concat(t.html).join(),u).childNodes),o):lengthin t?e(Xe.call(t)):e(W.invoke(t,e))}var n}},text:function(r){var i;return function e(t){var n;i!t(object(ntypeof(it))t?He(t)?t.then(e):placeholderin t?Fe(t,e):textin t?e(String(t.text)):anyin t?e(t.any):htmlin t?e([].concat(t.html).join()):lengthin t?e(Xe.call(t).join()):e(W.invoke(t,e)):functionn?e(t(r)):r.textContentnullt?:t)}}}),ttfunction(e){var t,r,i,a,n(t(N.defaultView.navigator||{}).userAgent,/(Firefox|Safari)\/(\d)/.test(t)!/(Chrom[eium]|Android)\/(\d)/.test(t)),o!(rawin e)||e.propertyIsEnumerable(raw)||!Object.isFrozen(e.raw);return n||o?(r{},ifunction(e){for(var t.,n0;ne.length;n)te[n].length.e[n];return r[t]||(r[t]e)},tto?i:(anew s,function(e){return a.get(e)||(ni(te),a.set(t,n),n);var t,n})):et!0,nt(e)};function nt(e){return et?e:tt(e)}function rt(e){for(var targuments.length,n[nt(e)],r1;rt;)n.push(arguments[r]);return n}var itnew s,atfunction(t){var n,r,i;return function(){var ert.apply(null,arguments);return i!e[0]?(ie[0],rnew Ye(t),nut(r.apply(r,e))):r.apply(r,e),n}},otfunction(e,t){var nt.indexOf(:),rit.get(e),it;return-1n(it.slice(n1),tt.slice(0,n)||html),r||it.set(e,r{}),r[i]||(r[i]at(t))},utfunction(e){var te.childNodes,nt.length;return 1n?t[0]:n?new De(t):e},ctnew s;function lt(){var ect.get(this),trt.apply(null,arguments);return ee.templatet[0]?e.tagger.apply(null,t):function(e){var tnew Ye(qe in this?svg:html);ct.set(this,{tagger:t,template:e}),this.textContent,this.appendChild(t.apply(null,arguments))}.apply(this,t),this}var st,ft,ht,dt,vtW.define,ptYe.prototype;function gt(e){return arguments.length2?nulle?at(html):stringtypeof e?gt.wire(null,e):rawin e?at(html)(e):nodeTypein e?gt.bind(e):ot(e,html):(rawin e?at(html):gt.wire).apply(null,arguments)}return gt.Componentd,gt.bindfunction(e){return lt.bind(e)},gt.definevt,gt.diffl,(gt.hypergt).observeQe,gt.taggerpt,gt.wirefunction(e,t){return nulle?at(t||html):ot(e,t||html)},gt._{WeakMap:s,WeakSet:e},stat,ftnew s,htObject.create,dtfunction(e,t){var n{w:null,p:null};return t.set(e,n),n},Object.defineProperties(d,{for:{configurable:!0,value:function(e,t){return function(e,t,n,r){var i,a,o,ut.get(e)||dt(e,t);switch(typeof r){caseobject:casefunction:var cu.w||(u.wnew s);return c.get(r)||(ic,ar,onew e(n),i.set(a,o),o);default:var lu.p||(u.pht(null));return l[r]||(l[r]new e(n))}}(this,ft.get(e)||(ne,rnew h,ft.set(n,r),r),e,nullt?default:t);var n,r}}}),Object.defineProperties(d.prototype,{handleEvent:{value:function(e){var te.currentTarget;this[getAttributein tt.getAttribute(data-call)||one.type](e)}},html:v(html,st),svg:v(svg,st),state:v(state,function(){return this.defaultState}),defaultState:{get:function(){return{}}},dispatch:{value:function(e,t){var nthis._wire$;if(n){var rnew u(e,{bubbles:!0,cancelable:!0,detail:t});return r.componentthis,(n.dispatchEvent?n:n.firstChild).dispatchEvent(r)}return!1}},setState:{value:function(e,t){var nthis.state,rfunctiontypeof e?e.call(this,n):e;for(var i in r)n[i]r[i];return!1!tthis.render(),this}}}),gt}(document);
原理 我就不过多赘述主要就是说以下优点和缺点
1、在27万条数据以内背景填充没有问题。超过27万的div的背景不能正确填充div绘制的范围导致看上去上下间有问题有一条白色的水平线条。曾做过如下方法解决 a 、我已经把font-size改为0了不能解决。
b、把padding-top padding-bottom 改为 真实的元素占位不能解决。因为我以为这情况回事padding导致。
c、也把div从 position static 改为 absolute 定位来解决发现也与这个无关。
d、设置过background相关的参数不能解决。
通过审查解决是背景不能填充确定是背景的问题。如果是在firfox低于27万就出现这种问题了。
上图是垂直方向的问题水平方向也会这种问题我就不截图了。
2、超过27万以后的数据在chrome浏览器中当滚动时候出现渲染不准确问题比如说border都设置为1px但是看上去并不一致outline也一样。而且有时候应该隐藏outline的时候还是出现一些颜色在边上不知道是不是显卡问题但是浏览器渲染div又不用显卡。
3、这种方案从百万数据中找到 屏幕可视数据的算法是非常棒的经过有以上问题但是性能非常好别说100万200万也就秒渲染只是渲染后有一些问题。
4、padding填充内部实现内部内容高度的增高大约只支持到 55.92w条左右超过这个数将无法显示因为chrome浏览器似乎支持的最大padding-bottom的值是33551640px所以如果有需要超过这个值的需求padding撑起内部内容高度实现滚动条是不可取的必须自定义滚动条支持超过55.9万条的数据。
总结如果实际需求中碰不到超过10万条的数据这种方式处理10万条的数据还是很优秀的但是我想要他支持百万可超过27万就出现了不可解决的问题。
