前端優化的一些點

原創 2008winstar 2020-02-20 20:50

1 CSS放在head中，JavaScript放在</body>前

2 減少重排、重繪

3 減少DOM操作次數

4 使用CDN

5 合併、壓縮靜態資源，減少HTTP請求數量

6 前後端採用JSON通信

7 減少DOM元素數量


2008winstar
發佈了164 篇原創文章 · 獲贊 1 · 訪問量 4萬+
私信 關注
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

HTML+CSS+JS實現小學四則運算自動出題程序

HTML+CSS+JS實現小學四則運算自動出題程序 要求 編寫一個小學四則運算自動出題程序 要求： 1、100以內四則運算，題目自動生成； 2、頁面需要有計算結果輸入框，提交按鈕； 3、用戶提交結果之後系統能自動計算成績； 4、系

马踏飞燕&lin_li 2020-07-08 11:54:31

JS 實現拖拽效果

JS 實現拖拽效果 拖拽原理 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/

马踏飞燕&lin_li 2020-07-08 11:54:29

詳解Flex佈局

Flex佈局 flex 佈局是繼 標準流佈局 、 浮動佈局 、 定位佈局 後的第四種佈局方式。這種方式可以非常優雅的實現子元素居中或 均勻分佈，甚至可以隨着窗口縮放自動適應。 flex 佈局在瀏覽器中存在一定的兼容性。但是在小程序

马踏飞燕&lin_li 2020-07-08 11:54:29

HTML + CSS + JS 實現隨機抽獎

HTML + CSS + JS 實現隨機抽獎 HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="view

马踏飞燕&lin_li 2020-07-08 11:54:28

Flex佈局實戰：支付寶首頁

Flex佈局實戰：支付寶首頁 index.wxml <view class="container"> <!-- 藍色部分 --> <view class="blue-group"> <!-- 頂部部分 --> <vie

马踏飞燕&lin_li 2020-07-08 11:54:28

JavaScript 技術篇 - js通過xpath路徑定位元素方法

我先寫好一段 xpath 路徑，然後通過該路徑可以查到對應的元素節點。 通過 document.evaluate('...', document).iterateNext() 方法可以用 xpath 路徑定位到元素節點。 >

挣扎的蓝藻 2020-07-08 02:57:51

IOS手機全屏長按識別二維碼HTML代碼

代碼段作用講解： 1. 二維碼的全屏樣式, opacity: 0; 透明樣式，  touch-callout: none; -webkit-touch-callout: none; -ms-touch-callout: none; -mo

a_靖 2020-07-07 23:44:57

小程序雲開發實現模糊匹配，模糊搜索，小程序雲開發正則匹配數據庫

代碼說明：模糊查詢數據庫集合（birthday），模糊匹配查詢生日是否爲今天 用戶的生日日期格式爲 1994-07-06 ， 當前日期格式爲 07-06 ， 匹配數據庫的月和日，數據庫集合如圖： 雲函數代碼： // 雲函數入口文件 c

a_靖 2020-07-07 23:44:57

微信小程序雲開發，使用阿里雲短信服務，搜索員工生日定期發送短信。

相關API文檔地址： 阿里雲短信服務API文檔地址 小程序雲開發雲函數正則匹配API文檔地址 小程序雲開發雲函數定時觸發器   1.登錄阿里雲，購買短信服務並添加簽名和模板 2.， 登錄阿里雲，鼠標放在右上角的頭像圖標就會顯示 Acce

a_靖 2020-07-07 23:44:57

樣式集（六）仿微信通訊錄樣式

效果圖： 這裏有引用到 自定義底部導航，自定義底部導航組件鏈接 <!--pages/chatList/chatList.wxml--> <view class="top"> <view class="pageTitle">家博慧</

a_靖 2020-07-07 23:44:57

tabBar 自定義，小程序自定義底部導航欄

創建一個自定義組件 my_tab，組件代碼在後面，先看調用自定義組件的代碼，比如我需要在index 頁面調用，就在index.json中引用組件，index.json 代碼（引用的路徑爲你創建的自定義組件路徑） { "navigat

a_靖 2020-07-07 23:44:57

樣式集（五）微信朋友圈樣式模擬

效果圖： 小圖標： 源碼： <!--pages/findList/findList.wxml--> <image class="xxiangji" catchtap="xxiangji" src="/images/xxiangj

a_靖 2020-07-07 23:44:57

二級域名共享主機IP和端口

    個人網站原文地址：http://www.chengweinan.com/article/31     今天在個人網站上新增了一個“極客頻道”，使用的是二級域名geek.chengweinan.com。          新站點

企鹅Sheldon 2020-07-07 19:12:26

多本Web前端深度修煉書籍(提供網盤下載鏈接)

書籍介紹:這本書涵蓋了html5新增標籤和功能,並且提供了jquerymobile,Phonegap,Sencha Touch框架的介紹和應用，最後還帶了一個移動web應用的例子,絕對是移動web開發的好書! 下載地址: ht

sunyuan_software 2020-07-07 18:12:49

19.js中閉包

js中閉包     var name = "Microsoft";     function funcA(){         var name = "Google";         alert(name);         retur

小心窝 2020-07-07 08:41:23