web性能优化，主要分为前端和后台两个部分性能优化，后台性能优化决定了web能不能用，前端优化决定了其好不好用，也就是牵涉到前端用户体验和web易用性等情况，所以前端性能与用户体验是有着极大的关联的。
首先，前端优化之前，我们需要知道其整体性能情况，然后对整体情况进行细分与分析，了解其每一步所损耗的时间和消耗的原由，然后进行细节优化，才能达成一个整体性能质的飞越，并不是其中一部分或者一个步骤的优化就能够解决问题的，只有优化的量才能达到性能质的飞越。
一、HTTP请求
1.减少HTTP请求数量
80%的响应的时间是消耗在网页内容的下载上，例如：图片，样式、脚本、Flash等。所以减少请求次数以是缩短响应时间的关键之处。
I. 合并文件：将相关代码文件进行合并
II. css Sprites：将多张图片合并成单张图片，通过css来控制什么地方显示图片的那个位置。
III. 图片映射：也是将多图拼在一起，然后通过坐标来控制。通常在页面中连续的时候才有用，比如导航条。
IV. 行内图片(Base64编码): 通过编码的字符串将图片内嵌到网页文本中。
2.避免重定向
重定向是一个比较常使用的技术手段，比如服务器地址进行迁移，修改了请求的url地址，这时通常会使用重定向，把访问原网址的用户重定向到新的url。
由于浏览器访问地址是一连串的过程，如果重定向的话，就需要在访问过程中重复发起一连串的动作，会消耗很多时间，因此避免出现多次重定向地址或资源的访问。
3.DNS预解析
当浏览器与web服务器建立连接时，它是需要进行DNA解析的，将域名解析为IP地址。首先我们来了解一下它的过程：
a.先检查本地 hosts 文件中是否有映射，有则使用；
b.查找本地 DNS 缓存，有则返回；
c.根据配置在 TCP/IP 参数中设置 DNS 查询服务器，并向其进行查询，这里先称为本地 DNS；
d.如果该服务器无法解析域名（没有缓存），且不需要转发，则会向根服务器请求；
e.根服务器根据域名类型判断对应的顶级域名服务器（.com），返回给本地 DNS，然后重复该过程，直到找到该域名；
f.当然，如果设置了转发，本地 DNS 会将请求逐级转发，直到转发服务器返回或者也不能解析。
所以减少DNS的查询次数非常重要，页面加载时就尽量避免额外耗时。为了减少DNS的询次数，最好的解决方法就是在页面中减少不同的域名请求的机会。
4.使用CDN
使用内容分发网络，把你的网站内容分散到多个、处于不同地域位置的服务器上可以加快下载速度。
二、浏览器缓存
对一个网站而言，CSS、javascript、logo、图标这些静态资源文件更新的频率都比较低，而这些文件又几乎是每次http请求都需要的，如果将这些文件缓存在浏览器中，可以极好的改善性能。通过设置http头中的cache-control和expires的属性，可设定浏览器缓存，缓存时间可以是数天，甚至是几个月。
在某些时候，静态资源文件变化需要及时应用到客户端浏览器，这种情况，可通过改变文件名实现，即更新javascript文件并不是更新javascript文件内容，而是生成一个新的JS文件并更新html文件中的引用。
使用浏览器缓存策略的网站在更新静态资源时，应采用逐量更新的方法，比如需要更新10个图标文件，不宜把10个文件一次全部更新，而是应该一个文件一个文件逐步更新，并有一定的间隔时间，以免用户浏览器忽然大量缓存失效，集中更新缓存，造成服务器负载骤增、网络堵塞的情况。
三、页面静态资源
1. 将CSS样式表放在顶部
如果将css样式定义放在页面中或者页面底部，会出现短暂白屏或者某一区域短暂白板的情况，这和浏览器的运营机制有关的，不管页面如何加载，页面都是逐步呈现的。所以在每做一个页面的时候，用Link标签把每一个样式表定义放在head中。
2.将javascript脚本放在底部
浏览器在加载css文件时，页面逐步呈现会被阻止，直到所有css文件加载完毕，所以要把css文件的引用放到head中去，这样在加载css文件时不会组织页面的呈现。但是对于js文件，在使用的时候，它下面所有也页面内容的呈现都会被阻塞，将脚本放在页面越靠下的地方，就意味着越多的内容能够逐步呈现。
3.使用外部javascript和CSS
内联js和css其实比外部文件有更快的响应速度，那为什么还要使用外部呢？因为使用外部的js和css可以让浏览器缓存他们，这样不仅HTML文档大小减少，而且不会增加HTTP请求数量。另外，使用外部js和css可以提高组件的可复用性。
4.组件压缩
通过压缩工具将js、css、html文件进行压缩，减少项目文件大小。
5.图片优化
图片的优化主要是针对图片大小、格式、展现形式进行处理，对于图片资源处理网上介绍的方式有很多，在这里就不进行详细的介绍。
js中for循环优化总结_如何提高程序的执行效率
在程序开发中，经常会使用到for循环的，但是很多人写的for循环效率都是比较低的，下面就举例说明，并总结优化for循环的方法，来提高我们程序的执行效率。
网站打开速度优化_如何提高网页访问速度技巧方法总结
网站的加载速度不仅影响着用户体验，也会影响搜索引擎的排名，在百度推出“闪电算法”以来，将网站首屏打开速度被列入优化排名行列，作为前端开发的我们需要如果来优化网站的打开速度呢？下面就整理挖掘出很多细节上可以提升性能的东西分享给大家
JS性能优化之文档片段createDocumentFragment
DocumentFragments是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到DOM树。在DOM树中，文档片段被其所有的子元素所代替。因为文档片段存在于内存中，并不在DOM树中
深入浅出代码优化﹣if/else
对于代码裡面的 if else，我们可以使用逻辑判断式，或更好的三元判断式来优化代码。除了可以降低维护项目的成本之外，还可以提升代码可读性。就让我们从最简单的 if else 例子开始吧。
微信小程序性能优化入门指南
小程序从发布到现在也已经有将近两年的时间，越来越来多的公司开始重视小程序生态带来的流量，今年也由于小程序平台对外能力的越来越多的开放以及小程序平台的自身优化，越来越多的开发者也自主的投入到小程序的开发当中
网络串流播放_HTML5如何优化视频文件以便在网络上更快地串流播放
无论你正在将 GIF 动图转换为 MP4 视频，还是手头已经有一大堆 MP4 视频，你都可以优化文件结构，以使得这些视频更快地加载和播放。通过重组 atoms 将 moov 放到文件开头，浏览器可以避免发送额外的 HTTP range request 请求来搜寻和定位 moovatom
web项目优化_Web 服务器性能与站点访问性能优化
要优化 Web 服务器的性能，我们先来看看 Web 服务器在 web 页面处理上的步骤:Web 浏览器向一个特定的服务器发出 Web 页面请求; Web 服务器接收到 web 页面请求后，寻找所请求的 web 页面，并将所请求的 Web 页面传送给 Web 浏览器; 显示出来
前端性能优化之重排和重绘
浏览器下载完页面所有的资源后，就要开始构建DOM树，于此同时还会构建渲染树(Render Tree)。（其实在构建渲染树之前，和DOM树同期会构建Style Tree。DOM树与Style Tree合并为渲染树）
微信小程序代码优化总汇
写篇文章的目的，是以开放小程序代码的层面的优化。包括：条件判断将wx:if换成了hidden 、页面跳转请销毁之前使用的资源、列表的局部更新、小程序中多张图片懒加载方案、Input状态下隐藏input，应预留出键盘收起的时间
我是如何将页面加载时间从6S降到2S的？
生活在信息爆炸的今天，我们每天不得不面对和过滤海量的信息--无疑是焦躁和浮动的，这就意味着用户对你站点投入的时间可能是及其吝啬的（当然有一些刚需站点除外）。如何给用户提供迅速的响应就显得十分重要了
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!