html5

之前一直使用json-server在前端开发时，搭建本地数据接口测试，但有时又需要将做好的项目放于 github page上做项目演示。在本地时，json server很好使用，但一旦放在github上就实现不了我们期望的效果了；后来发现 mockjs 这个插件就满足这一需求。研究了半天，感觉 mockjs 模拟数据更强大，通过随机数据，可以模拟各种场景，下面一步步的来实现在 vue-cli创建的项目中添加一条用户信息的数据模拟接口： 安装 mockjs 在vue项目安装mockjs npm install mockjs --save-dev 在项目 src 目录中创建一个 mock.js 文件 在 main.js 入口文件中引入刚刚创建的mock 文件 import './mock.js' 创建模拟数据 在 mock.js 中创建一条用户信息模拟数据 import Mock from 'mockjs' const Random = Mock.Random // 设置全局延时，没有延时的话，有时候会检测不到数据变化 Mock.setup({ timeout: '300-600' }) // 创建一个数组用来接收模拟的数据 const mocklist = [] const count = 5; for (let i = 0; i < count; i++) { mocklist

“m3u8格式简析”与“视频秒开优化” 公司要求对 视频秒开率 进行优化（ 一秒内成功加载的播放数/播放总数 ）。 因此本意是想对比一下m3u8与mp4视频格式，并了解m3u8格式优缺点，以确定一个优化大概方向。 但对m3u8做简单了解后，觉得有必要对m3u8文件格式做一个记录。 m3u8视频 是一种什么样的视频格式？ m3u8视频 举例 维基百科对m3u8的定义 m3u8 与 MP4 对比 提高视频秒开率的一个方案 一、m3u8视频 是一种什么样的视频格式？ m3u8不是一种视频格式，而是一种纯文本文件。 m3u8视频文件格式中 存放了视频的基本信息 和 分段视频的索引地址 (将一整个视频分成了时长不同的很多小段) 。当播放m3u8视频时，就是按顺序下载播放索引列表的视频，从而完成一部完整视频的播放。 以上几句话是我对m3u8视频格式是什么东西的一个总结，可能有用词不当的地方。但想了很长时间，觉得这样说已经是我能表达的最容易理解的说法了。 但只是这样说，可能还是有些抽象，因此下边我会举个例子。 二、m3u8视频 举例 这是一个来自网易公开课的视频播放地址： http://flv0.bn.netease.com/videolib1/1903/15/9b4wxrd1g/SD/movie_index.m3u8 这个地址可以在mac浏览器上直接播放。

