sina_jerry_chen
sina_jerry_chen

前端性能优化指南

zhuan : http://www.oschina.net/translate/fantastic-front-end-performance

 

 

在“A Node.JS Holiday Season”系列丛书的这一章中，我们将会讨论一些前端性能和介绍一些基于Mozilla的快速开发工具。

我们将要使用前段性能自动化中非常重要的工具之一的connect-cachify。

开始之前，让我们简要重述一下作为开发者如何让机器运行的更稳定。如果你已经了解前端最优化的方法，请跳过前面的部分，了解如何使用connect-cachify完成自动化功能。

 

3c 客户端性能优化

网站上到处都是与性能优化相关的最佳实践的信息。虽然存在许多先进的技术可以为你的网站调整每一毫秒,但有三种基本工具是最基础的——连接、压缩和缓存。

连接

连接的目标是尽量减少对服务器发出的请求数量。服务器请求是昂贵的。建立一个HTTP连接所需的时间有时比传送数据本身所花的时间还要多。每个请求增加很多用于检测你的网站的开销，尤其是在移动设备上，这会造成显著的连接延迟。你是否用手机通过Edge网络浏览过一个购物网站，上面的图片一个一个蹦出来？这就是连接延时的现象。

 

SPDY是一个构建在HTTP协议之上的新协议，旨在通过合并多个资源请求到一个单一的HTTP请求来减少页面加载时间。不幸的是，目前只有最新版本的Firefox、Chrome和Opera浏览器支持这个新协议。

尽可能的合并外部资源，可能方法过时，但是可以跨浏览器工作，并且不会因为SPDY的到来而退化。已经有很多用来合并JavaScript、CSS和图片这三种最常见外部资源的工具。

JavaScript & CSS

当一个网站有多个外部的JS时，需要把他们合并成一个文件。在JS加载完成前，浏览器会阻止掉所有的渲染。（也就是你看不到JS的效果)。被请求的JS文件将会出现延迟，比如执行下面的代码将会花费更长的时间。

view source
print ?
1 <script src="jquery.min.js"></script>
2 <script src="main.js"></script>
3 <script src="image-carousel.js"></script>
4 <script src="widget.js"></script>

把四个Js文件整合成一个，将会减少延迟时间。（像下面这样）

1 <script src="main.production.js"></script>

使用整合过的JS有一点难度，所以大多数情况下，使用在正式的项目中。

 

Css和进程也是一样，在做项目的时候也应该整合到一起。

Images

Data URIs和image sprites减少请求图片的两种基本方法。

data: URI

data URI一个URL的特殊形式，直接把图片嵌入到HTML或者CSS里面。Data URIs可以作为img的src标签或者是CSS中background-image的url值。因为嵌入图片是基于base64编码的，所以他们需要更多的空间，好处是比之前的二进制图像少了一次HTTP请求。所以，当要嵌入的图片很小时，由于图片编码产生的大小往往被减少一次HTTP请求所抵消。

注：IE6和IE7都不支持 data URIs

Image sprites

Image sprites在data URI不能用的时候会是一个很好的选择。image sprite是用很多小图像组合而成的一张大图片。一旦这个图片生成后，CSS就可以用来显示指定部分的图片。许多工具都是用来做这种图片的。

缺点是维护起来麻烦，当你要添加、删除或者修改一个图片时，你需要修改其对应的CSS。

Sprite Cow帮你获得sprites 的 background-position, width and height并生成一个可复制的css表。

删掉多余的字节 – 精简，优化，压缩

组合资源，减少访问次数可以有效的提升访问速度，除此之外，也应该精简向用户传递的数据。 精简，优化，压缩也是减少字节的通常做法。

 

JavaScript & CSS

JavaScript和CSS作为文本资源，可以通过去除浏览器中无关的代码实现精简。一般情况下，JS和CSS采用的方法是删掉多余的注释和空格。JS的精简更加复杂，一些人删掉命名规则中的不必要的部分，把变量的命名缩短，甚至有人用更短的代码替换较长的代码来实现。

UglifyJS，YUICompressor还有Google Closure Compiler是三个常用的JS精简工具。

YUICompressor and UglifyCSS是两个CSS精简工具。

images Optimization

图片中包含一些数据，移除也不会影响视觉效果。清除这些数据需要专业的图片处理工具。我们的Francois Marier写了两篇博客文章讲解处理PNG图片和GIF图片。

Smush.it是雅虎的在线图片优化工具。OSX的离线工具ImageOptim也有同样的功能-将图片拖入，工具自动优化图片文件大小。ImageOptim还可以用处理后的小文件替换原始文件。

如果可以接受视觉效果的适度损失，高压缩比重新压缩图片也是可行的。

 

服务器也可以帮忙!

除了合并和缩小资源外，还有其他办法。几乎所有的服务器和浏览器都支持 HTTP 压缩 功能。最受欢迎的两种压缩方案是使用 deflate 和 gzip。在数据被服务器传送到客户端前，这两种方案都使用了高效的压缩算法来压缩被传送的资源以达到减少传送数据的目的。

 

 

