使用其他账号登录
来自：庄君祥 - 博客园
链接：/ansn001/p/5691525.html
（点击尾部阅读原文前往）
优化是一个持续的过程。所以尽可能的不要有人为的参与。所以能自动化的或者能从架构、框架级别解决的就最更高级别解决。
这样即能实现面对开发人员是透明的、不响应，又能确保所有资源都是被优化过的。
确保静态资源是有缓存。
确保静态资源的大小最小。
确保加载的资源最少。
确保用户以最短的时间看到页面
减少人为因素的性能瓶颈。
让资源更可能快的让用户看到。
结合代理（nginx）来实现。给http添加缓存的时长。
# 需要缓存的静态资源类型
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|js|css|ico)$ {
if (-f $request_filename) {
expires 1d;
html文件的缓存，要根据具体业务来判断。因为有些是真实的Html文件。有些是伪静态，并没有真的html文件
也可以通过cdn来缓存。
通过自动化压缩的工具来实现，尽量不要有人为的参与。这样即能对开发是透明的，不增加复杂度，也能防止因为人为的因素的遗忘。
建议：glup的插件（jsmin，cssmin,imgmin）
图片加载延迟
所谓图片延迟加载，就是每次只加载当前屏幕可见区域的图片，其余的图片在用户滚动页面到该位置后才开始加载。这是一项非常实用的技术，减少了并发数，不但减少了服务器的压力，也降低了页面的加载时间，目前很多门户网站都使用了该技术，如腾讯微博的“看看推荐的人”页面，在该页面上有几千个头像，如果一次性加载全部的图片，就要耗费比较多的客户端和服务器端的资源。该功能的实现原理很简单，就是将页面上的src替换成其他标记（如original），在页面滚动到相应位置后，再将original更改为src。目前有个Jquery插件Jquery.LazyLoad.js可以实现图片的延迟加载，而且这个方法也能减少请求数。
首屏为行，重要信息为先，次要信息异步加载。
减少不必要的传输
动静域名分离。不传输cookie。有很多业务相关的cookie会通过http传输。比如登录后的token等。
减少请求数
网络请求是很费时。即增加了服务器压力，也影响用户使用的性能。
一般思路是通过合并来实现。
1、合并请求。结合代理(nginx)的模块(concat)来实现。
合并资源。雪碧图。这个也可以通过glup插件来实现。
image属性设置
有时需要在页面加载完之前，就对页面布局进行定位。
若页面中的图片没指定尺寸，或尺寸与实际图片大小不符，浏览器会在图片下载完成后再"回溯"该图片并重新显示，从而浪费时间。
# 页面的请求过程
12. 渲染树一旦有结构模型了，接着就会同步去计算渲染树节点的布局位置
13. 一旦计算出来渲染的坐标后，又同步去开始渲染
14. 10-13步进行过程中如果遇到图片则跳过去渲染下面内容，等待图片下载成功后会返回来在渲染
所以，如果image如果没有width和height的话，会影响性能。
js的加载方式是阻塞式的。放在最后，等页面都渲染完了再加载。
减少嵌套层级
嵌套越深，document的构建越慢。
高性能的规范
1、避免CSS表达式
避免过大的cssName
避免频繁的DOM操作等。
也可以把上面的一些对性能有响应加到规范里，比如img标签必须有width和height，不允许css import，嵌套不允许超过3级等等。具体还是要看前端的规范。最好能有一些自动检验规范的工具。比如csshint，或者自己写一些小工具等。
谷歌浏览器的开发者工具（控制台）
/tools/css-delivery/
Chrome Task Manager。能查看内存泄漏
网站性能优化工具大全
web前端性能分析--原理篇
Web性能优化分析
Web前端，高性能优化
Web前端优化最佳实践及工具集锦
●本文编号129，以后想阅读这篇文章直接输入129即可。
●输入m可以获取到文章目录
15个技术类公众微信
涵盖：程序人生、算法与数据结构、黑客技术与网络安全、大数据技术、前端开发、Java、Python、Web开发、安卓开发、iOS开发、C/C++、.NET、Linux、数据库、运维等。传播计算机学习经验、推荐计算机优秀资源：点击前往《
值得关注的15个技术类微信公众号
本文来自微信公众账号提交，由微信啦收录，转载请注明出处。
微信扫码 分享文章PS里JPG选项保存的时候怎么选择. 基线优化又是什么?_百度知道PS里面存储和存储为的区别_百度知道PS中“存储为”与“存储为WEB所用格式”之异同详解
PS中“存储为”与“存储为WEB所用格式”之异同详解
Photoshop另存为和另存为网页格式Photoshop cs2中最易混淆的选项之一是在保存编辑过的图片时，有两种保存图片的方式——另存和另存为网页格式。本篇文章将解答另存和另存为网页格式有何区别，以及何时应该选择保存为web格式。Photoshop提供了两种保存编辑过的图片的方式文件-&另存为文件-&另存为网页格式两种保存方式都可以输出jpeg格式图片，但两种方式在jpeg压缩质量的选项、灵活度和表现上有所区别。快速选择如果你想要…【那么选择的保存方式是】创建网页使用的图像，或者想尽可能的优化图像文件的体积【另存为网页格式】和他人分享图片，而且你希望别人知道你拍摄照片的时间日期等【另存为】和他人分享图片，但你不希望别人知道你拍摄照片的时间日期等，比如用于图片库，或是需要保护隐私【另存为网页格式】把图像文件压缩到指定的大小，或者你想要在设定图像质量时能有交互的反馈【另存为网页格式】其它情况【另存为】Photoshop 另存为另存为是用户输出最终图像文件的标准方式，因此对话框中有输出多种文件格式的选择。这种保存方式没有为低速数据传输方式（例如互联网）优化文件，保存的图像文件中包含了附加信息，因此文件体积较大。如后面所示，这些附加数据的体积可能接近40kb。摄影者通常选择另存为而不是另存为网页格式的一个主要的原因是，在分享照片时，观看者能够查看到图片的Exif信息（包括相机和拍摄信息）。大部分照片分享网站（例如pbase）都能自动提取Exif信息，以方便其它摄影者查看。尽管如此，Exif信息包含着照片拍摄的时间日期信息，所以可能涉及隐私。16位模式由于”另存为”不支持保存16位模式的图像，所以有必要先转换成8位模式，保存。如果你要继续处理图片的话，就撤销上一步颜色位深的设置。把图像转为8位RGB图像的方式是菜单上的图像-&模式-&8位/通道。另存为网页格式会自动为你转换颜色位深。Photoshop另存为网页格式另存为网页格式没有像另存为那样提供很多中保存图像文件的格式选择，但是它为每种支持的格式提供了更灵活的设置。支持的格式包括：Jpeg－可以设置图像保存质量（1－100％）。无透明度。Gif－通过设置调色盘大小（2－256色）和颜色抖动来确定保存图片的质量。支持单色透明度。Png-8－通过设置调色盘大小（2－256色）和颜色抖动来确定保存图片的质量。支持单色透明度。（原文中png-8透明度的说法貌似有误？）Png－24－无损24位质量。支持透明度。Wbmp－黑白抖动输出。另存为网页格式的主窗口按上图中的设置将输出jpeg格式文件。另存为网页格式之jpeg输出保存为网页格式目的是输出展示在网页上的图片，保存的主要的目的之一是在维持图片质量的同时尽可能地缩小文件体积。保存为网页格式使用了两种方法达到此目的：a) 在拖动滑动条更改jpeg质量设置时提供即时预览；b）移除输出文件中所有不必要的信息（jpeg标记）。另存为网页格式的主要特色有：优化文件大小：可以自动选择文件格式（jpeg或gif）和选择jpeg的压缩率，以实现选定的文件大小。移除Exif信息。很多时候这是一个有用的功能，而另一些人则会因为此功能而不使用另存为网页格式。对于简单的网页图片来说，或者出于保护隐私，你也许希望隐藏照片拍摄的时间日期以及其它参数。但是，如果你想要在网络相册中分享你的照片，并且希望观看者看到拍摄的焦距、光圈和其它参数，那么就不适合使用另存为网页格式了。移除可选的标记。在大多数jpeg文件中，有一些记录附加信息、或是在出错/崩溃时用以恢复的特殊标记。另存为网页格式会在jpeg文件依然能被解码的前提下移除这些标记。ICC颜色配置：另存为网页格式和另存为都提供了是否嵌入ICC颜色配置的选项。颜色配置是用来让图片文件的RGB数值在用户显示器上显示出更真实的色彩。假设你有一个经过颜色管理的环境（）配置能让颜色显示更接近预期的效果。很不幸的是，大部分浏览器不支持颜色配置，并且大部分人没有校准过的显示器，所以默认假设是sRGB色彩空间。因此，如果你在网上分享照片，如果你的照片拍摄时使用的是其它色彩空间，例如Adobe RGB，那么强烈建议你转换为sRGB。如果你这样做的话，就基本不需要在文件中嵌入ICC颜色配置了。通过对比jpeg文件，文件保存方式的区别是很容易识别的。jpeg（jfif）文件格式中列入了一些强制的标记和一些可选的标记。下面的表格是photoshop另存为和另存为网页格式的输出文件的对比。Photoshop两种保存方式输出文件的jpeg标记对比另存为另存为网页格式说明SOISOI图像开始标记APP0APP0识别标记、版本、分辨率、jfif扩展APP1&&&EXIF数据, 两种保存方式都移除了制作者注释(长度5KB)APP13&&&Photoshop IRB (Photoshop特有数据,包括质量) (长度5KB)APP1&&&XML数据(EXIF, IPTC等) (长度17KB)APP2*APP2*ICC颜色配置(*可选) (长度3KB)&&&APP12Ducky标签-保存为网络格式质量-储存质量等级(长度17B)APP14APP14编码信息: 颜色转换 (例如YCbCr, YCCK, RGB, CMYK)以及样本是否混合(长度14B)DQTDQT量化表SOF0SOF0基线DCT, 色度抽样DRI&&&重新开始间隔-加入出错时的复原标准(长度不定)DHTDHTHuffman压缩表SOSSOS扫描开始: 图像数据流EOIEOI图像结束标记如上表所示，另存为输出文件所包含的附加信息使文件比另存为网页格式多40kb。对于大部分高分辨率的图像文件来说，这部分数据并不明显，但如果想要压缩图像文件大小以供网页使用，那么这部分就很明显了。另存为的图像质量设置在用另存为方式输出的文件中，你能根据JPEG APP13 (0xFFED)标记中的photoshop IRB资源(0x0406)数据推得图片质量的设置值。下面是一副保存质量为2的图片文件的16进制视图。数值质量0xFFFD质量1 (低)0xFFFE质量20xFFFF质量30x0000质量40x0001质量5 (中)0x0002质量60x0003质量70x0004质量8 (高)0x0005质量90x0006质量10 (最佳)0x0007质量110x0008质量12另存为网页格式的质量设置在另存为网页格式的图片文件中，你能根据JPEG APP12 (0xFFEC)标记(以空数据开头、ASCII编码Ducky结束)中的Ducky资源推得图像质量设置（1－100％）数据是以16进制保存的。图中在0x31处，16进制数值33表示图片质量为51。另存为和另存为网页格式的比较很多人对为何photoshop中的两种保存方式质量设定的定义有区别而不解，还有怎么比较他们。下面的表格是两种保存方法设置质量后的图像质量排序，从最佳质量到最低质量。这种排序比较的局限性请看后面的说明。更多信息请查阅jpeg色度抽样。MethodJPEG QualityPresetChroma Subsampling另存为网页格式100最佳1x1另存为12最佳1x1另存为网页格式　90&&&1x1另存为11&&&1x1另存为网页格式80较高1x1另存为10&&&1x1另存为网页格式70&&&1x1另存为9&&&1x1另存为网页格式60高1x1另存为8高1x1另存为网页格式51&&&1x1另存为网页格式50&&&2x2另存为6&&&2x2另存为7&&&1x1另存为5中2x2另存为网页格式40&&2x2另存为4&&2x2另存为3低2x2另存为网页格式30中2x2另存为2&&&2x2另存为网页格式20&&&2x2另存为1&&&2x2另存为网页格式10低2x2下面是默认设置下的jpeg亮度和色度的对比图表，每个都有对应的jpeg标准质量系数。当然，有必要指出，质量系数不是测量图片质量的精确标准，只是如果另存为网页格式和另存为都是基于jpeg标准附录中的量化表的线性测量，那么质量系数是唯一能用来比较图片质量的参数。质量系数只能作为一个粗糙的标准来比较图片。图表按亮度质量系数降序排列。排序图表
发表评论：
TA的最新馆藏[转]&