FE.B-前端性能优化

Anshiii 发布于2019-08-30 15:55 / 1900人阅读

摘要：缓存长缓存随机名字长缓存策略可并行请求数避免重定向，一次重定向至少浏览器缓存不超过数据不安全存取防止出错关闭浏览器失效合理减少视觉交互反馈节流，防抖视觉欺诈分页预加载资源图片，慎用编码响应式图像字体异步加载异步加载其他系列二

http 缓存

http1.0: expires,last-modified
http1.1 E-tag,cache-control
html no-cache

css、js md5/timestmap/version +长缓存

image 随机名字+长缓存

cookie http-only
mtu策略 package 1.5kb
可并行请求数
避免重定向，一次重定向至少600ms

浏览器缓存

localStorage:不超过5M,数据不安全,存取trycatch防止出错
sessionStorage:关闭浏览器失效
service worker（pwa）:install,activate,message,fetch,push,sync(serviceworke.rs)
合理减少header cookie

视觉交互

34-137ms 65ms 54ms 反馈
节流，防抖
throttle & debounce
setTimeout & requestAnimationFrame
lazyload & preload
react lazy suspense
视觉欺诈
分页预加载

资源

图片 bpg ，webp,慎用base64编码, 响应式图像

字体 font-spider,preconnect

JS 异步加载,tree shaking, code splitting

html dns-prefetch

css 异步加载

其他

web worker
WebAssembly 系列（二）JavaScript Just-in-time (JIT) 工作原理
前端性能监控错误上报

测试代码的性能
http://jsben.ch/
https://benchmarkjs.com/
https://github.com/jsperf/jsp...

参考资料

浏览器渲染优化
前端性能清单
前端性能优化 2019 年度总结
前端性能上报
performance-developers.google.cn
[2017专题] 性能优化
2019 前端性能优化年度总结

混合云专线服务前端性能优化前端开发性能优化性能优化前端优化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117326.html

FE.B-前端性能优化

摘要：缓存长缓存随机名字长缓存策略可并行请求数避免重定向，一次重定向至少浏览器缓存不超过数据不安全存取防止出错关闭浏览器失效合理减少视觉交互反馈节流，防抖视觉欺诈分页预加载资源图片，慎用编码响应式图像字体异步加载异步加载其他系列二 http 缓存 http1.0: expires,last-modifiedhttp1.1 E-tag,cache-controlhtml no-cache c...

Scliang 2019-08-02 14:13 评论0 收藏0
FE.B-前端性能优化

摘要：缓存长缓存随机名字长缓存策略可并行请求数避免重定向，一次重定向至少浏览器缓存不超过数据不安全存取防止出错关闭浏览器失效合理减少视觉交互反馈节流，防抖视觉欺诈分页预加载资源图片，慎用编码响应式图像字体异步加载异步加载其他系列二 http 缓存 http1.0: expires,last-modifiedhttp1.1 E-tag,cache-controlhtml no-cache c...

tyheist 2019-08-26 13:31 评论0 收藏0
FE.B-在线学习网站 “麦**院” 课程爬虫实现

摘要：个人理解，对于一个按课程付费为主要收入的在线学习网站，课程就是变现的全部家当，如果安全措施做得不到位，那前期收集视频教程的钱算是打水漂了。本文描述方法由于2016年年初官方网站升级，固不可重现。背景最近兴起的互联网+教育，导致了很多在线学习网站的诞生，但是由于很多开发者图方便，网站安全措施做的不规范，导致很多课程资源不够安全。个人理解，对于一个按课程付费为主要收入的在线学习网站，...

Xufc 2019-06-27 15:22 评论0 收藏0
FE.B-理解浏览器的同源策略与跨域方案

摘要：方案浏览器设置一级域名。场景完全不同源的网站，需要窗口通信方案父子窗口互相写互相监听子窗口写后跳回同域父窗口读浏览器跨文档通信场景请求非同源地址方案架设服务器代理参考资料浏览器同源政策及其规避方法阮一峰前端常见跨域解决方案全跨域几种方式同源概念：协议，域名，端口相同。目的：保证用户信息的安全，防止恶意的网站窃取数据。限制的行为： Cookie、LocalStorage 和 In...

oujie 2019-08-30 15:55 评论0 收藏0
FE.B-理解浏览器的同源策略与跨域方案

摘要：方案浏览器设置一级域名。场景完全不同源的网站，需要窗口通信方案父子窗口互相写互相监听子窗口写后跳回同域父窗口读浏览器跨文档通信场景请求非同源地址方案架设服务器代理参考资料浏览器同源政策及其规避方法阮一峰前端常见跨域解决方案全跨域几种方式同源概念：协议，域名，端口相同。目的：保证用户信息的安全，防止恶意的网站窃取数据。限制的行为： Cookie、LocalStorage 和 In...

ghnor 2019-08-02 13:56 评论0 收藏0