html5

WebSocket 详解教程

你说的曾经没有我的故事 提交于 2020-08-06 06:31:01
概述 WebSocket 是什么? WebSocket 是一种网络通信协议。 RFC6455 定义了它的通信标准。 WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 为什么需要 WebSocket ? 了解计算机网络协议的人,应该都知道:HTTP 协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求/响应模型。通信请求只能由客户端发起,服务端对请求做出应答处理。 这种通信模型有一个弊端:HTTP 协议无法实现服务器主动向客户端发起消息。 这种单向请求的特点,注定了如果服务器有连续的状态变化,客户端要获知就非常麻烦。大多数 Web 应用程序将通过频繁的异步 JavaScript 和 XML(AJAX)请求实现长轮询。轮询的效率低,非常浪费资源(因为必须不停连接,或者 HTTP 连接始终打开)。 因此,工程师们一直在思考,有没有更好的方法。WebSocket 就是这样发明的。WebSocket 连接允许客户端和服务器之间进行全双工通信,以便任一方都可以通过建立的连接将数据推送到另一端。WebSocket 只需要建立一次连接,就可以一直保持连接状态。这相比于轮询方式的不停建立连接显然效率要大大提高。 WebSocket 如何工作? Web 浏览器和服务器都必须实现 WebSockets 协议来建立和维护连接。由于 WebSockets

零基础转行自学前端,怎么学习更系统?

给你一囗甜甜゛ 提交于 2020-08-06 03:29:35
凭借应用广泛、入门简单的优势,Web前端吸引了人们的广泛关注。学习Web前端就业薪资高,因此很多人都想入门前端开发行业。 零基础自学Web前端,你需要具备以下几点: 1、耐性。要成为优秀的web前端开发者,要调整好心态。抛开一切的方法和技术知识,最重要的就是你的耐性。 2、学会延伸。对于新手来说,新技术就是新技术。对于一个高手来说,新技术不过是旧技术的延伸。Web前端开发技术主要包括三个要素:HTML、CSS和JavaScript,随着技术的革新,你还需要掌握angular、ajax。 3、系统性学习。学习有其规律可寻,需要一步一步由浅入深式学习。在学习理论知识的同时,你还需要注重积累相应的项目研发经验,切忌“眼高手低”。 目前企业招聘前端工程师的基本需求: 1.精通DIV+CSS网页框架布局的HTML代码编写,熟悉W3C标准; 2.使用HTML5/CSS3熟练地进行页面开发; 3.具备良好的前端架构分析能力与设计能力,与开发团队保持良好沟通; 4.精通各主流浏览器(IE6+、Firefox、Chrome、Safari)间的差异性,能快速定位和解决各种兼容难题; 5.熟悉JavaScript、Ajax、Flash、JQuery、ExtJS等各种Web前端开发技术,具备一定的跨浏览器开发经验; 6.熟悉Vue,react Web前端学习路线,可以参考一下: 第一阶段:前端页面重构

WEB学习路线2020完整版+附视频教程

≡放荡痞女 提交于 2020-08-05 23:38:49
WEB学习路线2020完整版+附视频教程,适合初学者的最新WEB前端学习路线汇总! 在当下来说web前端开发工程师可谓是高福利、高薪水的职业了。所以现在学习web前端开发的技术人员也是日益增多了,但是在学习web前端开发中盲目的去学习而没有一个完整的思路和学习路线也是不行的。 那么想学好web前端,该从哪里入手学习呢?零基础学习web前端学习路线图从哪里可以找到呢?在此为大家整理完整的适合零基础学员的web前端学习路线分享给大家: 1.HTML5介绍 内容包括:(互联网发展趋势、H5语言的优势、简单易学人人都能编程、H5就业和薪资情况、H5常见的项目与产品、H5的未来与方向) 2.HTML基础 内容包括:(HTML简介与历史版本、常用开发软件、常见标签与属性、表格与表单、标签规范与标签语义化、实战:网页结构布局) 3.CSS基础 内容包括:(css简介与基本语法、常见的各种样式属性、CSS选择器与标签类型、理解盒子模型与CSS重置、浮动与定位、利用photoshop工具测量样式、HTML+CSS开发网页、实战:高仿电商首页效果) 4.CSS3基础 内容包括:(css3常见样式、css3选择器、变形与动画、3D效果与关键帧、弹性盒模型) 5.移动端布局 移动端基本概念、viewport窗口设置、移动端布局方案、rem、vh、vw等单位、响应式布局、bootstrap框架 6.

Event Loop 在浏览器和Node端的差异

