# 浏览器面试题
# 一、让 chrome 浏览器显示小于 12px 的文字
之前添加谷歌私有属性：
-webkit-text-size-adjust: none;
现在：
-webkit-transform: scale（0.6）
/* 则文字大小为6px 10*0.6 */
# 二、浏览器的标准模式和怪异模式区别
标准模式：浏览器按照 W3C 标准解析执行代码。
怪异模式：浏览器根据自己的方式解析执行代码，因为不同浏览器解析执行方式不一样，所以叫怪异模式。
区别：图片元素的垂直对齐方式对于行内元素和 table-cell 元素。
标准模式下 vertical-align 属性默认值是 baseline，而在怪异模式下，table 单元格中的图片的 vertical-align 属性默认值是 bottom，因此在图片底部会有几像素的空间。
元素中的字体，CSS 中 font 的属性都是可以继承的，怪异模式下，对于table 元素，字体的某些元素不能从其他封装元素继承中得到，特别是 font-size 属性。
内联元素的尺寸标准模式下，non-replaced inline 元素无法自定义大写，怪异模式下，定义元素的宽高会影响元素的尺寸。
元素的百分比高度当一个元素使用百分比高度时，在标准模式下，高度取决于内容变化，在怪异模式下，百分比被准确应用。
元素溢出的处理标准模式下，overflow 取值默认值为 visible，在怪异模式下，这个溢出会被当做扩展 box 对待，就是元素的大小由内容决定，溢出不会裁剪，元素框自动调整，包含溢出内容。
# 三、网页中有大量图片加载很慢，用什么方法进行优化
1.图片懒加载，在图片未可视区域加一个滚动条事件，判断图片位置与浏览器顶端和页面的距离，
如果前者小于后者，优先加载。
2.使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
3.使用 csssprite 或者 svgsprite。
# 四、网页的三层结构
- 结构（html 或 xhtm 标记语言）
- 表现（css 样式表）
- 行为（js）
# 五、web 性能优化
降低请求量：合并资源，减少 HTTP 请求数，minify/gzip 压缩，webP，lazyLoad。
加快请求速度：预解析 DNS，减少域名数，并进行加载， CDN 分发。
缓存：HTTP 协议缓存请求，离线缓存 manifest，离线数据缓存 localStorage。
渲染：JS/CSS 优化，加载顺序，服务端渲染，pipeline。
# 六、浏览器缓存机制
缓存分为两种：强缓存和协商缓存，根据响应的 header 内容来决定。
- 强缓存相关字段有： expires，cache-control，它俩同时存在的话，cache-control 的优先级高于 expires。
- 协商缓存相关字段有： Last-Modified/If-Modified-Since，Etag/If-None-Match。
# 七、浏览器输入网址到页面渲染全过程
- DNS 域名解析 ：网址进行 **DNS 域名解析*8，得到 ip 地址，找到对应的服务器（UDP 协议）。
- 建立 TCP 连接：根据 ip 和 默认端口，和服务器建立 TCP 连接（三次握手）。
- 发送 HTTP 请求 ：浏览器把 HTTP 请求发送给服务器（第三次握手）。
- 服务器响应请求并返回结果：服务器响应 HTTP 请求，浏览器得到 HTML 代码。
- 关闭 TCP 连接：通过四次挥手关闭连接。
- 浏览器解析并渲染页面 ：浏览器*8解析得到的 HTML 内容**，并渲染呈现给用户。
# 八、浏览器对象模型
# 1. location 对象
当前浏览器的 url 为 "https://blog.cn/docs/bom.html#head"
location.href
// https://blog.cn/docs/bom.html#head
location.host // 域名
// blog.cn
location.pathname
// 路径
// /docs/bom.html
location.hash
// 哈希
// head
# 2. history
history 缓存了用户预览的网页记录，比如用户在当前窗口访问了两个网页，这些记录会保存到 history 中。
history.go(n)
// 跳转特定记录页面 负值代表往后
history.back()
// 后腿一步
history.forword()
// 前进
# 3. navigetor对象
Navigator 对象包含有关浏览器的信息。
# 九、网络中使用最多的图片格式
- 图片格式
JPEG、GIF、PNG，最流行的是 jpeg 格式，可以把文件压缩到最小。
在 ps 以 jpeg 格式存储时，提供 11 级压缩级别。
- PNG、GIF、JPG 的区别
GIF:
8 位像素，256 色 无损压缩 支持简单动画 支持 boolean 透明 适合简单动画
JPEG：
颜色限于 256 有损压缩 可控制压缩质量 不支持透明 适合照片
PNG：
有 PNG8 和 truecolor PNG PNG8 类似 GIF 颜色上限为 256，文件小，支持 alpha 透明度，无动画 适合图标、背景、按钮