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. （转）SDL1.2到2.0的迁移指南

    里面有些单词不好翻译所以放在开头,以备查验. BLock Image Transfer, a computer graphics operation in which two bitmap patte ...

  2. (转)I,P，B帧和PTS，DTS的关系

    基本概念: I frame :帧内编码帧 又称intra picture,I 帧通常是每个 GOP(MPEG 所使用的一种视频压缩技术)的第一个帧,经过适度地压缩,做为随机访问的参考点,可以当成图象. ...

  3. nodejs基础 -- 回调函数

    Node.js 异步编程的直接体现就是回调. 异步编程依托于回调来实现,但不能说使用了回调后程序就异步化了. 回调函数在完成任务后就会被调用,Node 使用了大量的回调函数,Node 所有 API 都 ...

  4. 基于Poco的UTF8、UTF16、GBK、Hex之间的转换

    /******Encoding.h*******/ #include "Poco/UnicodeConverter.h" #include "Poco/Exception ...

  5. Python中tab键自动补全功能的配置

    新手学习Python的时候,如何没有tab键补全功能,我感觉那将是一个噩梦,对于我们这种菜鸟来说,刚接触python,对一切都不了解,还好有前辈们的指导,学习一下,并记录下来,还没有学习这个功能小伙伴 ...

  6. asp.net mvc中加入log4net记录错误日志

    直接上代码示例:https://share.weiyun.com/aff36f2547514cfefe129ebb8ccb28ef 首先添加加log4net的dll,推荐用nuget.... 贴上配置 ...

  7. Spring-DispatcherServlet说明

    使用spring MVC,配置DispatcherServlet是第一步. DispatcherServlet是一个Servlet,所以可以配置多个DispatcherServlet. Dispatc ...

  8. 高级选项更改MathType数学公式样式

    MathType中系统的样式有很多种,我们将通过示例来演示如何更改样式定义达到修改等式的目的.使用样式将允许你迅速且方便的获得一种格式,这种格式将使你创建的等式具有统一的风格. 以下步骤中,我们将创建 ...

  9. web服务器http.server 【python】

    参考博客: http://lxneng.iteye.com/blog/492063 http://www.cnblogs.com/itech/archive/2011/12/31/2308697.ht ...

  10. Linux nmon 命令

    nmon 是一个资源监控工具,能够监控 Linux 系统资源( cpu,memory,network,disks )的使用情况,常见用法如下: [root@localhost ~]$ yum inst ...