Jack, what else can you do besides holding your little darling?

如果你的对象包含 function, undefined or NaN 值的话，JSON.parse(JSON.stringify(obj)) 就不会有效。所以对于任何大于 2147483647 的数字，双非位运算符 (~~) 都会给出错误的结果，这种情况下推荐使用 Math.floor() 方法。如果当前属性包含一个对象，然后要将当前属性值作为参数递归调用相同的方法（例如，嵌套的对象）。如果有一个单级对象，例如没有嵌套的对象，那么我们也可以使用扩展符来实现深拷贝。方法来得到一个数字的幂。

小程序|H5|WeChat利用safe-area-inset-*兼容iPhoneX安全距离

https://www.antdv.com/components/modal-cn/#API 设置为：

浏览器视频帧操作方法 requestVideoFrameCallback() 简介

不用防抖和节流，用更底层的方式解决JS的重复请求

新建的项目，运行 npm run dev，报警告，警告内容是：WARN You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/and use them in postcss.config.js.再在 nuxt.config.js 中添加一下内容。

iOS 一键登录导致闪退

ant-design-vue 下拉框展开事件赋值数据源

ant-design-vue 下拉框随页面滚动问题

简单易懂，解决vue keep-alive缓存组件问题

如何进行 web 性能监控

app卡顿分析

防抖节流

死磕JavaScript变量和函数的预解析

你知道的前端优化手段

WEB漏洞-文件上传之WAF绕过及安全修复

性能优化-内存池的设计和实现

上次文章介绍了如何用 webgl 快速创建一个自己的小世界，在我们入门 webgl 之后，并且可以用原生 webgl 写 demo 越来越复杂之后，大家可能会纠结一点：就是我使用 webgl 的姿势对不对。因为 webgl 可以操控 shader 加上超底层 API，带来了一个现象就是同样一个东西，可以有多种的实现方式，而此时我们该如何选择呢？这篇文章将稍微深入一点 webgl，给大家介绍一点 webgl 的优化知识。讲 webgl 优化之前我们先简单回忆一下 canvas2D 的优化，常用的 disp

Vue 作为最主流的前端框架，中文资料齐全、入门简单、生态活跃，可以说是工作中最常用的，如今对 Vue 原理的熟悉基本上是简历的标配了。之前参与了部分 2019 校园招聘的面试工作，发现很多简历上都写了：“精通Vue”、“熟悉Vue原理和源码”、“熟悉Vue全家桶及其底层原理”、“熟悉Vue双向数据绑定” 等等，但是这么写你真的敢说熟悉 Vue 原理吗？这样的简历描述看上去是很不错，熟悉框架原理非常难得，于是问到：“那你说一下Vue数据驱动的实现原理吧”！大部分人的回答都差不多...

也许你有听过一个问题，你这款 web 应用性能怎么样呀？你会回答什么呢？是否会优于海量 web 应用市场呢？本文就来整理下如何进行 web 性能监控？包括我们需要监控的指标、监控的分类、performance 分析以及如何监控。但是，如何进行 web 性能监控本身是一个很大的话题，文中只会侧重一部分进行研究，某些内容不是很全面。前言：为什么需要监控？web 的性能一定程度上影响了用户留存率，Google DoubleClick 研究表明：如果一个移动端页面加载时长超过 3 秒，用户就会放弃而离开

Web 开发者与 iOS 长达四年的较量，终于在 iOS 13 发布这一刻落下帷幕。iOS 8.2 和它的键盘难题2015 年三月，iOS 发布了 8.2 版本。这在当时看来也许只是这个现代的操作系统的一次小更新，但在 Web 开发者眼里，有些微妙的问题产生了。这是一件在 Android 世界里想象不到的麻烦事儿。在此之前 Web 开发者都非常清楚，在window全局对象上的innerWidth/innerHeight表示浏览器窗口中可以看到页面的区域的尺寸，而outerWidth...

在最近的开发工作中，遇到了一个聊天场景的应用（Web 和小程序），类似于我们再熟悉不过的 QQ 和微信，一个正常的聊天界面是大致上是长这个样子的：这种聊天窗口的消息流有两个明显的特点：一是最新的消息和滚动条初始位置需要在列表的最底部，二是下拉加载历史消息后要在当前消息列表的顶部进行衔接。一般来说要实现这样的功能，对于前端开发来说都不是难事，只要两步就可以了：首先，在第一屏消息渲染完之后设置容器的scrollTop为一个极大值，这样就把最新消息和滚动条初始位置定位到了最底部；然后，当滚动到顶部..

