Archive for the ‘前端开发’ Category

33K的FLASH

我们有一个挺重要的页面,每个用户第一次接触我们的产品,都将看到这个页面。
上面挂了一个33K的FLASH,仅33K。
33K,怎么会影响页面打开的速度?

开始时,没怎么考虑这货。

直到演示DEMO的时候,为了一个干净的环境,退掉了所有的东西,重新打开浏览器。
结果明显在这个页面上,停顿了一秒。
本地的33K的FLASH怎么会加载一秒??

截了一下数据,发现后台为了响应这货,启了一个占用20多M内存的 Shockwave Flash 来渲染。
解决方法很简单:换成HTML5来实现这个动画。

有时候,事情不是表面上看的那么简单。
学技术的同时,要多了解技术的背后在干什么。

Rewrite

刚玩网页的时候,写的都是静态页 http://uicss.cn/about.htm 这样的结构。
后来想换成 http://uicss.cn/about/
但是又因为不熟悉rewrite,做了如下的调整,手动建立了一堆的文件夹:

这样的目录结构,维护起来相当麻烦。每次新加一个页面,都要开一个文件夹。
其实采用左边那套结构部署上去,服务器稍做设置,就可以支持我们想要的URL效果。

如何玩 rewrite

首先看看自己的服务器是否支持 .htaccess
如果支持这货,就不用每次写条规则就重启一次服务器了,便于测试。

redirect 301 /test.htm http://uicss.cn/

成功的话,当你访问 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个字符
^ 代表字符串的开始位置
^ 在方括号里代表“非”,例如[^/]代表非斜杠。
$ 代表字符串结束的位置
. 代表任何字符(也就是通配符)
\ 取消后面字符的特殊意思,转为原义字符。
—— 这部分的理解出自《SEO艺术》第六章末

开始干吧,打开.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://uicss.cn/test/catch-cat.crx

离线存储

开发WebApp时,遇到一个问题:
如果把页面配置到服务器上,当服务器挂掉或者用户离线的时候,那这个App也就没法工作了。
而当我把页面打包进App里面,又有一个新问题,更新不方便。每次更新的时候都要重新提交。

部门就此组织了一次《application cache》的相关讨论。使用离线存储,来解决上述问题:

view-source:http://uicss.cn/test/coolcode.html
这是一个打包进App的应用地址,阅读源代码可以看到,html标记上给了一个manifest配置文件。里面列出了需要高速缓存的、用于离线访问的文件。在支持mime类型为.manifest的服务器上,它能够列出浏览器应该下载和保存以便以后使用的所有文件。

除了本例中的全部离线存储的用法之外。它还可以通过配置 NETWORK 来列出那些绝不能高速缓存的文件。以及通过配置 FALLBACK 使用户离线的时候,可以跳转到离线提示的页面。

CACHE MANIFEST

NETWORK:
*

FALLBACK:
/ offline_message.html

CACHE:
http://uicss.cn/test/js/jsformat.js
http://uicss.cn/test/js/htmlformat.js

注:文中的*号意指,除了cache的文件之外,其他文件都不做缓存处理。

Page 2 of 1712345...10...Last »
崔凯博客
Powered by SinaSAE | Theme by ck web design | TOP 顶部
Copyright © 崔凯 All rights reserved. 蜀ICP备12025891号.