在做项目过程中遇到图片请求失败的时候，图片区域会出现一个原生的碎片图标，非常影响用户体验。这时需要用一个 broken 的图片去代替它，来提升户体验。要做到这一点，首先要在代码中识别图片加载失败这个事情。那么怎么判断一个图片加载失败了呢？

什么是网页元素的绝对位置和相对位置

网页元素的绝对位置，是指该元素的左上角相对于整张网页的左上角的坐标。
网页元素的相对位置，是指该元素的左上角相对于视口的左上角的坐标。

如何获取绝对位置

1. 新建一个 Tab 样式的终端窗口

1

Command + T

2. 自带的截图快捷键

1
2
3
4

Command + Shift + 3 截取整个屏幕，保存图片在桌面
Command + Shift + 4 选取部分屏幕区域，保存图片在桌面
先Command + Shift + 4 再空格， 可以对指定的窗口或者菜单截屏
以上快捷键，加上 Control， 可以把截图保存在剪切板

3. 锁屏

1

Command + Control + q

4. 呼出 Emoji 键盘

1

Command + Control + 空格

其他

1
2
3
4
5
6
7

option + command + f 进入全屏模式
command + delete 删除至行首
option + delete 删除一个单词
command + o 打开文件 command + ↑ 上级目录
command + 空格: 打开Spotlight（本地搜索引擎）
option + command + esc 打开强制关闭控制面板（很有用）
fn + F11 显示桌面

git log 是我们经常使用的git命令之一，它可以展示分支上的历史提交信息。但是除了 git log 这一个命令，其实它还为我们提供了很多辅助的参数来从不同维度展示我们需要的日志信息，包括展示格式、只看某个分支的日志，只看某个用户提交的日志，只看某个文件上的提交等等，有的时候，这些方法可以帮助我们快速地定位问题。

在前端工程开发过程中，不同项目可能会使用不同的 node 环境和 npm 环境，在不同项目中切换时，要不停的卸载安装前端开发环境，非常麻烦。于是有了 nvm 和 nrm，可以通过切换的方式快速设置开发环境版本，再也不要繁琐地卸载安装了，有效的解放了劳动力。

查看配置

1

npm config list

在输出信息中可以看到我的 npm 镜像如下：

1
2
3

metrics-registry = "https://registry.npmjs.org/"
scope = ""
user-agent = "npm/5.5.1 node/v8.9.3 darwin x64"

设置镜像

常用的 npm 镜像地址有：
npm —- http://registry.npmjs.org (默认)
cnpm — http://r.cnpmjs.org
taobao - https://registry.npm.taobao.org
nj —– https://registry.nodejitsu.com
rednpm - http://registry.mirror.cqupt.edu.cn
npmMirror https://skimdb.npmjs.com/registry
edunpm - http://registry.enpmjs.org

1. 临时使用

1

npm --registry https://registry.npm.taobao.org install xxx

2. 持久使用

去掉对某些文件的 track：

1

git rm --cached <file path>

git commit 的提交日志上，除了文字，还可以有图标。叫做 git commit emoji。

什么是网页的大小和浏览器窗口

• 网页大小就是一张网页的全部面积，通常情况，网页大小由内容和CSS样式表决定。
• 浏览器窗口大小，是指浏览器窗口中看到的那部分网页面积，又叫视口（viewport）。

获取浏览器窗口大小

可以通过windows对象的 innerHeight 属性获取。
也可以通过元素的 clientHeight 属性获取。网页上每个元素都有 clientHeight 和 clientWidth 属性。这两个属性指元素的内容部分加上 padding 的大小，不包括 border 和滚动条的大小。
大部分情况下 document.documentElement 的大小可以代表浏览器窗口的大小，但是在 IE6 的 quirks 模式中，document.body 才返回正确的值。

如何获取浏览器窗口高度

在 c盘下 windows／system32/drivers/etc/host 文件内，可以添加设置域名，将本地起的服务模拟成域名形式，便于相关前端测试，比如测试跨域。