一、背景百度App自2016年上半年尝试Feed流业务形态，至2017年下半年，历经10个版本的迭代，基本完成了产品形态的初步探索。在整个Feed流形态的闭环中，新闻详情页（文中称为落地页）作为重要的组成部分，如果打开页面后，loading时间过长，会严重影响用户体验。因此我们针对落地页这种H5的首屏展现速度进行了长期优化，本文会详细阐述整个优化思路和技术细节二、方法论通过分析用户反馈，发现当时的落地页从点击到首屏展现平均需要3s的时间，每次用户兴致勃勃的想要浏览感兴趣的文章时，却因为过长的..

老板说 , 页面打开速度过慢? 页面加载性能不达标? 下面我们来看下各个大厂和团队的秒开经典方案，有没有一款适合你去探索？本页面会列举和总结偏向与客户端结合的 hybrid 秒开方案，纯前端方案也会部分提及。常用的加速方法说起 h5 性能优化方案，是个老生常谈的话题，通常的 web 优化方法，基本围绕在资源加载和 html 渲染两个方面。前者针对首屏，后者针对可交互。资源优化上，我们总的方向是围绕更小的资源包上，比如常见的：压缩、减包、拆包、动态加载包及图片优化上。html 渲染上总的方向.

在传统的 web 优化中，我们可以采取压缩、拆包、动态加载等方法减少首屏资源大小，也能通过离线包、页面直出等方案加速 html 返回，之前一篇h5 秒开方案大全有部分简析。在大部分场景中，这些方案都足够用，也能得到出色的效果。但仍有两种无法尽善尽美的地方：其一是短暂的白屏现象不可避免，其二是对于超大型 web 应用难以做到秒开。结合客户端特性，我们有没有办法，进一步做到极致，打开 web 页面和打开客户端页面无差异的体验呢？传统方案的困境无论是 html 离线，还是直出，以及让 w...

导语：对于大型前端项目而言，构建的稳定性和易用性至关重要，腾讯文档在迭代过程中，复杂的项目结构和编译带来的问题日益增多，极大的增加了新人上手与日常搬砖的开销。恰逢 Webpack5 上线，不如来一次彻底的魔改～1. 前言腾讯文档最近基于刚刚发布的 Webpack5 进行了一次编译的大重构，作为一个多个仓库共同构成的大型项目，任意品类的代码量都超过百万。对于腾讯文档这样一个快速迭代，高度依赖自动化流水线，常年并行多个大型需求和无数小需求的项目来说，稳定且快速的编译对于开发效率至关重要。这篇文章，就.

Web 项目上线后，开始开门迎客，等待着来自大江南北、有着各式各样网络状态的用户莅临。在千差万别的网络状态中，访问页面难免会遇到前端资源加载失败的情况，占比或许不高，但一遇到，轻则页面样式错乱，重则白屏打不开，影响用户体验感受，紧急情况下甚至影响了用户的工作，属于非常严重的问题。本文将围绕着前端 JS 文件从如何监控加载失败、加载失败如何优化、始终加载失败又该如何处理等问题逐一分析。如何监控资源加载失败方案一：script onerror我们可以给 script 标签添加上 onerror 属性

React性能优化是在业务迭代过程中不得不考虑的问题，大部分情况是由于项目启动之初，没有充分考虑到项目的复杂度，定位该产品的用户体量及技术场景并不复杂，从而产生了设计不严谨的情况。大部分场景在业务前期并不需要考虑性能优化。但是小需求随着业务场景的复杂化，性能优化就变的越来越重要我们从React源码入手，结合有道精品课大前端的具体业务，运用优化技巧对系统进行外科手术式的优化。同时介绍一下React Profiler这款性能优化的利器是如何帮我们定位性能瓶颈的本文中的项目代码全部是在有道大前端组开发..

背景Vue 3 正式发布距今已经快一年了，相信很多小伙伴已经在生产环境用上了 Vue 3 了。如今，Vue.js 3.2 已经正式发布，而这次minor版本的升级主要体现在源码层级的优化，对于用户的使用层面来说其实变化并不大。其中一个吸引我的点是提升了响应式的性能:More efficient ref implementation (~260% faster read / ~50% faster write)~40% faster dependency tracking~17% less ..

