Search
浏览器相关
Last updated
Nov 1, 2021
# 1. 如何实现浏览器内多个标签页之间的通信?
- WebSocket SharedWorker
- 也可以调用 localstorge、cookies 等本地存储方式。 localstorge 在另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，我们通过监听事件，控制它的值来进行页面信息通信。
注意：Safari 在无痕模式下设置 localstorge 值时会抛出QuotaExceededError 的异常~~~~
# 2.webSocket如何兼容低浏览器？
- Adobe Flash Socket ActiveX HTMLFile (IE) 基于 multipart 编码发送 XHR 基于长轮询的 XHR
- 引用WebSocket.js这个文件来兼容低版本浏览器。
# 3.页面可见性（Page Visibility）API 可以有哪些用途？
- 通过visibility state的值得检测页面当前是否可见，以及打开网页的时间。
- 在页面被切换到其他后台进程时，自动暂停音乐或视频的播放。
# 4.前端性能优化？
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| 前端性能优化主要是为了提高页面的加载速度，优化用户的访问体验。我认为可以从这些方面来进行优化。
第一个方面是页面的内容方面
（1）通过文件合并、css 雪碧图、使用 base64 等方式来减少 HTTP 请求数，避免过多的请求造成等待的情况。
（2）通过 DNS 缓存等机制来减少 DNS 的查询次数。
（3）通过设置缓存策略，对常用不变的资源进行缓存。
（4）使用延迟加载的方式，来减少页面首屏加载时需要请求的资源。延迟加载的资源当用户需要访问时，再去请求加载。
（5）通过用户行为，对某些资源使用预加载的方式，来提高用户需要访问资源时的响应速度。
第二个方面是服务器方面
（1）使用 CDN 服务，来提高用户对于资源请求时的响应速度。
（2）服务器端启用 Gzip、Deflate 等方式对于传输的资源进行压缩，减小文件的体积。
（3）尽可能减小 cookie 的大小，并且通过将静态资源分配到其他域名下，来避免对静态资源请求时携带不必要的 cookie
第三个方面是 CSS 和 JavaScript 方面
（1）把样式表放在页面的 head 标签中，减少页面的首次渲染的时间。
（2）避免使用 @import 标签。
（3）尽量把 js 脚本放在页面底部或者使用 defer 或 async 属性，避免脚本的加载和执行阻塞页面的渲染。
（4）通过对 JavaScript 和 CSS 的文件进行压缩，来减小文件的体积。
|