移动端 Web 开发前端知识整理 (2)

由于默认情况下（服务器没有设置 expire header 为 -1 或 0） WebView 会缓存静态文件，如果没有更新静态文件的版本，会导致网站做了更新，而用户实际上仍在使用旧的文件。

静态资源版本更新与缓存

使用 FIS 工具解决

FIS （百度开源）

FIS是专为解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题的工具框架。可以实现静态文件压缩、合并、为文件名添加版本 md5 Hash。

调试工具

Chrome （Android iOS 都是 Webkit 内核）

Fiddler（抓包工具，需要借助 wi-fi 热点分享）

HTTP 服务器 Nginx

Nginx是一款面向性能设计的HTTP服务器，相较于Apache、lighttpd具有占有内存少，稳定性高等优势。

在前端开发中，经常作为反向代理服务器，用来在自己的开发电脑上，模拟生产环境，通过资源重定向和反向代理，可以同时访问部署在其他服务器上的接口或网站，以及自己电脑上正在开发的网页。

nginx 配置的一个例子

server { listen *:5005; access_log logs/my_site_access.log; error_log logs/my_site_error.log; # 不缓存 expires 0; # add_header Cache-Control private; #location ~* \.html$ { # expires -1; #} location / { ssi on; autoindex on; # / 前缀的请求，定位到html目录下 root "D:/WebStorm/my_site/html"; index index.html index.htm; } # /static 前缀的 uri 请求，定位到这个目录 location /static { alias "D:/WebStorm/my_site/static"; } # /@api_my_site 前缀的 uri，反向代理到 :9999 # /@api_my_site 前缀的 uri 是 api_my_site 接口请求地址 location /@api_my_site { # 重写 uri，原本的 uri 是 /@api_my_site/... # 可以去掉前缀 /@api_my_site/ # rewrite /@api_my_site/(.*) /$1 break; proxy_pass :9999; proxy_set_header Cookie $http_cookie; } } 在线工具

jsfiddle

Test and share JavaScript, CSS, HTML or CoffeeScript online.

在线即时展现 Html、JS、CSS 的编辑工具，可以有效的帮助 web 前端开发人员来有效分享和演示前端效果。

https://jsfiddle.net/

CSS3 HTML5 兼容性查询

查询 HTML5 和 CSS3 语法兼容性

CSS 语法手册

书

CSS设计指南（第3版）（文字版）

在线学习资源

慕课网

codeschool

codeacademy

JS 模块化加载

前端模块化开发的价值

Requirejs

Seajs （淘宝开源）

常用组件

回到页首

性能优化

移动网络的环境比较复杂，在调试的时候可以用 Chrome 模拟不同的网络环境，关注页面加载的数据量，和加载时间。

使用 CDN，常用的库一般会有 CDN 地址，也可以将自己的一些静态文件放在七牛上，七牛有免费的额度。

小图片转成 base64，减少 HTTP 请求

css，js 文件压缩，启用GZip（HTTP服务器已开启 gzip）

服务器开启静态文件缓存，发布新版本时，需要对文件名加md5戳，使用 fis 工具（html 文件强制不缓存）。

大量的图片显示，可以使用 Canvas 画图，而不用 img 标签，Canvas 有硬件加速

无阻塞，写在HTML头部的JavaScript（无异步），和写在HTML标签中的Style会阻塞页面的渲染，因此CSS放在页面头部并使用Link方式引入，避免在HTML标签中写Style，JavaScript放在页面尾。

网页的渲染不支持硬件加速，dom很多很大的时候会很卡，Facebook 曾经就是因为这个原因放弃了html5，但现在又推出了一个 react js

javascript 单线程，不要执行太复杂的任务，否则会导致页面卡住。

动画优化，尽量使用CSS3动画

HTML5 的 Manifest 和 localstorage，在本地缓存文件和数据。

前端知识库

腾讯移动Web前端知识库 Mars

https://github.com/AlloyTeam/Mars

alloyteam 移动开发规范概述

移动H5前端性能优化指南

静态资源管理与模板框架

HTML5中40个最重要的技术点

Webkit WebApp 开发技术要点总结