web性能优化（下）

于 2022-12-06 11:19:06 发布
阅读量273 收藏
点赞数
分类专栏： 前端菜鸟的学习历程 文章标签： 前端 性能优化 网络
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43132396/article/details/128197796
版权

请求和响应优化

  1. 减少DNS查找： 每次主机名的解析都需要一次网络往返，从而增加了请求的延迟时间，同时还会阻塞后续请求。
  2. 重用TCP连接： 尽可能的使用持久连接，以消除TCP握手和慢启动需要的时间。
  3. 减少HTTP重定向： HTTP重定向需要额外的DNS查询和TCP握手等，非常耗时，最佳的重定向次数为0
  4. 压缩传输的资源： 比如Gzip，图片压缩
  5. 使用缓存： 比如HTTP缓存，CDN缓存
  6. 使用CDN（内容分发网络）： 把数据放在里地理位置离用户近的地方，可以明显减少每次TCP连接的网络延迟，增大吞吐量
  7. 删除没有必要的请求资源
  8. 在客户端缓存资源： 缓存必要的应用资源，避免每次都重复请求相同的资源，利用多图片下载可以考虑使用缓存
  9. 内容在传输前先压缩： 传输数据之前应该先压缩应用资源，把传输的字节减少到最小
  10. 消除不必要的请求开销： 减少HTTP请求的首部数据
  11. 并行处理请求和响应
  12. 针对协议版本采取优化措施： 升级到HTTP2.0
  13. 根据需要采用服务端渲染方式： 这种方式可以解决SPA首屏渲染慢的问题
  14. 采用预渲染的方式快速加载静态页面
