前端开发
-
前端性能优化–网络篇
1:webpack 性能调优与 Gzip 原理 从现在开始,我们进入网络层面的性能优化世界。 大家可以从第一节的示意图中看出,我们从输入 URL 到显示页面这个过程中,…
-
前端性能优化篇—图片优化
网络篇 2:图片优化——质量与性能的博弈 《高性能网站建设指南》的作者 Steve Souders 曾在 2013 年的一篇 博客 (opens new window) (open…
-
前端性能优化篇–本地存储
存储篇 2:本地存储——从 Cookie 到 Web Storage、IndexDB 随着移动网络的发展与演化,我们手机上现在除了有原生 App,还能跑“WebApp”——它即开即…
-
前端性能优化篇–CDN 的缓存与回源机制解析
CDN 的缓存与回源机制解析 CDN的缓存与回源机制解析 CDN (Content Delivery Network,即内容分发网络)指的是一组分布在各个地区的服务器。这些服务器存…
-
前端性能优化篇—浏览器的运行机制
渲染篇 2:知己知彼——解锁浏览器背后的运行机制 平时我们几乎每天都在和浏览器打交道,在一些兼容任务比较繁重的团队里,苦逼的前端攻城师们甚至为了兼容各个浏览器而不断地去测试和调试,…
-
前端性能优化篇—服务端渲染
渲染篇 1:服务端渲染的探索与实践 服务端渲染(SSR)近两年炒得很火热,相信各位同学对这个名词多少有所耳闻。本节我们将围绕“是什么”(服务端渲染的运行机制)、“为什么”(服务端渲…
-
前端性能优化篇—DOM 优化原理
渲染篇 3:对症下药——DOM 优化原理与基本实践 从本节开始,我们要关心的两大核心问题就是:“DOM 为什么这么慢”以及“如何使 DOM 变快”。 后者是一个比“生存还是毁灭”更…
-
前端性能优化篇—Event Loop 与异步
渲染篇 4:千方百计——Event Loop 与异步更新策略 Vue 和 React 都实现了异步更新策略。虽然实现的方式不尽相同,但都达到了减少 DOM 操作、避免过度渲染的目的…
-
前端性能优化篇—回流与重绘
渲染篇 5:最后一击——回流(Reflow)与重绘(Repaint) 开篇我们先对上上节介绍的回流与重绘的基础知识做个复习(跳读的同学请自觉回到上上节补齐 →_→)。 回流:当我们…
-
前端性能优化篇–性能监测
性能监测篇:Performance、LightHouse 与性能 API 性能监测是前端性能优化的重要一环。监测的目的是为了确定性能瓶颈,从而有的放矢地开展具体的优化工作。 平时我…
-
前端性能优化篇–优化首屏体验
应用篇 1:优化首屏体验——Lazy-Load 初探 首先要告诉大家的是,截止到上个章节,我们需要大家绞尽脑汁去理解的“硬核”操作基本告一段落了。从本节开始,我们会一起去实现一些必…
-
前端自动化工程化—webpack 原理简述
webpack 原理简述 1.1 核心概念 JavaScript 的 模块打包工具 (module bundler)。通过分析模块之间的依赖,最终将所有模块打包成一份或者多份代码包…
-
前端自动化工程化–webpack 热更新原理、Loader、Plugin
webpack 热更新原理 img 当修改了一个或多个文件; 文件系统接收更改并通知 webpack; webpack 重新编译构建一个或多个模块,并通知 HMR 服务器进行更新;…
-
webpack图片处理和常用插件总结
webpack 中如何处理图片的? 在webpack中有两种处理图片的loader: file-loader:解决CSS等中引入图片的路径问题;(解决通过url,import/re…
-
基于HTTP网络层的前端性能优化
产品性能优化方案 HTTP网络层优化 代码编译层优化 webpack 代码运行层优化 html/css + javascript + vue + react 安全优化 xss + …
-
洗牌算法 + 函数防抖 + 函数节流
洗牌算法 早前的 chrome 对于元素小于 10 的数组会采用插入排序,这会导致对数组进行的乱序并不是真正的乱序,即使最新的版本 chrome 采用了原地算法使得排序变成了一个稳…