原文链接 Document Ready 事件 在jQuery中，document.ready可以让代码在整个文档加载完毕之后执行： $(document).ready(function() { // Code }); JavaScript同样拥有一个DOM内容加载事件的侦听器: document.addEventListener("DOMContentLoaded", function() { // Code }, false); 选择器API jQuery中的选择器语法丰富灵活： var element = $("div"); 现在js中的querySelector完全可以替代它，document.querySelector只获取第一个元素，document.querySelectorAll可以获取全部元素。 var element = document.querySelector("div"); 或者选择所有div的某些内部容器： var elements = document.querySelectorAll(".container div"); 也可以针对特定元素进行查询来找到它的子元素： var navigation = document.querySelector("nav"); var links = navigation.querySelectorAll("a");

魔幻的2020年即将过去，其实我有很多故事，只不过大多都是作为过眼云烟而已。有一些故事，他不仅仅是故事，是一段回忆，是一段情怀，更是一段激励。我更愿意把它们说成“做自己”。 没位道 这个中文网站已经建站10年之久，这十年，承载的不单是血肉拼搏，欲望与成果，它更像一个故事，寻找自我的故事。 这个故事其实并不是介绍我自己，我也没有什么好介绍的，很简单很普通，不喜欢喧嚣繁华，不喜欢灯红酒绿，是个自在的独行侠，身边的人完全可以把我当做空气：）写这篇文章，其实是一个对自我的探索认知，对现实的一些思考和实践。职场也好，生活也罢，感情也可，它们其实都被我当做探索和发现。 十年寻找自我，尝试自我。 一、变革 真正系统地接触互联网（有全职或者兼职工作），应该是在2010年，那时候找到了自己的第一份兼职做动画和网站设计（不区分UI和前后端开发，就是笼统的做网站）的工作。2014年以前，接触CSS、网页设计、平面设计、Photoshop、Flash，一份一年的工作后，就一直自由职业。其实也是被迫的，因为我在湖南娄底上大学，城市的互联网发展本身很落后，也找不到什么合适的工作。然而自己又不喜欢大城市，不喜欢繁华热闹和喧嚣嘈杂的社交，大厂，对我来说是不可及的，它们几乎都在发达的一线城市。小城市——一直是我骨子里的基地。创业是需要门槛的，这必然导致我只能选择自由职业，走上了永无止尽的自学和外包之旅。换一种思路

JWT 在用户注册或登录后，我们想记录用户的登录状态，或者为用户创建身份认证的凭证。我们不再使用Session认证机制，而使用Json Web Token认证机制。 什么是JWT Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准（ (RFC 7519 ).该token被设计为紧凑且安全的，特别适用于分布式站点的单点登录（SSO）场景。JWT的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息，以便于从资源服务器获取资源，也可以增加一些额外的其它业务逻辑所必须的声明信息，该token也可直接被用于认证，也可被加密。 起源 说起JWT，我们应该来谈一谈基于token的认证和传统的session认证的区别。 传统的session认证 我们知道，http协议本身是一种无状态的协议，而这就意味着如果用户向我们的应用提供了用户名和密码来进行用户认证，那么下一次请求时，用户还要再一次进行用户认证才行，因为根据http协议，我们并不能知道是哪个用户发出的请求，所以为了让我们的应用能识别是哪个用户发出的请求，我们只能在服务器存储一份用户登录的信息，这份登录信息会在响应时传递给浏览器，告诉其保存为cookie,以便下次请求时发送给我们的应用，这样我们的应用就能识别请求来自哪个用户了,这就是传统的基于session认证。

前言 随着供暖季来临，我国北方大部分省市开始陆续供热。一年一度的供暖问题被提上了日程。在我们的印象里，供热的设施不论是锅炉、管道还是暖气片，都是坚硬的钢铁、铸铁。 HT 通过自主研发的强大的基于 HTML5 的 2D、3D 渲染引擎，运用丰富的 2D/3D 组态，给它们装上了“触角”，接通了“血脉”，装上了“大脑”，数字孪生一个智慧供热全流程系统，助力城市供热信息化升级改造，深挖热力大数据价值。 随着集中供热普及率的上升，北方地区供暖能耗逐年增大。我国单位住宅建设供暖能耗是相同维度的发达国家的3倍。而在传统供热模式下，机组自动化水平低、多依靠人工调控，导致供热量与热需求无法准确匹配，暴露出了能源浪费与环境污染的问题。面临多方压力的传统供热行业正积极寻求破局。近年来，以互联网、大数据、云计算、人工智能等为代表的新一代信息技术迅猛发展，正加速向各领域广泛渗透，推动着传统产业转型升级。作为传统行业的供热行业仍处于一种“春秋战国、群雄逐鹿”的格局，而在国家政策以及用户、企业的各方面的诉求下，智慧供暖已成为一种潮流。 要开拓市场空间，降低供热成本，提高企业利润水平，技术和先进管理的提升必不可少。 界面简介与效果预览 界面分为数据面板（2D）和热网（3D）两个部分： 随着画面初始化后，映入眼帘的是图扑可视化技术对整个城市进行的模拟仿真，整座城市被一条水路一分为二，主干道的车流汇聚成迷幻的霓虹

Shadow_Art 一场颇具艺术风格的实验 这是一项 AI 实验，旨在颂扬中国古老的 皮影戏艺术 。 实验利用 TensorFlow.js，在互动游戏中将用户的手影转换成数字动物。 您可通过在笔记本电脑或手机摄像头前摆弄 “手型” ，形成十二生肖动物的手影。如果手影正确匹配，系统便会将手影转换成 相应动物 的动画影象。 技术上： 为了在浏览器上获取手部轮廓，会使用 OpenCV.js 通过摄像头从HTML5的<video> 标签捕捉出用户的手部图像，并对这些图像进行单独处理。 针对每张图像进行简单的 背景去除 ，以将前景对象（包括手和部分杂乱的背景）与背景对象进行分离。 在进行去除校准时，程序会从摄像头中不断采集图像，以 更新最新的背景对象 ，进而进一步对手势图像执行精细化的抠图操作。 执行完上述操作后，会处理裁剪出的手部图像进行 清除噪音 （包括轮廓归一化和重新采样），然后再 将图像填充为阴影 重新绘制到前端展示。 就这样，一组好玩儿又带有童趣的皮影戏就做好拉。 来一起体验下？ - END - 对文中的 工具 感兴趣的小伙伴 公众号后台回复 “皮影” 即可使用 想要获得Github地址 请私聊小编 本文分享自微信公众号 - 无界社区mixlab（mix-lab）。 如有侵权，请联系 support@oschina.cn 删除。 本文参与“ OSC源创计划 ”

1.定义：什么是html5? HTML5 是 W3C 与 WHATWG 合作的结果,HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。(简而言之，html5是html的5.0版本) 2.为html5而定的规则？ 新特性应该基于 HTML、CSS、DOM 以及 JavaScript。 减少对外部插件的需求（比如 Flash） 更优秀的错误处理 更多取代脚本的标记 HTML5 应该独立于设备 开发进程应对公众透明 3.html5的优缺点 优点： a、网络标准统一、HTML5本身是由W3C推荐出来的。 b、多设备、跨平台 c、即时更新。 d、提高可用性和改进用户的友好体验； e、有几个新的标签，这将有助于开发人员定义重要的内容； f、可以给站点带来更多的多媒体元素(视频和音频)； g、可以很好的替代Flash和Silverlight； h、涉及到网站的抓取和索引的时候，对于SEO很友好； i、被大量应用于移动应用程序和游戏。 缺点： a、安全：像之前Firefox4的web socket和透明代理的实现存在严重的安全问题，同时web storage、web socket 这样的功能很容易被黑客利用，来盗取用户的信息和资料。 b、完善性：许多特性各浏览器的支持程度也不一样。 c、技术门槛：HTML5简化开发者工作的同时代表了有许多新的属性和API需要开发者学习

2018-2020年web前端面试题熬夜整理成 PDF文档 ，共83页，内容主要包括有 html、css、JavaScript、DOM、HTTP、Vue 等等 2018面试题： Html 1，html语义化 2，meta viewport相关 3，canvas 相关 CSS 1，盒模型 1.1，ie盒模型算上border、padding及自身（不算margin），标准的只算上自身窗体的大小 css设置方法 1.2，几种获得宽高的方式 1.3，拓展 各种获得宽高的方式 1.4，边距重叠解决方案(BFC) BFC原理 2，css reset 和 normalize.css 有什么区别 3，居中方法 3.1，水平方向上 3.2，垂直居中 3.3，垂直水平居中根据上方结合 4，css优先级确定 5，如何清除浮动 6，自适应布局 7，画三角形 8，link @import导入css 9，animation 10，长宽比方案 11，display相关 JavaScript 1， ["1", "2", "3"].map(parseInt) 2， [[3,2,1].reduce(Math.pow), [].reduce(Math.pow)] 4， [typeof null, null instanceof Object] 5， js数据类型 6，promise 用法 7，es6 promise

在理解beforeEach无限循环之前，我们先来看一下beforeEach相关的知识点，该篇文章的项目是基于 express+vue+mongodb+session 实现注册登录 这篇文章项目基础之上进行讲解的，因为登录完成后，会跳转到列表页面，那么在跳转到列表页面之前，我们会使用 router.js 使用beforeEach来判断下，如果登录成功，并且session在有效期内的话，就跳转到下一个页面去，否则的话，就重定向到登录页面去。 app/index/router.js 代码如下： import Vue from 'vue' ; import VueRouter from 'vue-router' ; // 告诉 vue 使用 vueRouter Vue.use(VueRouter); const routes = [ { path: '/list' , name: 'list' , component: resolve => require(['./views/list' ], resolve) }, { path: '*', // 其他没有的页面都重定向到 home页面去 redirect: '/login' }, { path: '/login' , name: 'login' , component: resolve => require(['./views