web知识点

该文章记于2021.04.13

一、display:none与visibility：hidden的区别？

display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）
visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

二、posiiton取值

static
relative
absolute
fixed
inherit
initial
unset
sticky

三、for in 与 for of 的区别

for in 遍历的是索引（键名），for of 遍历的是值
for in 可以遍历对象，且可遍历自身及原型上可枚举的属性
for of 只能遍历具有迭代器接口的数据，如果想遍历对象可以使用Object.keys()将对象的键名生成一个数组
for in不会遍历空数组，稀松数组会跳过空位。

for in 遍历的是对象的可枚举属性
for of 遍历的是对象的迭代器属性
forEach 只能遍历数组，且不能中断（break等无效）

四、localStorage 与 sessionStorage 与cookie的区别总结

共同点： 都保存在浏览器端且同源。
localStorage，sessionStorage统称为webStorage，保存在浏览器，不参与服务器通信。大小为5M。
生命周期不同：localStorage永久保存，sessionStorage当前会话。都可以手动删除。
作用域不同： 不同浏览器不共享local和session，不同会话不共享session。
Cookie：设置的过期时间前一直有效，大小4K。有个数限制，各浏览器不同，一般为20个。携带在http头中，过多会有性能问题。可自己封装，也可用原生。

localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

五、什么是同源：协议相同 域名相同 端口相同

同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。
如果非同源，共有三种行为受到限制。
（1） Cookie、LocalStorage 和 IndexDB 无法读取。
（2） DOM 无法获得。
（3） AJAX 请求不能发送。

六、h5新特性

1.用于绘画的canvas
2.用于媒介回放的video和audio
3.本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失
sessionStorage的数据在浏览器关闭后自动删除
4.语义化更好的内容元素：article、footer、header、nav、section
5.表单控件：calendar、date、time、email、url、search

七、css3新特性

1.选择器
2.透明度
3.多栏布局
4.多背景图
5.Word Wrap
6.文字阴影
7.@font-face
8.圆角（边框半径）
9.边框图片
10.盒阴影
11.盒子大小
12.媒体查询
13.语音

八、什么是URL？

URL，统一资源定位符，Uniform Resource Locator

通过实例分析URL组成部分

http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument

http //协议，其他协议：https，mailto:（打开邮件客户端），ftp:（处理文件传输）
www.example.com //域名
:80 //端口
/path/to/myfile.html //网络服务器上资源的路径
?key1=value1&key2=value2 //提供给网络服务器的额外参数
#SomewhereInTheDocument //资源本身的另一部分的锚点

绝对URL、相对URL

绝对URLhttp://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument
如果 URL 的路径部分以“/”字符开头，则浏览器将从服务器的顶部根目录获取该资源，而不引用当前文档给出的上下文
使用从 UNIX 文件系统世界继承的../写入约定来告诉我们要从一个目录上升的浏览器
相对URL：
从位于以下 URL 的文档中调用 URL：

https://developer.mozilla.org/en-US/docs/Learn
// 子资源
Skills/Infrastructure/Understanding_URLs

因为该URL不以/开头，浏览器将尝试在包含当前资源的子目录中查找文档

九、什么是域名？

将IP处理成方便人类理解、记忆的地址，称作域名

结构

一个域名是由几部分（有可能只是一部分，也许是两部分，三部分...）组成的简单结构，它被点分隔，不同于中文书写顺序，它需要【从右到左】阅读

域名组成结构

TLD

Top-Level Domain，顶级域名，告诉用户域名所提供的服务类型
顶级域名既可以包含拉丁字母，也可以包含特殊字符。顶级域名最长可以达到 63 个字符，不过为了使用方便，大多数顶级域名都是两到三个字符

二级域名

刚好位于 TLD 前面的标签也被称为二级域名 (SLD)

十、DNS如何工作？

DNS 刷新

DNS 数据库存储在全球每个 DNS 服务器上，所有这些服务器都源于 (refer to) 几个被称为“权威名称服务器”或“顶级 DNS 服务器”。只要您的注册商创建或更新给定域名的任何信息，信息就必须在每个 DNS 数据库中刷新。知道给定域名的每个 DNS 服务器都会存储一段时间的信息，然后再次刷新（DNS 服务器再次查询权威服务器）。因此，知道此域名的 DNS 服务器需要一些时间才能获取最新信息
注意 : 这个时间一般被称为 传播时间 。然而这个术语是不精准的，因为更新本身没有传播 (top → down)。被你电脑 (down) 查询的 DNS 服务器只在他需要的时候才从权威服务器 (top) 中获取信息

工作顺序

1.在浏览器地址栏输入mozilla.org
2.浏览器询问计算机是否已经识别此域名所确定的 IP 地址（使用本地 DNS 缓存），如果是，这个域名被转换为 IP 地址，然后浏览器与网络服务器交换内容，结束
3.如果计算机不知道 mozilla.org 域名背后的 IP, 它会询问一个 DNS 服务器，这个服务器的工作就是告诉你的电脑已经注册的域名所匹配的 IP，与网络服务器蒋欢内容，结束

十一、什么是网络服务器？

网络服务器示意图

十二、在浏览器里输入一个网址时到底发生了什么?

1.浏览器在域名系统（DNS）服务器上找出存放网页的服务器的实际地址
2.浏览器发送 HTTP 请求信息到服务器来请拷贝一份网页到客户端（在客户端和服务器之间传递的数据都是通过互联网使用 TCP/IP 协议传输）
3.服务器同意客户端的请求后，会返回一个“200 OK”信息，意味着“你可以查看这个网页，给你～”，然后开始将网页的文件以数据包的形式传输到浏览器
4.浏览器将数据包聚集成完整的网页然后将网页呈现给你

十三、解析组成文件的顺序

1.浏览器首先解析 HTML 文件，并从中识别出所有的 "link" 和 "script" 元素，获取它们指向的外部文件的链接
2.继续解析 HTML 文件的同时，浏览器根据外部文件的链接向服务器发送请求，获取并解析 CSS 文件和 JavaScript 脚本文件
3.接着浏览器会给解析后的 HTML 文件生成一个 DOM 树（在内存中），会给解析后的 CSS 文件生成一个 CSSOM 树（在内存中），并且会编译和执行解析后的 JavaScript 脚本文件
4.伴随着构建 DOM 树、应用 CSSOM 树的样式、以及执行 JavaScript 脚本文件，浏览器会在屏幕上绘制出网页的界面；用户看到网页界面也就可以跟网页进行交互了

十四、web相关概念

1.跨浏览器兼容性（逐步增强，平稳降级）
2.响应式网页设计（功能和布局）
3.性能（速度）
4.可访问性（多样性、包容性---视听认知肢体障碍人士，中老年，移动设别，不同文化，网络不稳定）
5.国际化（语言）
6.隐私与安全