SEO(Search Engine Optimization)，搜索引擎优化。是一种通过优化网站内容和结构，提升网站在搜索引擎结果中的排名，从而增加网站流量和转化率（提高网站的可见性、收益和影响力）的技术和策略。

SEO是一项持续的工作，需要不断地适应搜索引擎算法和用户需求的变化。

分类一

内部优化

包括网站结构、内容、关键词、标题、描述、图片、链接等。

• 页面优化：网站重构、Meta标签优化、Heading标签优化、Alt属性优化、锚点文本优化。 常见SEO网站重构技术包括优化网站结构、改进网站内容、优化网站代码、提高网站速度、优化网站链接和改进网站设计。

  Meta标签主要是title、description、keywords三个地方。

  所有图片都拥有一个Alt属性，针对图片主要优化这个属性，让搜索引擎更好地理解图片。

• 内容优化：坚持更新文章、丰富网站内容、抢占更多关键词；建设企业新闻栏目、导入首页权重；拥有SEO意识的内容团队，能围绕关键词，长期稳定地为网站推广企业站提供高质量、原创的内容。

• 结构优化：URL优化、目录结构、robots.txt优化、Sitemap、网站导航。

  提供相对简单的URL，对用户和搜索引擎都是有帮助的。为网站上的文件创建良好描述性的分类名和文件名。

  目录结构最好不要超过三级。目录的组织方式尽量采用：首页 - 栏目页 - 内容页。目录名采用拼音或英文。

  robots.txt是一种存放在网站根目录下的文本文件。用来告诉搜索引擎的爬虫网站中哪些内容不应该被索引，哪些是可以被索引的（出现在搜索结果中）。

  Sitemaps是一种XML文件，会自动“通知”搜索引擎本网站可抓取的页面（结构和内容信息）。可以包含网站的所有页面（首页、文章、分类、标签、图片、视频等）。

  网站导航对于帮助用户迅速找到想要的内容很重要，它可以帮助搜索引擎理解本网站有哪些重要内容。

外部优化

包括外部链接、社交媒体、网站加载速度、移动端友好等。

外链：是指从其他网站指向本网站的链接，被视为网站权威性和可信度的指标。外链数量和质量对搜索引擎算法来说非常重要。优化方法：

• 友情链接：分别在自己的网站上放置对方网站的图片或文字的网站名称，并设置对方网站的超链接，使用户可以从合作网站中发现自己的网站。可以是双向的，也可以是单向的。是一种网站推广的基本手段。
• 分类目录：提供一个按类别编排的网站目录。在每类中，排列属于这一类别的网站名称、网址链接、内容提要，以及子分类目录。可以在分类目录中逐级寻找相关网站。
• 第三方网站提交：在一些可以提交信息的第三方网站里发布链接，这种网站权重越高越好。

分类二

White hat SEO

白帽SEO使用满足搜索引擎要求的正当技术手段，是应当采取的方式。

如：SEO Onpage（Technical）、Off-page SEO、Local SEO、App Store Optimization、YouTube SEO。

Black hat SEO

黑帽SEO是采用欺骗或伪造的方式，是错误的实现方式。

如：Doorway page、Hidden Text、Link Farms、Sneaky Redirects。

Grey hat SEO

灰帽SEO是介于白帽和黑帽之间的一种SEO策略，是应该避免的实现方式。

如：SEO Squatting、Negative SEO、Spun Content、Paid Links、Domain Grabbing。

常见术语

标签

对SEO起重要作用的HTML标签，如：<title>，以及<meta>标签的_description_和_keywords_属性。

优化标题：

• 主要关键词 - 次要关键词 ｜ 品牌名称
• 关键词之间使用破折号（-），品牌名称前使用竖线分隔（｜）
• 避免使用重复的标题标签

优化描述：

• 编写引入注目的网站主要内容的描述信息
• 长度为150-160个字符
• 避免重复的描述信息

优化关键词：

• 使用具有搜索流量潜力的关键词
• 内容符合搜索意图
• 关键词具有商业潜力

