性能优化，首先要带着目的，再去发现问题、解决问题；这个过程中，也需要一些指标作为参考，及监测这些指标的工具：
前端性能指标
First Paint(FP) 第一次渲染，开始有变化了，可能没有内容（看不到，无感知）
First Contentful Paint(FCP) 第一次有内容的渲染，有感知了
First Meaningful Paint(FMP) -- 目前已弃用（没办法用技术定义有意
原创
2023-07-03 09:12:37
1504阅读
前端性能优化可以分为两大类分别是页面级别优化包含了http请求数以及内联脚本位置优化，代码级别的优化包含DOM操作优化，CSS选择符优化以及图片优化等前端里面包含的内容是丰富的，它包括HTML，CSS以及JS和图片等各种各样的资源。因此前端优化是复杂的和必要的，接下来在文章中为大家介绍前端性能优化的方法，具有一定的参考作用，希望对大家有所帮助。优化的目的优化的目的在于让页面加载的更快，对用户操作响
转载
2023-07-09 13:38:57
66阅读
前端优化中与 DNS 有关的有两点： 一个是减少DNS的请求次数，另一个就HTTP的请求数量。http
原创
2022-08-19 11:37:06
40阅读
1. 什么是Webpack？2. 提高构建速度2.1 npm install 过程中的优化2.2 具体仓库地址的选择2.3 提升Webpack构建速度3. 打包文件质量优化3.
原创
2022-07-12 17:52:32
748阅读
网站前端性能优化常用几种方式 一、总结 一句话总结： 1、JavaScript和CSS是应该放
转载
2019-05-23 13:01:00
1290阅读
前端性能优化三大优化思维：性能优化目标用户体验代价与权衡八处优化落点：HTML层级优化CSS层级优化JavaScript层级优化渲染层级优化交互请求优化数据结构优化前端缓存优化前端性能瓶颈传统DOM操作对性能的影响 浏览器的渲染过程 重排、重绘 &nbs
原创
2022-03-21 10:21:06
180阅读
说到性能优化，恐怕几天几夜都说不完，今天我来说一下web前端优化，希望能给大家带来意外的收获！ 要说前端优化就不得不提雅虎的yslow和google的pagespeed了，只要围绕他们的标准基本上就能优化的很好了。对于一
原创
2014-09-10 16:34:52
708阅读
最近和几个朋友组织了一个技术交流会，目的是分享技术，彼此进步。昨天结束了第一期，决定坚持下去，每个月定期举办，希望以后能加入更多的人！！ 附件是我分享的PDF，欢迎大家批评指正！
原创
2014-09-15 12:16:54
644阅读
减少HTTP请求（合并css、js，雪碧图/base图片） 压缩（css、js、图片皆可压缩,使用webpack uglify和 svg） 样式表放头部，脚本放底部 使用CDN（这部分，不少前端都不用考虑，负责发布的兄弟可能会负责搞好） http缓存 bosify图片压缩: 根据具体情况修改图片
转载
2020-12-27 19:44:00
310阅读
2评论
前端性能优化是每个前端开发者都需要掌握的技能之一。在本文中，我将向您介绍一些常见的前端性能优化技巧和最佳实践，帮助您提高网站或应用程序的性能和用户体验。精简代码精简代码是提高前端性能的最基本方法之一。这包括去除不必要的代码、简化代码以及使用更高效的算法和数据结构。通过精简代码，您可以减少文件大小，提高代码执行速度，并使您的网站或应用程序更加高效。优化图片图片是网站或应用程序中最大的性能瓶颈之一。因
原创
2023-09-13 09:18:07
79阅读
1 路由懒加载2 CDNVue 项目打包后的 vendor.js 过大，将导致打包速度慢，首屏加载慢 。其原因是第三方库如（vue、vue-router、vuex、axios等）都会被打包到 vendor.js 文件里面，而浏览器是在加载该文件之后，才开始显示首屏的。 CDN优化把第三方库如（vue、vue-router、vuex、axios等）通过cdn的方式引入到项目中。这样浏览器可以开启
1、什么是前端性能优化？从用户访问资源到资源完整展现在用户面前的过程中，通过技术手段和优化策略，缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。2、为什么要做前端性能优化？在构建web站点的过程中，任何一个细节都有可能影响网站的访问速度，如果不了解性能优化知识，很多不利于网站访问速度的因素会产生，从而严重影响网站的性能，导致网站访问速度变慢，用户体验低下，最终导致用户流失。3、如何进行前端
原创
2021-12-24 14:40:29
94阅读
1、什么是前端性能优化？从用户访问资源到资源完整展现在用户面前的过程中，通
原创
2022-03-03 14:39:49
57阅读
一、初始阶段 >加载优化 1.主要解决首屏加载慢的问题（根本问题就是资源请求过多且文件体积大的问题） 1.图片处理； 可以使用图片懒加载、雪碧图、字体图标iconfont的方式 来减少图片请求 2.css /js； 通过nginx服务器来做资源文件的合并或者通过webpack等打包工具进行物理打包， ...
转载
2021-08-09 13:50:00
132阅读
2评论
当涉及到前端性能优化时，有许多方面需要考虑。以下是一些常见的前端性能优化技巧：压缩和缩小文件：使用压缩工具（如Gzip）来压缩HTML、CSS和JavaScript文件的大小，并将图片和其他媒体文件进行压缩。此外，还可以使用工具（如Webpack）来合并和缩小文件，以减少网络请求数量。使用缓存：通过使用浏览器缓存来减少页面加载时间。通过设置适当的缓存头（如Expires、Cache-Control
原创
2023-08-07 09:44:05
16阅读
性能优化这个问题，在面试的过程中问道的概率还挺大的，特别是对有前端开发经验的面试者来说，基本会被面试官问道关于性
原创
2023-09-08 10:51:45
0阅读
1.概念缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度2.编码部署：（1）代码的压缩与合并（2）图片、js、css、等静态资源使用和主站不同域名地址存储，从而使得在传输资源时不会带上不必要的cookie信息（3）使用内容分发网络CDN（4）为文件设置Last-Modified、Expires和Etag（设置文件头，最近修改时间，过期时间，时间戳）（5）使用GZIP压缩传送（6）权衡DNS查
原创
2019-01-16 10:22:45
558阅读
持续更新中。。。1. 使用CDN，比如图片放在第三方云平台；2. 减少http请求次数，比如页面中合并接口，减少请求个数；3. 使用gzip压缩内容，比如nginx配置压缩；4. 组件懒加载，比如Vue组件懒加载；5. UI框架按需加载；6. 修改hosts，比如让请求走内网，不走外网；
转载
2021-04-03 21:57:42
165阅读
2评论
1、在浏览器中输入url会经历域名解析、建立TCP连接、发送http请求、资源解析等步骤。 压缩html 压缩css 压缩js ...
转载
2021-07-22 17:23:00
92阅读
2评论
