Web性能一直是前端关注的问题，关系到网站的整体质量，影响用户体验，其作用不容忽视。许多北京网站建设公司已经注意到这一点，并不断寻找提高网站性能的方法。那么，提高Web性能的技巧有哪些呢？
减少HTTP请求。
因为移动浏览器同时响应4个请求(安卓支持4个请求，iOS 5支持6个请求)，所以需要尽量减少页面请求的数量，同时请求加载的数量不能超过4个。
a)结合CSS和JavaScript。
b)合并小图片。
2.缓存。
使用cache可以减少对服务器的请求数量，节省加载时间，所以所有静态资源都应该在服务器端cache，尽量使用长Cache(长Cache资源的更新可以使用时间戳)。
a)缓存所有可缓存的资源。
b)使用长缓存(用时间戳更新缓存)。
c)使用外部引用CSS和JavaScript。
3.压缩HTML、CSS和JavaScript。
减少资源的大小可以加快网页的显示速度，所以我们应该压缩HTML、CSS、JavaScript等的代码。，并在服务器端设置GZip。
a)压缩(例如，额外的空格、换行符和缩进)。
b)启用GZip。
4.按需加载。
不影响第一屏的资源和当前屏幕未使用的资源在用户需要时加载，可以大大提高重要资源的显示速度，降低整体流量。
说明:按需加载会导致大量重绘，影响渲染性能。
a) LazyLoad
b)滚动加载。
c)通过媒体查询加载。
5.预载。
对于重资源页面(如游戏)，可以使用增加Loading的方法，加载资源后会显示页面。但是加载时间过长，会造成用户流失。对于用户行为分析，可以在当前页面加载下一页的资源来提高速度。
a)可感知的装载(例如，装载到太空游戏中)。
b)不易察觉的加载(如提前加载下一页)
6.压缩图片。
图片是占用大量流量的资源，尽量避免使用。使用时选择一个非常合适的格式(在实现需求的前提下，以大小来判断)和合适的大小，然后用智能图来压缩，同时在代码中使用Srcset来按需显示。
说明:图片尺寸过度压缩影响图片显示效果。
a)用其他方法代替图片(1。使用CSS3 2。使用SVG 3。使用图标字体)。
b)使用Srcset。
c)选择合适的图片(1。webP比JPG 2强。PNG8比GIF好)。
d)选择合适的尺寸(1。负载不超过1014KB 2。不宽于640(以手机屏幕一般宽度为准))。
7.避免重定向。
重定向会影响加载速度，请在服务器上正确设置以避免重定向。
8.异步加载第三方资源。
不可控的第三方资源会影响页面的加载和显示，因此需要异步加载第三方资源。
9.[脚本执行优化]
脚本处理不当会阻碍页面加载和渲染，所以在使用时要注意。
A) CSS写在头部，JavaScript写在尾部或者异步。
b)避免图片和iFrame的空Src。空的Src会重新加载当前页面，影响速度和效率。
10.尽量避免重设图片大小。
重置图片大小意味着在页面、CSS、JavaScript等中多次重置图片的大小。多次重置图片大小会导致图片被多次重绘，影响性能。尽量避免对图片使用DataURL。如果在DataURL图片中不使用图片的压缩算法，文件会变大，解码后会渲染，加载时间会很长。
11.[CSS优化]
a)尽量避免在HTML标签中写入Style属性。
b)避免使用CSS表达式。CSS表达式的执行需要跳出CSS树的渲染，所以请避免CSS表达式。
c)删除空的CSS规则。空的CSS规则会增加CSS文件的大小，影响CSS树的执行，因此需要删除空的CSS规则。
12.正确使用“显示”的属性。
Display属性会影响页面的渲染，请合理使用。
a)显示:内联后不应使用宽度、高度、边距、填充和浮动。
b)显示:不应在内嵌块后使用浮动。
c)不应在显示:block后使用垂直对齐。
d)显示后不应使用边距或浮动:table-*。
13.不要滥用Float。
Float在渲染时需要大量的计算，所以应该尽量少用。
14.不要滥用网页字体。
网页字体需要在当前页面上进行下载、解析和重绘，尽量减少使用。
15.不要声明太多字体大小。
字体太大导致CSS树效率低下。为了浏览器的兼容性和性能，当值为0时，不要带单位。
16.标准化各种浏览器前缀。
a)非常后面不应加前缀。
b)只能使用CSS动画(-webkit-无前缀)。
c)其他前缀为-WebKit-moz-ms-四个无前缀(-o-Opera浏览器改为使用blink内核，因此被淘汰)。
避免让选择器看起来像正则表达式。高级选择器既耗时又难以阅读，因此请避免使用它们。
17.减少重绘和回流。
a)避免不必要的Dom操作。
b)尝试用类代替样式，用类列表代替类名。
c)避免使用文档。写
d)减少绘图图像。
17.缓存Dom选择和计算。
a)每个Dom选择都应该被计算和缓存。
b)缓存的列表。长度，每次都应计算该值，并用变量保存该值。
18.[渲染优化]。
HTML使用Viewport，可以加快页面渲染速度。请使用以下代码。
19.减少Dom节点。
过多的Dom节点会影响页面呈现，所以我们应该尽量减少Dom节点。
20.动画优化。
a)尽量使用CSS3动画。
b)合理使用requestAnimationFrame动画代替setTimeout。
c)适当使用Canvas动画。css动画应该在5个元素内使用，Canvas动画应该用于5个以上的元素(webGL可以用于iOS8)。
我们会详细为你一一解答你心中的疑难。， 项目经理在线