如何在前端实现性能优化

影响用户访问的最大部分是前端的页面。
网站的划分一般为二：前端和后台。我们可以理解成后台是用来实现网站的功能的，比如：实现用户注册，用户能够为文章发表评论等等。而前端呢？其实应该是属于功能的表现。
而我们建设网站的目的是什么呢？不就是为了让目标人群来访问吗？所以我们可以理解成前端才是真正和用户接触的。
除了后台需要在性能上做优化外，其实前端的页面更需要在性能优化上下功夫，只有这样才能给我们的用户带来更好的用户体验。不仅仅如此，如果前端优化得好，他不仅可以为企业节约成本，他还能给用户带来更多的用户，因为增强的用户体验。说了这么多，那么我们应该如何对我们前端的页面进行性能优化呢？

HTML优化方法

1.精简html代码
可以减少html的嵌套也就是层级关系尽量减小，也可以减小DOM节点数也就是尽量压缩优化DOM的节点数, 让浏览器渲染的DOM节点数最少。

减少一些无语义的代码，比如说空标签清浮动那种代码

能不用最好不要用。

建议连接中删除http或者https，因为一般链接的协议头和页面的协议头都是一致的，写他们多了4-5个字符其实是没有什么意义的。而且可以减少代码体积。

也可以删除多余的空格，换行符，缩进和不必要的注释，一般会用压缩工具来处理这个过程。可以省略一些标签和属性。使用相对路径的url，最大范围的减少字节数。

2.文件位置
css文件链接尽量放在页面头部，css加载不会阻塞DOM Tree解析，但是会阻塞DOM Tree渲染，也会阻塞后面js执行。也就是说DOM Tree在渲染前就要解析好CSS，从而减少浏览器重排文档的次数。而且css放在页面底部会导致页面白屏时间变长。

js文件一般放在页面底部，这是防止js的加载和解析阻塞页面元素的正常渲染。

3.用户体验
设置favicon.ico, 如果不设置控制台会报错，而且用户访问的时候地址栏也是空的，不利于品牌记忆。

增加首屏必要的css和js，一般页面需要在等待所有的依赖加载完成才会展示，这样就会导致页面存在空白。影响用户体验，可以增加背景图或者loading或者骨架屏，比空白页好很多。

CSS优化方法

1.提升css渲染性能
谨慎使用一些expensive的属性，比如nth-child伪类或者position:fixed定位，因为这些比较消耗浏览器的渲染性能。
尽量减少一些样式层级的级数，比如，div ul li span i { color: red}, 其实我们可以给i标签设置class，直接书写样式。
避免使用占用过多cpu和内存的属性，比如text-indent不要设置太大的值。
尽量避免使用耗电量大的属性，比较占用GPU, 比如transfrom是，transitions, opacity.
精简css代码，使用缩写的语句，比如margin-top可以写在margin中，再者如果值为0能删除就删除，删除不必要的单位值，删除过多的分号，删除空格和注释。尽量减小样式表的体积。其实这些都可以使用压缩工具来处理，会方便很多。

2.css动画优化
避免同时动画，也就是说用户访问的屏幕区间里面不要有过多的动画，动画太多会干扰用户正常浏览网站，而且动画多也影响浏览器的性能。
延迟动画的初始化，可以让其它css先渲染，让动画延迟，比如说0.5或1。

Javascript优化

1.提升js文件的加载性能
css文件放在head标签中，js文件放在body结尾的地方。这个是js的加载不要影响html的渲染。

2.变量和函数方面的优化
尽量使用id选择器，因为id选择器在查询效果上效率最快。
js函数尽可能保持简洁，不要把太多内容写在一个函数中。也建议使用事件的节流函数。

3.js动画
尽量避免添加大量的js动画，css3动画和canvas动画都比js动画性能好。

4.使用逻辑缓存
缓存dom对象，也就是用一个变量来存储dom对象，不要每次使用都查询。

缓存列表长度，也就是说用变量存储dom元素的个数，而不是每次都重新计算。

比如百度M站，会把页面的css和js放在本地存储里面，这样后面再加载的时候就直接从本地存储里面取，实现秒考的效果。不过本地存储空间有限，要谨慎使用。