1.網頁生成建構的過程-慢速撥放
2. script擺放位置詳解
3.網頁loading變慢的主因:
(1)js、css載入資源太多
(2)畫面生成使用太多js (如當初我做的”血x-宣官網”)，我用JS的hide()讓區塊隱藏是錯的，應該用css的display:block;隱藏。css效能比js好
(3)一個頁面圖片大小及太多圖片
(4)網頁ajax請求時伺服器端的硬體問題或是後端語言的寫法及是否操作資料庫
(5)使用者網速太慢，手機所在地訊號較差
(6)js套件本身運作較耗時(跑太多程式碼)
4.圖片的優化方式:
(1)利用lazyload.js實現圖片延遲加載加快網站瀏覽速度
(2)利用preload.js處理初始畫面的圖片預先載入時機(1.一次載入所有圖片loading較慢，必要時須設計loading畫面 2.不設計loading畫面的話就要考慮分批預先載入圖片)
(3) CDN介紹
5.動畫優化方式(網頁效能差純CSS一點點又能做豐富動畫):
(1)使用Velocity.js
(2)使用gsap.js
6.利用window.onload做畫面生成 ps.不能重複使用:
以下兩種方法其中一種有瀏覽器版本支援問題，忘了是哪一個
方式1.
window.onload = function() {
// console.log("window loaded")
};
方式2.
$(window).on("load", function (e) {
});7.RWD:
(1) CSS
(2) JS-jackie獨家開發function
8.API講解 Ajax事件介紹
9.Ajax實際案例講解:
(1)單一請求:
guess1=$("#guess1").val();
guess2=$("#guess2").val();
guess3=$("#guess3").val();
guess4=$("#guess4").val();
var form_data={guess1:guess1,guess2:guess2,guess3:guess3,guess4:guess4};
//請求答題結果=> data回傳: 1.true=>答對 2.false=>答錯
$.ajax({
url: "https://test.gametopia.com.tw/art/API/FGO/2021tgsguess2/guess.php",
type: "POST",
data: form_data,
success: function(data){
},
error: function(){
}
});(2)異部請求:
//↓以下為異部請求
var guess_fun = $.ajax({url:url2,type:'POST',data:form_data});
var getmember_fun = $.ajax({url:url3,type:'POST',data:get});
$.when(guess_fun,getmember_fun).then(function(guess_data,member_data){
var member_data={member:member_data[0]};
if(guess_data[0]=="true"){
emberUpdate(guess_data[0],member_data.member);//修改人數function
}else if(guess_data[0]=="false"){
$('#error').modal('show');
}
},function(){
//任一請求失敗
console.log('任一請求失敗!!');
});詳解:https://note.jackie.com.tw/index.php/2020/12/25/jquery-when-ajax/
10.Ajax技術應用
11. JSON格式, JSON檔: https://j796160836.pixnet.net/blog/post/30530326
12. 二維陣列, 三維陣列
// menu的設定
$menuTypes = Array(
'網站' => Array(
'title' => ['編輯網站','作者連結'],
'pageName' => ['web_update','user_link'],
'left_m_id'=> ['adminCompany'],
'left_m_icon'=> ['glyphicon glyphicon-globe']
),
'帳號' => Array(
'title' => ['註冊帳號','修改帳號'],
'pageName' => ['user_register','user_list'],
'left_m_id'=> ['adminUser'],
'left_m_icon'=> ['glyphicon glyphicon-user']
),
'廣告' => Array(
'title' => ['新增廣告','修改廣告'],
'pageName' => ['ad_insert','ad_list'],
'left_m_id'=> ['adminAd'],
'left_m_icon'=> ['glyphicon glyphicon-film']
),
'訊息' => Array(
'title' => ['新增訊息','修改訊息'],
'pageName' => ['msg_insert','msg_list'],
'left_m_id'=> ['adminNews'],
'left_m_icon'=> ['glyphicon glyphicon-envelope']
),
'分類' => Array(
'title' => ['第一分類','第二分類'],
'pageName' => ['category1_insert','category2_insert'],
'left_m_id'=> ['adminCategory'],
'left_m_icon'=> ['glyphicon glyphicon-sort']
),
'產品' => Array(
'title' => ['新增產品','修改產品'],
'pageName' => ['product_insert','product_list'],
'left_m_id'=> ['adminProduct'],
'left_m_icon'=> ['glyphicon glyphicon-th-large']
),
'連結' => Array(
'title' => ['新增連結','修改連結'],
'pageName' => ['link_insert','link_list'],
'left_m_id'=> ['adminLink'],
'left_m_icon'=> ['glyphicon glyphicon-link']
),
'SEO' => Array(
'title' => ['修改SEO'],
'pageName' => ['seo_update'],
'left_m_id'=> ['adminSeo'],
'left_m_icon'=> ['glyphicon glyphicon-pencil']
)
);13.陣列的應用
14.防止”盜圖及手機案右鍵可以存圖及PC鎖F12&右鍵”方法。(1) JS (2)伺服器設定
15.seo相關:
(1) google GA
(2) google search console: https://search.google.com/search-console/about?hl=zh-TW
(3) Sitemap網站地圖(.xml): https://ranking.works/%E6%8A%80%E8%A1%93SEO/sitemap
(4) 可以設定網頁不被爬蟲找到
16.php介紹 (伺服器語言優點& GET POST) p.s PHP可以透過用戶來訪或是透過觸發事件獲取用戶IP位置來自哪個國家的哪個程式及電信，可用來做目標族群分析
17.網站架構(靜態網頁、動態網頁)
18. js與php交互運用及聯想(遊戲:邏輯方面php、互動方面js。客戶端:網頁架哪兒相關談判)
19.若怕用js做請求會被看到程式碼，亦可用php對php做請求
20.『網頁做畫面呈現->JS做使用者互動->PHP做功能上的開發&控制台->資料庫存取資料』 = 系統or軟體。 亦可搭配硬體( AR/VR & 攝像機 & 直播 等等….)做各式各樣服務或是網頁遊戲(進階3D引擎網頁遊戲)，3D引擎可透過設計師做3D建模再匯入網頁做3D物件操作，網頁特效or遊戲or商品展示or場地瀏覽。
21. 行銷值得研究:
(1) LINE api
(2) FB api
(3) IG api
(4) twitter api
22. Q&A