js遊戲 首頁優化

2021-09-26 01:23:06 字數 1071 閱讀 9205

demo

持續更新中...

(2019/8/30)新增掃雷小遊戲

1.採用網格+響應式可根據裝置尺寸調整每行元素個數

2.用圓角屬性來對new,hot,活動顯示

3.增加資訊多行省略

1.增加互動性,可自動生成遊戲

單行:

.game-info
多行:

.game-info
採用立即執行函式減少變數汙染

(function showgames() 

div = document.createelement('div')

div.classname = 'game'

state = document.createelement('p')

state.classname = 'game-state ' + element.state + ' '

state.textcontent = states[element.state]

img = document.createelement('img')

img.classname = 'game-photo'

img.src = 'images/' + element.photo

title = document.createelement('p')

title.classname = 'game-name'

title.textcontent = element.name

info = document.createelement('p')

info.classname = 'game-info'

info.textcontent = info.title = element.info

});})()

首頁白屏優化實踐

自從前端三大框架react vue angular面世以來,前端開發逐漸趨向規範化 統一化,大多數時候新建前端專案,首先想到使用的技術一定是三大框架之一,框架給前端開發帶來了極大的便利和規範,但是由於這三大框架都是js驅動,在js沒有解析載入完成之前頁面無法展示,會處於長時間的白屏,帶來了一定的使用...

react專案 效能優化 首頁優化 載入優化

react路由懶載入 非同步元件 react loadable 以路由元件分割 或者參考 安裝cnpm install react loadable s 如果專案有100個頁面,那laodable.js就需要寫100遍,這樣就感覺有點冗餘了,所以這個我們可以封裝一下 首先,我們建乙個utilsrc ...

首頁動畫的優化方案

以上是其中乙個tab的動畫資源。接著定義了公用的動畫啟動和關閉的方法 在首頁的activity的oncreate 呼叫了一下startanim ondestory 呼叫stopanim 大功告成!就去提交 了。然而,當我把android profiler開啟觀測一下cpu,問題就出現了。不管是否在首...