前端性能优化-基础认知

基础:1.本地存储 2.后端逻辑

DNS寻址以及IP解析
访问 Network 下的 Headers -> Remote Address 一样可以访问本站

WebServer 背后的事

性能优化包括前端、后端、网络以及硬件机器

页面渲染流程
HTML页面请求
浏览器的js引擎

尽量减少页面的reflow
防止js绘制dom节点阻塞其他标签的解析甚至下载,比如 document.write

浏览器的JS引擎

WebPageTest 分析网络性能

性能优化:Yahoo军规

技术优化出发点

写成可复用的模块

加载方式(提升用户体验):
1. 同步加载
都加载完才能展示给用户想看的。
可能很少的tcp连接就能完成页面的加载

2. 分级加载
同步加载和异步加载相结合
先给用户加载重要的信息比如logo/核心功能,后面加载不重要的

3. 按需加载
用户不触发该功能我们就不加载
用户不触发该功能,但是带宽闲置,或者页面的主要元素都加载完了

重要的东西同步加载,不重要的东西异步加载

bigpipe的缺点:
异步请求较多
seo引擎较难抓取
模块之间相互通信引用
模块引擎重复渲染

技术术语:
1. 首屏加载时间(不滑动)
2. 白屏时间
3. 可操时间
4. 连通率

产品术语:
1. pv一次访问一次pv
2. uv多次访问同一个人一次uv
3. day日活跃用户数量
4. MAU月活跃用户人数
5. 跳出率(跳出时间留下来的人/pv)

时间: 2024-10-07 08:25:19

前端性能优化-基础认知的相关文章

2017前端性能优化清单

https://github.com/Findow-team/Blog/issues/11?utm_source=tuicool&utm_medium=referral 2017前端性能优化清单 你开始使用渐进启动了么?是不是已经使用过React和Angular中tree-shaking和code-splitting两个工具?有没有用过Brotli.Zofli和HPACK这几种压缩技术,或者OCSP协议(在线证书状态协议)?知不知道资源提醒,客户端提醒和CSS containment一类的技术?

关于web前端性能优化问题

好久没有来博客写随笔了,可能是懒了吧,哈哈, 最近很想整理一篇关于前端性能优化的问题,毕竟能提高网站的观赏性对吧.提升网站性能,提升用户体验 那 什么是web性能优化? 可以这么理解:从用户访问资源到资源完整的展现在用户面前的过程中,通过技术手段和优化策略,缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度. 那么怎么才能提高web性能优化呢? 可以从这几个方面考虑:   1.减少HTTP请求 首先,每个请求都是有成本的,既包含时间成本也包含资源成本.一个完整的请求都需要经过 DNS寻址.与

Web前端性能优化的9大问题

1.请减少HTTP请求基本原理: 在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出. 一个正常HTTP请求的流程简述:如在浏览器中输入"www.xxxxxx.com"并按下回车,浏览器再与这个URL指向的服务器建立连接,然后浏览器才能向服务器发送请求信息,服务器在接受到请求的信息后再返回相应的信息,浏览器接收到来自服务器的应答信息后,对这些数据解释执行. 而当我们请求的网页文件中有很多图片.CSS.JS甚至音乐等信息时,将

WEB前端性能优化小结

1. 请减少HTTP请求 基本原理: 在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出. 一个正常HTTP请求的流程简述:如在浏览器中输入"www.xxxxxx.com"并按下回车,浏览器再与这个URL指向的服务器建立连接,然后浏览器才能向服务器发送请求信息,服务器在接受到请求的信息后再返回相应的信息,浏览器接收到来自服务器的应答信息后,对这些数据解释执行. 而当我们请求的网页文件中有很多图片.CSS.JS甚至音乐等信息时

大话WEB前端性能优化基本套路

前言 前端性能优化这是一个老生常谈的话题,但是还是有很多人没有真正的重视起来,或者说还没有产生这种意识. 当用户打开页面,首屏加载速度越慢,流失用户的概率就越大,在体验产品的时候性能和交互对用户的影响是最直接的,推广拉新是一门艺术,用户的留存是一门技术,拉进来留住用户,产品体验很关键,这里我以美柚的页面为例子,用实例展开说明前端优化的基本套路(适合新手上车). WEB性能优化套路 基础套路1:减少资源体积 css 压缩 响应头GZIP js 压缩 响应头GZIP html 输出压缩 响应头GZI

阿里巴巴 web前端性能优化进阶路

Web前端性能优化WPO,相信大多数前端同学都不会陌生,在各自所负责的站点页面中,也都会或多或少的有过一定的技术实践.可以说,这个领域并不缺乏成熟技术理论和技术牛人:例如Yahoo的web站点性能优化黄金法则,以及大名鼎鼎的优化大师Steve Souders.本文并非一篇讨论性能优化技术方法的文章,而更多的是对中文站搜索List页面持续两年多的前端性能优化实践的思路总结.希望对正在从事这个领域研究的前端同学能有所帮助. 简单的说,我们的性能优化实践分为三个阶段:初探期.立规期.创新期, 每个阶段

让你页面速度飞起来 Web前端性能优化

百度网盘下载 第1章 课程简介 对课程做简单的介绍. 第2章 资源合并与压缩 通过本章,我们学习和理解了web前端的概念,以及性能优化的意义所在,并且通过实战中的压缩与合并,深入理解了减少http请求数和减少http请求资源大小两个优化要点,并且通过实战,帮助学生掌握如何通过网站进行压缩与合并,如果使用半自动化的gulp脚本进行压缩与合并,最终通过优化前后的性能对比,更加量化地去理解了性能... 第3章 图片相关的优化 通过本章,帮助学员学习和掌握图片相关的优化方法,理解不同图片格式分别是什么以

23条前端性能优化,看懂就够了!

前端性能优化是个巨大的课题,如果要面面俱到的说的话,估计三天三夜说不完.所以我们就从实际的工程应用角度出发,聊我们最常遇见的前端优化问题. 1. 减少HTTP请求次数 尽量合并图片.CSS.JS.比如加载一个页面,如果有5个css文件的话,那么会发出5次http请求,这样会让用户第一次访问你的页面的时候会长时间等待.而如果把这个5个文件合成一个的话,就只需要发出一次http请求,节省网络请求时间,加快页面的加载. 2. 使用CDN 网站上静态资源即css.js全都使用cdn分发,图片亦然. 3.

【杂谈】BI系统的前端性能优化

近一年,由于笔者团队的一些变化,笔者开始承担一个BI系统的前端应用的维护和迭代,一年中,围绕着这个BI系统,发生了不少令人啼笑皆非和醍醐灌顶的故事.最近,终于有时间把它们一点点的沉淀写来,以文字的形式呈现出来. 首先,简单介绍下笔者维护的这个BI系统,和常规的BI(Business Intelligence)系统一样,笔者的BI系统同样可以分为三层: 数据层:这一层其实主要是ETL的过程,即将业务数据库的数据通过抽取(Extract).转换(transform).加载(Load)到新的数据库中,