梦想的初衷 提交于 2020-08-05 22:10:55
由于js是单线程语言,为了解决异步操作所以设计了事件循环。 宏任务: setTimeout、setInterval 、script(整体代码)、 I/O 操作、UI 渲染等 微任务:setImmediate、process.nextTick()、 new Promise().then(回调)、MutationObserver(html5新特性) 在事件循环中,宏任务和微任务分成了两类的队列,为了便于理解,微任务相当于是追加在宏任务队列后的一个独立的队列。 差异: setTimeout、setInterval 浏览器: 宏任务单个执行:每执行一个后,就会去执行掉微任务队列中的所有任务。 UI渲染:每次一个循环结束后(一个宏+整列微任务),如果需要会执行UI渲染。 实时添加:微任务执行过程中可以向本队列继续添加微任务并顺序执行。 Node: 队列执行:任务执行时,会执行队列中的所有任务(包括宏任务队列) nextTick优先:微任务分的更细,node将nextTick回调单独化为一组微任务,所有nextTick队列可以和微任务队列一样实时添加,而且整个队列始终先于微任务队列执行。 执行阶段更多: timers : setTimeout、setInterval I/O callbacks :此回调中,setImmediate始终先于timers执行,因为,此阶段(2)执行完毕后

react 下载excel文件

