亮亮的笔记本

# HTML

# meta (opens new window)

网页元数据

属性：charset,http-equiv,name

  • http-equiv 对应的值有: X-UA-Compatible,content-type,x-dns-prefetch-control 另外一些缓存的不生效
  • name 对应的值有：author，description，keywords，viewpoint，robots，renderer，

# SEO (opens new window)

  1. title 标签
  2. meta description
  3. meta keywords
  4. html 语义化
  5. 重要的东西放前面
  6. 少用 iframe
  7. 爬虫地图文件

# DOM (opens new window)

# DOM 事件

DOM 事件机制 (opens new window)

DOM 级别一共可以分为四个级别：DOM0 级、DOM1 级、DOM2 级和 DOM3 级 DOM 事件分为 3 个级别：DOM 0 级事件处理，DOM 2 级事件处理和 DOM 3 级事件处理

  1. DOM 0 级事件 el.onclick=function(){}
  2. DOM 2 级事件 el.addEventListener(event-name, callback, useCapture)
  3. DOM 3 级事件 添加了更多事件

DOM 事件模型和事件流

  • 捕获
  • 目标
  • 冒泡 默认

事件代理/事件委托

为了不必将子元素都添加事件函数，利用了冒泡机制，捕获子元素父级事件来判断子元素的触发

Event 对象常见的应用

  • event.preventDefault() 取消事件默认行为
  • event.stopPropagation() 阻止冒泡
  • event.stopImmediatePropagation() 既能阻止事件向父元素冒泡，也能阻止元素同事件类型(比如一个元素可以添加任意多个点击事件)的其它监听器被触发

冒泡和捕获 (opens new window)

# BOM

  1. window
    • hashchange
  2. location
  3. navigate
  4. screen
  5. history (opens new window) -> Vue-Router 的实现原理 (opens new window)
    • pushState
    • replaceState
    • popState

# 图解 script 标签中的 async 和 defer 属 性 (opens new window)

在<script>元素中设置 defer 属性，相当于告诉浏览器立即下载，但延迟执行。

defer 和 async 的区别

defer 等渲染好了有序执行

async 等下载好了立马执行

async vs defer attributes (opens new window)

使用场景：

  • 如果当脚本不依赖其他脚本的时候，使用async，这样脚本时机会比 defer 更快
  • 如果一个脚本依赖另一个脚本，使用defer，保证执行顺序有序执行
  • 当你的脚本存在获取DOM的操作时，应该使用defer因为，使用 async可能获取的到DOM可能获取不到，async下载完会立即执行脚本，导致解析HTML暂停

# preload/prefetch

link 的 ref属性 (opens new window) 资源可以是字体，css,js

  • preload 告诉浏览器立即加载资源，例如：希望加载完字体以后再进行渲染。
  • prefetch 告诉浏览器在空闲时才开始加载资源
  • preload、prefetch 仅仅是加载资源，并不会“执行”
  • preload、prefetch 均能设置、命中缓存
  • 正确使用 preload、prefetch 不会导致重复请求

preload is a value for the rel attribute of the tag. it simply tells the browser to prioritize fetching that content (CSS, font, ...) before rendering the page. Preload works on current navigation. e.g you want to show a text with a specific font but you don't want the user to see the text with another font before the intended font is downloaded. so you can add a rel=" preload" to the tag of that font to prevent this.

# preload/prefetch/async/defer区别

where-to-use-async-defer-and-where-to-use-preload-prefetch-while-loading-assets (opens new window) Async vs Defer vs Preload vs Server Push (opens new window)

link 与 import , 本质使用上，我们都是用他来引入 css，但是他们有一定的区别。

  1. link 是一种引入资源的标签，import 是引入 css 的方式。所以，import 引入的只能是 css，而 link 可以引入所有的资源，包括图片，RSS 等。

  2. 加载顺序上也有一些差异。link 引用的 CSS 会同时被加载。import 引用的 CSS 会等到页面全部被下载完再加载。

  3. 兼容性的差别。link 无任何兼容问题，import 兼容 IE5 以上。（当然，IE5 估计也找不到了）

  4. 动态引入样式 link 可以后期引入样式，而 import 是不可以后期引入的，只能初始化页面之前引入。

  5. 复用率的问题 import 可以复用之前的 css 文件，而 link 只能一次引用一个文件。当然，import 复用文件时，在浏览器实际上是加载了多个文件，会有多个请求。而每一个 link 只是一个 http 请求。

参考文章

Css →