减少http请求

80%的响应时间花在下载网页内容(images, stylesheets, javascripts, scripts, flash等)。减少请求次数是缩短响应时间的关键
(1). 捆绑文件: 现在有很多现成的库可以帮你将多个脚本文件捆绑成一个文件，将多个样式表文件捆绑成一个文件，以此来减少文件的下载次数。例如在asp.net中可以使用ScriptManager，asp.net MVC中的Bundling。
(2). CSS Sprites: 就是把多个图片拼成一副图片，然后通过CSS来控制在什么地方具体显示这整张图片的什么位置。
(3).Image Maps：也是将多幅图拼在一起，然后通过坐标来控制显示导航。
(4). Inline images: 通过编码的字符串将图片内嵌到网页文本中。

减少DNS查询次数

DNS查询也消耗响应时间，如果我们的网页内容来自各个不同的domain (比如嵌入了开放广告，引用了外部图片或脚本)，那么客户端首次解析这些domain也需要消耗一定的时间。DNS查询结果缓存在本地系统和浏览器中一段时间，所以DNS查询一般是对首次访问响应速度有所影响。

避免页面跳转

跳转到一个新的页面 , http请求什么的都会重新开始

缓存ajax

Ajax可以帮助我们异步的下载网页内容，但是有些网页内容即使是异步的，用户还是在等待它的返回结果，例如ajax的返回是用户联系人的下拉列表。所以我们还是要注意尽量应用以下规则提高ajax的响应速度

延迟加载(懒加载)

指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。用户滚动到它们之前，可视区域外的图像不会加载。减少无效资源的加载，这样能明显减少了服务器的压力和流量，也能够减小浏览器的负担\

提前加载

提前加载的是为了提前加载接下来网页中访问的资源,当前网页加载完成后，马上去下载一些其他的内容

减少DOM元素数量

网页中元素过多对网页的加载和脚本的执行都是沉重的负担，500个元素和5000个元素在加载速度上会有很大差别。

Repaint 和 Reflow

Reflow(重排)就是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证DOM树上的所有其它结点的visibility属性，这也是Reflow低效的原因。如：改变窗囗大小、改变文字大小、内容的改变、浏览器窗口变化，style属性的改变等等。如果Reflow的过于频繁，CPU使用率就会噌噌的往上涨,
减少性能影响的办法：
通过设置style属性改变结点样式的话，每设置一次都会导致一次reflow，所以最好通过设置class的方式；有动画效果的元素，它的position属性应当设为fixed或absolute，这样不会影响其它元素的布局；如果功能需求上不能设置position为fixed或absolute，那么就权衡速度的平滑性。总之，因为 Reflow 有时确实不可避免，所以只能尽可能限制Reflow的影响范围。

去掉不必要的插件

　一个非常值得关注但经常被忽略的因素是你网站安装的插件。如今，大量免费的插件诱导网站开发者添加很多不必要的功能。您安装的每个插件都需要服务器处理，从而增加了页面加载时间。所以禁用和删除不必要的插件。

然而，有些插件是必须的，如社交分享插件，你可以选择CMS内置的社交分享功能来代替安装插件。

最小化重定向

重定向增加了额外的HTTP请求，因此也增加了页面加载时间。然而有时重定向却是不可避免的，如链接网站的不同部分、保存多个域名、或者从不存在的页面跳转到新页面。
重定向增加了延迟时间，因此要尽量避免使用它。检查是否有损坏的链接，并立即修复

使用内容分发网络（Content Delivery Network CDN）

服务器处理大流量是很困难的，这最终会导致页面加载速度变慢。而使用CDN就可以解决这一问题，提升页面加载速度。
CDN是位于全球不同地方的高性能网络服务，复制你网站的静态资源，并以最有效的方式来为访客服务。

把CSS文件放在页面顶部，而JS文件放在底部

　　把CSS文件在页面底部引入可以禁止逐步渲染，节省浏览器加载和重绘页面元素的资源。
　　JavaScript是用于功能和验证。把JS文件放在页面底部可以避免代码执行前的等待时间，从而提升页面加载速度。
　　这些都是一些减少页面加载时间和提高转换率的方法。在某些情况下，需要JavaScript在页面的顶部加载（如某些第三方跟踪脚本）。

利用浏览器缓存

浏览器缓存是允许访客的浏览器缓存你网站页面副本的一个功能。这有助于访客再次访问时，直接从缓存中读取内容而不必重新加载。这节省了向服务器发送HTTP请求的时间。此外，通过优化您的网站的缓存系统往往也会降低您的网站的带宽和托管费用。

启用GZIP压缩

在服务器上压缩网站的页面是提升网站访问速度非常有效的一种方法。你可以用gzip压缩做到这一点。Gzip是一个减小发送给访客的HTML文件、JS和CSS体积的工具。压缩的文件减少了HTTP响应时间。据Yahoo报道，这大概可以减少70%的下载时间。而目前90%的通过浏览器的流量都支持Gzip压缩，因此，这是一个提示网站性能有效的选项

异步请求Callback（就是将一些行为样式提取出来，慢慢的加载信息的内容）

<span style="font-size:14px;">/*Callback 函数*/
    function myCallback(info){ 
        //do something here 
    } 
　HTML:
　　Callback返回的内容 :
   myCallback('Hello world!');
</span>

减少cookie传输

一方面，cookie包含在每次请求和响应中，太大的cookie会严重影响数据传输，因此哪些数据需要写入cookie需要慎重考虑，尽量减少cookie中传输的数据量。另一方面，对于某些静态资源的访问，如CSS、script等，发送cookie没有意义，可以考虑静态资源使用独立域名访问，避免请求静态资源时发送cookie，减少cookie传输次数。

字符串拼接

在 Javascript中使用”+”号来拼接字符串效率是比较低的，因为每次运行都会开辟新的内存并生成新的字符串变量，然后将拼接结果赋值给新变量。与之相比更为高效的做法是使用数组的 join方法，即将需要拼接的字符串放在数组中最后调用其 join方法得到结果。不过由于使用数组也有一定的开销，因此当需要拼接的字符串较多的时候可以考虑用此方法。
压缩。

负载均衡

nginx + tomcat集群，使用haship负载均衡方案可以避免sesson丢失。
因为使用负载均衡，上传文件不要直接上传到tomcat目录下，可以通过ftp统一上传到单独的文件服务器。

动静分离

服务端接收来自客户端的请求中，有一部分是静态资源的请求，例如html,css,js和图片资源等等，有一部分是动态数据的请求。因为tomcat处理静态资源的速度比较慢，所以我们可以考虑把所有静态资源独立开来
使用nginx的反向代理，对静态资源的请求直接nginx处理，其他转发给tomcat处理

sql缓存

对查询结果进行缓存，当修改、新增数据时，清空相应的缓存

延伸及扩展问题回答参考

问题:说一下懒加载实现的原理吧?
答: 首先将页面上的图片的 src 属性设为空字符串，而图片的真实路径则设置在data-original属性中，当页面滚动的时候需要去监听scroll事件，在scroll事件的回调中，判断我们的懒加载的图片是否进入可视区域,如果图片在可视区内将图片的 src 属性设置为data-original 的值，这样就可以实现延迟加载

论坛网址

https://www.cnblogs.com/MarcoHan/p/5295398.html
https://blog.csdn.net/u011215669/article/details/80526441
https://blog.csdn.net/w2326ice/article/details/64122838

web前端性能优化的解决方法?