web前端优化手段

web前端优化手段有不少，同种的优化方式或许在不一样的网络协议会南辕北辙，下面就本身结合工做经验和学习总结的一些手段总结

一、合并文件减少请求数：sprite图片的合成、合并脚本与样式。

二、减少文件的大小：压缩代码（html、css、js），压缩图片（在美术和产品能接受的范围内），选择正确格式的图片（jpg/png）。

三、cookie-free：将资源的站点都重定向到非页面站点，如：页面都是*.100bt.com，将资源站点都放在resource.a0bi.com站点。

四、多站点放置资源，绕开浏览器的同站点资源加载个数的限制。

五、异步加载js文件,非基础库script加上async/defer。

六、按需加载文件，如：在相应式页面中，判断用户设备获取所需的文件。

七、页面延迟加载，如：图片与脚本使用滚动加载，只加载出如今视口的图片和脚本效果对应的脚本文件。

八、减小dom操做（感受在现代浏览器意义不大）

九、缓存须要屡次操做的dom节点

十、基础库的过时时间设置尽可能大，充分利用页面缓存

十一、使用Worker

十二、使用cdn

1三、使用gzip压缩

1四、使用css3/canvas/svg 代替图片，使用data:image代替png图片

1五、使用offline

1六、DNS预读取（dns-prefetch）prefetch subresource prerender 

1七、分布加载页面ajax/bigpipe

1八、 避免重复的资源请求，不一样模块同时请求相同资源，会致使资源的重复请求

1九、减小reflow/repaint

20、使用switch-case不用if-else,使用while不使用for

2一、UI动画使用requestAnimationFrame 代替setTimeout和setInterval

2二、开启GPU加速脚本设置willChange，3Dtransform制做动画