Web前端性能优化

Web前端性能优化

资源合并与压缩

http请求的过程及潜在的性能优化点

深入理解http请求的过程是前端性能优化的核心

开发部署过程

CS

BS   web前端

浏览器的一个请求从发送到返回都经历了什么

请求过程

请求过程中一些潜在的性能优化点

1.DNS是否可以通过缓存减少DNS查询时间？2.网络请求的过程走最近网络环境？3.相同的静态资源是否可以缓存？4.能否减少http请求大小？5.减少http请求6.服务端渲染

资源合并和压缩主要优化点

减少http请求的数量

减少请求资源的大小

google首页案例学习

html压缩

css压缩

无效代码删除

css语义合并

js的压缩和混乱

文件合并

问题

首屏渲染问题

文件合并后的js会比合并之前大，页面渲染如果依赖于这个js，那么页面的渲染要等这个js被请求回来，如果这个js比较大，请求速度慢，会导致加载时间很长，首屏渲染慢

缓存失效问题

改进

公共库合并

第三方公共库基本不变，而业务代码经常改动，所以把公共库单独打包到一个文件里，即使业务代码变动，也不会影响公共库打包后文件的缓存，可以有效的利用缓存

不同页面合并

针对单页应用，当单页应用的某一个页面被路由到时，才加载该页面对应的js文件所以对不同页面的js进行单独打包

2.使用构建工具，gulp webpack等

开启gzip

html的压缩可有可无，但是CSS和JS的压缩是必须要做的

图片相关的优化

不同图片格式常用的业务场景

雪碧图

优缺点

可能整合的文件特别大，如果该文件为加载，导致整个页面的图片无法显示。需要酌情优化。

现在移动端基本不使用雪碧图

图片压缩的几种方法

图片以base64的格式引入到标签中，减少http请求的次数

SVG比png小

不需要重新发请求，它是内嵌在html中使用的

svg绘制简单，适合小icon

css和js的装载与执行

defer

js不会阻塞页面渲染脚本按照顺序执行，当脚本之间有依赖关系时适合用defer脚本会在dom树构建完成之后执行

async

不阻塞页面渲染，不保证脚本的执行顺序，所以引入的脚本不能有依赖关系脚本加载完立刻执行

对于某个域名，浏览器并发数是有上限的

css加载不会阻塞后面的js并发加载

懒加载和预加载

重绘与回流

重绘和回流

避免重绘重流的技巧

浏览器存储

cookie

这点很重要

示例

登陆时设置cookie

cookie种成功

再次登陆使用发送cookie

localStroage

sessionStorage

IndexedDB

IndexedDB是一种使用浏览器存储大量数据的方法，它创造的数据可以被查询，并且可以离线使用。

Servce Workers

实现离线应用

注册

把依赖文件存到cachestorage中

拦截请求，去cachestorage中找，如果找到就从cachestorage中拿，如果没找到就发请求

离线

service worker 主页面之间的通信

主页面，用postMessage给service worker发信息监听service worker发送过来的消息

在service worker中，监听从上层发过来的消息，并进行client过滤，如果client不是当前发送消息的client，就postMessage发送消息

适用于大型逻辑运算

PWA

缓存优化

主要字段

强缓存

协商缓存

子主题

node实现服务器缓存

SSR（服务端渲染）