混合式开发，在产品体验以及页面加载速度的体验上已经非比以往的。今日早读文章由@unclechen分享。
当下浏览器内核主要有 Webkit、Blink 等。本文分析注意是自 2001 年 Webkit 从 KHTML 分离出去并开源后，各大浏览器厂商魔改 Webkit 的时期，这些魔改的内核最终以 Chromium 受众最多而脱颖而出。本文就以 Chromium 浏览器架构为基础，逐层探入进行剖析。
HTML5学堂：在前一篇文章当中，我们借着weinre讲解了NodeJS中的一些简单命令，也讲解了weinre的安装方法，今天我们把weinre的使用“完结”掉。移动端页面的开发过程中，weinre“即时”的调试方式，能够让我们更好更快的解决调试问题，使调试工作变得更加方便。 想要调试的文件放在哪里 首先，按照全局模式“-g”进行安装~（前面一篇文章我们已经讲过了） 之后，将我们需要调试的页面放置于如下目录当中：C:\Users\Administrator\AppData\Roaming\npm\node_
背景 由于JavaScript（以下简称JS）语言的特性，前端作用域拆分一直是前端开发中的首要关卡。从简单的全局变量分配，到RequireJS实现的AMD模块方式，browserify/webpack
单纯的控件只是展示了简陋的视觉UI和基本行为，在实际开发中需要用到的是经过各种样式装饰和动画还有丰富行为的UI，而且还会被重复利用。所以为了降低代码重复率，提高开发效率，一般开发会把一个或多个控件的结构、样式、行为、联动封装到一个文件中，这样一个组合文件就称为“组件”。
最近开源了一个 Vue 组件，还不够完善，欢迎大家来一起完善它，也希望大家能给个 star 支持一下，谢谢各位了。
插件 parallel.js: 前后端通用的一个并行库 zepto: 用于现代浏览器的兼容 jQuery 的库 totoro: 稳定的跨浏览器测试工具 TheaterJS: 一个用于模拟人输入状态的 JS 库 stellar.js: 前端用于实现异步滚动效果的库，现已不再维护 skrollr: 另一款实现一步滚动的开源库，使用人数众多，可实现各种狂拽酷炫掉渣天的前端效果，看真相 Framework7: 前端框架，是开发人员可以基于 web 技术构建 IOS7 程序 regulex: 用于生成 正则表达式 的
在移动互联网的时代里，对于一个web站点来说，移动端的用户体验尤为重要。现代web站点的设计和开发都是以移动优先作为第一原则，我们也专门为了移动端的web站点做了相应的优化和提升。而网页的打开速度和页面的流畅度，对于用户是否长时间访问至关重要。我们在移动端的站点通过一系列的方法，最终为了快速打开页面展示网页内容，触达用户，同时能流畅的浏览网页。 移动端的硬件条件，网络条件相对于桌面端，会复杂的多，设备类型多样，硬件配置参差不齐，分辨率碎片化，网络状况在移动过程中稳定性，速率都会变化，而对于一个页面到达用户的
随着我们的网站越来越依赖 JavaScript, 我们有时会(无意)用一些不易追踪的方式来传输一些(耗时的)东西. 在这篇文章中, 我会介绍一些能让你的网站在移动设备上快速加载且可交互的方式. 摘要: 更少的代码 = 更少的解析/编译(时间) + 更少的传输(时间) + 更少的解压(时间) 网络 大多数开发者考虑 JavaScript 的时间消耗时, 都会首先考虑到 JavaScript 的下载和执行消耗. 脚本传输的字节越多, 花费的时间越长, 用户连接的就越慢. network 即使在网络发达的国家,
在移动wap中，经常会使用window.location.href去跳转页面，这个方法在绝大多数浏览器中都不会 存在问题，但早上测试的同学会提出了一个bug：在安卓手机的微信自带浏览器中，这个是失效
内容来源：作者，深予之 (@senntyou)，https://github.com/senntyou/blogs；来自，https://segmentfault.com/a/1190000016852780
一、为什么难 秒杀系统难做的原因：库存只有一份，所有人会在集中的时间读和写这些数据。 例如小米手机每周二的秒杀，可能手机只有1万部，但瞬时进入的流量可能是几百几千万。 又例如12306抢票，亦与秒杀类似，瞬时流量更甚。
前言 很高兴认识大家，之前做过很多分享，今天这次终于讲到正题了。因为之前一直讲自动化运维，其实做这么多年运维，自动化运维没干多少年。这几年很多公司各方面机器数量多了，规模大了才开始去做自动化运维。 今天的课题是高性能Web架构之缓存体系，之所以讲这个体系是因为作为一名运维工程师，我们经常会遇到Web站点访问很慢的情况。要解决这个问题，直接找开发，问题也不一定能解决。因为这个问题不仅仅是开发的问题， 这个问题涉及到浏览器从发出请求到响应请求的一系列问题，所有地方都需要一点点摸清楚才能最后找到问题所在。 1、认
很高兴认识大家，之前做过很多分享，今天这次终于讲到正题了。因为之前一直讲自动化运维，其实做这么多年运维，自动化运维没干多少年。这几年很多公司各方面机器数量多了，规模大了才开始去做自动化运维。
《秒杀系统架构优化思路》 上周参加Qcon，有个兄弟分享秒杀系统的优化，其观点有些赞同，大部分观点却并不同意，结合自己的经验，谈谈自己的一些看法。 一、为什么难 秒杀系统难做的原因：库存只有一份，所有
【导读】徐汉彬曾在阿里巴巴和腾讯从事4年多的技术研发工作，负责过日请求量过亿的Web系统升级与重构，目前在小满科技创业，从事SaaS服务技术建设。 在过去的工作中，徐汉彬从事各类缓存建设和优化，遇到问题无数，从各种各样的问题中，逐渐总结出它们之间的“共性”，而这个“共性”又优雅地遵循“几何分形学”。从几何分形的角度去看待缓存机制，能够更容易和更清晰地表述出它的深层原理和部署思想。帮助技术人员去解决在缓存上遇到的技术问题。 缓存机制和几何分形学 缓存机制在我们的实际研发工作中，被极其广泛地应用，通过这些缓存
秒杀系统难做的原因：库存只有一份，所有人会在集中的时间读和写这些数据。例如小米手机每周二的秒杀，可能手机只有1万部，但瞬时进入的流量可能是几百几千万。又例如12306抢票，亦与秒杀类似，瞬时流量更甚。
最近公司里让我研究PWA，经过几天的研究发现PWA竟是如此万能，功能接近手机原生APP，最大的优点是它的离线缓存机制，这主要得益于ServiceWorker！
今天一连两次被问到简历中提到的高性能Web开发方面的事，看来这种大标题很有诱惑力。
自苹果推出了iPhone应用商店以来，App成为了我们生活中不可或缺的一部分，而对于实体业务也是如此，现在各行业都在推出自己的App，但有没有人想过这样一种场景，如果自己的潜在客户还没有安装你的App亦或是即便安装但因为客户的手机存储空间紧张而卸载掉了你的App？那有没有使App更轻量，更易安装的技术实现呢？答案是“有的”。
例如小米手机每周二的秒杀，可能手机只有1万部，但瞬时进入的流量可能是几百几千万。又例如12306抢票，票是有限的，库存一份，瞬时流量非常多，都读相同的库存。读写冲突，锁非常严重，这是秒杀业务难的地方。那我们怎么优化秒杀业务的架构呢？
平时在页面开发过程中，常会感觉有几个地方不太便利，例如： （1）浏览器中打开的标签页太多，调试的页面是其中的一个，感觉被淹没了，比如查看完其他网页资料，然后编辑代码，再找调试页面时就比较麻烦，得从众多标签页中寻找 （2）开发中有时需要清除浏览器缓存，但这可能影响已经打开的其他网站 （3）每次修改完代码后，需求手动刷新页面查看效果 后来我就使用单独的浏览器打开调试页面，这样可以使用 ctrl+tab 快捷键快速打开，并且清除缓存也不影响其他网页，然后使用 browsersync 来自动刷新 正好前阶段发现一个
在 Web 开发中，随着需求的增加与代码库的扩张，我们最终发布的 Web 页面也逐渐膨胀。不过这种膨胀远不止意味着占据更多的传输带宽，其还意味着用户浏览网页时可能更差劲的性能体验。浏览器在下载完某个页面依赖的脚本之后，其还需要经过语法分析、解释与运行这些步骤。而本文则会深入分析浏览器对于 JavaScript 的这些处理流程，挖掘出那些影响你应用启动时间的罪魁祸首，并且根据我个人的经验提出相对应的解决方案。回顾过去，我们还没有专门地考虑过如何去优化 JavaScript 解析/编译这些步骤；我们预想中的是解析器在发现 <script>标签后会瞬时完成解析操作，不过这很明显是痴人说梦。下图是对于 V8 引擎工作原理的概述：
由于 File System是 H5 新加入的缓存机制，所以Android WebView暂时不支持
【客户端】 1.关于游戏引擎 在15年3月开始准备做h5游戏的时候，首先遇到的问题就是引擎选型的问题。 当时市面上的2d引擎主要有3个:白鹭egret,layabox和cocos2d-js。 一方面，是因为我以前用cocos2d-x(c++)做了一年多的手游客户端，所以，很自然就选择了cocos2d-js。另一方面，是因为当时市面上其他两个引擎的成功项目还不多。 cocos引擎的每一次版本更新，我们都会第一时间在我们的游戏里面进行测试。 如果发现游戏在android手机上的性能有明显提升，我们就会跟着引擎版
面试必问之-页面性能优化 参考原文地址 我们面试的时候很多的问题，其中问的频率比较高的一个就是页面怎么进行性能优化， 我们一般直接回答很多条，然后导致一个问题就是很多的面试官还会继续问，说具体怎么实现你说的这些方法，下面我们就简单的说几个典型的。记住页面性能优化的终极目的还是提高用户体验，所以一定意义上说提高用户体验也是页面性能优化的一部分。 性能优化 减少http的请求数 这个是我们最习惯的回答，但是其实很多面试官会接着问，怎么减少呢？这个时候很多人就晕了，其实也不难，从两个方面减少，分别从业务
想必大家都知道，JavaScrip是全栈开发语言，浏览器，手机，服务器端都可以看到JS的身影。 本文会分享一些高效的JavaScript的最佳实践，提高大家对JS的底层和实现原理的理解。 数据存储 计算机学科中有一个经典问题是通过改变数据存储的位置来获得最佳的读写性能，在JavaScript中，数据存储的位置会对代码性能产生重大影响。 - 能使用{}创建对象就不要使用new Object，能使用[]创建数组就不要使用new Array。JS中字面量的访问速度要高于对象。 - 变量在作用域链中的位置越深，访
一个简单的功能，完全可以在浏览器内实现，凭什么国内某些软件这么希望你去下载，去使用他们的app？
介绍 首先，写给所有移动端开发的同学：PWA(Progressive Web Apps) 一定是将来的移动开发趋势，且学且珍惜。 Progressive Web Apps 比小程序还要方便，对于首次访问的用户可以直接在浏览器中进行访问，不需要安装应用。即使在比较糟糕的网络环境下，也能够快速地加载，且能够推送相关消息, 也可以像原生应用那样添加至桌面或浏览器主屏，能够有全屏浏览的体验。 PWA 和 Service Worker 是什么关系？Service Worker 是一个运行在浏览器后台进
我们在访问网站的时候，会从网站服务器中下载很多数据，其中包括css文件、图片文件、js文件、音频文件等等，有时候一个页面这种零零散散的文件就要下载上百个，可以打开浏览器的开发者工具，点击Network就可以看到这些数据的下载：
简单大概的说出来就可以了，不要详细到你哪年进入公司，哪年离开公司，负责项目做什么的，说一大通。这个对我们面试官来说，想让你自我简单介绍，其实考察点有两方面：
前端性能优化，是每个前端必备的技能，优化自己的代码，使自己的网址可以更加快速的访问打开，减少用户等待，今天就会从几个方面说起前端性能优化的方案，
一个新的前端技术，PWA（ 全称：Progressive Web App ）也就是说这是个渐进式的网页应用程序。
我们知道，微信小程序由一个描述整体程序的 app 和多个描述各自页面的 page 组成。小程序主体部分由 app.js、app.json、app.wxss三个文件组成，页面 page 则通常包含 js、wxml、json、wxss 文件。这些文件都是文本文件，由微信小程序引擎解析并解释执行。
本文由哔哩哔哩前端工程师 墨白 翻译分享 我喜欢移动app，而且也是那些坚持使用Web技术构建移动应用程序的人之一。 经过技术的不断迭代（可能还有一些其它的东西），移动体验设计愈来愈平易近人，给予用户
在App开发中，内嵌WebView始终占有着一席之地。它能以较低的成本实现Android、iOS和Web的复用，也可以冠冕堂皇的突破苹果对热更新的封锁。 然而便利性的同时，WebView的性能体验却备受质疑，导致很多客户端中需要动态更新等页面时不得不采用其他方案。 以发展的眼光来看，功能的动态加载以及三端的融合将会是大趋势。那么如何克服WebView固有的问题呢？我们将从性能、内存消耗、体验、安全几个维度，来系统的分析客户端默认WebView的问题，以及对应的优化方案。 性能 对于WebView的性能，给人
在做H5混合开发的时候总是会遇到浏览器差异、不兼容导致同样的代码，IOS和Andoird其中之一出现不可预见的问题。 我的问题也是如此，我的需求是从父页面跳转子页面，子页面提交后返回父页面，并且父页面刷新。 Android的Chrome浏览器对这个需求就很容易支持，因为他每次页面重新显示的时候，都会刷新整个页面。而IOS的Safari浏览器出现了问题，Safari浏览器会读取缓存，不会重新刷新页面。
随着现代化浏览器的发展，客户端的能力已经有了很大的提升，比如 Chrome、Firefox，通过 webkit 等内核的发展与版本的迭代与升级，浏览器变得越来越强大。对于前端来说，由于浏览器的升级所能做的事情越来越多，我们在数据存储方面也就有很多方案可以选择，大概有以下几种方式：
本文为 Google Chrome 团队的开发项目工程师 Addy Osmani 在PerfMatters 2019 网页性能大会发表的“JavaScript性能优化”（https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4）的演讲，其分享了处理 JavaScript 的脚本优化建议，大幅地减少了下载时间和执行时间。
install 事件回调中有两个方法： * event.waitUntil()：传入一个 Promise 为参数，等到该 Promise 为 resolve 状态为止。 * self.skipWaiting()：self 是当前 context 的 global 变量，执行该方法表示强制当前处在 waiting 状态的 Service Worker 进入 activate 状态。 * 安装后( installed )：Service Worker 已经完成了安装，并且等待其他的 Service Worker 线程被关闭。 * 激活( activating )：在这个状态下没有被其他的 Service Worker 控制的客户端，允许当前的 worker 完成安装，并且清除了其他的 worker 以及关联缓存的旧缓存资源，等待新的 Service Worker 线程被激活。
翻译后发现貌似已经有人翻译过，但是翻译的水平就有点。。。。。那篇文章中不仅忽略了知识点，并且出现了明显的语义和语法错误，有一定的误导作用，所以请务必重新阅读老高的翻译。文章中容易出错的地方老高已经注释（在文章中以【】标出）。
原文地址: Modern Script Loading, 文章作者是Preact作者Jason Miller
一、秒杀业务为什么难做 1）im系统，例如qq或者微博，每个人都读自己的数据（好友列表、群列表、个人信息）； 2）微博系统，每个人读你关注的人的数据，一个人读多个人的数据； 3）秒杀系统，库存只有一份，所有人会在集中的时间读和写这些数据，多个人读一个数据。 例如：小米手机每周二的秒杀，可能手机只有1万部，但瞬时进入的流量可能是几百几千万。 又例如：12306抢票，票是有限的，库存一份，瞬时流量非常多，都读相同的库存。读写冲突，锁非常严重，这是秒杀业务难的地方。那我们怎么优化秒杀业务的架构呢？ 二、优化方向
因为工作上的需要，刚好有跨端和离线缓存的需求，就开始深入研究很早之前就关注的 PWA 技术。也刚好赶上微软、英特尔与谷歌携手举办的“第二届中国 PWA 开发者日”。有幸可以参加这次盛会，在会上，我们看到了很多新的工具和技术。
前言 说到H5测试，对于做WEB测试的同学来说再熟悉不过了，它包括页H5功能测试，前端性能测试，浏览器兼容性能测试，以及服务端性能测试。那本文谈到的则是H5前端性能测试，并希望通过阅读本文后，能够知道：H5前端性能测试什么？如何发现问题以及相应的优化规则。 一、浏览器渲染引擎 浏览器是Html解析和页面最终展示的工具，所以测试H5前理解浏览器的工作原理是必不可少的，具体可参考《浏览器工作原理》。 浏览器的主要功能 浏览器的主要功能是将用户选择的web资源呈现出
说到H5测试，对于做WEB测试的同学来说再熟悉不过了，它包括页H5功能测试，前端性能测试，浏览器兼容性能测试，以及服务端性能测试。
真正了解前端技术的工程师都会感觉前端技术发展变化太快。浏览器特性、前端框架、前端工具、多终端浏览器等都在快速迭代中。作为前端工程师不仅要掌握现有的技术去实现业务需求，更要不断的学习新的技术、新的理念，时刻准备着新技术浪潮的来临。
想要成为一名合格的Web前端工程师，Web前端性能优化是一个必须要掌握的知识，那么应该怎么进行Web前端性能优化呢？--达达前端
上期作者发布了一篇关于wifi钓鱼的方法，今天我来给大佬们带来一篇关于拿到wifi密码能干什么？
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
