摘要:Puppeteer 是 Chrome 开发团队在 2017 年发布的一个 Node.js 包,用来模拟 Chrome 浏览器的运行。我们团队从 Puppeteer 刚发布出来就开始成为忠实用户了(主要是因为 PhantomJs 坑太多了),本文主要在介绍 Puppeteer 的同时,结合我们平时的实 阅读全文
posted @ 2021-03-30 16:10 {前端开发} 阅读(119) 评论(0) 推荐(0) 编辑
摘要:本文要点详细介绍谷歌浏览器 performance 选项卡的各个指标,让你知道如何查看网页性能。 谷歌浏览器版本为:79.0.3945.117(正式版本) (64 位)。 性能分析操作流程在谷歌浏览器调式模式下,切换到 performance 选项卡。点击刷新图标(或者Ctrl+Shift+E快捷键 阅读全文
posted @ 2021-03-14 13:19 {前端开发} 阅读(111) 评论(0) 推荐(0) 编辑
摘要:前言 最近在研究网站测速相关的主题,接触到一个概念:First Meaningful Paint,简称 FMP,中文译名:首次有效绘制时间。今天我们来讲讲这个概念的来龙去脉。 衡量页面打开速度是一件复杂的事情 First Meaningful Paint(以下简称 FMP),是谷歌创造的一个概念,用 阅读全文
posted @ 2021-03-11 17:04 {前端开发} 阅读(58) 评论(0) 推荐(0) 编辑
摘要:转自:大转转FE 狸猫换太子 北宋真宗时,有李妃和刘妃两位小主都有了龙种,谁生了儿子,谁就能豪横。谁曾想刘妃不是个善茬,把剥了皮的狸猫换了李妃刚生完的孩子。天可怜见,执行任务的宫女人性未泯,将孩子送往八贤王处抚养,这才引出后来,包拯陈州放粮救李妃,仁宗认母家团圆。那位说了,好好的谈装饰器模式这怎么说 阅读全文
posted @ 2021-03-02 16:02 {前端开发} 阅读(44) 评论(0) 推荐(0) 编辑
摘要:HTTP 请求的头信息里面,Referer 是一个常见字段,提供访问来源的信息。 很多开发者知道这个字段,但是说不清它的具体细节。本文详细介绍该字段。 一、Referer 的含义 现实生活中,购买服务或加入会员的时候,往往要求提供信息:"你从哪里知道了我们?" 这叫做引荐人(referrer),谁引 阅读全文
posted @ 2021-02-23 16:33 {前端开发} 阅读(88) 评论(0) 推荐(0) 编辑
摘要:HTTP/2 是 HTTP 协议自 1999 年 HTTP 1.1 发布后的首个更新,主要基于 SPDY 协议。由互联网工程任务组(IETF)的 Hypertext Transfer Protocol Bis(httpbis)工作小组进行开发。该组织于2014年12月将HTTP/2标准提议递交至IE 阅读全文
posted @ 2021-02-20 14:41 {前端开发} 阅读(43) 评论(0) 推荐(0) 编辑
摘要:每个前端在第一次写一个完整功能的页面,都可能会是这个样子滴~ <html> <head> <link rel="stylesheet" href="test.css"> </head> <body> <div id="app"></div> <script src="test.js"></scrip 阅读全文
posted @ 2021-01-04 17:36 {前端开发} 阅读(230) 评论(0) 推荐(0) 编辑
摘要:浏览器如何渲染网页 要了解浏览器渲染页面的过程,首先得知道一个名词——关键渲染路径。关键渲染路径是指浏览器从最初接收请求来的HTML、CSS、javascript等资源,然后解析、构建树、渲染布局、绘制,最后呈现给用户能看到的界面这整个过程。 用户看到页面实际上可以分为两个阶段:页面内容加载完成和页 阅读全文
posted @ 2021-01-04 17:24 {前端开发} 阅读(68) 评论(0) 推荐(0) 编辑
摘要:一、浏览器渲染 开篇,我们还是不厌其烦的回顾一下浏览器的渲染过程,先上图: 正如上图所展示的,我们浏览器渲染过程分为了两条主线:其一,html Parser 生成的 DOM 树;其二,CSS Parser 生成的 Style Rules ; 在这之后,DOM 树与 Style Rules 会生成一个 阅读全文
posted @ 2021-01-04 16:22 {前端开发} 阅读(45) 评论(0) 推荐(0) 编辑
摘要:整理目前所用过的数组方法,学习了新增的es6方法。 1 arr.push() 从后面添加元素,返回值为添加完后的数组的长度 let arr = [1,2,3,4,5] console.log(arr.push(5)) // 6 console.log(arr) // [1,2,3,4,5,5] 2  阅读全文
posted @ 2020-12-11 14:00 {前端开发} 阅读(60) 评论(0) 推荐(0) 编辑
摘要:对于现在的前端项目而言,编译发布几乎是必需操作,有的编译只需要几秒钟,快如闪电,有的却需要10分钟,甚至更多,慢如蜗牛。特别是线上热修复时,分秒必争,响应速度直接影响了用户体验,用户不会有耐心等那么长时间,让你慢慢编译;如果涉及到支付操作,产品损失更是以秒计,每提前哪怕一秒钟发布,在腾讯海量用户面前 阅读全文
posted @ 2020-11-10 10:28 {前端开发} 阅读(68) 评论(0) 推荐(0) 编辑
摘要:推荐先阅读 webpack 入门教程之后再来阅读本文。 Webpack 4 和单页应用入门 手摸手,带你用合理的姿势使用 webpack4 (上) 本文为手摸手使用 webpack4(下),主要分为两部分: 怎么合理的运用浏览器缓存 怎么构建可靠的持久化缓存 #默认分包策略 webpack 4 最大 阅读全文
posted @ 2020-11-07 18:09 {前端开发} 阅读(250) 评论(0) 推荐(0) 编辑
摘要:利用 Webpack 来优化 Web 性能属于加载性能优化 的一部分: ☛ Web Performance Optimization with webpack 本文目录: 减少前端资源体积 使用长期缓存 监控和分析应用程序 总结 一、减少前端资源体积 1、webpack 4 开启 productio 阅读全文
posted @ 2020-11-07 18:03 {前端开发} 阅读(96) 评论(0) 推荐(0) 编辑
摘要:默认值 开箱即用的 SplitChunksPlugin 应该对大多数用户都很好用。 默认情况下,它只影响随需应变的块,因为更改初始块会影响运行项目时包含的应有脚本标记 HTML 文件。 webpack 将根据以下条件自动分割块: 新块可被共享的,或者来自 node_modules 文件夹 新块将大于 阅读全文
posted @ 2020-11-07 13:56 {前端开发} 阅读(191) 评论(0) 推荐(0) 编辑
摘要:之前接手的一个旧项目,使用的是roadhog + dva + antd等技术,里面大概有上百个路由文件,其他model、组件等文件也不少,导致整个项目的模块文件非常多,热更新和打包都速度都比较慢,输出代码体积也很大。基于这个问题,本文整理webpack常用的一些优化手段。 <!--more--> 参 阅读全文
posted @ 2020-11-07 13:50 {前端开发} 阅读(219) 评论(0) 推荐(0) 编辑