每日思考（2020/01/04）

题目概览

• 对标签的理解
• rgba()和opacity这两个的透明效果有什么区别?
• 为浏览器元素添加一个随机颜色的边框
• 在浏览器中输入url到页面显示出来的过程发生了什么

题目解答

对标签的理解

• 定义：元素可提供相关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词等等。标签位于文档的头部标签内，不包含任何内容。 标签的属性定义了与文档相关联的【名称/值对】。

  HTML 4.01 ：
   HTML5     ：

• 属性

  属性	值	描述
  content（必需）	some_text	定义与 http-equiv 或 name 属性相关的元信息
  http-equiv	content、type-expires、refresh、set-cookie	把 content 属性关联到 HTTP 头部。
  name	author、description、keywords、generator、revised、others	把 content 属性关联到一个名称。
  scheme	some_text	定义用于翻译 content 属性值的格式。

• 常用属性：

  • name属性：

  • http-equiv属性

  • 自定义meta

    • Facebook / Open Graph

    • Apple

    • 个人自定义

  • 标签优化：细化监控范围和内容；使用动态的，语义化的meta描述；极大化配合搜索引擎的工作

rgba()和opacity这两个的透明效果有什么区别

• opacity 是属性，rgba()是函数，计算之后是个属性值；
• opacity 作用于元素和元素的内容，内容会继承元素的透明度，取值0-1；
• rgba() 一般作为背景色 background-color 或者颜色 color 的属性值，透明度由其中的 alpha 值生效，取值0-1；

为浏览器元素添加一个随机颜色的边框

[].forEach.call($$("*"), function (a) {
    a.style.outline = "1px solid #" + (~~(Math.random() * (1 << 24))).toString(16)
})
//[].forEach.call() => 调用引用数组的forEach方法
//$$('*') => document.querySelectorAll('*')
//~~a => parseInt(a)
//1<<24 => 对二进数1小数点右移24位
//(parseInt(Math.random()*(1<<24)).toString(16)) => 获得了一个位于0-16777216之间的随机整数，也就是随机颜色，再使用toString(16)将它转化为十六进制数

在浏览器中输入url到页面显示出来的过程发生了什么

• 用户在浏览器中输入网址后，浏览器会先对输入的地址进行解析。比如用的协议 http 还是 https
• 之后会根据域名进行 IP 的寻址
  • 寻址先从缓存开始，如 host
  • 之后再访问 DNS 服务器，一层一层直至访问到根服务器
  • 服务器再把 IP 告诉客户端
• 客户端拿到 IP 后发起请求
  • 与服务器进行 HTTP 连接建立（3 次握手）
• 建立成功后服务器返回数据，浏览器进行渲染
  • DOM 树构建、CSSOM 树的构建、JavaScript 资源下载
    • CSS 的重排重绘，CSSOM 与 DOM 一起进行绘制
    • JavaScript 资源的阻塞
• 渲染出页面