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. 实验五 ASP.NET状态管理和应用程序配置 总结

    这次实验内容是对ASP.NET配置系统的了解和使用,还有就是对Application.Session.ViewState对象的应用.首先,我想说ASP.NET配置系统真的大大超乎我的想象,我以为会是上 ...

  2. awk基础命令

    1. 命令awk简介 a. awk是一种编程语言,用于对文本和数据进行处理. b.具有强大得文本格式话能力 c.利用命令awk,可以将一些文本整理成需要的格式. d.命令awk是逐行进行处理的 2. ...

  3. 关于矢量图片资源向后兼容：CompatVectorFromResourcesEnabled标志的使用

    StackOverflow上摘抄的: some things have changed since I asked this question so I will answer it myself.W ...

  4. JavaScript DOM 第3章 DOM

    3.4.5 获取元素 1. getElementById DOM提供了一个名为getElementById的方法,这个方法将返回一个与那个有着给定的id属性值的元素节点对应的对象. 文档中的每个元素都 ...

  5. 第一个OC程序

    第一个OC程序源码如下: #import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { @auto ...

  6. 解决 Comparison method violates its general contract!

    问题:Comparison method violates its general contract!报错 Collections.sort(list, new Comparator<Integ ...

  7. Linux下的CPU性能瓶颈分析案例

    问题描述: 在对notify执行性能测试时发现cpu负载突然飙高,cpu利用率高达95%.这时候就要排查是哪些线程消耗了cpu,并从代码层找到占用cpu的“罪魁祸首”. 步骤: 1. 先用ps+gre ...

  8. 第六章 mybatis注入映射器

    为了代替手工使用 SqlSessionDaoSupport 或 SqlSessionTemplate 编写数据访问对象 (DAO)的代码,MyBatis-Spring 提供了一个动态代理的实现:Map ...

  9. Don‘t talk.Just do it.

    对于算法,自己掌握的还是不多.并且我发现对于一个算法的理解非常重要.也许你会发现你貌似会用某总算法但是,他一旦变形,自己就无从下手. 还有就是对于算法.最好每次都自己敲,这样不仅能添加对于算法的熟度. ...

  10. laravel 发送邮件

    1)邮件配置(config/mail.php 配置文件) MAIL_DRIVER                       邮箱驱动,laravel 支持 "smtp", &qu ...