整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
TML5方兴未艾，但也有不少遗憾。下面提了10点希望在HTML6中看到的特性，欢迎评论。
我们可能永远不会解决与压缩编解码器的争斗，但我们可以与之配合。不同的压缩算法可能需要更多的工作来实现，但是它们提供竞争。能对展现在页面上的视频帧提供更多控制的方式会是更好的方案。当前的标准是使用视频中的一系列帧填充一个矩形。然后提供了一个带有注释，字幕和其他内容的文本轨道的控制。一些聪明的人已经开始将注释与其他DOM对象同步。但是如果有回调钩子和同步机制是不是更好？例如，DOM与视频混合的能力如何？
照片在屏幕上看起来要漂亮，需要多少像素？这个答案根据根据设备的不同而不同。即使窗口的大小也会改变最小分辨率。但HTML标准
<img>
标签只能获得一个SRC，它指向一个可能有太多或太少像素的图像文件。如果它太多，浏览器必须降级图像才能显示，这就浪费网络带宽和时间。如果像素太少，效果又太差。更好的HTML协议应该为图像提出所需的宽度或高度，以便服务器可以提供最佳分辨率。
标准的HTML浏览器使用且只是用JavaScript。但由于某些原因，我们需要用script标签的type属性设定为text/javascript来指定语言类型。从html4开始，type一直就没有默认值。
HTML4的建议稿觉得有人可能会使用像text/tcl或text/vbscript这样的类型，但是实际上有没有人使用这些？微软已经弃用了IE11的text/vbscript，而且近年来Sun在使用tcl。
Google正在慢慢推Dart，但包括Dart的Chromium（Chrome的开发版）确有一个不祥的警告 ：“不要使用Dartium作为主浏览器，不要将Dartium分发给用户！”说明Google对Dart也不是很有信心。
但在未来，我们可以拥有更强大的可插拔语言。它将为开发人员增加更多的灵活性和设计选择。会不会把互联网弄坏？如果有一个稳固的开源实现，它就可以被所有浏览器采用。可能很难让网站使用可插入语言来为广泛的受众提供内容 - JavaScript会可以继续拥有广泛的网络基础 - 但是对于使用专门语言的更专业的扩展来说，这可能是一个很好的选择。
想超越JavaScript的开发人员可以有另外一个解决方案，就是将其他语言转换为JavaScript。许多开发人员已经使用一些翻译语言（如CoffeeScript）的预处理器。
杰里米·阿什肯纳斯（Jeremy Ashkenas） 列出来了可以编译成JavaScript的语言列表，范围很广。Lisp，Python，Ruby，Erlang，Scala - 列表还在继续扩大。
这样的提案将会付出代价。当一种语言被交叉编译成JavaScript时，通常会在同一时间进行细化，生成一个更小的更容易通过互联网传输的版本。在部署过程中执行此操作比在每个人的浏览器上执行的效率要高得多。
但是，缩小的版本有其缺点。开放一直是网络的巨大优势之一。我们能够通过阅读通常仍然以人类可读的形式写的JavaScript代码来学习和调试。交叉编译和缩小的代码对于其他人是无价值的。它正在慢慢打破Web的开放性。
在浏览器中执行此转换还有其他优点。每台机器都有不同，转换过程需要利用到RAM大小、视频卡库等知识。当前版本的HTML假定采用JavaScript的一般版本，这使得为本地机器优化代码变得更难。
JavaScript编程的世界已经被jQuery以及其他标准库改造了。然而，几乎每个网站仍然要加载自己加载某个版本的副本。在加载jQuery时浪费的能量可能足以照亮一个小国家，治愈癌症或两者兼而有之。
一些网站使用像Google或Yahoo这样的公司托管的标准缓存版本，这样可以节省带宽，但下一个HTML标准应该比这更好。如果大量设计人员同意，则可以使用浏览器进行分发。这将节省更多时间再次刷新jQuery的缓存版本。
浏览器已经可以共享位置信息。期待更多国家加入。人们通常希望在自己设备的联系信息库里面放入电子邮件地址或电话号码。现在他们必须剪切和粘贴。为什么不让JavaScript挖掘并保存所有的剪切和粘贴？这对移动设备来说是非常棒的。在交互上可以提供细粒度的控制，允许人们来自某些域的代码可以自动访问到联系信息，而其他域不行。
在网络摄像头和手机的多摄像头提供的设备基础上，用户与浏览器交互的场景少不了镜头和麦克风。W3C已经在探索一种向表单添加照片或视频捕获的方法 。一些浏览器已经支持自己的版本，如
webkitGetUserMedia
。很容易想到更多。表单元素还可以访问存储在设备中的存储空间，并且该设备可以更好地控制摄像机和捕获速率。这将让网站与专门的应用程序竞争。
鉴于构建可信硬件是多么困难的事情，因此我们可能会提供很多硬性和快速认证的方式。而浏览器可以为此提供更多的功能。浏览器可以使用嵌入式Key进行签名，而不是Cookie。这些可以以硬化的芯片存储在设备之外，以防止人们提取密钥。向浏览器添加API将允许网站要求更好的数字签名。如果把太多的信任放在其中，这可能是危险的，但这将是cookie和会话身份验证的一个步骤。
文章底部的注释部分只是我们如何注释文章的开始，但是一个标准的结构可以添加与段落、句子、甚至单词相关的注释。复杂的版本甚至可以允许对视频内的图像或某个时间点进行注释。有些网站正在开始提供这些功能，但在标准化API方面会使所有网站和浏览器都以相同的方式处理基本注释。W3C有一个研究该领域并提供基本标准的小组。
HTML标签区分标题，段落和页脚，但还不够多。为什么不创建一个标准的方法来指定其他常见的细节，例如地址或电话号码的部分？当然，用于描绘电子邮件地址的标准标签可以使垃圾邮件发送者的生活变得更轻松，但标准的一组标签可以加速网页抓取工具和搜索引擎，这将有利于我们所有人。W3C一直在探索微格式来标记数据，并曾经认为它们是HTML5的一部分，尽管它们不是。我们可以为地点，时间，日期，出售物品，参考书目以及所有标准数据使用更全面的标记。
迎来到我的专题文章《前端面试题》系列，更多精彩内容持续更新中，欢迎关注！
正如标题，很多面试官喜欢问这类的问题。它主要考查的是前端开发者对于浏览器的渲染原理的理解程度。那么目的是什么呢？请往下看。
面试的时候，我只是简单的回答了一个请求处理响应的模型，这很显然不能让面试官满意，结果很明显，面试失败。后来回家后仔细研究一番，下面给出我个人的总结吧。
比如我们现在要访问的是百度的首页。
一、域名解析
当用户输入一个网站敲了回车后，浏览器首先寻找你身边最近的DNS服务器做域名解析，如果用户不是第一次输入这个网站，那么浏览器可能从缓存中去拿到之前解析过的IP。这个缓存可以有以下几种情况
二、建立TCP链接
域名解析完成后，浏览器和服务器之间就要开始建立tcp链接，也就是我们常说的三次握手的操作。
这里需要注意的是，有可能第二次握手的时候，有可能是服务器很忙，正在处理其它的业务需求导致不能立马响应浏览器的请求，将会把浏览器的请求驳回。这时候，请求将中断。
三、浏览器发送请求
浏览器将请求发送到服务器。然后接下来就是http协议的通信内容。这一块本身也比较复杂，这里不再展开了说。
四、接受响应
服务器开始处理浏览器提交过来的请求报文。比如浏览器每次提交的时候会带着cookie相关的信息。
五、服务器处理响应
服务器接收到请求后，开始做出响应。并返回结果。比如我们访问的是百度的首页，这时候百度的服务器会将百度首页的html以字符串的形式发送给浏览器。
六、渲染页面
浏览器接收到服务器返回的内容后，开始解析响应报文。
大概也就是这几个步骤了吧。当然，浏览器的渲染过程要比我列举的要复杂的多。
值得注意的是：我们可能能将这些步骤完整的说出来，但是在面试的时候，不能只是说出来这些步骤，我们还要去扩展我们自己的一些观点。
不然面试官问这个浏览器的渲染原理有何意义呢？
前面的步骤中我有提到，当浏览器开始生成布局计算每一个节点的几何信息的时候，会比较消耗性能。
涉及到性能优化的问题，紧接着我们可以带出与浏览相关的dom优化的观点。比如，我们在做dom优化的时候，尽可能的减少页面的重排和重绘。
可以说，在前端开发过程中，页面的重排和重绘，是绝对的性能杀手。尤其是重排。那么哪些情况会带来页面的重排和重绘呢？
到这里，从浏览器的渲染原理，到我们引出浏览器相关的dom优化。这样的回答应该才是面试官想听到的吧。
浏览器的沉浸原理在网上可以搜到很详细的资料大家酌情选择回答即可，但是也不能直接照搬，从浏览器的渲染原理一定要引出自己的一些观点。
只是一味的按网上的回答，也并不一定能使面试官满意。希望我的回答能够帮助到正在和即将要找工作的你们、
这里是【畅哥聊技术】的《前端面试题》专题系列。更多内容持续更新中。
下期我们接着聊，未完待续。。。
产决定消费，电视载体创新、互联网视频服务和技术之间的交替促进，推动着大众家庭影音体验的升级。那么，如何设计电视大屏的家庭影音应用呢？一起来看一下吧。
回顾以前，我们看电视只能看CCTV、江苏卫视、湖南卫视这些直播内容，可是我们不满足于直播节目，想要去广告想要看收费内容想要回放看上课时播出的电视剧。让我印象很深刻的是那种点播台，要打电话用话费点播，来来回回就放的那几个动画。现在，我们可以在电视上语音搜索到热门网络剧，订阅欧冠英超球赛直播、选择各家综艺影视等等。
生产决定了消费，正是电视载体创新、互联网视频服务和技术之间的交替促进在推动着大众家庭影音体验的升级。如何设计电视大屏的家庭影音应用，就是我接下来想要分享的内容，我打算先从电视和手机的几个不同讲起。
用户—上下文场景—行为—工具或媒介—目的。
不同的场景下人和物都有不尽相同的交互方式。
我们使用手机时的用户使用场景可以是移动的，在地铁上在卫生间，利用碎片化时间，而电视通常都是被固定在客厅卧室这样的居家场景中，使用时长是整段的，一般集中在晚上时段。
场景：在什么时间，什么地点，什么样的环境，最后发生什么事情；
电影里场景的分类：内景、外景、实体场景、虚拟场景。
在居家场景中，电视是全家的公共设备，覆盖不同年龄段的人。尤其是老人和小孩，各年龄段使用时段也很不同。因此使用电视时，用户学习成本要低，操作要求更简单，还有不同模式切换。
而手机作为个人物品，更具隐私、个性化的特征。手机虽然各种交互感应很灵敏，但是相对的，操作要求更精确，学习成本高。
与手机相比，电视不适合承担功能型的操作任务，作为一个家庭休闲娱乐设备，使用场景和功能相对单一。休闲娱乐是电视的主要用途，还有学习、智能助手、家居控制、装饰等。
与移动端不同，电视体验发生在不同的空间中，并且需要在3米外清晰可见。在近场交互时实体与触控是第一选择，而当中远场交互时语音成为输入方式的第一选择，遥控器这种远程遥控的实体输入方式学习成本低而被保留至今。
人们经常以轻松的心态使用电视，希望获得一种观看小屏无法获得的身临其境的娱乐体验。电视相比于手机更注重沉浸式体验，做到电影般的效果。
首先，在设计电视端时，我们可以参考安卓和苹果的TV端设计原则来主导界面设计，其次我们依旧可以根据设计五要素去思考界面设计的方向。
1）配合场景的暗色模式
电视的使用场景：夜晚的客厅环境——具有弱光、安静、舒适的特点，因此我们一般都采用暗色主题，让背景色融入场景氛围，以此突出内容。内容和背景的对比也不需要过于明显，背景颜色的选择不宜过黑而无法辨别出图片的阴影。在主题高亮色上避免使用过于饱和以免产生刺眼的感觉。
2）海报内容一目了然
一般电视里也分为应用图标与内容推荐，它们都需要在3米外就能被清楚地识别出来。每一个图片的色调可以统一区别于背景。
图片内使用简单的背景让主体脱颖而出，并且不会压倒附近的内容。使用过多的渐变反而会减弱整体的对比，因此应该减少图片内颜色的使用，让主要内容凸显。
3）避免主题色刺眼和失真
纯白色 (#FFFFFF) 在明亮的电视屏幕上可能会非常刺眼，建议将浅灰色 (#EEEEEE) 作为深色背景上的默认文本颜色。同样部分高亮主题色运用到电视界面设计时也需要注意，尤其是红、黄、橙色系，这些颜色会特别严重地失真。
4）文字可识别
由于远距离阅读大量文字会使眼睛疲劳，要认真考虑文本显示的字数，能用图像或者动画交流就避免使用文字。确保各类字体在远处清晰可见，一般系统字体不要小于22px（12sp），也尽量精简字体样式并避免过细的字重。
1）常见电视尺寸
主流电视尺寸一般在43-85寸之间，常见的有43、50、55、60、65、75等，消费者根据观看距离选择适合的电视尺寸。电视屏幕的尺一般都遵循16:9的电视画面宽高比。我们一般使用1920×1080为最小画布，是当下最常见的电视分辨率，所有图片资源都是@1x 分辨率。随着4K内容的普及，也可以使用1920×1080，但是需要提供应提供@2x图的图像。
提问：1920×1080的电视是几K？1080P就是指1920×1080的分辨率大小吗？
2）画布尺寸与安全区设置
由于在旧电视上存在过度扫描，可能会发生意外裁剪，需要留出安全区，使主要内容远离屏幕边缘。一般上下左右留出画布5%左右的距离。
3）显色差异明显需要测试
各家电视主打画质作为卖点，价格各有不同，各家的画质处理技术也不同，可见各家屏幕的画质一定有一些区别。区别主要在于显色、色域、控光、画质等，总结就是显色差异明显，我们应该在消费者主要使用的电视型号上进行显示测试。尤其是绿色、红色、黄色等颜色容易明显色差。
正是有了这样一个外设输入源，就需要考虑触碰但未触发的上焦状态（focused），正如当有键盘就有输入时，当鼠标悬浮时。TV焦点态的设计即遵循安卓一般设计原则，也有它的独特性。
1）D-PAD十字交互与网格布局
我们可以把D-PAD和屏幕间的交互形式，称为“十字线性交互”，也正是这种交互形式决定了输出端的界面布局的基本形式。
在这个大屏里，我们的焦点只能按照D-PAD的指挥走水平或者垂直线，每一个位置的路径只能走二维的“十”线，这样可以更好引导用户到达他想要的内容。（这里运用了非常典型的亲近性原则）
设计师和开发都熟悉用栅格的形式来布局横版页面，而电视上更常采用间距统一的网格形式来规范内容集合，方便远程浏览，也可以方便遥控器快速导航。设计可以根据内容自定列数，最多甚至可以达到9列。
2）焦点在空间中的层次
位置与方向感：在安卓设计语言中，我们可以通过不同控件在Z轴上不同的位置来划分控件间的层次。通常是通过阴影的变化来表现。因此，我们为了突出焦点所在的位置，焦点一般会有明显的阴影。以外可能还会添加别的样式来加强它。
同时，为了明确指向D-PAD所能到达的位置，我们在设计布局时，也需要避免控件间出现重叠。
即Z轴方向，只有一个焦点和普通两种层级，且（可上焦的）普通层级相互不重叠。
1）家庭共享下的多模式
输入源除了考虑输入设备本身，还可以考虑多个来自多个人，可能是多人协作或者多人共用。在居家环境这个场景下，根据使用者的不同提供对应账号下的信息页面，以及多人共同进行电视操作。
2）年龄分段模式呈现不同内容与UI
在多个用户的模式下，就需要对不同用户进行分类，电视端常见的用户模式有：儿童、普通、长辈三种模式。
三种模式下，视觉上色调、背景、间距、焦点态、字号、内容海报都有相应的调整。它意味着很多控件是需要做成自定义的。（运营也可以对其进行配置的）
3）常驻的“新手”提示和引导
电视还是一种公共设备，不同时段有不同的人使用它。不同年龄层对智能电视的操作熟悉度也不同，我们在做有引导的页面设计时，也会做成可重复提示的过程页面，而非一次性引导。常见的如按钮文案设计成操作描述的文案，以及焦点带气泡提示等。
在首页用户更多的是找寻感兴趣的内容，用户选中一个内容就可以立即看到视频内容。所以在这里推荐使用获取焦点即执行的方式，能够节省找寻成本。用户点击确认键即可进入播放页面。
一种是背景图片跟随焦点进行切换并自动播放。
一种是焦点聚焦到内容且未移动时，自动播放垫片内容，无需进入二级，所选即时播放。
电视应用的层级少，结构扁平，下面我将举例如何思考一个大屏页面的信息排布以及页面焦点的一些设计重点。
安卓设计指南里列出了几种常见的页面结构：浏览视图、详细视图、消费视图、搜索视图。这几类页面结构基本上就构成了TV端浏览一个内容的流程，从语音或推荐项目里选择一个内容，进入详情并开始观看的一个主要流程。
在appleTV中对应的页面效果如下图所示，都无一不体现大画布背景+不拆分视图带来的沉浸感，并且没有多余的状态栏标题栏。
一个常见的流程如下：我们在浏览视图和详细视图里或者搜索视图里选择了观看内容后，进入消费视图（视频播放页），同时可能主动或被动选择相关内容，跳转播放或画中画播放。
咪咕爱唱是一款主要通过会员付费为用户提供音乐类版权内容（包括音乐MV、K歌伴奏、演唱会）的产品。
当我们从行为开始考虑，一个K歌的信息页面有什么时，我们可以想到，家庭K歌行为下，对应着多人控制、多年龄段使用，平铺直叙的排版方式是最好，一眼进来最好能看到即时的K歌伴奏MV，有可以让多人同时操作点歌的二维码，支持方便的语音搜索。
在确定的功能点模块基础上，根据沉浸式的目的和十字交互的规则，我重新规划了一种以即时播放未主要中心的首页布局，展示的内容其实没有变化，但是整个页面不再是被划分的卡片而是有主次的功能和信息的排布。
新规划的沉浸式布局1
新规划的沉浸式布局2
消费视图里不仅承载了最重要的视听内容，还有一些个性化推荐的服务和功能，因此在设计时，需要提到页面最前来考虑。
纯歌词内容视图，歌词逐字上屏是K歌独有一种展示形式，LRC歌词本身有时间刻度，所以这里我将时间进度条和歌词关联，用户上下移动选择单句歌词更加直观，而不是快进或后退。
内容推荐+歌词展示内容视图，其实这个是上一个页面选择播放列表后的页面效果，我倾向于给每个歌曲生成封面图。（一般每个歌曲都会有图片或者MV）
视频展示内容视图，在播放内容时，尽可能减少选择内容对沉浸式观影的体验，当然后期针对运营需求可以权衡。
常用的深色调配色当然能更好突出，但是考虑与白天的氛围匹配，浅色调也可以，浅色背景上的阴影更能明显突出焦点层次，更重要的是，按钮背景的颜色在不同素材上都能显示出来。以及所有图片整体的色调选择。
暗黑带透明度按钮背景颜色在两种背景上的表现
中度灰带透明度的按钮背景颜色
当然每一个电视大屏的目标用户不尽相同，还是要根据主要人群来设计和规划。因为K歌产品也是一款既有儿童又有老年人用户的产品。因此针对不同用户，频道的风格也有一些区别。
我们不管是从国外的应用如网飞和亚马逊也好，还是从国内的几家头部视频网站也好，我们可以发现影视作品的封面也呈现出以下我举例的一些方向和风格。我们在做电视端应用的图片展示时，更应该遵循那种精简、干净、光效统一的风格。
以前一些设计举例
1）遥控器与焦点的状态
控件状态需要多少种只跟输入源有关系。比如你输入源是鼠标+键盘，那么 focus (给键盘）、 hover （给鼠标）、active （给鼠标/键盘按下），然后细腻点你还会想要加入 disabled。正是由于远距离交互+按键的形式，电视端的焦点态的形式有很大的不同。
电视端焦点态存在的目的是，方便用户时刻都清晰且明确地知道自己的光标在哪里，可以移动到哪里。——通过焦点的统一性、即时性来进一步明确地告诉电视这端的用户停在了哪里，可以往哪里走。
苹果TV统一的焦点态样式
控件的状态和输入端的形式是强关联的。输入源是D-PAD，那么控件焦点态就是二维的，输入源是触控盘，那么控件焦点态就可以是三维动态的。
苹果电视的焦点态动态图
国内由于强运营的需要，对于电视焦点态的设计五花八门，想尽了心思，层层叠加。
2）焦点动效与遥控方向
我们总览两大设计原则，都提到了电影体验、沉浸式体验，一些小屏幕的细微变化（比如spring）会被放大而显得复杂过度，我们可以想象看电影时掉帧卡顿的糟糕体验，电视端的动画时为了在人和屏幕上的内容之间创造一种视觉上的联系。
和移动端一样的也可以按照这样的分类来考虑：启动动画、反馈动画、转场动画。也可以按照交互动作来考虑，仅在响应用户操作时使用，比如在考虑入场和出场动画时，出场动画可以考虑统一——对应遥控器上的返回键，而入场动画则考虑两个点：
因为电视端更多是一种图片列表的展示形式，因此图片列表的展示经常以视差运动出现，表现一种大屏上纵向内容源源不断的出现的感觉。
3）沉浸式的焦点效果
目前在浏览器和电视端已经可以看到这样的效果——即当你滚动浏览推荐行时，只要在图像上停留超过一两秒钟，每个标题的预览视频就会开始自动播放。这是在电视上一种非常直觉性的交互，就像很久以前我们打开电视就有生动的音画一样。
电视具有数十年的期望值，当您打开电视时，可以播放视频和音频。因此，有一个沉默的经历实际上是很奇怪的。
如果还想深入优化优秀的大屏端动态效果可以去PS这类游戏主机系统里取取经。对于大屏设计如何精进，我认为还是从主机端游戏界面设计可以瞥见一隅。未来大屏就是AR眼镜，就是VR，电视的那套东西已经被搬进了小小主机和轻便的眼镜里。
本文主要以交互设计的5个要素为框架，从电视与手机的不同着手分析电视的特有属性，继而引出界面设计一些特殊点，最后以一个电视端K歌APP设计举例，从布局、配色、焦点态设计等几个面展开详细说明。
参考资料:
本文由 @皮质大奖得主 原创发布于人人都是产品经理。未经许可，禁止转载
题图来自Unsplash，基于CC0协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
*请认真填写需求信息，我们会在24小时内与您取得联系。
