14k 字 13 分钟

Webpack 是当下最热门的前端资源模块强大打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生成环境部署的前端资源；还可以将按需加载的模块进行代码分割，等到实际需要再异步加载。在使用 webpack 时，如果不注意性能优化，非常大的可能产生性能问题。性能问题主要分为开发时构建速度慢、开发调试时的重复工作、输出打包文件过大等，因此优化啊方案也主要针对这些方面来分析得出。

657 字 1 分钟

window.onload() $(document).ready() 加载时机 必须等待网页全部加载完毕（包括图片等），然后再执行 JS 代码 只需要等待网页中的 DOM 结构加载完毕，就能执行 JS 代码 执行次数 只能执行一次，如果第二次，那么第一次的执行会被覆盖 可以执行多次，第 N 次都不会被上一次覆盖 举例 以下代码无法正确执行： window.onload = function() { alert(“text1”);};window.onload = function() {...
12k 字 11 分钟

# 1. 知识体系

# 1.1 从 URL 输入到页面加载

打开浏览器从输入网址到网页呈现在大家面前，背后到底发生了什么？经历怎么样的一个过程？现在带大家来看看流程。

首先我们需要通过 DNS（域名解析系统）将 URL 解析为对应的 IP 地址，然后与这个 IP 地址确定的那台服务器建立起 TCP 网络连接，随后我们向服务端抛出我们的 HTTP 请求，服务端处理完我们的请求之后，把目标数据放在 HTTP 响应里返回给客户端，拿到响应数据的浏览器就可以开始走一个渲染的流程。渲染完毕，页面便呈现给了用户

img

总体来说分为以下几个过程:

  • DNS 解析：将域名解析成 IP 地址
  • TCP 连接：TCP 三次握手
  • 发送 HTTP 请求
  • 服务器处理请求并返回 HTTP 报文
  • 浏览器拿到响应数据，解析响应内容，把解析的结果展示给用户
  • 断开连接：TCP 四次挥手

4.5k 字 4 分钟

# 工具

# Lighthouse

lighthouse 是一个用于诊断网页的工具，包括 性能、无障碍、渐进式、SEO 等方面，通过得分的方式来报告网页的质量。

使用方法：

  • Dev Tools : 直接在 Dev Tools 中 lighthouse panel 勾选 Mode 、 Device 、Categories 之后点击 Analyze page load 即可
  • lighthouse 扩展程序
  • npm 包
npm install -g lighthouse
lighthouse <url>

3.9k 字 4 分钟

转载：https://juejin.cn/post/7359077652445806642

# 需求背景

  1. 从第三方采购的 vue2 + ElementUI 实现的云管平台，乙方说 2011 年左右就开始有这个项目了（那时候有 Vue 了吗，思考.jpg）。十几年的项目，我何德何能可以担此责任。里面的代码经过多人多年迭代可以用惨不忍睹来形容，吐槽归吐槽，混口饭吃，多烂的代码都得啃下去。
  2. 有一天领导找到我，问我怎么回事，打开页面需要十几秒时间也太慢了，后台管理系统不要求首屏加载时间都没有这么慢，这个对外的系统超过 1 秒打开时间，都会流失很多客户，不优化好年终自己看着办吧。
  3. 什么？影响年终？好的领导，我马上抽时间解决（🐂🐴）。

899 字 1 分钟

# 前言

# 思考 1：“从输入 URL 到加载完成”，经历了哪些过程？

这个问题，相信大多数前端开发面试常被问到。我们在探索性能优化方案前，必须先弄清楚这个问题，了解页面加载到渲染的完整机制，才能找到有效的优化策略及方案。页面初始化时，从加载到渲染大致经历了 8 大过程，具体如下图所示： image.png

  1. 构建请求：根据 url 构建请求
  2. 重定向：永久重定向、临时重定向
  3. 查询缓存：浏览器缓存、系统缓存、路由缓存、DNS 缓存查找
  4. DNS 解析：根域名、顶级域名、权威域名递归查找对应的 ip 地址
  5. TCP 连接：传输层 TCP 三次握手建立连接
  6. HTTP 请求：应用层 client 端向 server 端发起 HTTP 请求报文，server 端收到请求处理后，响应 client 端返回响应报文（html、js、css 等资源）
  7. 浏览器解析资源：解析 HTML 生成 DOM Tree -> 解析 CSS 生成 CSSOM Tree -> render Tree -> layout -> compositing -> painting
  8. 页面呈现

对浏览器工作原理，有兴趣的可以学习下李兵大佬的：《浏览器工作原理与实践》

3.2k 字 3 分钟

# 一、浏览器概述

目前的主流浏览器有 5 个：Internet Explorer、Firefox、Safari、Chrome 和 Opera 浏览器。根据 StatCounter 浏览器统计数据，目前（截止 2019 年 5 月）Firefox、Safari 和 Chrome 浏览器的总市场占有率将近 83.66%。由此可见，如今开放源代码浏览器在浏览器市场中占据了非常坚实的部分。
以上 5 种浏览器由于有着不同的浏览器内核，造成同样的 html 页面有着不同呈现。Internet Explorer 的内核是 Trident；Firefox 的内核是 Gecko；Chrome、Safari 内核是 Webkit；Opera 的内核则是 Presto。

8.5k 字 8 分钟

# 前言

前面篇章我们分析了 “从输入 URL 到页面加载完成” 的完整链路，主要经历 “网络请求、浏览器渲染” 两大过程，那么优化方案我们可以围绕这两方面展开探索，此篇我们先来看 “网络层面” 的优化方案。正文开始前，我们先思考如下问题：

  1. “网络层面” 可以从哪些方面着手做性能优化？
  2. 前端开发可以介入 “网络请求” 哪些环节的性能优化？

15k 字 13 分钟

# 什么是 Web Worker

15 年前，也就是 2008 年， html 第五版 html5 发布，这一版的发布，提供了不少新的好用的功能，如：

  • Canvas 绘图
  • 拖拽 drag
  • websocket
  • Geolocation
  • webworker
  • 等...

笔者之前说过： 一项新技术新的技术方案的提出，一定是为了解决某个问题的，或者是对某种方案的优化

那么 Web Worker 这个新技术解决了什么问题？有哪些优化价值呢？

让我们继续往下看...