想要获取图片的宽高首先要知道图片的 url；一般图片上传 UI 组件或自己封装的组件都会获取到图片的 url，知道 url 就好办了，上代码。

1
2
3
4
5
6

var Uploadimgurl = URL; //图片URL地址
var img = new Image(); //创建对象
img.src = Uploadimgurl; //改变图片地址
img.onload = function () {
  console.log(img.width + "" + img.height);
};

阅读全文

• Vue-Router路由懒加载（利用Webpack的代码切割）
• 使用CDN加速，将通用的库从vendor进行抽离
• Nginx的gzip压缩
• Vue异步组件
• 服务端渲染SSR
• 如果使用了一些UI库，采用按需加载
• Webpack开启gzip压缩
• 如果首屏为登录页，可以做成多入口
• Service Worker缓存文件处理
• 去除非 HTML 页面的静态资源的 cache-control: no-cache 配置，充分利用客户端缓存
• 减少页面加载时的请求数量。
• 减少 Cookie 中保存的信息或去除请求中的非必要 Cookie 信息
• 压缩图片体积（也可尝试更改图片格式，使用同等质量下体积最小的图片）
• 合并小图片为一张大图或将图片转为 base64 编码
• 延迟加载图片
• 移除冗余代码
• 封装公共组件（减少重复代码）
• 预渲染页面框架或骨架图
• 尽量减少 iframe 使用，它会阻塞主页面的渲染; 对所有资源压缩 JavaScript 、 CSS 、字体、图片等，甚至html;
• 使用link标签的rel属性设置 prefetch（这段资源将会在未来某个导航或者功能要用到，但是本资源的下载顺序权重比较低，prefetch通常用于加速下一次导航）、preload（preload将会把资源得下载顺序权重提高，使得关键数据提前下载好，优化页面打开速度）

1、三目运算符

下面是一个很好的例子，将一个完整的 if 语句，简写为一行代码。

1
2
3
4
5
6
7

const x = 20;
let answer;
if (x > 10) {
  answer = "greater than 10";
} else {
  answer = "less than 10";
}

简写为：

1

const answer = x > 10 ? "greater than 10" : "less than 10";

阅读全文

网站页面上会用到各种小图标，前端以前制作页面的时候，会将这些图片一个个切下来，通过标签设置backgroud使用，这样做会导致请求过多，造成性能瓶颈。后来有人就发明了css sprite(雪碧图)，将这些图标合并到一个图片上，然后通过backgroud-position定位使用，好处是显而易见的，请求瞬间就降低了，图片集中起来也方便维护。

随着项目的庞大，图标也越来越多，然后不停的往雪碧图里塞，很多图标长的都差不多，有些仅仅是颜色或者大小不同，这导致了雪碧图越来越庞大变得不好维护，如下图：

有时候如果前端不注意修改了雪碧图的尺寸或者不小心挪动了其它图标的位置，就会导致某些图标显示错位。

阅读全文

昨天我们说一下关于 git 的一些命令，今天说下它的一些高级操作。

1.检查提交之间的差异

每个提交都以数字和符号的字符串形式存在唯一的 ID。
要查看所有提交及其 ID 的列表，我们可以使用 git log：

阅读全文

记录一下git命令的一些用法

基础

Git是一个命令行实用程序的集合，它会跟踪和记录文件中的更改（通常是源代码，但是可以跟踪任何你想要的文件）。
有了它，你可以恢复项目的旧版本，比较，分析，合并更改等操作。
这个过程被称为版本控制。
有许多版本控制系统可以完成这项工作。
你可能听说过其中的一些–SVN，Mercurial，Perforce，CVS，Bitkeeper等等。
Git是分散的，这意味着它不依赖于中央服务器来保留文件的旧版本。
相反，它完全在本地运行，将这些数据作为一个文件夹存储在硬盘上，我们称之为储存仓库。
但是，你也可以在线存储您的仓库的副本，这使得多个人可以轻松协作并使用相同的代码。这就是像GitHub和BitBucket这样的网站所使用的一样。

阅读全文

• accesskey:设置快捷键，提供快速访问元素如aaa在windows下的firefox中按alt + shift + a可激活元素
• class:为元素设置类标识，多个类名用空格分开，CSS和javascript可通过class属性获取元素
• contenteditable: 指定元素内容是否可编辑
• contextmenu: 自定义鼠标右键弹出菜单内容
• data-*: 为元素增加自定义属性
• dir: 设置元素文本方向
• draggable: 设置元素是否可拖拽
• dropzone: 设置元素拖放类型： copy, move, link
• hidden: 表示一个元素是否与文档。样式上会导致元素不显示，但是不能用这个属性实现样式效果
• id: 元素id，文档内唯一
• lang: 元素内容的的语言
• spellcheck: 是否启动拼写和语法检查
• style: 行内css样式
• tabindex: 设置元素可以获得焦点，通过tab可以导航
• title: 元素相关的建议信息
• translate: 元素和子孙节点内容是否需要本地化

1、类型强制转换

1.1 string强制转换为数字

之前我们有说过用+来转化字符串为数字，今天在分享一种，可以用 *1来转化为数字(实际上是调用 .valueOf方法)

然后使用 Number.isNaN来判断是否为 NaN，或者使用 a!==a 来判断是否为 NaN，因为 NaN!==NaN

1
2
3
4
5

'32' * 1            // 32
'ds' * 1            // NaN
null * 1            // 0
undefined * 1    // NaN
1  * { valueOf: ()=>'3' }        // 3

阅读全文

在日常的项目开发中经常出现却容易被忽略的JavaScript小技巧，今天列举几个学习一下。

1、截取数组

如果您想从数组的末尾删除值，有比使用splice()更快的替代方法。

例如，如果你知道原始数组的长度，就可以通过重新定义它的length属性来实现截取。

1
2
3

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]

这是一个特别简洁的解决方案。但是，slice()方法的运行时更快。如果速度是你的主要目标，考虑使用下面的方式。

1
2
3
4

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);

console.log(array); // Result: [0, 1, 2, 3]

阅读全文