对于网页换肤，例如最常见的深色、浅色风格已经是很常见的一个需求了. 一直以来也有很多的实现方案，这里我主要介绍一下基于 CSS variable的实现方式. 1、把不同风格样式写到不同的类名下面，通过切换类名来实现换肤. 这种方式没啥明显的优点，只是单纯的实现了此需求. 反而增加了css样式文件代码冗余且会造成大量重复代码，样式代码不利于拓展维护，且开发效率低下.

我们知道，用户体验是 Web 产品最为重要的部分. 尽可能减少首屏加载时间，更为流畅地展示用户所需求的内容，会是用户是否留存的关键因素. 而随着现代 Web 业务可供用户的交互行为越来越多，前端项目的复杂度越来越高，每个页面的渲染时间也必然越来越长，这就导致了用户的体验不佳，用户的操作变慢. 为此，前端工程师们在首屏请求的各个阶段中持续钻研，不断探究如何将首次页面渲染的时间减少到更小，力求提供更为优秀的产品体验.

随着微前端的不断发展、被更多的团队采用，越来越多开始对沙箱这个概念有所了解. 沙箱，即 sandbox，意指一个允许你独立运行程序的虚拟环境，沙箱可以隔离当前执行的环境作用域和外部的其他作用域，外界无法修改该环境内任何信息，沙箱内的东西单独运行，环境间相互不受影响. 本文计划谈谈微前端的 JavaScript 隔离，即沙箱机制的古往今来.

Location 是 Nginx 中一个非常核心的配置，这篇重点讲解一下 Location 的配置问题以及一些注意事项. 关于 Location，举个简单的配置例子：. 大致的意思是，当你访问 www.yayujs.com 的 80 端口的时候，返回 /home/www/ts/index.html 文件.

笔者近半年一直在参与项目重构，在重构过程中大量应用 性能优化和 设计模式两方面的知识. 性能优化和 设计模式两方面的知识不管在工作还是面试时都是高频应用场景，趁着这次参与大规模项目重构的机会，笔者认真梳理出一些常规且必用的 性能优化建议，同时结合日常开发经验整理出笔者在网易四年来实践到的认为有用的所有 性能优化建议，与大家一起分享分享.

一千个程序员，就有一千种代码风格. 在前端开发中，有几个至今还在争论的代码风格差异：. 这几个代码风格差异在协同开发中经常会被互相吐槽，甚至不能忍受. 除此之外，由于 JavaScript 的灵活性，往往一段代码能有多种写法，这时候也会导致协同时差异. 并且，有一些写法可能会导致不易发现的 bug，或者这些写法的性能不好，开发时也应该避免.

开源不易，感谢你的支持， ❤ star concent^_^. 这里我们将使用 create-next-app命令来安装一个基础的next示例应用. 执行完毕后，可以看到一个如下的目录结构. |____public |____pages | |____ _app.js // next应用默认的根组件 | |____index.js // 默认首页 | |____api.

作为一个从未接触过实时流（直播流）的人，我之前对实时视频一直没有概念，而最近参与的项目刚好有视频监控的需求，在参与技术选型之前，我对前端实时流的展示进行了一下摸底. 视频有一个流的概念，所以称流媒体. 实时视频的流很好理解，因为视频是实时的，需要有一个地方不停地输出视频出来，所以整个视频可以用流来称呼.

项目地址： https://github.com/yemount/pose-animator. Pose Animator拍摄2D矢量图，并基于PoseNet和FaceMesh的识别结果实时对其包含的曲线进行动画处理. 它从计算机图形学中借鉴了基于骨骼的动画的思想，并将其应用于矢量字符. 项目地址： https://github.com/renrenio/renren-fast-vue.

vue项目的一大亮点就是组件化. 使用组件可以极大地提高项目中代码的复用率，减少代码量. 但是使用组件最大的难点就是父子组件之间的通信. . . // 参数就是子组件传递出来的数据.

