【javascript基础——系列5】js中的defer和async；parsesint；图片压缩

系列文章

【javascript基础——系列1】前端页面ajax连接后台服务器传输数据

【javascript基础——系列2】前端页面axios连接后台服务器传输数据

【javascript基础——系列3】js中的事件的事件冒泡、事件捕获

【javascript基础——系列4】关于js的数据类型以及判别方法

【javascript基础——系列5】js的defer和async；parsesint；图片压缩

【javascript基础——系列6】常见的5种JS设计模式；发布订阅者模式

【javascript基础——系列7】变量提升函数提升；内存泄漏

【javascript基础——系列8】函数传参传递值还是引用；函数式编程

【javascript基础——系列9】函数防抖与节流

【javascript基础——系列10】js中隐藏元素的几种方法以及代码

【javascript基础——系列11】跨域存在的原因以及解决办法

---

---

一、js中defer和async的区别

首先，假设没有defer或者async属性时，浏览器会立即加载并执行相应的脚本，也就是说在渲染script标签之后的文档之前，不等待后续加载的文档元素，读到就开始加载和执行，这样就会导致阻塞后续文档的加载。

<script src="example.js"></script>

1.1 async

有了async后，后续文档的加载和渲染与js脚本的加载和执行是并行进行的，即异步执行。

<script async src="example.js"></script>

1.2 defer

有了defer后，加载后续文档的过程和js脚本的加载（此时仅加载不执行）是并行进行的（异步），js脚本的执行需要等到所有元素都解析完成之后，DOMContentLoaded事件触发执行之前。

<script defer src="example.js"></script>

1.2 defer与async区别

defer和async的共同点是都能进行并行加载文件，不会阻塞页面的加载，不同的是defer加载完成之后，js会等待整个页面全部加载完成之后再执行，而async是等到加载完成之后会马上执行js，如果对js执行有严格顺序的话，建议使用defer加载。

---

二、关于parseint

parseint（）函数可以解析一个字符串并且返回一个整数。

语法：
parseint（string，radix）

参数	描述
string	需要被解析的字符串
radix	要解析的数字的基数（进制）

parseint（’10‘）；//返回10
parseint（’19‘，10）//返回19（10+9）
parseint（’11‘，2）//返回3（2+1）
parseint（’17‘，8）//返回15（8+7）
parseint（’1f‘，16）//返回36（16+15）

如果string以0开头，那么会把其后的字符解析为八进制或者十六精致的数字，如果string以1-9的数字开头，就会解析为十进制的整数。

---

三、js中图片压缩

3.1 图片压缩原理

使用canvas的drawimage（）方法。canvas本质是一张位图，而drawimage（）方法可以把一张大大的图片绘制在小小的canvas画布上，就等同于图片压缩。

3.2 代码实现原理

一张图片原始尺寸是4000* 3000，要把尺寸限制再400* 300大小：

var canvas=document.createElement（'canvas');
var context=canvas.getContext('2d');
canvas.width=400;
canvas.height=300;
context.drawimage(img,0,0,400,300)

3.2 上传或下载

1. canvas.toDataURL()
2. canvas.toBlob()