Skip to content

Latest commit

 

History

History
163 lines (96 loc) · 4.52 KB

浏览器.md

File metadata and controls

163 lines (96 loc) · 4.52 KB
Raw

返回主页

1.常见的浏览器内核有哪些？

答案：

Trident 内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称 MSHTML]

Gecko 内核：Netscape6 及以上版本，FF,MozillaSuite/SeaMonkey 等

Presto 内核：Opera7 及以上。 [Opera 内核原为：Presto，现为：Blink;]

Webkit 内核：Safari,Chrome 等。 [ Chrome 的：Blink（WebKit 的分支）]

参与互动

2.如何实现浏览器内多个标签页之间的通信?

答案：调用 localstorge、cookies 等本地存储方式，注意sessionstorge不可以哦

参与互动

3.浏览器的渲染过程

答案：

  1. 解析HTML生成DOM树。
  2. 解析CSS生成CSSOM规则树。
  3. 将DOM树与CSSOM规则树合并在一起生成渲染树。
  4. 遍历渲染树开始布局，计算每个节点的位置大小信息。
  5. 将渲染树每个节点绘制到屏幕。

解析：

  • 使用 HTML 创建文档对象模型（DOM）
  • 使用 CSS 创建 CSS 对象模型（CSSOM）
  • 基于 DOM 和 CSSOM 执行脚本（Scripts）
  • 合并 DOM 和 CSSOM 形成渲染树（Render Tree）
  • 使用渲染树布局（Layout）所有元素
  • 渲染（Paint）所有元素

参考

参与互动

4.为何会出现浏览器兼容问题

答案：

  • 同一产品，版本越老 bug 越多
  • 同一产品，版本越新，功能越多
  • 不同产品，不同标准，不同实现方式

处理兼容问题的思路

  1. 要不要做
  • 产品的角度（产品的受众、受众的浏览器比例、效果优先还是基本功能优先）
  • 成本的角度 (有无必要做某件事)

2.做到什么程度

  • 让哪些浏览器支持哪些效果

3..如何做

  • 根据兼容需求选择技术框架/库(jquery)

  • 根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)

  • 条件注释、CSS Hack、js 能力检测做一些修补

  • 渐进增强(progressive enhancement): 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验

  • 优雅降级 (graceful degradation): 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

解析：参考

参与互动

5.跨标签页的通讯方式有哪些（哔哩哔哩）

答案：

(1) BroadCast Channel
(2) Service Worker
(3) LocalStorage + window.onstorage监听
(4) Shared Worker + 定时器轮询(setInterval)
(5) IndexedDB + 定时器轮询(setInterval)
(6) cookie + 定时器轮询(setInterval)
(7) window.open + window.postMessage
(8) Websocket

6.请求时浏览器缓存 from memory cache 和 from disk cache 的依据是什么，哪些数据什么时候存放在 Memory Cache 和 Disk Cache中？

答案：

7.浏览器如何解析css选择器？

答案：

8.浏览器是如何渲染UI的？

答案：

9.浏览器的主要组成部分是什么？

答案：

10.浏览器性能问题-使用 Webpack 优化项目

答案：

11.怎样选择合适的缓存策略

答案：

12.说说浏览器缓存机制

答案：

13.说说你对Service worker的理解

答案：

14.永久性重定向（301）和临时性重定向（302）对 SEO 有什么影响

答案：

15.浏览器 Eventloop 和 Node 中的有什么区别

答案：

答案：