链接

Internal links：本网站内部网页之间的链接，如：<a href="#">；

External links：本网站外部的链接，一般是指其他网站连到本网站的链接。

Reciprocal links：也称双向链接，是对一个网页不仅有超文本链接，同时对应有和原始网页的链接。

搜索引擎结果页

Search Engine Results Page（SERP）是为特定搜索显示的列表或结果页。在SEO领域，该页面取得良好表现起决定性作用。

排名

是指页面在目标关键词的SERP中的位置。SEO的目标是提升Web页面针对目标关键词的排名。

排名算法：是搜索引擎对其索引中的列表进行评估和排名的规则，它决定哪些结果与特定的查询相关。

图片

搜索引擎会从图片所在网页的内容中提取与图片主题相关的信息：

• 尽可能确保将图片放置在与其相关的文字附近，以及与其主题相关的网页上。
• 尽可能使用简短但具有描述性的文件名称。
• 编写 alt 替代文本时，使其内容恰当使用关键字且与网页内容相符。

SEO推广

包括关键词研究、网站结构优化、内容优化、外部链接建设等多个方面。

If you want to improve your performance in terms of time and avoid stupid coping of data from one place to another again and again, if you want to save time, you’re going to have to give up some space. 如果你想要节省时间，你将不得不放弃一些空间。

Think algorithmically. 以算法的方式思考，将现实世界里的问题量化，将知识转化为实际编写代码来解决这些问题。

搜索

Linear Search

以数组为例，任何时候从左到右或从右到左搜索时，称为线性搜索。无论朝哪个方向，都在走一条直线。

Binary Search

以有序数组为例，采取一种 divide and conquer approach（分治的方法），从中间开始，要么向左要么向右查找，dividing and dividing in half（每次减半）查找范围，直到找到目标元素或搜索到边界，称为二分搜索。

构建系统

构建系统是指用来自动化执行编译、链接、打包、测试等一系列操作的软件。你定义规则告诉这些工具如何执行命令、处理依赖关系、向目标文件输出结果。

针对不同目的、不同语言有不同的构建系统，如 Java 的 Maven、JavaScript 的 npm 等。

Make 是最古老的构建系统，几乎存在于所有操作系统上。Make 命令将在当前目录里寻找名为 Makefile 的文件，然后根据 Makefile 的规则执行命令。

如果 makefile 中涉及的依赖没有发生变化，再次运行 make 命令将不会重新编译，而是直接使用上次编译的结果。即尝试做最少的工作来实现目标。

Makefile 也是一种 DSL（Domain Specific Language）语言。

Semantic Versioning 语义化版本

版本格式：MAJOR.MINOR.PATCH（主版本号.次版本号.修订号）如：1.0.0

版本号递增规则如下：

• 主版本号：发布了不兼容的 API 修改。此时增加主版本号，同时将次版本号和修订号都置为0。
• 次版本号：发布了向下兼容的功能性新增 add。通常增加此版本号，同时设 patch 版本号为0。
• 修订号：发布了向下兼容的改变，通常是问题的修正 fix。对已安装使用的人来说好像什么也没发生，不会影响他们已用的功能。

许多软件项目试图让版本requirements尽可能得低，这样就会有更多人愿意依赖你的软件。

先行版本号及版本编译元数据，可以加到“主版本号.次版本号.修订号”的后面作为延伸。如：1.0.0-beta

Lockfile

Lockfile 是指锁定依赖版本的一种机制，其内容主要是一系列依赖和它们当前使用的版本。

• 确保你不会意外更新什么东西
• 让构建过程更快，只要lockfile中依赖没有更新，就直接使用之前构建安装的依赖（无需下载和安装）
• 获得 reproducible builds（可重复的构建结果）

Continuous Integration / CI

持续集成本质上是一种云构建系统。持续集成可以是：

• 当你push代码到特定分支，自动发布插件库到 npm 仓库
• 当有人创建pull request时，执行单元测试
• 每次commit时，检查代码风格
• code coverage检查

