zoukankan      html  css  js  c++  java
  • YouTube Cobalt 浏览器支持

    Cobalt介绍:

    Cobalt浏览器是YouTube公司定制的一款专用浏览器,Cobalt的使命,是在电视机端,使用灵活多变web形式实现流畅的交互操作,从而替代Android,与普通浏览器不同,Cobalt在W3C定制的协议基础上做了定制缩减,使浏览器变得更加轻量,这就意味着在开发过程中很多技术会得到限制,可以将Cobalt理解为 ‘瘦版’ 的Chrome。

    因为第一次接触到Cobalt浏览器,而且国内几乎没有任何关于Cobalt的介绍以及技术支持,所以在项目中摸索了下,写下了本文,全篇仅供参考,若有错误的地方欢迎指出,我会测试后及时改正,希望对你能有所帮助!

    英文文档参考地址: https://cobalt.foo/development/reference/supported-features.html#protocols

    Cobalt支持总结

    一.HTML5页面结构精简:

    在页面结构上,Cobalt抛弃了大量html5语义化标签,这也使得结构的丰富性及可读性降低,除去页面必须的结构:

    <html>、<head>、<meta>、<body>、<link>(仅用于css引入)、<script>、<style>之外,其余可供使用只有<div>、<span>、<video>标签。

    浏览器对页面结构的支持仅剩这十来种,唯一可供操作的只有<div>、<span>、<video>,项目中经常会用到的图片img,显示时得通过给div加背景图片来实现,Cobalt去除了语义化标签,所以在浏览器的内存消耗以及页面渲染可以得到非常好的优化,渲染速度可以大幅提升。

    二.Css3 样式表

    Css的支持没有太大的简化,基本Css3的属性都有支持,包括动画animation、背景background及背景操作、边框border、颜色color、字体font、盒子模型属性margin和padding等、透明度opacity、定位position、2/3D转换、文本效果等,但是并不支持常用的flex布局格式。

    三.Css选择器

    支持简单的选择器 *, type, class, id, :empty, :focus, :not()

    支持伪类 :before, :after

    支持连接符 >, +, ~

    支持多个class操作 ,

    选择器方面,Cobalt抛弃了常用的element、悬停选择四种状态、子元素选择器nth-child等。

    四.JavaScript

    4.1 Crypto.getRandomValues:支持调用随机数

    4.2 CSSOM(CSS Object Model):Css对象模型

    1)通过提供更多的技术特性(以提高可测试性和互操作性),改进先前的工作;

    2)弃用或删除某些在Cobalt中被认为是不必要的特性;

    3)新指定已经或预期将被广泛实施的某些扩展。

    支持使用媒体查询Media Queries;

    支持选择器:包含类选择器‘.’,ID选择器‘#’,伪类选择器‘:th-chlid()’等等;

    支持JS对CSS的样式操作;

    4.3 CSSOM View Module:Css视图模型

    支持Css视图溢出overflow;

    支持以标准的px像素为默认单位;

    支持缩放;

    支持滚动操作;

    4.3.1 window:

    features open(),为open方法预留了第三个参数,以便实现将来的操作;

    MediaQueryList;

    Screen,支持输出设备屏幕的信息。

    4.3.2 document:

    document.elementFromPoint,返回当前文档上处于指定坐标位置最顶层的元素;

    Document.caretPositionFromPoint;

    4.3.3 element:

    支持element操作;

    支持offset操作;

    4.3.4 MouseEvent:

    支持查询鼠标当前位置;

    Ps:文档中表示不支持滚动条、不支持移动、不支持resizing监视窗口变化,跟内容解释有些许冲突,可在后续测试中解决)

    4.4 支持Console.log打印信息

    4.5 DOM4

    支持基本UI事件、元素遍历、选择器、DOM操作等;

    4.5 EncryptedMedia Extensions v0.1b

    支持加密媒体传输;

    4.6 Image (仅用于预加载和缓存)

    4.7 媒体资源扩展

    此提案尚未发布,扩展了HTMLMediaElement以允许JavaScript生成用于播放的媒体流。允许JavaScript生成流有助于实现各种用例,如自适应流式传输和时移实时流。

    4.8 Array数组

    支持数组大部分常规的操作

    4.9 URL

    支持使用构造函数新建URL;

    支持URL的操作;

    4.10 支持部分web audio

    4.11 web storage

    支持HTML5新特性本地缓存localStorage 和瞬时缓存sessionStorage

    4.12 XMLHttpRequest Level 1

    支持HTTP 1.0

    五.协议支持

    https

    h5vcc

    CSP2

    不支持ftp、file,不支持文件的上传,精简的Cobalt浏览器只用于显示。

    六.媒体格式

    视频类型支持:FLV、MKV、MP4/FMP4、WAV

    编码格式支持:AAC、AVC(H.264) at 1080p/60fps、VP8/Vorbis、VP9/Opus、16-bit setereo PCM audio(for sound effects)

    图片格式支持:JPEG、PNG、WebP(非动画)

    因为一个网页占内存最大的其实就是图片和视频,渲染和加载会消耗大量内存和网络,Cobalt对媒体格式做了大量的限制,常用的RMVBMOVAVIWMVMOV等都无法渲染,废除了BMPGIFTIFFSVGTGA等,保留下最常用的JPGPNGWebP,尽量减轻浏览器负载,释放内存,在Cobalt浏览器上统一规范,加快页面响应,提升用户体验。

  • 相关阅读:
    【我的物联网成长记5】如何进行物联网大数据分析?
    云图说|华为云数据库在线迁移大揭秘
    #化鲲为鹏,我有话说# 鲲鹏弹性云服务器配置 Tomcat
    JQuery中$.each 和$(selector).each()的区别详解【转】
    PHP 这个设置 ini_set('memory_limit', '200M') 的生效时间
    [转]PHP底层运行原理和zend编译机制学习
    [转]memcache 缓存图片 示例
    [转]memcache 和 redis 区别
    MYSQL 常用,有用语句
    php curl的几个例子【转】
  • 原文地址:https://www.cnblogs.com/wangqiao170/p/9155914.html
Copyright © 2011-2022 走看看