20191103 前端开发周报

腾讯视频 Node.js 服务是如何支撑国庆阅兵直播高并发的?;JavaScript如何工作:垃圾回收机制 + 常见的4种内存泄漏;three.js入门篇;小蝌蚪传记:200行代码实现前端无痕埋点;为什么 JavaScript 中 0.1+0.2 不等于 0.3 ?;13 个 JS 数组精简技巧,一起来看看;vue3 源码解读之 time slicing;js中判断变量是否相等的几种方法

  1. 腾讯视频 Node.js 服务是如何支撑国庆阅兵直播高并发的? 导语 | 上个月,我有幸参与了腾讯视频国庆阅兵直播页面开发的相关工作,最终,累计观看2.38亿人次,经受住了高并发的考验。在参于Glama框架的开发维护及平时基础建设相关讨论实践中,对高并发有一些部分实践心得,正好老友也想了解腾讯视频这边的经验,特撰写本文,对相关经验进行梳理总结,与大家探讨。(本文作者:Luc...
  2. JavaScript如何工作:垃圾回收机制 + 常见的4种内存泄漏 原文地址: How JavaScript works: memory management + how to handle 4 common memory leaks 本文永久链接: https://github.com/AttemptWeb/Record/blob/master/js/JsMd/GcHandle.md 有部分的删减和修改,不过大部分是参照原文来的,翻译的目的主要是弄清JavaScript的垃圾回收机制,觉得有问题的欢迎指正。 Ja...
  3. three.js入门篇 一个偶然的机会看到了用three.js开发的3D效果,立即引起了我的兴趣,直接用JavaScript轻松的创建在浏览器上显示的3D模型,这在以前要做这样的效果门槛可是很高的,这实在是前端开发的一个福音。 简介 OpenGL是最常用的跨平台图形库,WebGL是基于OpenGL设计的面向web的图形化标准,提供了一系列JavaScript API,通过...
  4. 小蝌蚪传记:200行代码实现前端无痕埋点灰色的天 妳的脸 说分手的语气斩钉截铁 小蝌蚪:“能不走吗” 女神:“不能” 小蝌蚪:“那个男人有什么好” 女神:“他说话好听,长得帅,还有钱” 小蝌蚪:“我没房没车没存款,但我有一颗爱妳的心” 高富帅出现:“我有房...
  5. 为什么 JavaScript 中 0.1+0.2 不等于 0.3 ? 本文首发于 vivo互联网技术 微信公众号 链接: https://mp.weixin.qq.com/s/2kea7-jACCJmSYBQAwXyIg 作者:刘洋 在 js 中进行数学的运算时,会出现0.1+0.2=0.300000000000000004的结果,一开始认为是浮点数的二进制存储导致的精度问题,但这似乎不能很好的解释为什么在同样的存储方式下0.3+0.4=0.7可以得到正确...
  6. 13 个 JS 数组精简技巧,一起来看看阿里云服务器很便宜火爆,今年比去年便宜,10.24~11.11购买是1年86元,3年229元,可以点击 下面链接进行参与:[链接]
  7. vue3 源码解读之 time slicing 这篇文章主要介绍了vue3 源码解读之 time slicing的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋...
  8. js中判断变量是否相等的几种方法 无论是在开发中,还是面试时,在js中 判断变量是否相等 ,都是一个比较常见的问题。比较典型的有, == 和 === 的区别?判断变量是否相等有哪些方式? 这里打算总结一下判断变量是否相等的方式,以及做一些简单的分析。 判断变量相等的方式 判断变量是否相等,大致有以下一些方式 == 以及 === ; ...
  9. 大厂前端面试都问些什么问题?入职爱奇艺年薪48万,面试经验总结“金九银十“跳槽季,又到了面试求职的高峰期。好多小伙伴都会跳槽去找工作。如果你不跳槽,也建议把这篇文章看完,毕竟金九银十之后,就是金三银四了,总是逃不掉的
  10. [技术翻译]9个可以让你在2020年成为前端专家的项目 无论您是编程新手还是经验丰富的开发人员。在互联网这个行业中,必须不断学习新的概念和语言/框架以跟上快速变化的步伐。以React为例 - 4年前由Facebook开源,它现在已经成为全球JavaScript开发人员的首选。Vue和Angular当然也有其相应的追捧者。然后是Svelte,以及Next.js或Nuxt.js等通用框架,以及Gatsby,Gridsome,Q...
  11. JavaScript ES6函数式编程(三):函子 前面二篇学习了函数式编程的基本概念和常见用法。今天,我们来学习函数式编程的最后一个概念——函子(Functor)。 相信有一部分同学对这个概念很陌生,毕竟现在已经有很多成熟的轮子,基本能满足我们日常的业务开发,所以没必须重复造轮子。但是,作为一名(未来)优秀的程序员,光会用怎么能行呢?必须要理解更深层的思...
  12. WebComponent:像搭积木一样构建Web应用 我们站在开发者和项目角度来聊聊 WebComponent,它是一套技术的组合,能提供给开发者组件化开发的能力。 那什么是组件化呢?其实组件化并没有一个明确的定义,不过这里我们可以使用 10 个字来形容什么是组件化,那就是: 对内高内聚,对外低耦合 。对内各个元素彼此紧密结合、相互依赖,对外和其他组件的联系最少且接...
  13. 面试分享:三年经验面试阿里前端失败总结(附面试真题及答案)大家好,我是来自驾考宝典及掌游天下的WckY,目前离职,正在找新工作。我在掌游天下一直负责h5游戏这块的业务,离职后我在github里创建了一个h5游戏大全,可直接点击 此处 了解。从上周二开始面试至今,期间意外...
  14. 面试中知道开头不知道结尾的web知识点 1. 假设高度已知,请写出三栏布局,其中左栏、右栏宽度各位300px,中间自适应 ​ 2. css盒模型box-sizing 2.1 盒模型分为两类 标准模型:content-box width*height 怪异模型:border-box (width+padding)*(height+padding) 2.2 Js获取盒模型对应的宽和高 dom.style.width/height-->内联s...
  15. 谁将取代 JavaScript? 谁能取代 JavaScript 似乎是一个老生常谈的话题,很多人都提出过各自不同的看法。本文作者则提出了一个新的视角供你参考:JavaScript 风头正劲,但 WebAssembly 可能已经敲响了它的丧钟。 有些编程语言很受欢迎,还有些语言只是一种 " 必需品 " 而已。对于许多程序员来说,JavaScript 就属于后者——每一位前...
  16. Vue基础知识汇总 概念:小而巧的是库,大而全的是框架 框架:是一套完整的解决方案,对项目的侵入性很大,项目如果需要更换框架,则需要重新架构整个项目 库(插件):提供某一个小功能,对项目的侵入性较小,如果某个库无法完成某些需求,可以很容易的切换到其他库实现需求 MVC和MVVM思想 MVC 主要是后端的分层开发思想;把 一个...
  17. 神奇的javascript 看一张图 这张图对js魔法的吐槽可谓非常到位。下面,我们就从这张图出发来详细讲讲js。 数字类型与精度问题 虽然js是弱类型语言,声明变量时也不需要显式指定类型。但是,数据本身依旧还是有类型的,比如数字和字符串就是以不同形式存在的数据。在js中,所有数字的类型都为number。其中,一个特殊的...
  18. 为什么 Node 是前端团队的核心技术栈 Scott 近两年无论是面试还是线下线上的技术分享,遇到许许多多前端同学,由于团队原因,个人原因,职业成长,技术方向,甚至家庭等等原因,在理想国与现实之间,在放弃与坚守之间,摇摆不停,心酸硬抗,大家可以找我聊聊南聊聊北,对工程师的宿命有更多的了解,有更多的看见与听见,Scott 微信: codingdream。 ...
  19. 每天都在写的JS判断语句,你真的了解吗? 在真实的世界里,人与人总是有那么一点不信任,“争是非,辨明理”是常事。在编程开发领域中,同样需要对变量的存在、类型、真伪进行校验,几乎每天都是在和 if === typeof 打交道。但是你真的弄懂了这些判断语句吗? 一、真假判断 “真亦假时假亦真,无为有处有还无。”——《红楼梦》 if( x ) 在if语句中,会触发...
  20. Vue 项目中的几个实用组件(ts) 这段时间使用 ts 和 vue 做了一个项目,项目从 0 开始搭建,在建设和优化的同时,实现了很多自己的想法,有那么一两个组件可能在我本人看来有意义,所以从头回顾一下当初的想法,同样也可以做到一个记录的作用。如果还没有使用过 ts 的同学可以通过 使用 Vue Cli3 + TypeScript + Vuex + Jest 构建 todoList 这边文章开...
  21. npm script详解 npm 允许在package.JSON文件里面,使用scripts字段定义脚本命令。 { // ... "scripts": { "build": "node build.js" } } 复制代码 上面代码是 package.json 文件的一个片段,里面的scripts字段是一个对象。它的每一个属性,对应一段脚本。比如,build命令对应的脚本是 nod...
  22. 前端图片上传那些事儿 本文讲的图片上传,主要是针对上传头像的。大家都知道,上传头像一般都会分成以下 4 个步骤: 选择图片 -> 预览图片 -> 裁剪图片 -> 上传图片 接下来,就详细的介绍每个步骤具体实现。 选择图片 选择图片有什么好讲的呢?不就一个 input ,然后点击就可以了吗?确实是这样的,但是,我们想...
  23. 运营商劫持狠起来,连 json 都改 原创:小姐姐味道(微信公众号ID:xjjdog),欢迎分享,转载请保留出处。感谢`neko`的供稿 运营商劫持,是常见的流氓手段,它们老少通吃,连孩子都不放过,经常嚣张的在右下角或者网页头尾,弹出一些羞羞的广告。这让正在辅导孩子功课的妈妈,很难解释。 一、前言 一道经典面试题:当你...
  24. 2019年,你是否可以抛弃 CSS 预处理器?随着前端工程化的不断完善,CSS 预处理器已经成为项目中不可缺少的部分,很多人在项目技术选型阶段就会先选择一个 CSS 预处理器,绝大部分前端工程的脚手架也内置了一系列的 CSS 预处理的模版,大家已经习惯了享...
  25. 用 js 写卡牌游戏(六) 前言 很久没更这个系列,其实是我发现在国内如果想要运营发布游戏不是那么简单的事情,需要有公司并且去申请运营资格,如果要有收费内容还需要申请版号。作为一个独立开发者,可能很难做到这些,所以前段时间有些灰心,不太提的起劲做这个项目。 不过最近也想通了,最初这个项目也不是以...
  26. 初识 HTML,最通俗易懂的解释 喜欢我的话,点击上方蓝色文字关注吧 不喜欢看文字的同学,点击下方绿色按钮,竖起耳朵听吧。 终于有心情写技术贴啦。 今天主要介绍一下前端三大基石之一——HTML。 HTML,全称叫做“超文本标记语言”,英文是“Hyper Text Markup La...
  27. websoket原理和实战 思考:像这样的消息功能怎么实现? 如果网页不刷新,服务端有新消息如何推送到浏览器? 解决方案,采用轮询的方式。即:通过js不断的请求服务器,查看是否有新数据,如果有,就获取到新数据。 这种解决方法是否存在问题呢? 当然是有的,如果服务端一直没有新的数据,那么js也是需要一直的轮询查询数据,这就是一种资源...
  28. “寒冬”三年经验前端面试总结(含头条、百度、饿了么、滴滴等)之手写题(promise篇)不论是寒冬还是暖冬,找工作之前都需要做好充足的准备,面试的时候才能做到游刃有余。此文是把我最近找工作准备的以及笔试面试中涉及到的手写题做一个总结。给自己,也给需要的同学。手写题是比较好准备的一个环...
  29. 用 Git 和 GitHub 提高效率的 10 个技巧 点击上面的蓝色字体“肉眼品世界”,深度价值体系传递 Git 和 GitHub 都是非常强大的工具。即使你已经使用他们很长时间,你也很有可能不知道每个细节。我整理了 Git 和 GitHub 可能提高日常效率的10个常用技巧。 GitHub ...
  30. 脑图学习 JavaScript 之犀牛书【四】类型转换、变量 上一篇讲了 JavaScript 中的类型和值,这篇主要关于 类型转换 、 变量 。 脑图 关键知识点 包装对象 犀牛书这里提到了一个 包装对象 的概念(见 3.6 ),使用包装对象的概念解释了 为什么字符串、数字等原始值也可以拥有各自的属性 。 当 JavaScript 要读取字符串 s 的属性时,将会通过调用 new...
  31. 你需要知道的13个关于JavaScript数组的小技巧 译者:道奇 作者:Duomly 原文: 13 useful JavaScript array tips and tricks you should know 数组是JavaScript中最常见的概念了,它为JavaScript的内部数据存储提供了很多可能性,考虑到在编程之初,数组是JavaScript最基础的主题之一,在这篇文章中,我会带来一些你可能不知道但是非常有用的小技巧!下...
  32. 现代 JavaScript 教程 — 那些你应该注意的运算符 我们从学校里了解到过很多运算符,比如说加号 + 、乘号 * 、减号 - 等。 在这个章节,我们将关注一些在学校数学课程中没有涵盖的运算符。 术语:「一元运算符」、「二元运算符」、「运算元」 在正式开始前,我们先简单浏览一下常用术语。 运算元—— 运算符应用的对象。比如说乘法运算 5 * 2 ,有两个...
  33. 手把手带你实现一个最精简的响应式系统来学习Vue的data、computed、watch实现 记得初学Vue源码的时候,在 defineReactive 、 Observer 、 Dep 、 Watcher 等等内部设计源码之间跳来跳去,发现再也绕不出来了。Vue发展了很久,很多fix和feature的增加让内部源码越来越庞大,太多的边界情况和优化设计掩盖了原本精简的代码设计,让新手阅读源码变得越来越困难,但是面试的时候,Vue的响应式原理几乎成...
  34. 快速打造 react 后台管理系统本文将以 react 为切入点,记录打造一个基础管理系统模板的过程,以此加深对 react 技术栈以及项目实战的理解,希望对大家开发一个这样的项目有所帮助
  35. 重温一下 JS 进阶需要掌握的 13 个概念阿里云服务器很便宜火爆,今年比去年便宜,10.24~11.11购买是1年86元,3年229元,可以点击 下面链接进行参与:[链接]
  36. Web 性能优化、文档及代码编辑器相关的新提案 作为使用 Web 技术的代码编辑器从业者,关注 Web 平台的各种新提案是工作的一部分。随着 Monaco Editor 被很多服务使用,我也开始收到各个新提案的发起者的邀请,对他们的提案提供反馈。其中一些提案跟编辑器开发效率和性能优化息息相关,但还处于非常早期的阶段,十分有潜力,所以我觉得值得分享出来,这样大家有机会可...
  37. 茶余饭后聊聊 Vue3.0 响应式数据那些事儿 "别再更新了,实在是学不动了"这句话道出了多少前端开发者的心声,"不幸"的是 Vue 的作者在国庆区间发布了 Vue3.0 的 pre-Aplha 版本,这意味着 Vue3.0 快要和我们见面了。既来之则安之,扶我起来我要开始讲了。Vue3.0 为了达到更快、更小、更易于维护、更贴近原生、对开发者更友好的目的,在很多方...
  38. JavaScript中this详解 详解JS函数柯里化 前端开发核心知识进阶--一网打尽 阮一峰ES6 es5中,非箭头函数 this 永远指向最后调用它的那个对象。为『动态』 全局环境下的this 注意严格模式use strict区别 上下文对象中的this bind/call/apply改变this的指向 手写bind简单实现 // ES5实现初版bind 函数 Func...
  39. 基于React企业级SPA项目搭建全记录本文是介绍如何搭建企业级react项目,所用的技术都是最新最主流的,后面我会再写一篇 《基于React企业级SSR项目搭建全记录》,敬请期待!
  40. JavaScript — event介绍以及兼容处理 JavaScript — event介绍以及兼容处理 1.事件流 浏览器发展到第四代时(IE4及 Netscape Communicator 4),浏览器开发团队遇到一个问题:页面的哪个部分会拥有某个特定的事件?可以想象在一张纸上的一组同心圆,如果把手指放在圆心上,那么你的手指指向的不是一个圆,而是纸上的所有圆。即在点击一个按钮时,不仅点击了...
  41. 一名【合格】前端工程师的自检清单 - 答案版(原型和原型链) 话不多说,直接开始正题吧.今天就是JavaScript基础篇第二部分 - 原型和原型链 原文地址: 一名【合格】前端工程师的自检清单 1.理解原型设计模式以及 JavaScript 中的原型规则 原型模式: 是指原型实例指向创建对象的种类,并通过拷贝这些原型创建新的对象,是一种用来创建对象的模式,也就是创建一个对象...
  42. 记录我的Vue.js从会用到精通之路 7 v-show的作用 和v-if作用一样!!!也是根据表达式返回 truthy值来进行相应操作的。 v-if对比v-show 既然他们俩一样,那我随便用咯。 万万不可,他们之间是有区别的。 v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。啥意思?意思就是如果值是false...
  43. 揭开NoahV智能运维前端框架的神秘面纱作者简介:莫海艳 百度资深前端研发工程师百度智能运维(Noah)产品前端技术方向负责人,在运维数据可视化、中后台前端解决方案等方向上,有着丰富的实践经验。
  44. 【JS 口袋书】第 10 章:使用异步 JavaScript阿里云服务器很便宜火爆,今年比去年便宜,10.24~11.11购买是1年86元,3年229元,可以点击 下面链接进行参与:[链接]
  45. 如何治疗JavaScript中的this?观感度: 口味:清爽绿豆 烹饪时间:15min 你皮任你皮,我当你瓜皮。 众所周知,this在JavaScript中的指向一直很难让人理解,想要学好JavaScript,this也是我们必须要搞清楚的。其实,this并没有那么难,本...
  46. 分享 GitHub 上有趣、入门级的开源项目月刊 兴趣是最好的老师,HelloGitHub 就是帮你找到兴趣! 简介 分享 GitHub 上有趣、入门级的开源项目。 这是一个面向编程新手、热爱编程、对开源社区感兴趣 人群的月刊,月刊的内容包括:各种编程语言的项目、让生活变得更美好的工具、书籍、学习笔记、教程等,这些开源项目大多...
  47. 网站新添加站点设置(后台处理程序分别为PHP,nodejs,python等) 如果要新添加一个站点,首先需要确定的是后台执行程序,是PHP还是nodejs还是python等。然后如果是nodejs等,就是用nginx做反向代理,让请求程序通过转发处理,比如: upstream django { server 127.0.0.1:9999; keepalive 2000; } server{ listen 80; server_name www.wrlod.com wrlod.com; ...
  48. JS 语言中那些让你抓狂又容易混淆的概念 下面罗列的js语言中那些让人抓狂混淆的概念,你遇到过几个? 建议收藏此文,每当要面试的时候提前拿出来温习温习巩固巩固,多次下来,这些概念相信会永远印在你的脑海中~~ 每一小节都会有一道对应的练习题供参考,如果你做出的答案和题目的答案一样,那么这一小节的内容相信你已经掌握了 1、Array.p...
  49. 方便编写vue组件库文档的vuepress插件 在编写vue组件库的时候,并使用vuepress进行文档编写的时候 目录结构一般是这样的 docs | packA.md └ packB.md packages └---packA | |--src | | └ demo.vue | └--index.js └---packB | |--src | | └ demo.vue | └--index.js 复制代码 当组件比较多是时候,我们会发现,组件代码和对应的文档md文件,距离比...
  50. js性能优化之防抖与节流 函数防抖(debounce):当持续出发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。 节流 函数节流(throttle):当持续触发事件时,保证一定时间段内只调用一次时间处理函数。 节流的定义应该比较好理解,举例来说就是,你在疯狂点击...
  51. web 应用程序的工程构建清单 项目主要探讨并记录 web 工程体系搭建的主要过程。( 脱离框架提供的 cli 从基础开始构建一个工程上还算完整的 web 应用 ) 现代 Web 工程主要是三大框架 React、Vue、Angular。项目选择 React。 为什么选择 React ?原因是工作中应用的是 Vue ;选择什么,对本项目来说不是很重要,重要的是 论述好工程搭建过程 ...
  52. 深入理解JS之执行上下文(创建-执行-回收) 承接上文,本文讲解执行上下文的创建、执行和回收阶段,重点是创建和执行阶段,回收涉及到浏览器的内存回收策略,本文暂不涉及以后会提到。(本文主要总结自网络和书籍中,其中加上本人自己的总结和思考) 创建阶段 首先创建应该是在预解析阶段,这个阶段主要工作有: 确定 this 的值,也被称为 This Binding...
  53. webpack4+react16+react-router-dom4从零配置到优化,实现路由按需加载(下) 上一篇介绍了下webpack的一些配置,接下来讲下reactRouter4里面关于路由的一些配置,如何做到模块的按需加载,这也是常用的一种优化网站性能的方式。 前言 react-router 还是 react-router-dom? 首先在创建React项目的时候,我们一般要引入两个包,react 和 react-dom, 那么 react-router 和react-router-dom ...
  54. 仿nuxt.js,自动构建路由,释放你的双手? 写过nuxt.js的同学,肯定也对nuxt的路由规则有一定的了解,在pages目录下创建文件,即可以自动构建路由,本文来带领大家实现一下在vue里怎么去自动构建路由。我这里使用的是Vue-cli 3.X版本进行初始化。cli 2.X版本也是一样只不过初始化出来的文件目录不一。 做前准备 了解require.context: 它是webpack里一个重...
  55. HTML5/CSS3闹铃动画特效 闹钟可以抖动源码 互联网的那些破事的微博视频
  56. GitHub 带来的不止是开源,还有折叠的认知 这里是Z哥的个人公众号 每周五11:45 按时送达 当然了,也会时不时加个餐~ 我的第「113」篇原创敬上 几乎每个程序员都知道github,但是知道目前上面有多少repositories的估计没几个。 Z哥今天去看了下,最新的数量显示是1.39亿个。 ▲截图来自于github.com 而这个数字...
  57. vue-router从源码到实践到进阶 HTML5 开始提供了对 history 栈中内容的操作。通过 history.pushState/replaceState 实现添加地址到 history 栈中。 pushState/replaceState() 方法 pushState() 需要三个参数: 一个状态对象, 一个标题 (目前被忽略), 和 (可选的) 一个URL. 让我们来解释下这三个参数详细内容: 状态对象 — 状态对象state是...

关注github前端日报 订阅精彩文章

前端日报栏目数据来自码农头条,每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等,为开发者提供动力,如果觉得内容对你有用,记得分享给你的小伙伴。进入码农头条查看更多

原文:20191103 前端开发周报 ,未经许可,禁止转载。
来源:前端开发博客 (http://caibaojian.com/fe-weekly-20191103.html)