作 者 朱永俊，腾讯IEG高级工程师 商业转载请联系腾讯WeTest获得授权，非商业转载请注明出处。 作者导读 为了提升对微信小程序的测试能力， 腾讯WeTest质量开放平台推出了小程序整体质量解决方案，包括服务器压测、安全渗透和扫描、兼容适配、客户端性能等。本文介绍WeTest的小程序兼容测试方案，以及其中重要指标项的技术实践。 腾讯WeTest小程序兼容测试，依托平台丰富的真机机型，根据小程序/小游戏特点，覆盖异常打断、群分享等典型场景，记录性能指标，以及JS Error、首屏加载等特定数据，还
之前讲到重排，布局的时候使用flex时，比使用inline-block和float时重排更快，所以在布局时可以优先考虑Flex。
最近官网改版的任务交给了我，开发使用的是jq操作dom，后台php渲染的方式，如今已经开发完成，现在把一些问题记录下来，已备忘。
介绍 首先，写给所有移动端开发的同学：PWA(Progressive Web Apps) 一定是将来的移动开发趋势，且学且珍惜。 Progressive Web Apps 比小程序还要方便，对于首次访问的用户可以直接在浏览器中进行访问，不需要安装应用。即使在比较糟糕的网络环境下，也能够快速地加载，且能够推送相关消息, 也可以像原生应用那样添加至桌面或浏览器主屏，能够有全屏浏览的体验。 PWA 和 Service Worker 是什么关系？Service Worker 是一个运行在浏览器后台进
微信小程序中提供了相关API 让开发者能获取到微信用户的相关信息，在首次去获取的时候会展示一个用户是否同意授权的对话框。Jeff 发现有不少线上的小程序都没有处理好用户“拒绝授权”导致的“授权失败”场景。 一个观点 私认为，开发微信小程序在用户授权上有一个要点：除非非常有必要，不要一进入小程序就申请授权，而是仅需要授权的页面才申请——这样让用户的心理负担没那么大。站在用户的角度，有时候我是很讨厌这种一进入小程序就申请授权的行为，毕竟头像昵称这些本质上还是属于用户的隐私，你小程序不给个理由就要拿去，我还是很反
服务端渲染的概念这几年可以说是炒得火热，它不是一种新型的技术，而是互联网最开始时所使用的加载技术。
vue官方提供了几个vue cli的模版，但都单页面模版，然而在真实的业务场景下还是有多页面模版的需求，百度和google上都能搜索到不少单页面模版改多页面模版的文章，但是没有现成的模版可以直接用，而且多页面模版页面多了之后，首次构建的速度真的很慢，无法忍受。这里我fork了官方的单页面webpack模版，并做了动态构建的优化。
webpack ensure相信大家都听过。有人称它为异步加载，也有人说做代码切割，那这个家伙到底是用来干嘛的？其实说白了，它就是把js模块给独立导出一个.js文件的，然后使用这个模块的时候，webpack会构造script dom元素，由浏览器发起异步请求这个js文件。
回答 what 这种问题，重点在于名词，因此 PWA 是一个 APP，一个独立的、增强的、Web 实现的 APP
做 H5 经常会遇到很多需求，比如在微信/钉钉浏览器打开的时候会显示两个 head 或者 title 头。
onlaunch：当小程序初始化完成时，会触发 onLaunch（全局只触发一次）（app.js）； onLoad: 页面加载 小程序注册完成后，加载页面，触发onLoad方法。一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数（页面js）。 onShow: 页面显示 页面载入后触发onShow方法，显示页面。每次打开页面都会调用一次（比如当小程序有后台进入到前台运行或重新进入页面时）。 onReady: 首次显示页面，页面初次渲染完成，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。 onHide: 页面隐藏 当navigateTo、底部tab切换、上传文件选择图片时调用。 onUnload: 页面卸载 当返回上一页wx.navigateBack、wx.relanch、wx.redirectTo时都会被调用(这里的坑有点深)。 基本上可以说执行顺序为onLaunch–onLoad–onShow–onReady–onHide. 虽然说onLaunch在onLoad之前执行，但是在onLaunch里请求获取是否有权限，等待返回值的时候Page里的onLoad事件就已经执行了。 解决办法： 在APP里面onLanch中的网络请求中设置判断
也许你有听过一个问题，你这款 web 应用性能怎么样呀？你会回答什么呢？是否会优于海量 web 应用市场呢？本文就来整理下如何进行 web 性能监控？包括我们需要监控的指标、监控的分类、performance 分析以及如何监控。
由于 File System是 H5 新加入的缓存机制，所以Android WebView暂时不支持
无论是日常业务还是面试过程中，相信大家对于前端路由这个话题或多或少都有自己的应用和理解。
21 | Chrome开发者工具：利用网络面板做性能分析 页面是浏览器的核心，浏览器中的所有功能都是服务于页面的，Chrome开发者工具又是调试页面的核心工具。 网络面板 控制器 开始或停止抓包 全局搜索 禁止从cache中加载资源 模拟网络 过滤器 抓图信息：Capture screenshots 详细列表：重点内容 下载信息概要 DOMContentLoaded:页面已经构建好DOM，所需要的HTML、CSS和JS文件都已经下载完成 Load:浏览器已经加载了所有的资源(图片、样式表等) 详
- 原文出处：http://blog.poetries.top/2022/07/27/sentry-summary/
本文由 IMWeb 团队成员 lq 首发。点击阅读原文查看 IMWeb 社区更多精彩文章。 注：本文需要有一定的 PWA 基础 1. 什么是 PWA？ 要知道一个东西是什么，我们通常可以从它的名字入手 因此我们看下 PWA 的全称是： Progressive Web App 回答 what 这种问题，重点在于名词，因此 PWA 是一个 APP，一个独立的、增强的、Web 实现的 APP 要达到这样的目的，PWA 提供了一系列的技术 & 标准，如下图所示： 具体每一项技术是什么就不再赘述了，感兴趣的同学自行
关于 React 应用加载的优化，其实网上类似的文章已经有太多太多了，随便一搜就是一堆，已经成为了一个老生常谈的问题。 但随着 React 16 和 Webpack 4.0 的发布，很多过去的优化手段其实都或多或少有些“过时”了，而正好最近一段时间，公司的新项目迁移到了 React 16 和 Webpack 4.0，做了很多这方面的优化，所以就写一篇文章来总结一下。 零、基础概念 我们先要明确一次页面加载过程是怎样的（这里我们暂时不讨论服务器端渲染的情况）。 一次渐进式加载的全过程 用户打开页面，这个时候
PV(page view) 是页面浏览量，UV(Unique visitor)用户访问量。PV 只要访问一次页面就算一次，UV 同一天内多次访问只算一次。
惰性模式就是在某种外界环境一定的情况下，减少代码的对环境的重复分支判断，以此提升代码执行性能。惰性模式模式不属于一般定义的23种设计模式的范畴，而通常将其看作广义上的技巧型设计模式。
利用vue-router可以开发单页面应用，但实际中每个视图都有自己的title名，这就要领用router的beforeEach去统一设置了
关于 React 应用加载的优化，其实网上类似的文章已经有太多太多了，随便一搜就是一堆，已经成为了一个老生常谈的问题。
性能优化不单指优化一个页面的打开速度，在开发环境将一个项目的启动时间缩短使开发体验更好也属于性能优化，大文件上传时为其添加分片上传、断点续传也属于性能优化。在项目开发以及用户使用的过程中，能够让任何一个链路快一点，都可以被叫做性能优化。
刚开始用vue的时候就听有人一直说打包出来的包太大了，导致首次加载特别慢，之后采用了路由懒加载，把每个页面都单独打包，首次加载从来没有觉得慢过。或许是自己做的项目太少不够大，所以没有考虑过这件事。
当用户在浏览器中与网页进行交互时，会触发许多用户输入事件，这些事件会触发浏览器的渲染过程。
1) 用户首次访问或小程序同步更新时，命中环境预加载 2) 用户非首次访问，命中环境预加载 3) 用户非首次访问，未命中环境预加载
现在前端项目基本都采用打包技术，比如 Webpack，JS逻辑代码打包后会产生一个 bundle.js 文件，而随着我们引用的第三方库越来越多或业务逻辑代码越来越复杂，相应打包好的 bundle.js 文件体积就会越来越大，因为需要先请求加载资源之后，才会渲染页面，这就会严重影响到页面的首屏加载。
得物的服务端监控是比较全面和有效的，除了上报原始日志数据，还通过数据分析制定线上告警机制，调用链路分析，而针对前端项目这一块，还是不够全面的。对前端线上问题感应不及时，靠人肉发现，没有告警机制等问题，所以就有个前端监控这个项目。前端监控也确实很有必要，我们需要对线上的页面有个全面的把控，而至于怎么做监控，做数据上报，以及数据分析，如何针对监控数据分析出有用的核心链路的告警等也能有个全面的认识。本文主要是介绍得物针对监控做了哪些事情以及对前端底层监控手段做个总结。
基于vue、Element-UI的后台管理系统登录页的登录状态保存 通过这篇清晰思路以及掌握探索方法才是最重要的欧
公司的新项目迁移到了 React 16 和 Webpack 4.0，写一篇文章来总结一下。
你是怎么做性能优化的？关于这一个问题，也是我们前端开发程序员经常会讨论到的问题，接下来这篇文章将总结一下前端方面的性能优化及方式。
节流指的都是某个函数在一定时间间隔内只执行第一次回调。举个常见的节流案例：我们把某个表单的提交按钮——button 设成每三秒内最多执行一次 click 响应；当你首次点击后，函数会无视之后三秒的所有响应；三秒结束后，button 又恢复正常 click 响应功能，以此类推。
在这给大家推荐一款比较不错的纯CSS实现的CheckBox–CSSCheckBox，用bootstrap里面自带的checkbox和radio样式不太美观，所以就另找了一个插件，这里大家可能会有疑问，为什么要找一个纯CSS实现的CheckBox？ 在这里给大家解释一下，如果说你找的Checkbox是用CSS+Javascript实现的话，在界面首次加载的时候，都需要加载Javascript事件，这个事件的目的就是给已经加载到页面上的checkbox加上一层外包装！举个栗子：有一框也非常不错的插件–ICheck，当初的第一意愿就是用它，但是后来就发现问题了，首先你要在界面上引用ICheck的css样式和HTML：
前言 进入公司6个月后被安排到该项目中，据说该项目规模很大，而拆分到公司的就只是二十来个页面，而我就负责其中的3个页面和其他页面的脚本代码，后来负责项目的性能优化工作。至于业务逻辑方面确实没什么可说的，就是CRUD。由一个很好沟通的前辈和我们6个新人一起来搞。这里有两项内容很值得总结，它们都让我技术上增进不少。 目录 1.页面控件数庞大，页面加载极慢，一步
服务端渲染（Server-Side Rendering，简称SSR）是一项在Web开发领域中愈发受欢迎的技术，它与传统的客户端渲染（Client-Side Rendering，CSR）相对立。SSR通过在服务器端生成并提供HTML，有助于提升Web应用的性能、搜索引擎优化（SEO）以及用户体验。本文将深入探讨SSR的定义、优势、实现方式、适用场景以及如何开始使用SSR来改进Web应用。
firstOpenJudge() { var firstDate = localStorage.getItem('firstDate') // 获取当前时间（年月日） var now = new Date().toLocaleDateString() // 转换成时间戳 var time = Date.parse(new Date(now)) if (!firstDate) { c
框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。 将逻辑层的数据反映成视图，同时将视图层的事件发送给逻辑层。 WXML用于描述页面的结构。WXS是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。WXSS 用于描述页面的样式。 说了那么多，我来概括下： WXML 相当于HTML WXS 相当于JavaScript WXSS 相当于Css 为什么这么说呢？因为它们的语法基本一样，所以当一个完整的小程序能运行时，这三点都需要有，wxml和wxss用于渲染页面结构，而一些点击事件，比如用户完成登陆点击、跳转等等 是需要用js来完成的
DOM 是表述 HTML 的内部数据结构，它会将 Web 页面和 JavaScript 脚本连接起来，并过滤一些不安全的内容。HTML 解析器 (HTMLParser) 模块负责将 HTML 字节流转换为 DOM 结构。网络进程接收到响应头后会根据响应头中的 content-type 字段来判断文件的类型，若为 text/html，则为该请求创建一个渲染进程。渲染进程准备好后，网络进程和渲染进程之间会建立一个共享数据的管道，HTML 解析器并不是等整个文档加载完成之后再解析，而是网络进程加载了多少数据，HTML 解析器便解析多少数据。
通过JS实现悬浮球 加载Js([[var btn=document.createElement("div"); var t=document.createTextNode("➜"); btn.style = 'position: fixed;width: 50px;height: 50px;line-height: 50px;border-radius: 50%;bottom: 20px;right: 20px; text-align: center;background-color:white;box-s
大家知道。我们每天都在谈前端性能优化，每天都在背前端性能优化方案，然而，我们却不知道他背后的原理以及涉及那些知识储备。所以，我问了自己一些问题，
本期内容是带着大家熟悉 Vue 的基本组成逻辑，并手把手的帮助大家完成一个简易版本的 Vue。
本文深入探讨如何通过系统性的优化措施显著提升了京东亿级用户体量小程序的性能。从前端渲染优化等方面，技术团队实施了一系列创新策略，使小程序的性能翻倍。本文将详细介绍这些优化措施的实施过程和取得的成效，为在大规模用户基础上追求极致性能的开发者提供宝贵的实践经验。
而本渣最近维护的项目恰巧在这个方向下了很大功夫，一些经验之谈奉上，希望对大家有些许帮助！
上几节我们学到了小程序的一些基本功能，以及小程序的工具环境配置，大家学习可以顺着系列文章目录来进行查看，如果你有一定基础可以自己选择跳过章节，本节我们在上节的基础上继续讲解小程序的框架
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现，则该方法返回 -1。
H5 项目是企鹅辅导的核心项目，已迭代四年多，包括了课程详情页/老师详情页/报名页/支付页面等页面，构建产物用于企鹅辅导 APP/H5（微信/QQ/浏览器），迭代过程中了也累积了一些性能问题导致页面加载、渲染速度变慢，为了提升用户体验，近期启动了 “H5 性能优化” 项目，针对页面加载速度，渲染速度做了专项优化，下面是对本次优化的总结，包括以下几部分内容：
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