常见的CI platforms有 Github Actions、Jenkins等。还有一个例子就是 Github Pages CI，也是本博客使用的服务。

Test Suites 测试套件

测试套件是指用来验证软件功能的测试用例集合，通常由不同类型测试组成。

• Unit tests 单元测试：通常是自给自足的micro test。测试单个模块功能或一个函数的行为是否符合预期。如：测试一个 HTML parser 可以正确解析一个 tag
• Integration tests 集成测试：测试多个模块或子系统之间的集成情况。如果：测试一个 HTML parser 可以正确解析一个 HTML 文档。
• Regration tests 回归测试：测试软件的历史版本是否能正常运行。阻止你的程序 regressing to 早期的bugs。

显示/隐藏当前目录所有隐藏文件：Command + Shift + .

截屏：Command + Shift + 3

跨团队协同

一个移动端网站项目测试阶段bug修复，涉及人员众多，测试在工作群里以接龙的形式不断抛出问题。

缺点：消息泛滥，相关人员不能及时关注、更新，问题描述不清。

解决：借助在线文档，按照栏目：状态（未修复、修复中、已修复、已验证、已关闭、无法复现、后期优化）、类型（功能、交互体验、性能、兼容性）、严重程度（一般、严重、优化）、描述、开发负责人、测试跟进人、备注

既能实现信息共享，又能分担减轻TL的工作量。

gh-pages 从今年开始推上去的博文都没有自动 deploy，github 提示 Unable to build page. Please try again later。

排查思路：先本地安装 Jekyll 构建一下，看是否是代码问题引起的。

最终是通过查看 GitHub 构建失败提示信息，在有 liquid tag 冲突的文章内容头尾分别添加 和 解决。

Charles 是 Mac 上常用的抓包工具。

安装tips：

1. 官网下载最新版本
2. 本地安装-》打开软件-》窗口工具条 Help -》显示 Register Charles
3. 通过在线破解工具下载对应版本的 charles.jar 文件
4. 访达-》应用程序-》Charles右键-》显示包内容-》Contents-》Java，替换此目录下的 charles.jar 文件
5. 关闭 Charles，重新打开，窗口工具条 Help -》显示 Registered to <填写的注册人名>
6. 窗口工具条 Proxy-》macOS Proxy，开启权限

关键指标：

• 白屏时间：从浏览器输入地址并回车后到页面开始有内容的时间。这个过程包括dns查询、建立tcp连接、发送首个http请求（如果使用https还要介入TLS的验证时间）、返回html文档、html文档head解析完毕
• 首屏时间：从浏览器输入地址并回车后，在不滚动屏幕下的前提下，用户看到完整第一屏内容花费的时间（= 白屏时间 + 首屏渲染时间）
• 用户可操作时间节点：dom ready触发节点，点击事件有反应
• 总下载时间：window.onload的触发节点

最近一直在维护 Shopify 店铺，做一些 theme 功能定制的需求。接触了2个付费的 theme，里面的代码虽然不敢恭维，但是店铺的页面性能都非常好。再次重拾了 server 渲染能力。

Liquid 由 Shopify 创建的开源的模版语言，是 Shopify theme 的基石。Shopify Liquid文档，包含一些内置的对象，可用于读取店铺的数据。

对了，这个博客是用 Jekyll 生成页面，也使用 Liquid 作为其模版语言。

GraphQL是一种API语言。用一句话描述它：只请求需要的，并确切获得所需的。

语法学习：官方文档

Overview

API调用最常见的情况：查询和修改。在RESTful风格的API中我们常用get方法查询数据，用post、put、delete方法修改数据。而在GraphQL里，对应的方法是 query 和 mutation。

使用GraphQL API的好处：前端可以在一个请求中执行多个查询。它使用 types 确保应用仅获取可能数据，并提供清晰有用的错误，同时避免编写手动解析代码。

Shopify 主题

