项目构建打包优化（通过speed-measure-webpack-plugin分析打包速度，使用BundleAnalyzerPlugin对打包结果进行分析）const SpeedMeasureWebpackPlugin = require("speed-measure-webpack-plugin");
const BundleAnalyzerPlugin = require("webpack-
转载
2023-06-30 17:46:40
76阅读
jQuery在移动端移动端dom操作库首推zepto，他实现了jQuery的大多数接口，被移动端成功扶正；弃用jQuery的主要原因是尺寸上的考虑而jQuery经过几次发展，终于宣布不再理睬IE8，但是最新的版本尺寸依旧超过80K，而我移动端核心框架加起来还没一个DOM库大，很难不放弃他究其原因，积重难返，要兼容老接口，又要照顾老用户，一些代码确实删不掉。 angularJS的更新而与j
转载
2023-07-21 21:23:43
78阅读
前端性能优化可以分为两大类分别是页面级别优化包含了http请求数以及内联脚本位置优化，代码级别的优化包含DOM操作优化，CSS选择符优化以及图片优化等前端里面包含的内容是丰富的，它包括HTML，CSS以及JS和图片等各种各样的资源。因此前端优化是复杂的和必要的，接下来在文章中为大家介绍前端性能优化的方法，具有一定的参考作用，希望对大家有所帮助。优化的目的优化的目的在于让页面加载的更快，对用户操作响
转载
2023-07-09 13:38:57
66阅读
前端架构性能优化策略作者|DebugBear译者|王强策划|小智本文经原作者授权，由InfoQ中文站翻译并分享。这篇文章介绍了一些能让前端应用加载更快，并能提供良好用户体验的技术。我们要看待的是前端的总体架构。你该如何先加载必需的资源，并尽量提升资源在缓存中的命中概率？本文不会过多涉及后端交付资源的方式，以及你的页面是否需要客户端应用，或者如何优化应用程序的渲染时间这些内容。前言我把应用加载的过程
原创
2020-12-17 22:05:16
328阅读
回顾下之前博客中提到的大型网站架构： 这张图中，有很多经典的模块。比如CDN服务器，反向代理服务器，负载均衡系统，应用服务器，分布式缓存系统等等。之后的几篇博客中我会逐个来介绍。今天先来看看WEB前端优化，在上图中，负载均衡服务器之前的部分都可以看成WEB前端，其中自然少不了浏览器。 WEB前端优化包括浏览器优化，使用CDN缓存加速，使用反向代理缓存加速。 
原创
2016-05-30 15:07:44
924阅读
以前，与后端开发相比，前端开发并不总是得到应有的重视。但是时代变了，Web应用正在快速增长，这主要是由于开源工具的发展。如今，前端正以令人难以跟上的速度前进。 Svelte越来越受欢迎 Svelte是一个相对较新的工具，理论上它起步太晚，无法有机会对抗React、Vue 和 Angular。但它正以前所未有的速度稳步普及。 但是Svelte不仅仅是这些。它是一个构建优化前端的编译器。
一、加载速度优化 精灵图 base64 iconfont替代图片 代码压缩 图片、视频压缩 cdn缓存 路由懒加载 原理：将每个组件都打成一个包，首页的大文件可以进行分批引入 实现：main.js中将所有的同步引入组件的方式改为异步引入组件，即： import Home from "pages/Ho
原创
2021-07-13 17:14:05
108阅读
web前端设计优化准则： 1 减少http请求次数，考虑：css，js,图片，，， 2 采用CDN 3
原创
2022-11-19 10:20:38
68阅读
一、页面/文件级优化 1、减少HTTP请求 一个完整的 HTTP 请求需要经历 DNS 查找，TCP 握手，浏览器发出 HTTP 请求，服务器接收请求，服务器处理请求并发回响应，浏览器接收响应等过程。 方案 设置缓存 css、js、img等静态资源合并压缩（vue的项目有压缩css和js） 懒加载图 ...
转载
2021-09-18 16:13:00
157阅读
2评论
前段性能优化的作用于目的：从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。前端优化的途径有很多，按粒度大致可以分为两类。第一类是页面级别的优化。例如 HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等 。第二类则是代码级别的优化，例如 Javascript中的D
转载
2023-10-18 22:09:10
34阅读
时间花哪里去了？
只有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阅读
1.浏览器访问优化：减少HTTP请求数，主要可通过合并CSS、JavaScript、图片（CSS偏移）。使用浏览器缓存启用压缩，在服务器端对文件进行压缩，在浏览器端对文件解压缩， 减少Cookie传输的数据量。静态资源使用独立域名访问，避免请求静态资源时发送Cookie，减少Cookie传输的次数。
2.CDN加速：CDN的本质仍然是一个缓存，只是部署在离用户最近的网络运营商的机房，一般缓存的都是静态资源。
3.反向代理：代理服务器位于网站机房一侧，代理网站Web...
原创
2021-06-01 13:43:02
219阅读
前端优化方法有哪些 文章目录前端优化方法有哪些前言一、http方面尽量减少http请求，合理设置http缓存1.开启 HTTP/2请求与响应复用标头压缩2.DNS-prefetchPreconnect二、资源优化预加载Preloadjs方面加载优化CSS方面图片方面三、组件渲染方面的优化 前言前端是庞大的，包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源
目录一级目录1. 减少 HTTP 请求2. 使用 HTTP23. 使用服务端渲染4. 静态资源使用 CDN5. 将 CSS 放在文件头部，JavaScript 文件放在底部6. 使用字体图标 iconfont 代替图片图标7. 善用缓存，不重复加载相同的资源8. 压缩文件9. 图片优化10. 通过 webpack 按需加载代码，提取第三库代码，减少 ES6 转为 ES5 的冗余代码11. 减少重
转载
2023-07-23 21:22:06
53阅读
1、常用的图像类型1) gif: 适用于动画效果。2) jpg: 使用有损压缩，将图片的每个像素分解成8*8的栅格，然后对每个栅格的数据进行压缩处理，通过特殊的算法用附近的颜色填充栅格。用户可以设置质量级别，从0到100，数字越小，图片质量越差。3) png：使用无损压缩，将图片出现的颜色进行索引，保留在调色板上，在显示图像时会调用调色板的颜色去填充相应位置。png又分为png8、png24和pn
原创
2021-12-24 14:45:32
170阅读
1、常用的图像类型1)gif: 适用于动画效果。2)jpg: 使用有损压缩，将图片的每个像素分解3)png：使用无损压缩，将图片出现的颜色进行索引，保留在调色板上，在显示图像时会调用调色板的颜色去填充相应位置。png又分为png8、png24和png32，png8表示支持2^8个种颜色，通常png8是最通用的web图片格式。2、图像优化...
原创
2022-03-03 14:34:46
88阅读
从输入URL到页面加载完成的过程：首先通过DNS（域名解析）把URL解析为对
原创
2022-10-27 20:16:03
306阅读
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评论
