Web前端性能优化
2020-04-09 17:44:48 3 举报AI智能生成
web前端性能优化
作者其他创作
大纲/内容
资源合并与压缩
http请求的过程及潜在的性能优化点
深入理解http请求的过程是前端性能优化的核心
开发部署过程
CS
BS web前端
浏览器的一个请求从发送到返回都经历了什么
请求过程
请求过程中一些潜在的性能优化点
1.DNS是否可以通过缓存减少DNS查询时间？
2.网络请求的过程走最近网络环境？
3.相同的静态资源是否可以缓存？
4.能否减少http请求大小？
5.减少http请求
6.服务端渲染
2.网络请求的过程走最近网络环境？
3.相同的静态资源是否可以缓存？
4.能否减少http请求大小？
5.减少http请求
6.服务端渲染
资源合并和压缩
主要优化点
主要优化点
减少http请求的数量
减少请求资源的大小
google首页案例学习
html压缩
css压缩
无效代码删除
css语义合并
js的压缩和混乱
文件合并
问题
首屏渲染问题
文件合并后的js会比合并之前大，页面渲染如果依赖于这个js，那么页面的渲染要等这个js被请求回来，
如果这个js比较大，请求速度慢，会导致加载时间很长，首屏渲染慢
如果这个js比较大，请求速度慢，会导致加载时间很长，首屏渲染慢
缓存失效问题
js文件有缓存，标记js是否被更改时，会在js文件后加一个md5戳
假如有a.js b.js c.js ,如果合并到一起，当其中一个文件改变后，合并后的文件也会改变，导致缓存失效
假如有a.js b.js c.js ,如果合并到一起，当其中一个文件改变后，合并后的文件也会改变，导致缓存失效
改进
公共库合并
第三方公共库基本不变，而业务代码经常改动，
所以把公共库单独打包到一个文件里，即使业务代码变动，也不会影响公共库打包后文件的缓存，可以有效的利用缓存
所以把公共库单独打包到一个文件里，即使业务代码变动，也不会影响公共库打包后文件的缓存，可以有效的利用缓存
不同页面合并
针对单页应用，当单页应用的某一个页面被路由到时，才加载该页面对应的js文件
所以对不同页面的js进行单独打包
所以对不同页面的js进行单独打包
2.使用构建工具，gulp webpack等
开启gzip
html的压缩可有可无，但是CSS和JS的压缩是必须要做的
图片相关的优化
不同图片格式常用的业务场景
雪碧图
优缺点
可能整合的文件特别大，如果该文件为加载，导致整个页面的图片无法显示。需要酌情优化。
现在移动端基本不使用雪碧图
图片压缩的几种方法
图片以base64的格式引入到标签中，减少http请求的次数
SVG比png小
不需要重新发请求，它是内嵌在html中使用的
svg绘制简单，适合小icon
css和js的装载与执行
defer
js不会阻塞页面渲染
脚本按照顺序执行，当脚本之间有依赖关系时适合用defer
脚本会在dom树构建完成之后执行
脚本按照顺序执行，当脚本之间有依赖关系时适合用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发送过来的消息
在service worker中，监听从上层发过来的消息，
并进行client过滤，如果client不是当前发送消息的client，就postMessage发送消息
并进行client过滤，如果client不是当前发送消息的client，就postMessage发送消息
适用于大型逻辑运算
PWA
缓存优化
主要字段
强缓存
协商缓存
子主题
node实现服务器缓存
SSR（服务端渲染）
0 条评论
下一页
