导语：Serverless云函数的优点是不怕高并发，理论上无限自动扩容，缺点是冷启动特性导致冷启动的时延比较高。那么实际上性能如何，并且是否还有性能优化的空间和手段呢？ 最近试点Serverless的一个项目是从原有的node服务迁移到腾讯云函数Serverless的。既然是项目迁移，那么就要对比一下迁移前后的性能了。 压测方案 从测试同事那很快就找到压测大师这个工具，压测大师配置和报告都还算比较完善，是腾讯出的，内部的话用企业微信登录直接免费可以使用。 缺点是：发请求的时间间隔有限制，最大只能隔1分钟，那就无法纯测试云函数的冷启动了，不过每个阶段都有自动增加人数，页能间接测试到冷启动到性能，看到测试结果时不时飙升到高耗时，那就多数就是冷启动的耗时冷。 压测大师链接： https://wetest.qq.com [https://wetest.qq.com]

导语： 说起当前最火的技术，除了最新的区块链，AI，还有一个不得不提的概念是Serverless。Serverless作为一种新型的互联网架构直接或间接推动了云计算的发展，从AWS Lambda到各厂商争先推出Serverless服务框架，Serverless一路高歌。在这个风口，前端好像都要做点什么？ 目录： 一、Serverless简介 二、一个轻量web Application迁移实践 一、SERVERLESS简介 本章简单介绍一下Serverless的演变过程、Serverless是什么，其优缺点以及适合的应用场景。 云计算的发展从IaaS，PaaS，SaaS，到最新的BaaS，FasS，在这个趋势中serverless(去服务器化）越来越明显。 Bare Metal（IDC）： 物理机托管 IAAS： IaaS(Infrastructure as a Service)

一、缘起-为什么要进行小程序自动化测试 微信小程序生态日益完善，很多小程序项目页面越来越多，结构越来越复杂，业务逻辑也更加多样。以腾讯课堂小程序为例，目前腾讯课堂小程序部分页面结构和不同业务场景下的表现如下图所示： 可以看到在核心功能上主要页面对于不同业务场景有众多不同的表现，因此在开发与发布的过程中需要手动验证大量测试用例以保证小程序按预期表现运行，善于利用工具的程序员当然会想： 这种重复的工作能不能交给程序自动进行呢？

总体介绍 腾讯课堂 [https://ke.qq.com] 是一款通过线上的直播与点播向用户提供在线教育服务的产品，从 2014 年成立至今，已累计存储了 250 万个视频，共 600 TB，累计时长 150 万小时。之前一直采用的是腾讯视频的方案，但使用的是 MP4 格式，用户拿到了播放链接之后很容易盗版，所以趁着上云的潮流，我们将视频点播迁移到了 腾讯云 - 云点播 [https://cloud.tencent.com/document/product/266] 上，本文主要会讲一讲我们 整体的方案、Web 接入的方法和遇到的一些问题 。 视频点播分为视频上传和视频播放两个部分，下面的表格整理了上云前后的部分数据对比： 腾讯视频 腾讯云 Web 视频上传成功率 92% 99.5% 视频转码速度（两小时左右的视频） > 60 分钟 < 20 分钟 播放成功率 - PC 99% 98.7% 播放成功率 - H5 97% 97.1%可以看出来上传成功率和视频转码速度有了极大的提升，PC 和 H5 侧的播放成功率云和腾讯视频基本持平。 整体方案

作为一名前端工程师我们经常需要判断目标元素是否在视窗之内或者和视窗的距离小于一个值（例如 100 px），从而实现一些常用的功能，例如： * 图片的懒加载 * 列表的无限滚动 * 计算广告元素的曝光情况 * 可点击链接的预加载 说明： 可点击链接的预加载 这个功能目前使用的网站还比较少，其实就是“预先获取页面可视区域内的链接，加快后续加载速度”，能极大提升用户在站内跳转时的体验，由 Google 在 2018 年年底通过 quicklink 项目 [https://github.com/GoogleChromeLabs/quicklink] 进行开源。 目前流行的方式是通过 Element.getBoundingClientRect() [https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect] 拿到元素的相关位置信息后进行手动的判断，但是这种方法由于运行在 JavaScript的主进程上，所以当需要监听的元素较多时，可能会造成性能问题。

原文地址： http://www.cun-xu.cn/index.php/2018/12/25/重排与重绘/ 在页面的生命周期中，一些效果的交互都有可能发生重排（ Layout ）和重绘（ Painting ），这些都会使我们付出高额的性能代价。 浏览器从下载文件至本地到显示页面是个复杂的过程，这里包含了重绘和重排。通常来说，渲染引擎会解析HTML文档来构建DOM树，与此同时，渲染引擎也会用CSS解析器解析CSS文档构建CSSOM树。接下来，DOM树和CSSOM树关联起来构成渲染树（ RenderTree ），这一过程称为 Attachment 。然后浏览器按照渲染树进行布局（ Layout ），最后一步通过绘制显示出整个页面。 渲染过程 [https://upload-images.jianshu.io/upload_images/8336115-7fd8954aacbecff0.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240]

如何更优地去创建DOM元素 创建DOM元素是最为基本的DOM操作，这里先举个栗子 这里先使用createElement创建了10个li元素 var list = document.querySelector('.list'), num = 10,; for (t = 0; t < num; t++) { var li = document.createElement('li'); list.appendChild(li); } measurethat测试的结果是: image [https://note.youdao.com/yws/api/personal/file/E8242494530A40C688961913AA93FA9D?method=download>amp;shareKey=3aa6d50fe8f50c371107db2f85fb33da] 这里简单地通过createElement创建DOM是存在比较严重的性能问题的： 1、createElement本身就是不小的性能开支 2、 每次创建li元素都换插入到DOM中，会引起多次重排和重绘。

——本文是对之前同名文章的修正，将所有webpack3的内容更新为webpack4，以及加入了笔者近期在公司工作中学习到的自动化思想，对文章内容作了进一步提升。 0.引言 作为互联网项目，最重要的便是用户体验。在举国“互联网+”的热潮中，用户至上也已经被大多数企业所接收，特别是在如今移动端快速发展的时代，我们的网页不仅只是呈现在用户的PC浏览器里，更多的时候，用户是通过移动产品浏览我们的网页。加之有越来越多的开发者投入到Web APP和Hybrid

——从WEBKIT内部渲染机制出发，谈网站渲染性能优化 本文是对前文： http://imweb.io/topic/5b6fd3c13cb5a02f33c013bd 。 让我们用自己的双手，创造出极致的页面渲染性能。

最近有几个搭档开通了自己博客，但却诉苦说因为的买的虚拟空间，所以自己博客网站翻开速度很慢。关于这种景象，依照一般的状况来看，一个网 最近有几个搭档开通了自己博客，但却诉苦说因为的买的虚拟空间，所以自己博客网站翻开速度很慢。关于这种景象，依照一般的状况来看，一个网站的拜访 翻开速度的快与慢，满是看这个网站运用的空间装备，要是这个空间主机的装备不错，那么你的网站拜访速度就会很快;相反，要是你的空间主机的装备很烂，那么 你的网站拜访速度就会很慢。其实抛去空间主机的装备要素不谈，咱们站长或许搜索引擎优化人员也能够从页面制造方面着手，然后从现有的资本上进步网站的拜访速度。 假如你还不知道如何才干优化网站来进步网站的拜访速度，那就看一下马海祥博客为你总结出来的六个小窍门吧，期望对你能有所协助! ​ 1、利用浏览器缓存你的 js 和 CSS 文件： 在网站根目录 .htaccess 中参加以下代码 ExpiresActive on ExpiresDefault “access plus 1 year”

前言 在传统的WEB开发中，当与用户或服务器发生交互时，需要我们手动获取数据并更新DOM，这个过程是繁琐的、易错的。 特别是当页面功能过于复杂时，我们既要关注数据的变化，又要维护DOM的更新，这样写出来的代码是很难维护的。 新一代的框架或库，例如Angular、React、Vue等等让我们的关注点只在数据上，当数据更新时，这些框架/库会帮我们更新DOM。 那么这里就有两个很重要的问题了：当数据变化时，这些框架/库是如何感知到的？当我们连续更新数据时，这些框架/库如何避免连续更新DOM，而是进行批量更新？ 带着这两个问题，我将简要分析一下React、Angular1、Angular2及Vue的实现机制。 REACT VIRTUAL DOM alt

起因 起初想要去了解如何提高网页加载性能，发现Yahoo发布的一款基于FireFox的插件YSlow。 本文浅谈YSlow团队的23条“Web性能最佳实践和规则”，基本从两个角度出发，为什么要这么干，以及如何进行实践。 PS: 现在Yahoo工程师团队给出最佳实践是35条，而通常人们知道的是YSlow-23条规则（比如说本人）。 本文由YSlow-23条规则为基点出发，后续会进行35条最佳实践的相关拓展。 附上链接： Best Practices for Speeding Up Your Web Site [https://developer.yahoo.com/performance/rules.html] 正文 1. 减少HTTP请求次数 WHY