组件是前端的发展方向，现在流行的 React 和 Vue 都是组件框架. 谷歌公司由于掌握了 Chrome 浏览器，一直在推动浏览器的原生组件，即 Web Components API. 相比第三方框架，原生组件简单直接，符合直觉，不用加载任何外部模块，代码量小. 目前，它还在不断发展，但已经可用于生产环境.

前端的最重要的基础知识点是什么. 原生 javaScript， HTML, CSS.. EventLoop和渲染机制. 各类工程化的工具原理以及使用，根据需求定制编写插件和包. （webpack的plugin和babel的预设包）. 数据结构和算法（特别是 IM以及超大型高并发网站应用等，例如 B站）.

本文翻译自: Keeping Node.js Fast: Tools, Techniques, And Tips For Making High-Performance Node.js Servers. 原文地址： https://www.smashingmagazine..... 中文标题：保持Node.js的速度-创建高性能Node.js Servers的工具、技术和提示.

本文适合无论是否有爬虫以及 Node.js基础的朋友观看~. 使用 Node.js爬取网页资源，开箱即用的配置. 将爬取到的网页内容以 PDF格式输出. 如果你是一名技术人员，那么可以看我接下来的文章，否则，请直接移步到我的 github仓库，直接看文档使用即可. 仓库地址: 附带文档和源码,别忘了给个 star哦.

Flutter是一种新型的“客户端”技术. 它的最终目标是替代包含几乎所有平台的开发：iOS，Android，Web，桌面；做到了一次编写，多处运行. 掌握Flutter web可能是Web前端开发者翻盘的唯一机会. 在前些日子举办的Google IO 2019 年度开发者大会上，Flutter web作为一个很亮眼的技术受到了开发者的追捧.

随着web技术的发展，使用场景和需求也越来越复杂，客户端不再满足于简单的请求得到状态的需求. 实时通讯越来越多应用于各个领域. HTTP是最常用的客户端与服务端的通信技术，但是HTTP通信只能由客户端发起，无法及时获取服务端的数据改变. 只能依靠定期轮询来获取最新的状态. 时效性无法保证，同时更多的请求也会增加服务器的负担.

性能优化是一门大学问，本文仅对个人一些积累知识的阐述，欢迎下面补充. 抛出一个问题，从输入 url地址栏到所有内容显示到界面上做了哪些事. DNS 服务器请求解析该 URL 中的域名所对应的. 2.建立 TCP连接（三次握手）;. 3.浏览器发出读取文件( URL 中域名后面部分对应的文件)的 HTTP 请求，该请求报文作为.

本文不是讨论最新的 JavaScript 库、常见的开发实践或任何新的 ES6 函数. 相反，在讨论 JavaScript 时，面试中通常会提到三件事. 我自己也被问到这些问题，我的朋友们告诉我他们也被问到这些问题. 然，这些并不是你在面试之前应该学习的唯一三件事 - 你可以通过 多种 方式更好地为即将到来的面试做准备 - 但面试官可能会问到下面是三个问题，来判断你对 JavaScript 语言的理解和 DOM 的掌握程度.

本篇内容将记录并介绍使用Puppeteer进行自动化网页测试，并依靠约定来避免反复修改测试用例的方案. 主要解决页面众多时，修改代码导致的牵连错误无法被发现的运行时问题. 目前我们在持续开发着一个几十个页面，十万+行代码的项目，随着产品的更迭，总会出现这样的问题. 在对某些业务逻辑或者功能进行添加或者修改的时候（尤其是通用逻辑），这些通用的逻辑或者组件往往会牵扯到一些其他地方的问题.

在互联网时代，数据安全与个人隐私受到了前所未有的挑战，各种新奇的攻击技术层出不穷. 本文主要侧重于分析几种常见的攻击的类型以及防御的方法. 想阅读更多优质原创文章请猛戳 GitHub博客. XSS (Cross-Site Scripting)，跨站脚本攻击，因为缩写和 CSS重叠，所以只能叫 XSS.

本指南的目的是让你充分了解Node.js HTTP处理的过程，我们假设你在一般意义上知道HTTP请求的工作方式，无论语言或编程环境如何，我们还假设你对Node.js EventEmitters和 Streams有点熟悉，如果你对它们不太熟悉，那么值得快速阅读每个API文档. 任何节点Web服务器应用程序在某些时候都必须创建Web服务器对象，这是通过使用 createServer完成的.

