Created
November 13, 2019 13:39
-
-
Save wangzaixiang/06122f86c12a266b03f6a2b8125c04d4 to your computer and use it in GitHub Desktop.
Webcomponent + Shadow DOM performance test
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <meta name="viewport" content="width=device-width"> | |
| <script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script> | |
| <script type="module" src="my-element.js"></script> | |
| <script type="module" src="sku.js"></script> | |
| <script> | |
| // document.onscroll = function(event){ | |
| // var msg = document.getElementById("msg"); | |
| // // console.info("document scroll " , event); | |
| // msg.innerHTML = "scroll event: " + event.timeStamp; | |
| // } | |
| function onload(){ | |
| for(var i=0; i<1024*16; i++) { | |
| var elem = document.createElement("my-sku"); | |
| elem.title = "SKU " + i; | |
| document.body.appendChild(elem); | |
| } | |
| } | |
| </script> | |
| <style> | |
| my-sku { | |
| float: left; | |
| } | |
| .inner { | |
| width: 241px; | |
| height: 153px; | |
| border-width: 0 0 1px 1px; | |
| border-style: solid; | |
| border-color: #e4e4e4; | |
| overflow: hidden; | |
| font-size: 14px; | |
| } | |
| .inner .cover { | |
| width: 100px; | |
| float: left; | |
| height: 116px; | |
| overflow: hidden; | |
| margin-top: 18px; | |
| margin-right: 10px; | |
| margin-left: 8px; | |
| background: #f6f6f6; | |
| } | |
| .inner .detail { | |
| overflow: hidden; | |
| padding-top: 18px; | |
| width: 115px; | |
| } | |
| .inner .detail .title { | |
| margin-top: 0; | |
| height: 40px; | |
| overflow: hidden; | |
| } | |
| .inner .detail .price { | |
| color:#ff0036; | |
| margin-top: 11px; | |
| } | |
| .enter .detail .price { | |
| color:blue; | |
| margin-top: 10px; | |
| font-size: 16px; | |
| } | |
| .inner .detail .action { | |
| white-space: nowrap; | |
| background: #ff0036; | |
| margin-top: 18px; | |
| } | |
| </style> | |
| <body onload="onload();"> | |
| <!-- | |
| Can you look at me? | |
| <my-element id="me"></my-element> | |
| <p>><a onclick="document.getElementById('me').mood += '1';">ooo</a> | |
| </p> | |
| <my-circle r="40" name="wangzx"></my-circle> | |
| <div id="msg"></div> | |
| <div>Place SKU Here</div> | |
| --> | |
| <my-sku></my-sku> | |
| </body> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import {LitElement, css, html} from 'lit-element/lit-element'; | |
| import {classMap} from 'lit-html/directives/class-map'; | |
| class MySku extends LitElement { | |
| static get properties() { | |
| return { | |
| title: { type: String }, | |
| image: { type: Array }, | |
| enter: { type: Boolean } | |
| } | |
| } | |
| constructor(){ | |
| super(); | |
| this.title = "爱豆薯片好吃的网红小零食礼包女生散装自选整箱小吃休闲食品10包"; | |
| this.image = "sku1.jpeg"; | |
| // this.classes = { inner: true }; | |
| } | |
| static get styles() { | |
| return css` | |
| :host { | |
| display: block; | |
| } | |
| .inner { | |
| width: 241px; | |
| // height: 153px; | |
| border-width: 0 0 1px 1px; | |
| border-style: solid; | |
| border-color: #e4e4e4; | |
| overflow: hidden; | |
| font-size: 14px; | |
| } | |
| .inner .cover { | |
| width: 100px; | |
| float: left; | |
| height: 116px; | |
| overflow: hidden; | |
| margin-top: 18px; | |
| margin-right: 10px; | |
| margin-left: 8px; | |
| background: #f6f6f6; | |
| } | |
| .inner .detail { | |
| overflow: hidden; | |
| padding-top: 18px; | |
| width: 115px; | |
| } | |
| .inner .detail .title { | |
| margin-top: 0; | |
| height: 40px; | |
| overflow: hidden; | |
| } | |
| .inner .detail .price { | |
| color:#ff0036; | |
| margin-top: 11px; | |
| } | |
| .enter .detail .price { | |
| color:blue; | |
| margin-top: 10px; | |
| font-size: 16px; | |
| } | |
| .inner .detail .action { | |
| white-space: nowrap; | |
| background: #ff0036; | |
| margin-top: 18px; | |
| } | |
| ` | |
| } | |
| handleMouseEnter(e) { | |
| this.enter = true; | |
| console.info("enter"); | |
| } | |
| handleMouseExit(e){ | |
| this.enter = false; | |
| console.info("exit"); | |
| } | |
| // createRenderRoot() { | |
| // return this; | |
| // } | |
| render() { | |
| const classes = {enter: this.enter, inner: true}; | |
| return html` | |
| <div class=${classMap(classes)}> | |
| <div class="cover" @mouseenter=${this.handleMouseEnter} @mouseout=${this.handleMouseExit}> | |
| <a title=${this.title}> | |
| <img src=${this.image} class=""> | |
| </a> | |
| </div> | |
| <div class="detail"> | |
| <p class="title"> | |
| <a title=${this.title}>${this.title}</a> | |
| </p> | |
| <p class="price">￥14.9</p> | |
| <p class="action"> | |
| <a title=${this.title}> | |
| <span class="coupon" style="text-align:center;width:100%;">立即购买</span> | |
| </a> | |
| </p> | |
| </div> | |
| </div>`; | |
| } | |
| } | |
| customElements.define("my-sku", MySku); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment