論網速快慢的區別

Sat, 07 Nov 2020 14:09:07 +0000

論網速快慢的區別

隨著網路的普及，使用者對響應速度快慢越來越重視了，網站越快，使用者的黏性和轉化率也會越高。簡單來說，就是要提高速度！影響網站速度的因素有很多，比如………………….

一本正經可不是我的風格，下面請看我的表演 想法起源：

一開始的想法是使用純CSS進行實現，把底圖base64編碼後直接放在background-image上，就可以達到背景圖片與網頁一同載入出來的效果

第一步：首先將提前準備好的素材圖片進行處理，拔下泳衣和泳裙

第二步：新建個HTML檔案

第三步：

完成。。然後就發現個問題，由於我的底圖檔案大小達到了12兆，編碼後的字串過大，導致網頁載入又卡又慢，實在無使用者體驗而且這種方式載入的底圖會突然的顯示出來，過於唐突，效果不好

後改用： CSS+JavaScript進行實現，由background-image直接載入背景圖片，能達到逐漸顯示的效果，待底圖載入完畢後再由JS動態插入配圖

不禁感慨一句，什麼破網路，慢得連人物圖片的衣服都載入不出來

HTML5 畫布 - 小球碰撞

Tue, 18 Jul 2017 09:17:31 +0000

HTML5 是全球資訊網的核心語言，屬於標準通用標記語言下超文件標記語言（HTML）的第五次重大修訂。自 1999 年以來，HTML 4.01 已有許多變化，如今，HTML 4.01 中的一些元素已被棄用，這些元素在 HTML5 中已被刪除或重新定義。為了更好地處理當今的網際網路應用程式，HTML5 添加了許多新元素和功能，例如：圖形繪製、多媒體內容、更好的頁面結構、更好的表單處理，以及一些 API，如拖放元素、定位，包括網頁應用程式快取、儲存、網路工作者等。

標籤

描述

<canvas>

標籤定義圖形，例如圖表和其他圖像。此標籤基於 JavaScript 的繪圖 API

效果展示：

您的瀏覽器不支援 H5

程式碼部分：

HTML

<canvas id="my-canvas" width="500px" height="400px" style="border:1px solid red" >
您的瀏覽器不支援 H5</canvas>

<script type="text/javascript">
	<!-- 取得畫布物件 -->
	var my\_canvas = document.getElementById("my-canvas");
	<!-- 取得畫筆 -->
	var my\_huabi = my\_canvas.getContext("2d");
	var x = 50;
	var y = 50;
	var r = 20;
	function deawBall(x,y){
		<!-- 設定畫筆顏色 -->
		my\_huabi.fillStyle = "green";
		<!-- 開始一個新路徑 -->
		my\_huabi.beginPath();
		<!-- 畫出小球 -->
		my\_huabi.arc(x, y, r, 0, 2 \* Math.PI);
		<!-- 關閉路徑 -->
		my\_huabi.fill();
	}
	var fx\_x = true;//當 fx_x 為 true 時，向 x 軸移動
	var fx\_y = true;//當 fx_y 為 true 時，向 y 軸移動
	var speen = 1;
	<!-- 計時器 -->
	window.setInterval("moveBall()", 10);
	function moveBall(){
		<!-- 判斷目前小球的運動方向 -->
		if(fx\_x == true){
			x += speen;
			if(x >= 500-r){
				<!-- 當達到底部時，向上彈 -->
				fx\_x = false;
			}
		}else{
			x -= speen;
			if(x <= 0+r){
				<!-- 當達到頂部時，向下彈 -->
				fx\_x = true;
			}
		}
		if(fx\_y == true){
			y += speen;
			if(y >= 400-r){
				<!-- 當達到左側時，向右側彈 -->
				fx\_y = false;
			}
		}else{
			y -= speen;
			if(y <= 0+r){
				<!-- 當達到右側時，向左側彈 -->
				fx\_y = true;
			}
		}
		<!-- 清除畫布 重畫 -->
		my\_huabi.clearRect(0, 0, 500, 400);
		deawBall(x, y);
	}
</script>

クリックして展開し、詳細を表示

var my\_canvas = document.getElementById("my-canvas"); var my\_huabi = my\_canvas.getContext("2d"); var x = 50; var y = 50; var r = 20; function deawBall(x,y){ my\_huabi.fillStyle = "green"; my\_huabi.beginPath(); my\_huabi.arc(x, y, r, 0, 2 \* Math.PI); my\_huabi.fill(); } var fx\_x = true;//當 fx_x 為 true 時，向 x 軸移動 var fx\_y = true;//當 fx_y 為 true 時，向 y 軸移動 var speen = 1; window.setInterval("moveBall()", 10); function moveBall(){ if(fx\_x == true){ x += speen; if(x >= 500-r){ fx\_x = false; } }else{ x -= speen; if(x <= 0+r){ fx\_x = true; } } if(fx\_y == true){ y += speen; if(y >= 400-r){ fx\_y = false; } }else{ y -= speen; if(y <= 0+r){ fx\_y = true; } } my\_huabi.clearRect(0, 0, 500, 400); deawBall(x, y); }

HTML on MoeJueのブログ

論網速快慢的區別

HTML5 畫布 - 小球碰撞