Shopify 的主题是由模板文件创建的目录。这些文件是 Shopify 基于 Ruby 的开源模板语言 Liquid 编写的。不同于 app 是运行在开发者的 infrastructure 上，主题运行在 Shopify 的 servers 上。

主题目录被打包成 zip 文件进行分发。商家可以通过 Shopify admin 上传。

无论是 free 还是 paid 的主题，由于主题或 Shopify admin 相关的限制，某些自定义设置是不支持的。

尽管 Shopify Support 能够支持各种基本自定义，但是官方给出 Design Policy，列出了一些列他们不会提供支持的 task

主题开发者文档

在 Shopify 主题里引入 JS 的“黄金法则”

可以在Shopify admin在线编辑主题代码，缺点：Online code editor 只记录代码修改时当前文件的快照。

Shopify theme最佳实践

1. 优化js
   • 减少js的使用（用css代替js），压缩文件（少于16kb），当从storefront请求时，Shopify 自动压缩主题的 JavaScript 和 CSS 文件。
   • 减少外部框架、库的依赖，尽可能使用浏览器原生的功能和现代DOM APIs。
   • 在 script 标签上使用 defer 或 async，在 HTML 文档解析时下载文件，区别：前者不阻塞HTML文档解析，后者下载完毕后立即执行，会中断HTML parse（https://stackoverflow.com/a/39711009/2474841）
2. 提前加载关键资源
3. 交互驱动的late loading，让首次加载时main thread更加free空闲
   • 仅当页面需要时加载图片，非首屏的图片延迟加载
   • 使用css、html实现入口，直到用户产生交互时才加载功能代码，如：点击share、help聊天工具
   • 使用facade（表面，视频的封面+一个假的播放按钮），如果用户不点击播放，则不去fetch和处理视频资源
   • 基于组件进行代码split
4. 使用system font
5. 静态资源放到Shopify server上。使用相同的host，避免unnecessary http链接
   • 把资源放到主题的 assets 目录下

Shopify Liquid

先了解一些知识点，本文后面列举了一些使用 Shopify Liquid 实现的功能。

liquid objects

在 theme.liquid 文件里加一个 {{ template }} 全局变量，可以在页面上输出渲染所采用的 template 名称（不含文件后缀 .liquid）

snippet

• 用于代码复用的 chunk
• 以 .liquid 为文件后缀名
• 使用 {% render "snippet-filename" %} 引入 template，不含文件后缀名
• 可用于条件加载
• 命名规范：所有 snippets 文件都放在“snippets”目录下，因此以它们的功能作为前缀。如：collections-coffee-cups.liquid

在公司开发的产品主要面向Windows用户，加上在网易时也是win10开发环境，因此之前一直使用window系统进行开发和处理工作。今天工作使用了3年半的联想笔记本电脑电源坏了，跟IT申请换了MacBook Air。

记录一些tips，总会用上的。

什么是网络可靠性，如何衡量？

1. 断网情况下你的 web app 是否能工作？当你看到原生 app 图标时，无论当前是否有网，你都希望能够点击它打开某种体验。
2. 当用户网络不理想时，是否可以相信你的 web app 能以足够快的速度加载？

借助谷歌的Lighthouse工具，可以检测 PWA 的可靠性。

加载了哪些文件？

通过谷歌开发者工具-》Network，关闭 Preserve log，开启 Disable cache，选 All，观察下网站加载了哪些文件，然后置顶缓存策略。

何时加载？

用于渲染初始 HTML 的 CSS、JS （只有加载了这些文件才能显示可交互的页面）位于关键加载路径中。 通过缓存它们使 web app 可靠得快。

通过谷歌开发者工具-》Network 中 Waterfall 这一列可以看出各资源加载的先后顺序及加载时间。

互联网是一个不可思议的平台。它横跨不同设备和操作系统。其与生俱来的可链接性，使得它可以被搜索，从任何地方分享给任何人。

What are PWA(Progressive Web Apps)?

Web 应用是运行在浏览器里的代码。其优势是可以使用一套代码在任何设备、任何地方，触达任何人。无论何时访问网站，它的内容都可以是最新的。

