菲彩国际

Archive for the ‘前端開發’ Category

33K的FLASH

我們有一個挺重要的頁面,每個用戶第一次接觸我們的產品,都將看到這個頁面。
上面掛了一個33K的FLASH,僅33K。
菲彩国际 33K,怎么會影響頁面打開的速度?

開始時,沒怎么考慮這貨。

直到演示DEMO的時候,為了一個干凈的環境,退掉了所有的東西,重新打開瀏覽器。
結果明顯在這個頁面上,停頓了一秒。
菲彩国际 本地的33K的FLASH怎么會加載一秒??

截了一下數據,發現后臺為了響應這貨,啟了一個占用20多M內存的 Shockwave Flash 來渲染。
菲彩国际 解決方法很簡單:換成HTML5來實現這個動畫。

有時候,事情不是表面上看的那么簡單。
菲彩国际 學技術的同時,要多了解技術的背后在干什么。

Rewrite

剛玩網頁的時候,寫的都是靜態頁 http://cnzhongka.com/about.htm 這樣的結構。
后來想換成 http://cnzhongka.com/about/
但是又因為不熟悉rewrite,做了如下的調整,手動建立了一堆的文件夾:

這樣的目錄結構,維護起來相當麻煩。每次新加一個頁面,都要開一個文件夾。
其實采用左邊那套結構部署上去,服務器稍做設置,就可以支持我們想要的URL效果。

如何玩 rewrite

首先看看自己的服務器是否支持 .htaccess
菲彩国际 如果支持這貨,就不用每次寫條規則就重啟一次服務器了,便于測試。

redirect 301 /test.htm http://cnzhongka.com/

成功的話,當你訪問 xxx.com/test.htm 的時候,會自動跳到我的博客。
不成功的話,需要開啟一下 .htaccess :

  1. 打開 \conf\httpd.conf ,查找 #LoadModule rewrite_module,將#號去掉,加載該模塊
  2. 打開 \conf\extra\httpd-vhosts.conf ,查找 AllowOverride None,將 None 變更為 All

菲彩国际環境準備完成后,還需要對“模式匹配”中特殊字符在rewrite的解讀做一下了解:

* 代表前面0或更多個字符
+ 代表前面1或更多個字符
? 代表前面0或1個字符
^ 代表字符串的開始位置
^ 在方括號里代表“非”,例如[^/]代表非斜杠。
$ 代表字符串結束的位置
. 代表任何字符(也就是通配符)
\ 取消后面字符的特殊意思,轉為原義字符。
—— 這部分的理解出自第六章末

開始干吧,打開.htaccess的rewrite
RewriteEngine on

把 xxx.htm 文件 替換為 xxx/
RewriteRule ^(.*)\/$ /$1.htm [L]

再給一個例子加深理解,這是將服務器上的 xxx.php 文件 替換成 xxx.html
RewriteRule ^(.*)\.html$ /$1.php [L]
閱讀全文 »

如何制作chrome擴展程序

簡單實現了一個 chrome 的擴展,方法如下:
首先新建一個文件夾,用編輯器寫一個文件名為 manifest.json 的文件:

{
  "name": "抓貓!",
  "version": "1.0",
  "description": "你能抓住她嗎?",
  "browser_action": {
  "default_icon": "icons/icon_19.png",
  "popup": "files/game.html"
  },
  "icons": {
    "16": "icons/icon_16.png",
    "19": "icons/icon_19.png",
    "32": "icons/icon_32.png",
    "48": "icons/icon_48.png",
    "128": "icons/icon_128.png"
  }
}

菲彩国际這其中,如果需要多語言支持的話,可以添加default_locale,并將name&description字段修改為:

{
  "name": "__MSG_name__",
  "description": "__MSG_description__",
  "default_locale": "zh_CN"
}

并在插件目錄下添加 _locales 目錄,內置語言文件,如圖所示:

這其中 messages.json 內容如下:

{
  "name": {"message": "Catch Cat!"},
  "description": {"message": "Can you catch it ?"}
}

插件主程序完成后,直接編寫插件所調用的html就可以了 “popup”: “files/game.html”
調試時,可以勾選chrome瀏覽器擴展程序里面的“開發人員模式”,載入正在開發的擴展程序即可。

開發完成后,使用瀏覽器打包擴展程序,就可以發給朋友們玩了。歡迎下載體驗:
http://cnzhongka.com/test/catch-cat.crx

離線存儲

開發WebApp時,遇到一個問題:
如果把頁面配置到服務器上,當服務器掛掉或者用戶離線的時候,那這個App也就沒法工作了。
菲彩国际 而當我把頁面打包進App里面,又有一個新問題,更新不方便。每次更新的時候都要重新提交。

部門就此組織了一次《application cache》的相關討論。使用離線存儲,來解決上述問題:

view-source:http://cnzhongka.com/test/coolcode.html
菲彩国际 這是一個打包進App的應用地址,閱讀源代碼可以看到,html標記上給了一個manifest配置文件。里面列出了需要高速緩存的、用于離線訪問的文件。在支持mime類型為.manifest的服務器上,它能夠列出瀏覽器應該下載和保存以便以后使用的所有文件。

菲彩国际除了本例中的全部離線存儲的用法之外。它還可以通過配置 NETWORK 來列出那些絕不能高速緩存的文件。以及通過配置 FALLBACK 使用戶離線的時候,可以跳轉到離線提示的頁面。

CACHE MANIFEST

NETWORK:
*

FALLBACK:
/ offline_message.html

CACHE:
http://cnzhongka.com/test/js/jsformat.js
http://cnzhongka.com/test/js/htmlformat.js

注:文中的*號意指,除了cache的文件之外,其他文件都不做緩存處理。

Page 2 of 1712345...10...Last ?
崔凱博客
Powered by | Theme by ck web design | TOP 頂部
Copyright ? 崔凱 All rights reserved. 蜀ICP備12025891號.
菲彩国际_菲彩国际官网_Welcome 紫金阁棋牌-紫金阁棋牌官网 紫金阁棋牌-紫金阁棋牌官网 紫金阁棋牌-紫金阁棋牌官网 紫金阁棋牌-紫金阁棋牌官网