前端性能优化-基础认知

基础：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)到新的数据库中,