每日思考(2019/12/19)
题目概览
- 常见的浏览器内核都有哪些?并介绍下你对内核的理解
- 说说你对css盒子模型的理解
- 简要描述下JS有哪些内置的对象
- Web实时消息推送技术有哪些方式
题目解答
常见的浏览器内核都有哪些?并介绍下你对内核的理解
- 概念:内核主要分为渲染引擎和 JS 引擎。前者负责页面的渲染,后者负责执行解析 JavaScript。
之后,由于 JS 引擎越来越独立,现在所说的浏览器内核大都指渲染引擎 - Trident: 由微软开发,即熟知的 IE 内核
- Gecko: 使用 C++ 开发的渲染引擎,包括了 SpiderMonkey 即熟悉的 FireFox
- Presto: Opera 使用的内核
- Webkit: 前端使用最多的 Chrome 和 Safari 使用的内核
说说你对css盒子模型的理解
- css盒模型由两个盒子组成,外在的控制是否换行的盒子,以及内在的控制元素内容的盒子。比如:display: inline-block, 则它的外在的盒子就是inline也就是不占据一行,而block则表示内部的元素具有块状特性。所以,display: inline其实就是display: inline-inline的缩写,display: block就是display: block-block的缩写。
- 每一个内在的盒子有: width/height, padding, border, margin这几个控制盒子大小的属性。其中 width/height控制元素内容大小,padding则控制元素内容到border线内侧距离,border则是元素外围边框大小,而margin则是控制与其他元素的间距,它的背景透明。
- 对于早期,计算一个元素的占据大小,需要通过width +2* padding + 2*border来计算,css3中提出了box-sizing:border-box,通过这样设置,就可以使元素最终的宽高就是设定的width/height, 浏览器会根据width/height, padding, border的大小来自动调整内部元素的大小。
写一个获取当前url查询字符串中的参数的方法
//方式一:split
function urlParam() {
const search = window.location.search;
search = search.substr(1, search.length);
const res = {};
if (!search) return res;
search.split('&').map(item => {
const [key, value] = item.split('=');
res[key] = decodeURIComponent(value);
});
return res;
}
//方式二:正则
function urlParam(){
const param = {};
location.search.replace(/([^&=?]+)=([^&]+)/g,(m,$1,$2)=> param[$1] = $2);
return param;
}
Web实时消息推送技术有哪些方式
方式 | 类型 | 技术实现 | 优点 | 缺点 | 试用场景 |
---|---|---|---|---|---|
轮询(polling) | client→server | 客户端循环请求 | 1.实现简单 2.支持跨域 | 1.浪费带宽和服务器资源 2.一次请求信息大半是无用(完整http头信息) 3.有延迟 4.大部分无效请求 | 适于小型应用 |
长轮询(long-polling) | client→server | 服务器hold住连接,一直到有数据或者超时才返回,减少重复请求次数 | 1.实现简单 2.不会频繁发请求 3.节省流量 4.延迟低 | 1.服务器hold住连接,会消耗资源 2.一次请求信息大半是无用 | WebQQ、Hi网页版、Facebook IM |
iframe流 | client→server | 在页面里嵌入一个隐蔵iframe,将这个iframe的src属性设为对一个长连接的请求,服务器端就能源源不断地往客户端输入数据。 | 1.数据实时送达 2.不发无用请求,一次链接,多次“推送” | 1.服务器增加开销 2.无法准确知道连接状态 3.IE、Chrome等一直会处于loading状态 | Gmail聊天 |
WebSocket | client⇌server | new WebSocket() | 1.支持双向通信,实时性更强 2.可发送二进制文件 3.减少通信量 | 1.浏览器支持程度不一致 2.不支持断开重连 | 网络游戏、银行交互和支付 |
【转载文章务必保留出处和署名,谢谢!】