缓存

拼接(Concatenation)和压缩(Compression)可以改善用户的第一次访问。缓存(Caching)优化了用户的回访。再一次访问时不需要重新下载所有的资源文件。HTTP协议提供了两种方式实现缓存机制，缓存头和ETags。

缓存头可以缓存经常修改的资源。它包含两个部分：Expires和Cache-Control:max-age。Expires标记过期时间，此后的访问将重新请求资源。max-age表示资源的有效秒数。当带有缓存头时，浏览器只会在缓存头过期后重新请求资源。

缓存破坏

相对于ETag，基于时间的Cache-Control头的优势在于只在过期后请求资源。但这也是最大的缺陷。如果资源改变了（但缓存头没过期），我们需要一些方法破坏缓存。

破坏缓存通常的方法是资源URL添加版本号。URL的改变会抛弃原有的缓存头重新请求资源。

例如资源http://example.com/logo.png的缓存头过期时间是一年，但logo更新了。已经缓存logo的用户在一年后才看到新logo。添加版本标识就可以避免这个情况：

旧的logo

1 http://example.com/v8125/logo.png

或者

1 http://example.com/logo.png?v8125

更换新logo后，修改版本信息以重新请求资源

1 http://example.com/v8126/logo.png

或者

1 http://example.com/logo.png?v8126

 

 

 

可以通过setup函数配置connect-cacheify。setup函数有两个参数，asset与options。asset是一种产品资源文件与开发资源文件的对应关系。每一个产品资源文件关联于一系列单独的开发资源文件。

options有以下设置参数：

  • prefix——加于hash码之前的前缀字符串。（默认为空）
  • production——由开发资源还是产品资源输出。（默认为true）
  • root——访问静态资源的根路径，这个与之前中间件的路径一致。（默认为'.',当前路径）
 jinker
jinker
翻译于 昨天(23:11)

1人顶

 

顶 翻译的不错哦!

connect-cachify 实例

首先，让我们为connect-cachify准备一个简单的HTML文件。文件引入了3个CSS文件和3个Javascript文件。

01 ...
02 <head>
03   <title>Dashboard: Hamsters of North America</title>
04   <link rel="stylesheet" type="text/css" href="/css/reset.css" />
05   <link rel="stylesheet" type="text/css" href="/css/common.css" />
06   <link rel="stylesheet" type="text/css" href="/css/dashboard.css" />
07 </head>
08 <body>
09   ...
10   <script type="text/javascript" src="/js/lib/jquery.js"></script>
11   <script type="text/javascript" src="/js/magick.js"></script>
12   <script type="text/javascript" src="/js/laughter.js"></script>
13 </body>
14 ...
傅小黑
傅小黑
翻译于 昨天(17:27)

0人顶

 

顶 翻译的不错哦!

中间件的设置

其次，把 connect-cachify 库引入到你的 NodeJS 服务器中。建立你自己的 production 的开发资源映射并配置好中间件。

01 ...
02 // Include connect-cachify
03 const cachify = require('connect-cachify');
04   
05 // Create a map of production to development resources
06 var assets = {
07   "/js/main.min.js": [
08     '/js/lib/jquery.js',
09     '/js/magick.js',
10     '/js/laughter.js'
11   ],
12   "/css/dashboard.min.css": [
13     '/css/reset.css',
14     '/css/common.css',
15     '/css/dashboard.css'
16   ]
17 };
18   
19 // Hook up the connect-cachify middleware
20 app.use(cachify.setup(assets, {
21   root: __dirname,
22   production: your_config['use_minified_assets'],
23 }));
24 ...

为了保持代码清爽，asset 映射可以放到一个文件中，这样既可成为 connect-cachify 的配置，也是你的程序的配置。

 

 Tom Lin
Tom Lin
翻译于 昨天(23:15)

1人顶

 

顶 翻译的不错哦!
更新你的模板来使用cachify

最后，必须更新你的模板以指出使用到的 Javascript 和 CSS 在哪里。JavaScript 用 “cachify_js” 来指明，而 CSS 用 “cachify_css” 指明。

01 ...
02 <head>
03   <title>Dashboard: Hamsters of North America</title>
04   <%- cachify_css('/css/dashboard.min.css') %>
05 </head>
06 <body>
07   ...
08   <%- cachify_js('/js/main.min.js') %>
09 </body>
10 ...

 

 Tom Lin
Tom Lin
翻译于 昨天(22:57)

1人顶

 

顶 翻译的不错哦!

Connect-cahified输出

如果将参数production设置为false，connect-cachify将输出三个link标签与三个script标签，与原来的输出一样。如果将production设置为true，将只输出各一个标签。各标签的url将被加上MD5 hash码前缀。而MD5 hash码前缀用于防止缓存。hash码将会随着产品资源文件内容发生变化，以清除缓存机制副作用。

