頁面優化建議

weixin_33806914發表於2016-06-15

頁面中的可改進部分:

關於導航

當前頁面中,頁面滾動的時候會有一個導航固定在頂部,然後hover過去會有一個高亮顯示, 高亮的樣式是在a:hover裡面新增了一個border-bottom: 2px solid #FF5A92; 這樣做的話,導航其實會在滑鼠滑過的時候不斷地抖動,因為hover狀態讓導航增加了2px的高度
可以考慮用:after :before偽類配合定位來畫這條線,或者考慮讓border-bottom的高度一直存在,:hover的時候只是改變border-bottom-color

關於輪播圖

1.點選事件和自動播放有點衝突,而且在快速連續點選不同按鈕的時候定時器沒有清掉,輪播圖會掛。

2.可以考慮做成無縫滾動。

3.現在的輪播圖是線性動畫,也可以考慮新增Tween 演算法,做成緩動效果。

4.可以考慮新增lazyload, 即一開始只載入第一屏的圖片,後續幾個輪播的圖片只在即將滾動到該屏的時候再去請求資源進行載入。

關於圖片列表

電商網站的圖片比較多,也可以考慮懶載入。

關於CSS部分

裡面的last-child ie8支援度不高(現在的PC大多數還是需要相容到ie8的, 特別360瀏覽器還是個雙核的,它的相容模式是個ie7)
關於css3選擇器的相容性,可以查詢 can i use 網站,然後再做處理。

另外還可以新增meta頭來處理

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

關於原生js部分####

原生js api getElementsByClassName的確存在,但是ie8不支援,會報錯,所以需要自己封裝.class 的DOM獲取函式。

關於index.js

使用了jquery, 並使用load方法保證了頁面載入的順序,但是這種載入類似ajax載入,作為電商網站的話, 這樣的處理可能會影響SEO。

還可以考慮做一個移動版的頁面

相關文章