原生应用以独立的体验在用户设备上启动，可以从本地文件系统读写文件，通过USB、蓝牙等访问与设备连接的硬件，甚至同设备上存储的数据交互，如：联系人、日历事件。原生应用就像是其所运行的设备的一部分。

如果从功能和覆盖范围两个维度看，原生应用代表了最佳功能，而 Web 应用代表了最好的覆盖范围。

Shell语句tips

Shell 是Unix系统下的一种命令行解释器。

本文摘录《The Missing Semester of Your CS Education(2020)》视频里提到的 shell 命令。

date # 显示当前日期时间
echo "Hello, world" # 输出 Hello, world
echo Hello\ world # 一样的效果
echo hello > hello.txt # 输出 hello 到 hello.txt 文件
echo $? # 显示上一条命令的返回值，0 表示成功，非 0 表示失败
cat hello.txt # 显示 hello.txt 文件内容
cat < hello.txt  >> hello2.txt # 将 hello.txt 文件内容追加到 hello2.txt 文件末尾
which echo # 显示 echo 命令的路径
pwd # 打印当前目录路径
cd /home # 切换到 /home 目录
cd .. # 切换到上级目录
cd ./home # 切换到当前目录下的 home 目录
cd - # 切换到上一次所在目录
ls # 列出当前目录下的文件和目录
ls -l # 列出详细信息，包括文件权限、所有者、大小、修改日期
mv meow.c woof.c # 重命名文件 meow.c 为 woof.c
mkdir My\ Photos # 创建目录 My Photos
rmdir My\ Photo/ # 删除目录 My Photo/
rm test.txt # 删除文件 test.txt
man ls # 查看 ls 命令的手册，按 q 退出
exit # 退出当前用户
open index.html # 在默认浏览器中打开 index.html 文件
grep foobar mcd.sh # 在 mcd.sh 文件中搜索 foobar 字符串
grep -R foobar . # 在当前目录及其子目录下搜索 foobar 字符串
grep -v 'moon' # 搜索不包含 moon 字符串的行
diff <(ls foo) <(ls bar) # 比较并显示 foo 和 bar 目录下的文件和目录
find . -name test -type d # 在当前目录下查找名为 test 的目录
touch project{1..3} # 创建 project1、project2、project3 三个空文件
rm project{1..3} # 删除 project1、project2、project3 三个文件
history | grep grep # 显示在终端里运行过的命令中包含 grep 的命令
alias gs # 查看指定命令的别名
unalias gs # 删除指定命令的别名
cmp mcd.sh mcd.dec.sh # 比较两个文件是否相同。可以使用 echo $? 查看返回值，0 表示相同，非 0 表示不同。

今天遇到一个问题，使用 JS 的 Number.prototype.toLocaleString([locales [, options]])方法把金额的数字值转换为基于语言的货币值表示形式。

当缺省 locales 和 options 时，以系统为准。当前并非所有浏览器都支持这两个参数。

(123456).toLocaleString('en-IN', { style: 'currency', currency: 'INR'}) // "₹1,23,456.00"
(-123456).toLocaleString('en-IN', { style: 'currency', currency: 'INR'}) // "-₹1,23,456.00"

很神奇，很方便。但是UI的设计里，把表示负数的符号 ‘-‘ 放在了货币符号与数字之间。这样前端就需要对上述方法的输出结果进行处理。

为了说服 UI 采用 JS 方法输出的格式，我开始找资料。下面就记录这个过程。

整理 .markdown 常用语法。

Markdown

在新 tab 页打开链接

[] 里是链接文案，() 里是链接地址，{} 里是元素属性。

