前段性能优化的作用于目的：从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。前端优化的途径有很多，按粒度大致可以分为两类。第一类是页面级别的优化。例如 HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等 。第二类则是代码级别的优化，例如 Javascript中的D
转载
2023-10-18 22:09:10
43阅读
1. 减少http请求数常用的减少http请求数有以下几种：1）合并图片。当图片较多时，可以合并为一张大图，从而减少http请求数。经常变化的图片可能不太合适，变化相对稳定的就可以考虑。合并大图除了能减少http 请求数外，还可以充分利用缓存来提升性能。2）合并压缩css样式表和js脚本，他们的共同目的都是为了减少http连接数。3）去掉不必要的请求。开发写代码或者系统升级之后残留的无效
原创
2018-04-25 15:01:50
7336阅读
点赞
1、压缩图片 2、减少冗余代码 3、避免404错误 4、避免滤镜的使用 5、在HTML中不要使用压缩图片 6、DNS解析优化，DNS缓存，减少DNS查找。 7、异步加载（并发、require） 8、预加载、延迟加载，按需加载 9、减少重绘和回流 10、减少DOM节点 11、减少节点的操作（inner
原创
2022-08-02 21:14:07
86阅读
提到前段性能优化，不可避免的都会想到如下的解决方案： （1）减少HTTP请求（合并css、js，雪碧图/base64图片、CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。） （2）压缩（css、js、图片等前端资源皆可压缩，通常
原创
2022-08-02 21:14:15
154阅读
【前端性能优化方法与实战】性能优化概览
原创
2022-07-01 11:52:22
143阅读
一、概述
1.1 性能对业务的影响
大部分网站的作用是：产品信息载体、用户交互工具或商品流通渠道。这就要求网站与更多用户建立联系，同时还要保持良好的用户黏性，所以网站就不能只关注自我表达，而不顾及用户是否喜欢。看看网站性能会造成哪些方面的影响：用户留存：Google 营销平台曾指出，如果网站加载时间超过 3 秒，就会有 53% 的移动网站访问遭到用户抛弃；BBC 发现网站加载时长每增加 1 秒，就
一、页面/文件级优化 1、减少HTTP请求 一个完整的 HTTP 请求需要经历 DNS 查找，TCP 握手，浏览器发出 HTTP 请求，服务器接收请求，服务器处理请求并发回响应，浏览器接收响应等过程。 方案 设置缓存 css、js、img等静态资源合并压缩（vue的项目有压缩css和js） 懒加载图 ...
转载
2021-09-18 16:13:00
170阅读
2评论
时间花哪里去了？
只有10%-20%的最终用户响应时间花在了下载html文档上,其余80%-90%时间花在了下载页面的相关组件上。如：图片、Flash等。
所以主要优化：
减少http请求
缓存
减少文件大小：压缩文件+优化代码
健康的优化因该是根据页面的加载过程，全面的优化过程
第一步、浏览器预处理
查询Cache：读取Cache 或者发送304请求
第二步、查询DNS
优化规则--减少DNS查找
DNS缓存
浏览器DNS缓存 计算机DNS缓存 服务器DNS缓存（TTL）
使用Keep-Alive特性
减少DNS查找
当客户端的DNS缓存为空时，DNS查找的数量与Web页面中唯一主机名的数量相等。减少唯一主机名的数量就可以减少DNS查找的数量。
较少的域名来减少DNS查找（2-4个主机）
原创
2021-06-07 18:00:16
630阅读
项目构建打包优化（通过speed-measure-webpack-plugin分析打包速度，使用BundleAnalyzerPlugin对打包结果进行分析）const SpeedMeasureWebpackPlugin = require("speed-measure-webpack-plugin");
const BundleAnalyzerPlugin = require("webpack-
转载
2023-06-30 17:46:40
82阅读
一、加载速度优化 精灵图 base64 iconfont替代图片 代码压缩 图片、视频压缩 cdn缓存 路由懒加载 原理：将每个组件都打成一个包，首页的大文件可以进行分批引入 实现：main.js中将所有的同步引入组件的方式改为异步引入组件，即： import Home from "pages/Ho
原创
2021-07-13 17:14:05
114阅读
web前端设计优化准则： 1 减少http请求次数，考虑：css，js,图片，，， 2 采用CDN 3
原创
2022-11-19 10:20:38
68阅读
如何知道打包体积？打包构建的时候，使用--report命令：vue-cli-service build --report复制代码打包结束后，会在dist目录里面生成一个report html文件，里面会显示你打包体积分布情况，可以根据项目情况，侧重优化。如何知道打包速度有的人可以通过--progress查看到打包耗时，但是对于我项目无用，使用ProgressBarPlugin插件解决config.
原创
精选
2022-10-17 20:59:26
423阅读
4评论
目录一级目录1. 减少 HTTP 请求2. 使用 HTTP23. 使用服务端渲染4. 静态资源使用 CDN5. 将 CSS 放在文件头部，JavaScript 文件放在底部6. 使用字体图标 iconfont 代替图片图标7. 善用缓存，不重复加载相同的资源8. 压缩文件9. 图片优化10. 通过 webpack 按需加载代码，提取第三库代码，减少 ES6 转为 ES5 的冗余代码11. 减少重
转载
2023-07-23 21:22:06
62阅读
jQuery在移动端移动端dom操作库首推zepto，他实现了jQuery的大多数接口，被移动端成功扶正；弃用jQuery的主要原因是尺寸上的考虑而jQuery经过几次发展，终于宣布不再理睬IE8，但是最新的版本尺寸依旧超过80K，而我移动端核心框架加起来还没一个DOM库大，很难不放弃他究其原因，积重难返，要兼容老接口，又要照顾老用户，一些代码确实删不掉。 angularJS的更新而与j
转载
2023-07-21 21:23:43
97阅读
前端优化方法有哪些 文章目录前端优化方法有哪些前言一、http方面尽量减少http请求，合理设置http缓存1.开启 HTTP/2请求与响应复用标头压缩2.DNS-prefetchPreconnect二、资源优化预加载Preloadjs方面加载优化CSS方面图片方面三、组件渲染方面的优化 前言前端是庞大的，包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源
转载
2024-05-15 03:01:48
71阅读
1、常用的图像类型1) gif: 适用于动画效果。2) jpg: 使用有损压缩，将图片的每个像素分解成8*8的栅格，然后对每个栅格的数据进行压缩处理，通过特殊的算法用附近的颜色填充栅格。用户可以设置质量级别，从0到100，数字越小，图片质量越差。3) png：使用无损压缩，将图片出现的颜色进行索引，保留在调色板上，在显示图像时会调用调色板的颜色去填充相应位置。png又分为png8、png24和pn
原创
2021-12-24 14:45:32
172阅读
1、常用的图像类型1)gif: 适用于动画效果。2)jpg: 使用有损压缩，将图片的每个像素分解3)png：使用无损压缩，将图片出现的颜色进行索引，保留在调色板上，在显示图像时会调用调色板的颜色去填充相应位置。png又分为png8、png24和png32，png8表示支持2^8个种颜色，通常png8是最通用的web图片格式。2、图像优化...
原创
2022-03-03 14:34:46
102阅读
从输入URL到页面加载完成的过程：首先通过DNS（域名解析）把URL解析为对
原创
2022-10-27 20:16:03
329阅读
打开一个网页时，用户最直观的感受就是“快不快”——首屏多久出现？点击按钮有没有延迟？滚动时会不会卡顿？这些体验都和“关键渲染路径”密切相关。关键渲染路径指的是浏览器从接收HTML、CSS、JavaScript到最终在屏幕上渲染出像素的整个流程，任何一个环节的阻塞都可能导致页面加载变慢。很多开发者知道要压缩代码、减少请求，但往往忽略了渲染路径的优化，导致页面“看起来加载完了，却没法正常交互”。本文分
前端性能优化三大优化思维：性能优化目标用户体验代价与权衡八处优化落点：HTML层级优化CSS层级优化JavaScript层级优化渲染层级优化交互请求优化数据结构优化前端缓存优化前端性能瓶颈传统DOM操作对性能的影响 浏览器的渲染过程 重排、重绘 &nbs
原创
2022-03-21 10:21:06
215阅读
