Home

Appearance

HTML 相关 ​

1. src和href的区别 ​

答案

src和href都是用来引用外部的资源，它们的区别如下：

src： 表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置。src会将其指向的资源下载并应⽤到⽂档内，如请求js脚本。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，所以⼀般js脚本会放在页面底部。

href：表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系。当浏览器识别到它他指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理。 常用在a、link等标签上。

2. script标签中defer和async的区别 ​

答案

如果没有defer或async属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。

defer 和 async属性都是去异步加载外部的JS脚本文件，它们都不会阻塞页面的解析，其区别如下：

执行顺序：

  • 多个带async属性的标签，不能保证加载的顺序；
  • 多个带defer属性的标签，按照加载顺序执行；

脚本是否并行执行：

  • async属性，表示后续文档的加载和执行与js脚本的加载和执行是并行进行的，即异步执行；
  • defer属性，加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步)，js脚本需要等到文档所有元素解析完成之后才执行，DOMContentLoaded事件触发执行之前。

3. img的srcset属性的作⽤？ ​

答案
javascript
<img 
  src="image-128.png" 
  srcset="image-128.png 128w, image-256.png 256w, image-512.png 512w" 
  sizes="(max-width: 360px) 340px, 128px" 
/>
<img 
  src="image-128.png" 
  srcset="image-128.png 128w, image-256.png 256w, image-512.png 512w" 
  sizes="(max-width: 360px) 340px, 128px" 
/>

4. H5 的离线存储 ​

答案

html

html
<!DOCTYPE HTML>
<html manifest = "cache.manifest">
...
</html>
<!DOCTYPE HTML>
<html manifest = "cache.manifest">
...
</html>

CACHE MANIFEST

CACHE MANIFEST
#v0.11

CACHE:
lib/ionic/js/ionic.bundle.js
lib/angular-ui-router.js
js/app.js
lib/ionic/css/ionic.css
css/style.css
views/login_header.html
views/login.html
lib/ionic/fonts/ionicons.ttf?v=1.5.2
lib/ionic/fonts/ionicons.woff?v=1.5.2

NETWORK:
lib/ionic/fonts/ionicons.ttf?v=1.5.2
lib/ionic/fonts/ionicons.woff?v=1.5.2
css/style.css
CACHE MANIFEST
#v0.11

CACHE:
lib/ionic/js/ionic.bundle.js
lib/angular-ui-router.js
js/app.js
lib/ionic/css/ionic.css
css/style.css
views/login_header.html
views/login.html
lib/ionic/fonts/ionicons.ttf?v=1.5.2
lib/ionic/fonts/ionicons.woff?v=1.5.2

NETWORK:
lib/ionic/fonts/ionicons.ttf?v=1.5.2
lib/ionic/fonts/ionicons.woff?v=1.5.2
css/style.css