[这个插件](https://github.com/bfred-it/iphone-inline-video){:target="_blank"}

工作生活中，发现不靠谱的人有以下特征：

1. 轻易承诺，然后再无下文
2. 对约定的责任或事情推诿、变卦
3. 拖延
4. 执行力不强，无法完成组织或他人所托之事
5. 工作能力不稳定，敷衍粗心，常出错，惹麻烦
6. 面对较大困难或有挑战性的任务时，退缩

不带主观色彩，单纯不喜欢不靠谱的人。那么如何做一个靠谱的人?

GMV (Gross Merchandise Volume/Value)，用于 online retailing 的 item，指某段时间内在指定市场上销售的商品总金额。

简单说它是创建订单的总金额，包含销售额、取消订单金额、拒收订单金额、退货订单金额（可能还有刷单等项）。

公式：GMV=访客×转化率×客单价

几个术语：

• pageview，也称page tracking hit，一个页面只要在浏览器中被 loaded 或 reloaded 一次，就算为一个 pageview。
• 会话(session)，指用户在网站或 app 上 active 的时间 period。如果用户超过30分钟 inactive，之后的行为归于新的 session 中。30分钟内离开又返回，归于 original session。ga统计维度中的 Sessions，代表了网站所有用户触发的独立会话数
• unique pageview，合并了一个相同的用户在同一个会话中的 pageview。（取决于用户数、会话数）
• users，在给定日期范围中，一个用户触发的 initial session 视为一个 additional session 以及一个 additional user. Any future sessions from the same user during the selected time period are counted as additional sessions, but not as additional users.
• 活跃用户数，一般定义有关键动作或者行为达到某个要求时的用户为活跃用户；每个网站应该根据自身的产品特定定义活跃用户。比如社交应用，必须登录进去才能算活跃，因为如果用户停留在登录界面，实际上是没有任何意义的。
• sampling（采样），ga通过对子集采样，以较小的计算负担和减少的处理时间，分析生成与全集相似的结果。

活跃用户用于分析网站真正掌握了多少有价值用户。常见的有 DAU 日活用户数、MAU 月活用户数

官方文档gtag.js

HTTP（Hypertext Transfer Protocol）是超文本传输协议，是互联网上应用最为广泛的协议。如建立客户端和服务端之间的通讯。

目前 HTTP 1.1 为互联中的主要协议，而 HTTP/2 是 HTTP 协议自 1999 年 HTTP 1.1 发布后的首个更新，简称h2。

2015年底 Google Chrome、Mozilla Firefox、Microsoft Edge和Opera已支持HTTP/2，并默认启用。

主要讲动作在 UI 交互中的应用。

原文CREATING USABILITY WITH MOTION

实时 vs. 非实时交互

在 UX 中的 state，即状态，是静止的。行为 act 是临时的，基于动作 motion 的。

“实时”意味着用户是直接与用户界面中的对象进行互动，被认为是“直接操作”；“非实时”则意味着对象的表现发生在用户的动作之后，是过渡性的，其影响是“锁定”了用户直到过渡结束。

Telerik Fiddler 主要用在 Windows 系统下，官方也有 mac os 版，但是貌似不好用，下载下来的还是exe

之前wy同事推荐，第一次知道前后端分离本地开发还有这种操作。

最常用的就是 Fiddler 的 AutoResponder，代理api请求，指定请求链接与本地文件的映射关系，自定义响应的值，测试各种case，简直神器。

对于普通请求，响应为 JSON 文件，这样用用足够，一旦 request header 有个性化设置，单纯地返回 JSON 文件就不能满足需求了。

摘录一些自己认同的观点。中文翻译多处与原文有出入，自己稍微改动了。

英文原版 中文翻译版 法语翻译版

Le moment où vous sentez que vous êtes bon, vous allez vous détendre et arrêter l’amélioration.

当你认为自己足够好了，你就放松了，也就没有了前进的动力。

Cela signifie que le moment vous vous sentez être bon vous-même, vous êtes en route vers l’échec et alors vous devriez vous sentir mal.

一旦自我感觉良好，也就是正在走向失败，应该时刻觉得自己还不够好。

Dans tous les cas, la compétence a très peu à voir avec tout cela. La réputation est très important cependant. Les gens embauchent des amis, et les personnes qui ne sont pas aimé et non essentiels se font virer en premier; essayez de changer le système et vous devenez détesté. Tout est un jeu très social. C’est comme ça que ça fonctionne dans l’industrie, et probablement dans le milieu universitaire aussi, bien que je ne sais pas? Tout est une question de qui vous connaissez, il faut savoir vous vendre, et faire connaître votre marque personnelle vous savez? Voilà comment vous obtenez des emplois dans ce buisness.

favicon 引入问题

<link rel="short icon" style="image/x-icon" href="taobaoLogo.ico" >

一般这个Logo图标不但可以运用在浏览器tab的标题中，而且还可以放在收藏夹中去使用，只需将 rel="short icon" 改为 rel="bookmark" 即可

如果一个html页面没有用link指定favicon，则会使用网站根目录下的默认 favicon.ico

查看方式：

http://www.w3cfuns.com/favicon.ico

添加智能 App 广告条 Smart App Banner

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL" />

以上代码的作用是告诉浏览器这个网站对应的app，并在页面上显示下载 banner

isolate Scope

使用 directive 的 scope 选项，defines a set of local scope properties derived from attributes on the directive’s element,为 app 可重用 component 创建一个隔离区域 isolate scope，这样父 scope 无法渗入到 directive 中。

HTML：
<my-customer info="naomi"></my-customer>
JS：
// controller 中
$scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
// 自定义 directive 中
scope: {
  customerInfo: '=info'
}
HTML2:
Name: 

参考文章H5性能最佳实践

可以借鉴的方面如下：

• 减少请求数量
  • 将js，css分别合并成单个资源，Stylesheets放在页面头部（let the browser display whatever content it has as soon as possible，这样使页面看起来loading faster），Scripts放在页面下部（因为脚步加载can block parallel downloads 并行下载）。
  • 使用css，svg，iconfont替换UI图片（在手机端iconfont可以只加载ttf格式的字体文件，如果像PC端照顾到各种浏览器，加载各种format的字体文件，会造成极大的网络带宽消耗）
• 避免重定向：
  • 页面和静态资源端重定向会造成巨大的性能消耗。最常见的wasteful redirect而web developers通常没有意识到的就是，在URL末尾少了”/”。
• 图片优化
  • 使用WebP格式图片（目前只有Google Chrome和Opera系下的浏览器原生支持该格式），参考文章WebP探寻之路
  • 在CDN服务上生成各个尺寸和质量的图片，合理使用CDN图片尺寸提升下载图片的性能，减少不必要的内存消耗（不要因为可以设置图片尺寸，就用一个特别大的图，然后实际显示用小的尺寸，每浪费10pixel点宽高都可以造成很大的内存资源浪费）。
  • 根据设备DPI值和图片质量做优化，DPI高的，宽高增加后可适当降低质量，对于小项目，目前不涉及这方面。
• 使用Sprite图片，减少请求数量，方便图标管理。生成紧凑的Sprite图片，减少消耗。
• 预加载和离线化
• 渲染优化
  • 避免使用GIF图片实现Loading效果（降低CPU消耗）
• 域名收敛，控制页面中使用的域名数量，降低DNS域名解析成本。对于小项目，目前都放在同一个域名下。
• 减少DOM操作。DOM操作会引起浏览器对网页进行重新布局和绘制，这是比JS语句执行慢得多的过程。

Geolocation API

位置信息由纬度、经度坐标和一些其他元数据组成，利用这些位置信息可以构建位置感知类应用程序。

参考这里实践成功。效果如下：

Mac 上用 Tab 键不能自动补全 Git 分支名称，每次都要手动输入或者粘贴，很麻烦😔

参考这里实践成功。

Git 作为一种 version control system，能够跟踪代码或文件目录的历史变化。无论是独自工作还是与他人合作都是很有帮助的工具。本文介绍 Git 相关知识和常用命令。

查看 git 版本

git --version

首次下载安装后常用的配置：

git config --global user.name "Vivienne"
git config --global user.email vivienne@example.com

可在 ～/.gitconfig 文件里查看 Git 全局配置。

或使用以下命令：

git config --list