菜鸟小七_hhh
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web前端性能优化进阶路
03-23
Web前端性能优化WPO，相信大多数前端同学都不会陌生，在各自所负责的站点页面中，也都会或多或少的有过一定的技术实践。可以说，这个领域并不缺乏成熟技术理论和技术牛人：例如Yahoo的web站点性能优化黄金法则，以及...
网页内容优化（减少HTTP请求、减少DNS查询、避免页面多次跳转、缓存AJAX、延迟和提前加载、根据域名划分内容减少iframe数量、避免404）
AIWWY的博客
09-21 996
目录 减少HTTP请求 合并文件 雪碧/精灵图 内嵌图片 减少DNS查询 避免页面多次跳转（重定向） 缓存AJAX 延迟加载（懒加载） 提前加载（首屏加载） 无条件提前加载 有条件加载 有预期的的加载 根据域名划分内容 减少iframe数量 避免404 减少HTTP请求 合并文件 很多现成的库可以帮你将多个脚本文件合并成一个文件，将多个样式表文件捆合并一个文件，以此来减少文件的下载次数。 雪碧/精灵图 合并图片，并通过坐标决定显示哪张图片。 内嵌图片 通过编码的.
WebApi性能优化
好好学习，天天向上！
04-06 2502
文章目录一、WebApi调优二、WebApi 应用场景三、WebApi 性能瓶颈定位四、WebApi性能优化手段一-本地缓存五、WebApi 性能优化手段二-分布式缓存六、WebApi 性能优化手段三-Http缓存（响应缓存）七、WebApi 性能优化手段四-数据压缩（响应） 一、WebApi调优 什么是WebApi调优 当浏览器端请求WebApi服务端读写数据需要耗费时间，将耗费的时间缩短，就称之为WebApi调优。 如图： 目的 提升WebApi的性能。 二、WebApi 应用场景 场
web性能优化--用gzip压缩资源文件
热门推荐
yjclsx的博客
07-31 43万+
一、gzip压缩技术 gzip(GNU- ZIP)是一种压缩技术。经过gzip压缩后页面大小可以变为原来的30%甚至更小，这样，用户浏览页面的时候速度会快得多。gzip的压缩页面需要浏览器和服务器双方都支持，实际上就是服务器端压缩，传到浏览器后浏览器解压并解析。浏览器那里不需要我们担心，因为目前的大多数浏览器都支持解析gzip压缩过的资源文件。在实际的应用中我们发现压缩的比率往往在3到10倍，也...
web 页面性能优化
weixin_42657666的博客
01-20 1246
web 页面性能优化 性能优化在视觉上有两个阶段: 加载阶段,能够快速的看到页面(首屏渲染时间); 交互阶段,能够快速响应操作(动画效果,接口返回速度等) 加载阶段 加载阶段，是指从发出请求到渲染出完整⻚⾯的过程，影响到这个阶段的主要因素有⽹络和JavaScript脚本。 网络决定资源的下载速度,javascript脚本阻塞dom解析,css脚本不阻塞dom解析(但是如果是放在head的话会阻 塞渲染) 优化策略 减少资源的大小,可以通过webpack打包优化工具,压缩代码,去除注释空格等; 如果资
web性能优化方法
田品吕口的博客
10-15 2392
探讨web性能优化方法，一直是前端开发者不懈努力的事情，获得总结的方法也很多，看了几位大牛的总结，特此与大家共同分享一下。 前端是庞大的，包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化是复杂的，针对方方面面的资源都有不同的方式。那么，前端优化的目的是什么 ? 1）用户角度：优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为...
web性能优化思维导图
12-06
web性能优化思维导图
前端性能优化与Web安全
最新发布
08-26
从前各UI、资源压缩、服务端、缓存、应用渲染等方面介绍前端性能优化，以及Web安全，如：XSS、CSRF、SQL注入、http劫持、数据验证等。
Web性能优化：图片优化
02-26
从性能优化的角度看，图片也绝对是优化的热点和重点之一，GooglePageSpeed或者Yahoo的14条性能优化规则无不把图片优化作为重要的优化手段，本文覆盖了Web图片优化的方方面面，从基本的图片格式选择、到尚未被广泛...
Vue.js 3.0
weixin_43132396的博客
01-23 6401
Vue.js 3.0 和2.0的区别 源码组织方式的变化 vue3.0的源码全部采用TypeScript重写。（在大型项目中推荐使用类型化的语言） 使用Monorepo管理项目。使用一个项目管理多个包，把独立的功能模块都提取到不同的包中，把不同功能的包放到一个package里面管理，这样每个功能模块划分都很明确，模块之间的依赖关系也很明确，并且每个功能模块都可以单独测试单独发布单独使用 packages目录结构 Composition API（组合API） 他是为了解决在遇到大型项目时，遇到超大组件使
Vue源码解析
weixin_43132396的博客
12-20 6069
主要目录结构 scripts：构建相关的脚本和配置文件 dist：构建后的文件 flow：Flow的类型声明 packages：vue-server-render 和 vue-template-compiler，它们作为单独的NPM包发布 test：所有的测试代码 examples：实例代码 types：TypeScript 类型定义 src：源代码 compiler ： 与模版编译相关的代码 core ： Vue核心库（通用的、与平台无关的运行时代码） observer ：实现变化侦测的代码 vdom
Rollup ES Modules打包器
weixin_43132396的博客
11-21 2731
相比于webpack，Rollup更为小巧。但Rollup仅仅是一款ESM打包器，Rollup中并不支持类似HMR这种高级特性。他的目的就是提供一个充分利用ESM各项特性的高效打包器
React 基础
weixin_43132396的博客
02-24 2225
React介绍 React是用于构建用户界面的JavaScript库。在React中all in js，一切使用的都是JavaScript。 React只负责应用程序的视图层，在react中没有把构建用户界面和构建用户界面的逻辑进行区分，所以使用react可以轻松构建出强交互式的web应用程序，在react当中是使用组件的方式来构建用户界面的。 JSX 语法 在React中使用jsx语法描述用户界面，他是一种JavaScript语法扩展 在React代码执行之前，Babel会将JSX语法转换为标准的J
package.json中bin的用法
weixin_43132396的博客
06-10 1840
package.json中bin的用法
Nuxt.js发布部署
weixin_43132396的博客
12-30 1431
使用命令打包 https://zh.nuxtjs.org/guide/commands 配置命令，package.json中添加如下内容、 令 描述 nuxt 启动一个热加载的web服务器（开发模式） nuxt build 利用 webpack 编译应用，压缩 JS 和 CSS 资源（发布用）。 nuxt start 以生产模式启动一个 Web 服务器 (需要先执行nuxt build)。 nuxt generate 编译应用，并依据路由配置生成对应的 HTML 文件 (用于
Vuex状态管理
weixin_43132396的博客
12-22 838
Vue最核心的两个功能：数据驱动和组价化。 组件化开发的优势就是：更快的开发效率和更好的可维护性 状态管理包含以下几部分： state：驱动应用的数据源 view：以声明的方式将state映射到视图 actions：响应在view上的用户输入导致的状态变化 什么是vuex Vuex是专门为Vue.js设计的状态管理库 它采用集中式的方式存储需要共享的数据 从使用的角度，他就是一个JavaScript库 他的作用是进行状态管理，解决复杂组件通信，数据共享 什么情况下使用Vuex 多个视图依赖于同一状
封装Vue组件库
weixin_43132396的博客
01-17 705
组件库介绍 组件开发方式CDD 自下而上 从组件级别开始，到页面级别结束 好处： 组件在最大程度上被重用 并行开发 可视化测试、 处理组件便捷情况 $attrs 把父组件中非prop属性绑定到内部组件。注：如果是class和style属性的话还是会绑定到子组件最外层标签上的。 $listeners 把父组件中的DOM对象的原生事件绑定到内部组件 $root 获取根实例 $parent 获取父组件实例 $children 获取子组件实例 provide/inject 依赖注入。注：inject进来
前端工程化（上）之 脚手架工具
weixin_43132396的博客
11-12 594
工程化概述 工程化之前主要面临的问题 传统语言或语法的弊端 无法使用模块化/组件化 重复的机械式工作 代码风格不统一、质量不保证 依赖后端服务接口支持 整体依赖后端项目 工程化表现 一切以提高效率、降低成本、质量保证为目的的手段都属于【工程化】 一些成熟的工程化集成： create-react-app vue-cli angular-cli gatsby-cli 脚手架工具 前端工程化的发起者 脚手架的本质作用 创建项目基础结构、提供项目规范和约定 相同的组织结构 相同的开发范式 相同的模块依赖
SSR
weixin_43132396的博客
01-17 570
Vue SSR 介绍 Vue SSR（Vue.js Server-Side Rendering） 是 Vue.js 官方提供的一个服务端渲染（同构应用）解 决方案 使用它可以构建同构应用 使用场景： 更快的首屏渲染速度 更好的 SEO 搭建自己的服务器端渲染 (SSR) 渲染一个Vue实例 npm init -y npm i vue vue-server-renderder index.js // 第 1 步：创建一个 Vue 实例 const Vue = require("vue");
datax-web 性能优化
07-29
对于DataX-Web的性能优化，可以从以下几个方面入手： 1. 调整DataX Job内Channel并发数：当提升DataX Job内Channel并发数时，内存的占用会显著增加，因为DataX作为数据交换通道，在内存中会缓存较多的数据。为了防止OOM等错误，可以调大JVM的堆内存。可以通过调整JVM的-Xms和-Xmx参数来增加堆内存的分配。\[1\]\[2\] 2. 全局调优：可以通过修改DataX-Web的配置文件来进行全局调优。在配置文件中，可以调整数据导入的并发度、解除对读取行数和字节的限制，以及设置每次读取batch的大小等参数。根据服务器硬件情况进行调优，可以提升DataX-Web的性能。\[3\] 3. 硬件优化：除了软件层面的调优，还可以考虑进行硬件优化。例如，增加服务器的内存、CPU等硬件资源，提升服务器的性能，从而提高DataX-Web的性能。 综上所述，对于DataX-Web的性能优化，可以通过调整DataX Job内Channel并发数、全局调优和硬件优化等方式来提升性能。 #### 引用[.reference_title] - *1* *2* [DataX优化](https://blog.csdn.net/qq_36593748/article/details/122441642)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [DataX3.0 启动参数说明及优化](https://blog.csdn.net/qq_23268209/article/details/90437073)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值