本文由云+社区发表 “当我第一次知道要这篇文章的时候，其实我是拒绝的，因为我觉得，你不能叫我写马上就写，我要有干货才行，写一些老生常谈的然后加上好多特技，那个 Node.js 性能啊好像 Duang~ 的一下就上去了，那读者一定会骂我，Node.js 根本没有这样搞性能优化的，都是假的. ” ------ 斯塔克·成龙·王.

从 0 到 1 再到 100, 搭建、编写、构建一个前端项目. 选择现成的项目模板还是自己搭建项目骨架. 搭建一个前端项目的方式有两种：选择现成的项目模板、自己搭建项目骨架. 选择一个现成项目模板是搭建一个项目最快的方式，模板已经把基本的骨架都搭建好了，你只需要向里面填充具体的业务代码，就可以通过内置的工具与命令构建代码、部署到服务器等.

今天来给大家介绍下前端监控中一个特定指标的获取算法，有人会问，为啥就单单讲一个指标. 这是因为，目前大部分的指标，比如白屏时间，dom加载时间等等，都能通过现代浏览器提供的各种api去进行较为精确的获取，而今天讲的这个指标，以往获取他的方式只能是通过逻辑埋点去获取它的值，因此在做一些前端监控时，需要根据业务需要去改变页面对这个值的埋点方式，会比较繁琐，恰巧最近刚刚好在做一些前端监控相关的项目，遇到这个问题时就在想，能不能通过一种无须埋点的方式，将这个值给获取到.

当用户输入url，操作系统会将输入事件传递到浏览器中，在这过程中，浏览器可能会做一些预处理，比如 Chrome 会根据历史统计来预估所输入字符对应的网站，例如输入goog，根据之前的历史发现 90% 的概率会访问「www.google.com 」，因此就会在输入回车前就马上开始建立 TCP 链接甚至渲染了.

写极客时间8个月了，我的专栏现在有一定的积累了，今天想自己推荐一下. 因为最新的系列《程序员练级攻略（2018）版》正在连载中，而且文章积累量到了我也有比较足的自信向大家推荐我的这个专栏了. 推荐就从最新的这一系统的文章开始. 2011年，我在 CoolShell 上发表了 《 程序员技术练级攻略》一文，得到了很多人的好评（转载的不算，在我的网站上都有近1000W的访问量了）.

先来上两张图看看那种猫是暹罗. 你以后是不是可以识别了暹罗和英短了. 这是因为素材太少了，我们看这两张图能分别提取出来短特征太少了. 那如果我们暹罗短放100张图，英短放100张图给大家参考，再给一张暹罗或者英短短照片是不是就能识别出来是那种猫了，即使不能完全认出来，是不是也有90%可能是可以猜猜对.

深入理解JS引擎的执行机制. 1.灵魂三问 : JS为什么是单线程的. 2.JS中的event loop(1). 3.JS中的event loop(2). 4.说说setTimeout. (1) JS是单线程语言. (2) JS用过Event Loop是JS的执行机制. 想深入了解JS的执行,就等于深入了解JS里的event loop.

我来填坑了，CSS篇终于写出来了，如果你没看过前面的JS篇，可以 在这里观看. 众所周知，CSS的加载会阻塞浏览器渲染或是引起浏览器重绘，目前业界普遍推荐把CSS放到 中，防止在CSS还没加载完，DOM就已经绘制出来了，造成CSS加载完成后的重绘. 那在现代浏览器中我们有没有办法提高首屏渲染速度那.

我的目标不仅是能用，而且好用, 跨平台(PC, Android, IOS, etc…)使用; 本文将详细介绍API的设计及异常处理, 并将异常信息进行封装友好地反馈给前端.. 上篇文章 前后端完全分离初探只是讲了些宽泛的概念, 接下来的文章将直接上干货, 干货的源码会挂在 github上.. 前后端完全分离后, 前端和后端如何交互.