　在讨论页面重绘、回流之前。需要对页面的呈现流程有些了解，页面是怎么把html结合css等显示到浏览器上的，下面的流程图显示了浏览器对页面的呈现的处理流程。可能不同的浏览器略微会有些不同。但基本上都是类似的。页面呈现流程：1、浏览器把获取到的html代码解析成1个Dom树，html中的每个tag都是Dom树中的1个节点，根节点就是我们常用的document对象(<html> tag)。dom树就是我们用firebug或者IE Developer Toolbar等工具看到的htm.

　　一直在学习javascript，也有看过《犀利开发Jquery内核详解与实践》，对这本书的评价只有两个字犀利，可能是对javascript理解的还不够透彻异或是自己太笨，更多的是自己不擅于思考懒得思考以至于里面说的一些精髓都没有太深入的理解。鉴于想让自己有一个提升，进入一个更加广阔的天地，总得找一个属于自己的居所好好生存，所以平时会有意无意的去积累一些使用jQuerry的常用知识，特别是对于性能要求这一块，总是会想是不是有更好的方式来实现。下面是我总结的一些小技巧，仅供参考。(我先会说一个总标题，然后用

　Javascript中的作用域链、闭包、原型继承、eval等特性，在提供各种神奇功能的同时也带来了各种效率问题，用之不慎就会导致执行效率低下。1、全局导入　　我们在编码过程中多多少少会使用到一些全局变量（window、document、自定义全局变量等等），了解javascript作用域链的人都知道，在局部作用域中访问全局变量需要一层一层遍历整个作用域链直至顶级作用域，而局部变量的访问效率则会更快更高，因此在局部作用域中高频率使用一些全局对象时可以将其导入到局部作用域中，例如：//1、作为参

　　CDN全称Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容，解决 Internet 网络拥挤的状况，提高用户访问网站的响应速度。　　在不同地

　　在实际工作中，我们很少会遇到一次性需要向页面中插入大量数据的情况，但是为了丰富我们的知识体系，我们有必要了解并清楚当遇到大量数据时，如何才能在不卡主页面的情况下渲染数据，以及其中背后的原理。对于一次性插入大量数据的情况，一般有两种做法：1、时间分片2、虚拟列表　　我们首先来看一下“时间分片”的原理。一、最粗暴的做法（一次性渲染）　　我们先来看看最粗暴的做法，一次性将大量数据插入到页面中：<ul id="container"></ul> let no

　　主要来源于这篇文章：写给中高级前端关于性能优化的9大策略和6大指标 | 网易四年实践，算是这篇文章的学习笔记。　　性能优化：从过程趋势来说，可分为网络层面和渲染层面；从结果趋势来说，可分为时间层面和体积层面。一、网络层面　　网络层面的优化就是让资源体积更小，加载更快。1、构建策略 —— webpack　　减少打包时间：缩减范围、缓存副本、定向搜索、提前构建、并行构建、可视结构　　减少打包体积：分隔代码、摇树优化、动态垫片、按需加载、作用提升、压缩资源（1）缩减范围：配置 in

　在工作中，有时会遇到需要一些不能使用分页方式来加载列表数据的业务情况，对于此，我们称这种列表叫做长列表。比如，在一些外汇交易系统中，前端会实时的展示用户的持仓情况(收益、亏损、手数等)，此时对于用户的持仓列表一般是不能分页的。　　在浅析如何利用时间分片高性能渲染十万级数据一文中，提到了可以使用时间分片的方式来对长列表进行渲染，但这种方式更适用于列表项的DOM结构十分简单的情况。本文会介绍使用虚拟列表的方式，来同时加载大量数据。一、为什么需要使用虚拟列表　　在实际的工作中，列表项必然不会仅仅只由

　　当浏览器请求一个URL的时候，通过firebug我们可以发现大概有以下几个过程：阻挡、域名解析、建立连接、发送请求、等待响应、接收数据。后面四个跟用户的网络情况和你的服务器处理速度有关，本文重点说说前两个。1、阻挡：解决方案——提高浏览器并发连接数　　阻挡：不同的浏览器对单个域名的最大并发连接数有一定的限制，HTTP/1.0和HTTP/1.1也不相同。比如HTTP/1.1协议下，IE6的并发连接数限制是2个；而在HTTP/1.0下，IE6的并发连接数可以达到4个。在其它浏览器也有类似的限制，一般

工具：React 16或更新版本 只需在url后边加 ?react_perf后performance一栏中会添加 User Timing devtool分析 state、props 、组件树、redux store数据； profiler工具能分析具体函数； Timeline工具跟 User Timing大同小异；优化点：父组件更新默认触发所有子组件更新 列表类型的组件默认更新方式非常复杂建议：如果你有些组件是纯组件，那么把继承类从 Compon...