Web性能优化分为服务器端和浏览器端两个方面。

一、浏览器端，关于浏览器端优化，分很多个方面
1、压缩源码和图片
JavaScript文件源代码可以采用混淆压缩的方式，CSS文件源代码进行普通压缩，JPG图片可以根据具体质量来压缩为50%到70%，PNG可以使用一些开源压缩软件来压缩，比如24色变成8色、去掉一些PNG格式信息等。

2、选择合适的图片格式
如果图片颜色数较多就使用JPG格式，如果图片颜色数较少就使用PNG格式，如果能够通过服务器端判断浏览器支持WebP，那么就使用WebP格式和SVG格式。

3、合并静态资源
包括CSS、JavaScript和小图片，减少HTTP请求。有很大一部分用户访问会因为这一条而取得最大受益

4、开启服务器端的Gzip压缩
这对文本资源非常有效，对图片资源则没那么大的压缩比率。

5、使用CDN
或者一些公开库使用第三方提供的静态资源地址（比如jQuery、normalize.css）。一方面增加并发下载量，另一方面能够和其他网站共享缓存。

6、延长静态资源缓存时间
这样，频繁访问网站的访客就能够更快地访问。不过，这里要通过修改文件名的方式，确保在资源更新的时候，用户会拉取到最新的内容。

7、把CSS放在页面头部，把JavaScript放在页面底部
这样就不会阻塞页面渲染，让页面出现长时间的空白。

另，其他具体详解：
1、Web 前端优化最佳实践之 内容篇
2、Web 前端优化最佳实践之 Server 篇
3、Web 前端优化最佳实践之 Cookie 篇
4、Web 前端优化最佳实践之 CSS 篇
5、Web 前端优化最佳实践之 JavaScript 篇
6、Web 前端优化最佳实践之 图象篇
7、Web 前端优化最佳实践之 Mobile(iPhone) 篇

二、服务器端优化
这里就不详解了，直接看专栏吧Web项目开发性能优化解决方案——服务端

ps:这篇博文是从论坛中拷贝的，真心推荐此博文，特别是服务端优化部分，顶！

170612、web如何项目优化的更多相关文章

  1. 小型 Web 页项目打包优化方案

    背景   目前团队中新的 Web 项目基本都采用了 Vue 或 React ,加上 RN,这些都属于比较重量级的框架,然而对于小型 Web 页面,又显得过大.早期的一些项目则使用了较原始的 HTML ...

  2. 前端项目优化 -Web 开发常用优化方案、Vue & React 项目优化

    github github-myBlob 从输入URL到页面加载完成的整个过程 首先做 DNS 查询,如果这一步做了智能 DNS 解析的话,会提供访问速度最快的 IP 地址回来 接下来是 TCP 握手 ...

  3. Web前端性能优化的9大问题

    1.请减少HTTP请求基本原理:在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出.一个正常HTTP请求的流程简述:如在浏览器中输入&qu ...

  4. 项目优化经验分享（八）TeamLeader经验总结

    引言 通过前面的七篇博客.我把自己在项目优化过程的经验进行了分享,今天这篇博客,作为一个总结,就来讲讲作为一个TeamLeader,在项目管理中遇到的问题和解决经验! 正文 问题一:团队之间怎么沟通? ...

  5. web页面的优化

    众所周知,一个web页面通常会包括HTML(XHTML.XML).CSS.Javascript,而其中HTML(XHTML.XML)为结构化语言,用于构建页面结构和相关数据:CSS则负责页面的样式,即 ...

  6. 深入浅出聊Unity3D项目优化：从Draw Calls到GC

    前言: 刚开始写这篇文章的时候选了一个很土的题目...<Unity3D优化全解析>.因为这是一篇临时起意才写的文章,而且陈述的都是既有的事实,因而给自己“文(dou)学(bi)”加工留下的 ...

  7. Unity3D项目优化(转)

    前言: 刚开始写这篇文章的时候选了一个很土的题目...<Unity3D优化全解析>.因为这是一篇临时起意才写的文章,而且陈述的都是既有的事实,因而给自己“文(dou)学(bi)”加工留下的 ...

  8. 隔壁老主精讲web页面性能优化。

    首先说一下为什么要进行web页面性能优化,在同样的网络环境下,两个同样能满足你的需求的网站,一个“Biu”的一下就加载出来了,一个卡--卡--卡--卡--卡--才出来,你会选择哪个?研究表明:用户最满 ...

  9. Web 前端性能优化相关内容解析

    Web 前端性能优化相关内容,来源于<Google官方网页载入速度检测工具PageSpeed Insights 使用教程>一文中PageSpeed Insights 的相关说明.大家可以对 ...

随机推荐

  1. C++ 有用的书籍

    C++ 有用的书籍Essential C++ 中文版C++ Primer Plus 第6版中文版C++ Primer中文版(第5版) #include <iostream> /* run ...

  2. CentOS 7 Minimal编译安装MySQL5.6

    写在前面,编译安装MySQL的优势:平台无关.可设定参数按需安装.安装的MySQL目录独立(方便清楚).更好的平台耦合及运行性能(很多运维的观点):缺点:编译安装较慢. 一.撤换系统防火墙 注:Cen ...

  3. 【转】StackOverflow程序员推荐：每个程序员都应读的30本书

    “如果能时光倒流,回到过去,作为一个开发人员,你可以告诉自己在职业生涯初期应该读一本,你会选择哪本书呢?我希望这个书单列表内容丰富,可以涵盖很多东西.” 很多程序员响应,他们在推荐时也写下自己的评语. ...

  4. hdu 5044 树区间操作最后输出/ lca+dfs

    题意:一棵树,俩种操作:1 有路径上的全部点加vi,2全部边加vi. 先离线求出全部询问的lca,再遍历询问一次,点+vi,lca-2*vi ,最后dfs从叶子扫上来一次,最后再祖先点补上就可以.用了 ...

  5. CentOS系统安装后的基础优化

    在运维工作中,我们发现Linux系统安装之后并不能立即投入生产环境使用,往往需要先经过我们运维人员的优化才行. 下面我就为大家简单讲解几点关于Linux系统安装后的基础优化操作. 注意:本次优化都是基 ...

  6. MySQL 日期与时间的处理

    1.查询当前日期时间:函数有now(),localtime(),current_timestamp(),sysdate(). mysql> select now(),localtime(),cu ...

  7. 系统管理员应该知道的20条Linux命令

    如果您的应用程序不工作,或者您希望在寻找更多信息,这 20 个命令将派上用场. 在这个全新的工具和多样化的开发环境井喷的大环境下,任何开发者和工程师都有必要学习一些基本的系统管理命令.特定的命令和工具 ...

  8. 新版SourceTree免帐号登录安装

    http://blog.csdn.net/zcbyzcb/article/details/72959720?locationNum=2&fps=1 [ { "$id": & ...

  9. Chrome各个版本小常识

    摘要: 近期在网上看到chrome有个金丝雀版,第一次看到这个版本,所以就将chrome的各个版本进行了了解,chrome是前端开发最好用的工具,不仅仅是它的调试工具,还有他对HTML5/CSS3的兼 ...

  10. 移植opencv到pcDuino

    OpenCV是一个基于(开源)发行的跨平台计算机视觉库,可以运行在Linux.Windows和Mac OS操作系统上.它轻量级而且高效——由一系列 C 函数和少量 C++ 类构成,同时提供了Pytho ...