web优化

Yahoo! 的 Exceptional Performance 团队为改善 Web 性能带来最佳实践。他们为此进行了一系列的实验、开发了各种工具、写了大量的文章和博客并在各种会议上参与探讨。最佳实践的核心就是旨在提高网站性能。原版猛戳： Best Practices for Speeding Up Your Web Site ， Excetional Performance 团队总结出了一系列可以提高网站速度的方法。可以分为 7大类 35条。 包括内容 、服务器 、 CSS 、 JavaScript 、Cookie 、图片 、移动应用 ，七部分。 一、内容部分 尽量减少 HTTP请求 减少 DNS查找 避免跳转 缓存 Ajxa 推迟加载 提前加载 减少 DOM元素数量 用域名划分页面内容 使 frame数量最少 避免 404错误 1 、尽量减少 HTTP请求次数 终端用户响应的时间中，有 80%用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、 Flash等。通过减少页面中的元素可以减少 HTTP请求的次数。这是提高网页速度的关键步骤。 减少页面组件的方法其实就是简化页面设计。那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢？这里有几条减少HTTP请求次数同时又可能保持页面内容丰富的技术。 合并文件是通过把所有的脚本放到一个文件中来减少

很早之前看到一篇《 web前端图片极限优化策略 》，了解有jpg分为baseline-jpeg和preogressive-jpeg。 具体的区别如下： baseline-jpeg： 在 文件较大或者网络下载速度较慢的情况下，用户在浏览器端看到图片被一行行加载的效果。 preogressive-jpeg： 在 文件较大或者网络下载速度较慢的情况下， 用户在浏览器端 先看到整个图片的模糊轮廓，随着扫描次数的增加，图片变得越来越清晰。目前百度图片就是用此种方式。 用JAVA转换的相应代码如下： package com.tuzki.sannychan; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import java.util.Iterator; import javax.imageio.IIOImage; import javax.imageio.ImageIO; import javax.imageio.ImageWriteParam; import javax.imageio.ImageWriter; import javax.imageio.stream.ImageOutputStream; public class ProgressiveJPEG {

  随着web的发展，网站资源的流量也变得越来越大。据统计，60%的网站流量均来自网站图片，可见对图片合理优化可以大幅影响网站流量，减小带宽消耗和服务器压力。 一、现有web图片格式 我们先来看下现在常用的web图片的格式： 图片格式 支持透明 动画支持 压缩方式 浏览器支持 相对原图大小 适应场景 baseline-jpeg 不支持 不支持 有损 所有 由画质决定 所有通用场景 progressive-jpeg 不支持 不支持 有损 所有 由画质决定 所有通用场景, 渐进式加载 gif 支持 支持 无损 所有 由帧数和每帧图片大小决定 简单颜色，动画 png 支持 不支持 无损 所有 由png色值位数决定 需要透明时 webp 支持 不支持 有损 Chrome、Opera 由压缩率决定 复杂颜色及形状，浏览器平台可预知 apng 支持 支持 无损 Firefox、Safari、iOS Safari 由每帧图片决定 需要半透明效果的动画 svg 支持 支持 无损 所有(IE8以上) 由内容和特效复杂度决定 简单图形，需要良好的放缩体验，需要动态控制图片特效 bpg 支持 支持 有损 不支持，需要js解码 由画质决定 jpeg上需要极限优化的场景 几种文件格式的特点概述 baseline-jpeg 这种类型的JPEG文件存储方式是按从上到下的扫描方式