1 <head>
2   <title>Dashboard: Hamsters of North America</title>
3   <link rel="stylesheet" type="text/css" href="/v/2abdd020a6/css/dashboard.min.css" />
4 </head>
5 <body>
6   ...
7   <script type="text/javascript" src="/v/acdd2ab372/js/main.min.js"></script>
8 </body>
9 ...
以上便是connect-cachify的所有设置。
jinker
jinker
翻译于 10小时前

0人顶

 

顶 翻译的不错哦!

结论

有许多简单的方法来加快网站速度。利用3C技术-合并（concatenation）、压缩（compression）与缓存（caching）-将大大提高网站的下载速率与改善用户的使用体验。Connect-cachify通过合并与缓存显著改善NodeJS应用，但我们应该可以做的更好。在下一篇章节中，将介绍如何使用ETagify生成动态内容并尽可能的缓存资源。

 

你可能感兴趣的:(前端性能优化)

  • 补充元象二面 Redstone Monstrosity 前端面试
    1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
  • 前端性能优化 EdmundChen
    要做性能优化，首先我们得知道用户从开始访问站点到看结果的这一段时间到底后花在了哪些地方。这就设计到一个经典问题。在游览器输入地址按下回车键之后到用户看到结果经历了哪些过程，这里简单说一下大的几个过程。（假设是输入的一个域名而非IP）1.通过DNS解析获得网址的对应IP地址2.浏览器拿到IP地址与远程web服务器通过TCP三次握手协商来建立一个TCP/IP连接3.浏览器通过HTTP接发送请求4.服务
  • vue前端性能优化之cdn的使用 不cong明的亚子 性能优化vue+elementui前端javascriptvue
    优化原因项目中首页加载过慢，原因是js,css静态资源第一次加载的时间长vue.config.js'usestrict'......constcdn={js_cdn:['https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js','https://unpkg.com/[email protected]/dist/vue.js','https://unpkg
  • 前端性能优化-CSS性能优化 LYFlied css前端css性能优化面试
    文章目录一、内联首屏关键CSS二、异步加载CSS异步加载的几种方式1.js动态创建样式表link元素，并插入到DOM中。2.设置media属性3.设置rel属性4.rel="preload"三、文件压缩四、去除无用CSS五、有选择地使用选择器六、减少使用昂贵的属性七、优化重排与重绘1.减少重排2.避免不必要的重绘八、让元素及其内容尽可能独立于文档树的其余部分九、避免使用@import十、开启GPU
  • 浏览器缓存机制 开发小途 前端
    浏览器缓存机制是前端性能优化中至关重要的一环，它通过缓存之前请求过的文件，以提高页面再次访问时的加载速度。一、浏览器缓存的作用减少数据传输：缓存减少了不必要的数据传输，节省了带宽。减轻服务器负担：通过缓存，服务器不需要处理重复的请求，从而减轻了负担。提升访问速度：缓存使得页面加载更加迅速，提升了用户体验。二、浏览器缓存的类别浏览器缓存主要分为两类：强制缓存（也称为强缓存）和协商缓存（也称为弱缓存）
  • 前端性能优化(三)——浏览器九大缓存方法 2401_84097658 程序员前端性能优化缓存
    4、cookiecookie指的就是会话跟踪技术。一般指网站为了辨别用户身份，进行session跟踪而而存储在用户本地终端上的数据，cookie一般通过http请求头发送到服务器。cookie主要特点有：跨域限制，同一个域名下可多个网页内使用。cookie可以设置有效期，超出有效期自动清除。cookie存储大小在4K以内。cookie的存储不能超过50个cookie。只能存储字符串类型。cooki
  • 面试前端性能优化八股文十问十答第二期 程序员小白条 面试八股文系列面试前端性能优化八股文面试必备职场和发展项目实战
    面试前端性能优化八股文十问十答第二期作者：程序员小白条，个人博客相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！⭐点赞⭐收藏⭐不迷路！⭐1）如何优化动画？优化动画可以通过以下几个方面进行：使用CSS动画：利用CSS3提供的transition和animation属性来实现动画效果，因为CSS动画是由浏览器来执行的，通常比JavaScript动画性能更高。使用硬件加速：通过CS
  • 面试前端性能优化八股文十问十答第一期 程序员小白条 面试八股文系列面试前端性能优化项目实战职场和发展八股文前端性能优化
    面试前端性能优化八股文十问十答第一期作者：程序员小白条，个人博客相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！⭐点赞⭐收藏⭐不迷路！⭐1）CDN的概念CDN（ContentDeliveryNetwork，内容分发网络）是一种分布式的网络架构，旨在提高网站内容传输的效率和性能。它通过将内容分发到全球各地的多个节点，使用户能够从距离更近的服务器获取所需的内容，从而加快内容加载速
  • 前端性能优化笔记1 第一章 沿着路走到底 性能优化前端
    1.HelloWorldHelloWorldwindow.LOAD_DATA=(data)=>{const{title,url}=datadocument.body.innerHTML=`${title}`}consttag=document.createElement('script')tag.src='https://cdn.jsdelivr.net/gh/xcodebuild/perfdem
  • 前端工程化面试题 | 07.精选前端工程化高频面试题 ai_todo 前端javascripttypescript开发语言
    前端开发工程师、技术日更博主、已过CET6阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》蓝桥云课签约作者、上架课程《Vue.js和Egg.js开发企业级健康管理项目》、《带你从入门到实战全面掌握uni-app》文章目录请解释一下前端中的持续集成和持续交付。你熟悉的持续集成工具或持续交付工具有哪些？前端性能优化是
  • 前端性能优化 - Gzip压缩
    什么是Gzip压缩？gzip是GNUzip的缩写，是一种文件的压缩格式（也可以说是若干种文件压缩程序），类似的压缩格式还有compress，deflate等。web上使用gzip编码格式传输有几个要点：浏览器和服务器都需要支持gzip编码采用LZ77算法与Huffman编码来压缩文件，是一种无损压缩算法压缩比率在3-10倍左右（纯文本），可以大大节省服务器的网络带宽是否前端所有资源都需要Gzip压
  • 2021-10-04 前端性能优化方法 weixin_43160044 前端javascript前端
    文章目录前言1、GZIP1.1、使用步骤2、CDN2.1、使用步骤3、缓存3.1、使用步骤4.组件4.1、注意事项5.其它5.1、减少HTTP请求5.2、懒加载总结前言随着代码数量越来越多，如何加快项目浏览器中的运行速度，减少用户的等待时间便成为了很重要的一个方面，以下是我经过实践后的几个方法1、GZIPGZIP可以对文件进行压缩，压缩比例到3到10左右，是很实用的压缩方法1.1、使用步骤因为我们
  • 前端性能优化：提升网站加载速度的终极指南 喔的嘛呀 前端
    目录一、引言二、问题分析三、优化方案1.减少HTTP请求次数：方法一：合并文件方法二：CSSSprites方法三：使用CSS和JavaScript工具2.使用CDN加速：方法：示例：引入CDN提供的jQuery库：引入CDN提供的BootstrapCSS文件：引入CDN提供的FontAwesome图标库：图片资源使用CDN加速：3.设置缓存策略：通过设置合适的缓存方法：示例：使用Cache-Con
  • next项目页面性能调优 sasaraku. 前端js
    next项目页面性能调优一般来说性能优化可以分为加载时、运行时两部分的优化。扩展参考链接：前端性能优化24条建议Webpack4进阶–从前的日色变得慢，一下午只够打一次包Webpack分包优化首屏加载参考指标FCP（FirstContentfulPaint）：首次内容绘制时间，白屏时间LCP（LargestContentfulPaint）：最大内容绘制时间，即网站渲染占比最多的元素绘制所花费的时间
  • 前端性能优化 润清 前端性能优化
    一、速度为什么很重要？1.效果关乎留存用户BBC发现其网站的加载速度每增加一秒，就会额外损失10%的用户。2.效果关乎转化次数的增加速度较快的网站可以提高转化率并改善业务成果。3.性能关乎用户体验对网页加载速度延迟的压力反应类似于观看恐怖电影或解决数学问题，并且比在零售店排队等候的压力更大。二、HTML性能的一般注意事项该HTML的初始请求需要经历多个步骤，每一步都需要一些时间。减少在每个步骤上花
  • 前端性能优化 - 首屏渲染优化实现及其必要性 叶叶叶同学
    前端性能优化，不得不提的就是这个首屏渲染优化首屏渲染优化其实更具体点，应该是：首次加载首屏渲染优化，原因是某些应用，比如微信有缓存机制，首次加载了，第二次进入都会先加载本地缓存。言归正传，首屏渲染加载优化，其实通俗说起来就是：“刚进页面加载快点”。其实这话也很笼统，专业点来说，其实是有如下几个指标的：FP（全称“FirstPaint”，翻译为“首次绘制”）FCP（全称“FirstContentfu
  • 前端开发中性能优化的常用方法 Itmastergo 性能优化前端
    前端性能优化是在网页加载速度、页面渲染速度、交互响应速度等方面进行改进，以提升用户体验和网站的整体性能。在实际的前端开发中，有许多常用的性能优化方法，涉及到各个方面，包括代码优化、资源加载、网络请求、缓存策略、图片优化等。1.代码优化减少HTTP请求：将多个小文件合并成一个大文件，减少页面的HTTP请求次数，可以通过打包工具如Webpack进行静态资源的合并。压缩代码：使用压缩工具如UglifyJ
  • 1个月uni-app微信小程序开发上线实战专栏介绍 国服第二切图仔 微信小程序uni-app小程序
    一、专栏介绍：《uni-app开发微信小程序1个月上线实战》，目标带领1000位同学成功开发上线一个自己的个人小程序！作者介绍：国服第二切图仔——资深前端开发工程师，具有六年以上的前端开发经验，曾在多家知名企业任职，CSDN、阿里云、华为云等平台优质创作者，擅长前端性能优化，前端复杂交互逻辑处理，精通网页开发、后台管理系统、移动端及微信小程序开发。技术领域：html\css\js\vue\reac
  • 关于前端性能优化的一些总结 轨迹
    前端性能优化的目的:从用户角度而言:优化能够让页面加载得更快、对用户的操作响应的更及时，能够给用户提供更为良好的体验。从服务商角度而言:优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。一、压缩1、HTML压缩HTML代码压缩就是压缩在文本文件中有意义，但是在HTML中不显示的字符，包括空格，制表符，换行符等2、CSS压缩CSS压缩包括无效代码删除与CSS语义合并3、JS压缩与混乱
  • 提升用户体验的艺术：前端性能优化详解 tester Jeffky JMeter性能测试工具ux前端性能优化
    引言：在数字化时代，网页加载速度和响应性对于用户满意度至关重要。一个延迟加载的网站可能会导致用户流失，影响转化率。因此，前端性能优化不仅是技术挑战，更是商业需求。本文将深入探讨前端性能的重要性，介绍提高性能的策略，并通过案例分析展示这些策略的实际应用效果。一、前端性能的重要性用户体验：快速响应的网站能够提供更好的用户体验，增加用户停留时间和互动。搜索引擎排名：搜索引擎如Google考虑页面加载速度
  • SpringMVC:企业级解读（二） 星光闪闪k JavaSpringjava后端架构springbootspringmvc
    目录八.构建卓越JavaWeb应用：最佳实践与性能优化1.代码组织与规范2.全局异常处理与日志记录3.性能优化与安全性考虑4.分布式应用5.提高SpringMVC的开发效率和代码质量九.构建卓越用户体验：Themes与UI组件集成1.主题与CSS预处理器1.1定义主题1.2动态切换主题2.与前端UI组件库集成2.1选择合适的UI组件库2.2主题定制与样式覆盖3.前端性能优化3.1压缩与合并资源3.
  • 记2018前端面试之旅 weixin_33896069 前端面试gitViewUI
    持续更新直到找到合适工作为止！-_-!面试一日期：20180420前端性能优化？前端性能优化这个问题可以回答的比较多，我自己的答案：前端性能优化可以从：减少HTTP请求的数量减少HTTP请求的大小缓存内容分发网络脚本放置在底部，样式表放置在顶部...减少HTTP请求的数量：将公用的js、css文件合并CSS雪碧图图片地图内联图片不详细赘述了标题文字图片预加载方式？图片预加载的主要思路：图片预加载的
  • JavaScript中的数据缓存与内存泄露：解密前端性能优化与代码健康 前端青山 javascript入门到实战javascript前端开发语言
    个人主页：前端青山系列专栏：JavaScript篇人终将被年少不可得之物困其一生依旧青山,本期给大家带来JavaScript篇专栏内容:JavaScript-数据缓存与内存泄露目录说说你对事件循环的理解一、是什么二、宏任务与微任务微任务宏任务三、async与awaitasyncawait四、流程分析说说JavaScript中内存泄漏的几种情况？一、是什么二、垃圾回收机制标记清除引用计数小结三、常见
  • Web前端性能优化-综合篇 visitor009 Web前端综合
    chrome开发者工具使用performance性能监控rendering>ftpmeter动画性能监控，60fps正常，越高越好合并与压缩合并：把css、js分别合并为一个文件，减少http请求压缩：把html、css、js的空格注释去掉，减少请求大小图片优化减少请求大小、数量，优化加载速度jpg：压缩率高，大部分不需要透明图片的场景png：支持透明，大部分需要透明图片的场景webp：压缩成度更
  • 前端性能优化 之 首屏预渲染 刷题刷到手抽筋
    本文介绍一种优化首屏访问速度的技术：前端预渲染，并封装自定义的Reacthook，解决预渲染中的数据初始化问题。一、首屏速度慢的问题如果网站页面首屏访问比较慢，应该怎么优化呢？这要结合实际情况，有非常多的手段可以提升首屏访问速度，今天我们来聊一聊其中一种技术：前端预渲染。先上效果图image.pngimage.png上面是一个前端刷题网站：灵题库（https://www.lingtiku.com，
  • 前端笔试题（三） 哎亚亚哎亚亚 前端
    1.常见的前端性能优化的方式分五大模块：加载优化，执行优化，渲染优化，脚本优化、代码优化分五大模块加载优化减少HTTP请求、缓存资源、压缩代码、无阻塞、首屏加载、按需加载、预加载、压缩图像、减少Cookie、避免重定向、异步加载第三方资源执行加载CSS写在头部，JS写在尾部并异步、避免img、iframe等的src为空、尽量避免重置图像大小、图像尽量避免使用DataURL渲染加载设置viewpor
  • 前端性能优化——图片篇 安之素年
    选择合适的图片格式JPEGJPEG是由JointPhotographicExpertsGroup所开发出的一种图片。它最大的特点是有损压缩。这种高效的压缩算法使它成为了一种非常轻巧的图片格式。另一方面，即使被称为“有损”压缩，JPG的压缩方式仍然是一种高质量的压缩方式：当我们把图片体积压缩至原有体积的50%以下时，JPG仍然可以保持住60%的品质。此外，JPG格式以24位存储单个图，可以呈现多达1
  • 前端性能优化1-从输入url到页面展现发生了什么 瘾_95f1
    从输入url到页面展现发生了什么DNS其实也是一个网络协议DNS有个递归查询的逻辑，TCPHTTP/SSL有序到达响应解析（SPA，SSR）浏览器渲染howbrowserworksurl=>dns获取ip=>建立tcp=>发起http=>解析响应=>浏览器的渲染ip寻址之上有两个很重要的协议TCP（可靠协议，三次握手，四次挥手，慢启动，滑动窗口协议，确保每个包都有序的传过去，不容易丢包，有重复策略
  • 前端性能优化 和科比合砍81分 前端性能优化
    前端性能优化可以从以下几个方面来看:一、打包体积方面:—体积小可以减少网络传输时间vite:https://www.duidaima.com/Group/Topic/Vue/12079https://blog.csdn.net/qq_36017964/article/details/97934911工具:vuecli中配置webpack-bundle-analyzer插件,此插件在执行打包命令成功
  • 【前端性能优化】如何取消http请求 全栈弄潮儿²⁰²⁴ 前端架构师之路前端http网络协议http请求取消http请求性能优化
    文章目录需要取消http请求的3种经典场景原生XMLHttpRequest取消http请求fetch取消http请求axios取消http请求哪些情况需要取消HTTP请求取消http请求能带来哪些性能提升需要取消http请求的3种经典场景场景一：有一个实时搜索功能，每当用户输入内容改变的时候，就会去调用一个接口，返回搜索结果数据，如果第二次响应的速度可能会比第一次快，页面的内容先变成第二次的内容，
  • iOS http封装 374016526 ios服务器交互http网络请求
    程序开发避免不了与服务器的交互，这里打包了一个自己写的http交互库。希望可以帮到大家。   内置一个basehttp，当我们创建自己的service可以继承实现。   KuroAppBaseHttp *baseHttp = [[KuroAppBaseHttp alloc] init]; [baseHttp setDelegate:self]; [baseHttp
  • lolcat ：一个在 Linux 终端中输出彩虹特效的命令行工具 brotherlamp linuxlinux教程linux视频linux自学linux资料
      那些相信 Linux 命令行是单调无聊且没有任何乐趣的人们，你们错了，这里有一些有关 Linux 的文章，它们展示着 Linux 是如何的有趣和“淘气” 。 在本文中，我将讨论一个名为“lolcat”的小工具 – 它可以在终端中生成彩虹般的颜色。 何为 lolcat ? Lolcat 是一个针对 Linux，BSD 和 OSX 平台的工具，它类似于 cat 命令，并为 cat
  • MongoDB索引管理（1）——[九] eksliang mongodbMongoDB管理索引
    转载请出自出处：http://eksliang.iteye.com/blog/2178427 一、概述       数据库的索引与书籍的索引类似，有了索引就不需要翻转整本书。数据库的索引跟这个原理一样，首先在索引中找，在索引中找到条目以后，就可以直接跳转到目标文档的位置，从而使查询速度提高几个数据量级。       不使用索引的查询称
  • Informatica参数及变量 18289753290 Informatica参数变量
    下面是本人通俗的理解，如有不对之处，希望指正 info参数的设置：在info中用到的参数都在server的专门的配置文件中（最好以parma）结尾 下面的GLOBAl就是全局的，$开头的是系统级变量，$$开头的变量是自定义变量。如果是在session中或者mapping中用到的变量就是局部变量，那就把global换成对应的session或者mapping名字。 [GLOBAL] $Par
  • python 解析unicode字符串为utf8编码字符串 酷的飞上天空 unicode
    php返回的json字符串如果包含中文，则会被转换成\uxx格式的unicode编码字符串返回。 在浏览器中能正常识别这种编码，但是后台程序却不能识别，直接输出显示的是\uxx的字符，并未进行转码。   转换方式如下   >>> import json >>> q = '{"text":"\u4
  • Hibernate的总结 永夜-极光 Hibernate
    1.hibernate的作用,简化对数据库的编码,使开发人员不必再与复杂的sql语句打交道   做项目大部分都需要用JAVA来链接数据库，比如你要做一个会员注册的 页面，那么 获取到用户填写的 基本信后，你要把这些基本信息存入数据库对应的表中，不用hibernate还有mybatis之类的框架，都不用的话就得用JDBC，也就是JAVA自己的，用这个东西你要写很多的代码，比如保存注册信
  • SyntaxError: Non-UTF-8 code starting with '\xc4' 随便小屋 python
    刚开始看一下Python语言，传说听强大的，但我感觉还是没Java强吧！ 写Hello World的时候就遇到一个问题，在Eclipse中写的，代码如下 ''' Created on 2014年10月27日 @author: Logic ''' print("Hello World!");  运行结果 SyntaxError: Non-UTF-8
  • 学会敬酒礼仪 不做酒席菜鸟 aijuans 菜鸟
    俗话说，酒是越喝越厚，但在酒桌上也有很多学问讲究，以下总结了一些酒桌上的你不得不注意的小细节。 细节一：领导相互喝完才轮到自己敬酒。敬酒一定要站起来，双手举杯。 细节二：可以多人敬一人，决不可一人敬多人，除非你是领导。 细节三：自己敬别人，如果不碰杯，自己喝多少可视乎情况而定，比如对方酒量，对方喝酒态度，切不可比对方喝得少，要知道是自己敬人。 细节四：自己敬别人，如果碰杯，一
  • 《创新者的基因》读书笔记 aoyouzi 读书笔记《创新者的基因》
    创新者的基因   创新者的“基因”，即最具创意的企业家具备的五种“发现技能”：联想，观察，实验，发问，建立人脉。   第一部分破坏性创新，从你开始 第一章破坏性创新者的基因 如何获得启示： 发现以下的因素起到了催化剂的作用：(1) -个挑战现状的问题；(2)对某项技术、某个公司或顾客的观察；(3) -次尝试新鲜事物的经验或实验；(4)与某人进行了一次交谈，为他点醒
  • 表单验证技术 百合不是茶 JavaScriptDOM对象String对象事件
    js最主要的功能就是验证表单,下面是我对表单验证的一些理解,贴出来与大家交流交流  ,数显我们要知道表单验证需要的技术点, String对象,事件,函数   一:String对象;通常是对字符串的操作;   1,String的属性;   字符串.length;表示该字符串的长度; var str= "java"
  • web.xml配置详解之context-param bijian1013 javaservletweb.xmlcontext-param
    一.格式定义： <context-param> <param-name>contextConfigLocation</param-name> <param-value>contextConfigLocationValue></param-value> </context-param> 作用：该元
  • Web系统常见编码漏洞（开发工程师知晓） Bill_chen sqlPHPWebfckeditor脚本
    1.头号大敌：SQL Injection 原因：程序中对用户输入检查不严格，用户可以提交一段数据库查询代码，根据程序返回的结果， 获得某些他想得知的数据，这就是所谓的SQL Injection，即SQL注入。 本质: 对于输入检查不充分，导致SQL语句将用户提交的非法数据当作语句的一部分来执行。 示例： String query = "SELECT id FROM users
  • 【MongoDB学习笔记六】MongoDB修改器 bit1129 mongodb
    本文首先介绍下MongoDB的基本的增删改查操作，然后，详细介绍MongoDB提供的修改器，以完成各种各样的文档更新操作  MongoDB的主要操作 show dbs 显示当前用户能看到哪些数据库 use foobar 将数据库切换到foobar show collections 显示当前数据库有哪些集合 db.people.update，update不带参数，可
  • 提高职业素养，做好人生规划 白糖_ 人生
      培训讲师是成都著名的企业培训讲师，他在讲课中提出的一些观点很新颖，在此我收录了一些分享一下。注：讲师的观点不代表本人的观点，这些东西大家自己揣摩。   1、什么是职业规划：职业规划并不完全代表你到什么阶段要当什么官要拿多少钱，这些都只是梦想。职业规划是清楚的认识自己现在缺什么，这个阶段该学习什么，下个阶段缺什么，又应该怎么去规划学习，这样才算是规划。  
  • 国外的网站你都到哪边看？ bozch 技术网站国外
    学习软件开发技术，如果没有什么英文基础，最好还是看国内的一些技术网站，例如：开源OSchina，csdn，iteye,51cto等等。 个人感觉如果英语基础能力不错的话，可以浏览国外的网站来进行软件技术基础的学习，例如java开发中常用的到的网站有apache.org 里面有apache的很多Projects,springframework.org是spring相关的项目网站,还有几个感觉不错的
  • 编程之美-光影切割问题 bylijinnan 编程之美
    package a; public class DisorderCount { /**《编程之美》“光影切割问题” * 主要是两个问题： * 1.数学公式（设定没有三条以上的直线交于同一点）： * 两条直线最多一个交点，将平面分成了4个区域； * 三条直线最多三个交点，将平面分成了7个区域； * 可以推出：N条直线 M个交点，区域数为N+M+1。
  • 关于Web跨站执行脚本概念 chenbowen00 Web安全跨站执行脚本
    跨站脚本攻击(XSS)是web应用程序中最危险和最常见的安全漏洞之一。安全研究人员发现这个漏洞在最受欢迎的网站,包括谷歌、Facebook、亚马逊、PayPal,和许多其他网站。如果你看看bug赏金计划,大多数报告的问题属于 XSS。为了防止跨站脚本攻击,浏览器也有自己的过滤器,但安全研究人员总是想方设法绕过这些过滤器。这个漏洞是通常用于执行cookie窃取、恶意软件传播,会话劫持,恶意重定向。在
  • [开源项目与投资]投资开源项目之前需要统计该项目已有的用户数 comsci 开源项目
            现在国内和国外,特别是美国那边,突然出现很多开源项目,但是这些项目的用户有多少,有多少忠诚的粉丝,对于投资者来讲,完全是一个未知数,那么要投资开源项目,我们投资者必须准确无误的知道该项目的全部情况,包括项目发起人的情况,项目的维持时间..项目的技术水平,项目的参与者的势力,项目投入产出的效益.....
  • oracle alert log file（告警日志文件） daizj oracle告警日志文件alert log file
    The alert log is a chronological log of messages and errors, and includes the following items: All internal errors (ORA-00600), block corruption errors (ORA-01578), and deadlock errors (ORA-00060)
  • 关于 CAS SSO 文章声明 denger SSO
    由于几年前写了几篇 CAS 系列的文章，之后陆续有人参照文章去实现，可都遇到了各种问题，同时经常或多或少的收到不少人的求助。现在这时特此说明几点： 1.  那些文章发表于好几年前了，CAS 已经更新几个很多版本了，由于近年已经没有做该领域方面的事情，所有文章也没有持续更新。 2. 文章只是提供思路，尽管 CAS 版本已经发生变化，但原理和流程仍然一致。最重要的是明白原理，然后
  • 初二上学期难记单词 dcj3sjt126com englishword
    lesson 课 traffic 交通 matter 要紧；事物 happy 快乐的，幸福的 second 第二的 idea 主意；想法；意见 mean 意味着 important 重要的，重大的 never 从来，决不 afraid 害怕 的 fifth 第五的 hometown 故乡，家乡 discuss 讨论；议论 east 东方的 agree 同意；赞成 bo
  • uicollectionview 纯代码布局, 添加头部视图 dcj3sjt126com Collection
    #import <UIKit/UIKit.h> @interface myHeadView : UICollectionReusableView { UILabel *TitleLable; } -(void)setTextTitle; @end #import "myHeadView.h" @implementation m
  • N 位随机数字串的 JAVA 生成实现 FX夜归人 javaMath随机数Random
    /** * 功能描述 随机数工具类<br /> * @author FengXueYeGuiRen * 创建时间 2014-7-25<br /> */ public class RandomUtil { // 随机数生成器 private static java.util.Random random = new java.util.R
  • Ehcache（09）——缓存Web页面 234390216 ehcache页面缓存
    页面缓存 目录 1       SimplePageCachingFilter 1.1      calculateKey 1.2      可配置的初始化参数 1.2.1     cach
  • spring中少用的注解@primary解析 jackyrong primary
    这次看下spring中少见的注解@primary注解，例子 @Component public class MetalSinger implements Singer{ @Override public String sing(String lyrics) { return "I am singing with DIO voice
  • Java几款性能分析工具的对比 lbwahoo java
    Java几款性能分析工具的对比 摘自：http://my.oschina.net/liux/blog/51800   在给客户的应用程序维护的过程中，我注意到在高负载下的一些性能问题。理论上，增加对应用程序的负载会使性能等比率的下降。然而，我认为性能下降的比率远远高于负载的增加。我也发现，性能可以通过改变应用程序的逻辑来提升，甚至达到极限。为了更详细的了解这一点，我们需要做一些性能
  • JVM参数配置大全 nickys jvm应用服务器
    JVM参数配置大全 /usr/local/jdk/bin/java -Dresin.home=/usr/local/resin -server -Xms1800M -Xmx1800M -Xmn300M -Xss512K -XX:PermSize=300M -XX:MaxPermSize=300M -XX:SurvivorRatio=8 -XX:MaxTenuringThreshold=5 -
  • 搭建 CentOS 6 服务器(14) - squid、Varnish rensanning varnish
    （一）squid 安装 # yum install httpd-tools -y # htpasswd -c -b /etc/squid/passwords squiduser 123456 # yum install squid -y 设置 # cp /etc/squid/squid.conf /etc/squid/squid.conf.bak # vi /etc/
  • Spring缓存注解@Cache使用 tom_seed spring
    参考资料 http://www.ibm.com/developerworks/cn/opensource/os-cn-spring-cache/ http://swiftlet.net/archives/774   缓存注解有以下三个： @Cacheable      @CacheEvict     @CachePut
  • dom4j解析XML时出现"java.lang.noclassdeffounderror: org/jaxen/jaxenexception"错误 xp9802
    java.lang.NoClassDefFoundError: org/jaxen/JaxenExc 关键字: java.lang.noclassdeffounderror: org/jaxen/jaxenexception 使用dom4j解析XML时，要快速获取某个节点的数据，使用XPath是个不错的方法，dom4j的快速手册里也建议使用这种方式 执行时却抛出以下异常： Exceptio
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他