[亡魂溺海] 提交于 2020-08-05 20:45:47
后台返回的是 ResponseEntity< byte []> 格式 1、需要加参数,header的,如下,如果不需要这些,可去掉 export const getFileExport = async (url) => { const headers = await getHeaders () ; return await axios . get (url , { //downloadFiles 接口请求地址 params : { user : sessionStorage . getItem ( TOKEN_SESSION_CONFIG . USER )} , headers : headers , responseType : 'blob' }). then ((rs) => { const blob = new Blob ([rs. data ] , { type : "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }) const fileName = " 用户导入模板 .xlsx" ; if ( 'download' in document . createElement ( 'a' )) { // 非 IE 下载 const elink = document .

快速重置vuex数据

只谈情不闲聊 提交于 2020-08-05 20:32:55
首发于: https://lonhon.top 最近遇到的一个场景,由于项目的权限系统+路由控制中用到了vuex存储全局数据,在登出时需要将所有数据进行重置or清空。 比如 store.state.username初始为'' => 登陆后变成'张三' => 登出后还是'张三',此时需要置为''. 解决方法0.1 actions.resetVuex = function() { store.commit(state.a, null) store.commit(state.b, null) store.commit(state.c, null) ... } store.dispatch('resetVuex') 一开始的想法是创建一个action实现vuex重置,在登出时调用该放方法即可。 ** 但是 ** 这种方法需要手动维护,而且一个个写上去感觉太low了,随后又想到可以通过遍历store.state进行所有重置,但是这种方法有一个弊端就是如果重置的值有不同的初始值的话,赋值的时候就很麻烦了。 总之,上面的方法和搜索出来的方法都不尽人意,但是迫于无奈就先用着第一种了。 解决方法1.0 就在上述方法写到一半的时候忽然灵光一闪,我特么之前为了store的数据持久化不被页面F5重置还专门把数据放在SessionStorage这些本地存储里,现在一个个去重置感觉像个睿智,**

我是小白0基础,现在我想学习前端开发,该如何系统的学习?

痞子三分冷 提交于 2020-08-05 19:45:23
以下纯属个人观点和建议,肯定是有局限性的,但是也希望能给你带来一些帮助。 我们俨然能感受到前端岗位现在已经发展成了最重要的研发岗位之一,所以多我们提出的要求也就越来越高了。所以我们需要的也就不仅仅只是掌握css、html、JavaScript了,但是这三大件一直都是前端的根本,这一点从未改变,而这三大件中JavaScript又是重中之重、 接下来我会结合我的一点经验,给出前端系统学习路线的一些具体建议以及入门前端时的一些困境。 入门前端时的一些困境 1、因一些基础算法、数据结构理论不扎实导致一些编程思维难于理解。比如 原型链,如果清楚 数据结构中链表结构,那么这个东西不难理解,再比如 哈希值,懂得数据结构中哈希表,哈希值也就迎刃而解。 2、计算机体系结构、操作系统理论、网络理论不扎实导致到后期一些东西难于理解。比如有同学从前端学习入手,后来学习node开发 ,在 I/O ,进程、线程、IPC 、线程锁方面有些概念就比较难于理解,而导致不能很好得使用node 的api 。 3、前端整体体系架构没有做过深入思考。 导致用会用,但不知道为什么用,用另外一个有什么区别。 4、学习环境中无高手。 没有高手能够指导自己进入下一个层次。 5、有意识但是没有行动我的网盘收集了一堆资料或者一堆视频,然后就没有然后了 。 目前企业招聘前端工程师的基本需求: 1.精通DIV

canvas ,webGL, svg

一世执手 提交于 2020-08-05 18:27:15
SVG只是一种 矢量图 形文件格式, 不仅现在的浏览器都支持,很多主流的系统也都支持。 Canvas 是HTML5新增的一个元素对象,名副其实就是一个画布,浏览器 js 配有相应的操作api,可以不再依赖其他的API或组件而直接绘图,相当于 2D的API 。 WebGL 是以 OpenGL ES 2.0 为基础的一套 浏览器 3D图形API (HTML5),在编程概念上与OpenGL ES 2.0 几乎是完全通用的,同样采用可编程渲染管线,也就是每个顶点的处理受到一小段Vertex Shader代码的控制,每个像素的绘制过程也受到一小段Fragment Shader代码的控制。WebGL主要是3D为主, 不过2D的绘图要求也可以变通来实现。 WebGL 无论如何都需要一个显示对象来呈现,这个对象就是 Canvas,仅此而已,WebGL不对Canvas有任何附加的操作API, 那部分属于浏览器js支持的范畴。 WebGL 也继承 OpenGL ES 2.0 的兼容性支持能力, 在不同的设备上做有限的支持,需要运行时查询。 Three.js 、Babylon.js、Blender4Web等是几种知名的 WebGL 开发框架,对 WebGL 基础操作做了大量的封装,可以拿来就用, 即使不了解 WebGL规范的细节。 d3.js 是采用svg的数据驱动Dom ,用来对数据进行可视化

南京儿医在线 x mPaaS | H5 性能体验太卡,我们换了小程序试一试

五迷三道 提交于 2020-08-05 18:08:34
简介: mPaaS 小程序接入过程实操 技术选型从 HTML5 到小程序,走过逐步熟悉产品的阶段后,即可获得飞升的研发效能和流畅体验。 瞰聆信息科技有限公司是一家专注移动医疗的公司,聚焦于采用移动化的技术手段实现医疗高效协作和精细化敏捷管理。业务服务结合国内医院的实际情况进行创新,致力于构建国内细分领域最先进的产品和解决方案。 「南京儿医在线」是瞰聆科技为南京儿童医院开发的官方就医 App,支持线上线下一体化就医体验。本文介绍了其如何通过接入 mPaaS 小程序从而提升应用体验性能的故事。 项目背景 瞰聆成立以来,业务大多集中在移动端对外开放。而在 App 发展初期,我们所服务的受众人群以 B 端医生为主,考虑到医院端业务量大、场景丰富、产品线广,同时项目需要支持“微信公众号”及“支付宝公众号”。 因此我们采用了「原生 App 作为容器 + HTML5」的技术选型支撑业务开发:App 提供统一的用户认证体系,在线加载 HTML5 页面,并对 HTML5 提供相应的 JSSDK。由此,医疗相关的业务我们基本统一使用 HTML5 开发,期望做到一端开发,两端适配。 然而,跑了一段时间之后,我们发现纯 HTML5 开发的方式,性能体验问题较大。比如,HTML5 页面在用户手机上经常出现打不开、一直加载中、卡顿等问题。 当然,面向 toB 类的业务还好,医生用户群的体量相对可控

现在入行 web前端开发 晚了?不看数据你根本不知道这些

自作多情 提交于 2020-08-05 17:49:24
前端程序员 是大家都公认的高薪岗位,那他们的工资到底有没有传说中那么高呢?我们来看看职友集的数据。 数据来源:职友集 就北上广深杭的前端薪资来看,平均薪资均达到 一万以上 。 通常来讲: 工作1~2年后会成为前端高级软件工程师,年薪可以达到 15万以上。 工作3-5年后可以成为前端技术主管或者经理,年薪在 15-50万之间。 工作年限5年以上,会成为互联网公司的技术总监或产品经理,年薪将达到 50万-100万之间 。 前端程序员的薪资处在行业中的较高水平,那么相对的,他们需要 掌握这些重要技术。 企业对前端人才有什么要求? 根据对100家互联网名企对前端开发工程师的招聘要求分析如下: 核心要求包括: **语言技术:**JS基础和核心、html5、CSS **框架技术:**JQuery、AJAX、Bootstrap、AngularJS **通讯协议技术:**HTTP协议、服务端开发技术 **交互技术:**UI交互设计 **客户端技术:**微信开发技术、html5、JS、Android、iOS、Web App开发技术 辅助要求: 学历及相关专业、文档规范写作能力、团队合作能力、责任心 现在常常网络上常说前端已经饱和,现在入行已经晚了,但事实真的如此吗?通过下面几则数据,我们看看 前端发展前景 如何。 前端发展前景怎么样? 数据来源:百度指数 通过百度搜索指数的趋势图我们可以看到