本文将从前端的方向简述一下网站性能优化的方案。
1.提高代码的复用性。
比如说，网站中某一块的样式，有多处重复出现或者类似，可以考虑将重复用到的样式都用同一个类名表示，只要用到这个样式的标签则只需要在标签添加上这个类名即可使样式一致，而不必另起一个类名却用的同样的样式导致代码冗余；如果是网站中多个页面都用到类似或相同的样式，则可以将这个类名样式写入一个公共css文件中，所有用到这个样式的页面都引入公共css文件，用到相同样式的标签加上类名，也可以保证不同页面的样式一样。js文件也是同样的原理。提高代码的复用性可以减少代码冗余，提高代码可读性，一定程度上也能做到页面性能优化的效果。
2.减少http对服务器的请求。
浏览器从解析地址到向服务器发送请求，再到服务器返回数据，是一个复杂和漫长的过程。或许少量的请求可能对网站的加载速度无伤大雅，但如果请求过多，会增加服务器的负担，同时也会使页面的加载速度变慢。针对减少http请求的方法有很多，例如做雪碧图、懒加载等。
3.减少dom操作。
浏览器渲染包括了repaint和reflow两个步骤，这两个步骤是相当复杂的，浏览器对元素的repaint和reflow会消耗大量的时间，如果js文件对网页中进行了dom操作，浏览器会将对应元素重新进行reflow和repaint，导致网站加载速度变慢影响网站性能。针对这个的优化方案可以模拟vue框架等对虚拟dom进行操作后再进行渲染。
4.脚本位置。
脚本的加载位置会影响网站的渲染步骤。比如说head标签内引用了外链脚本，而外链脚本影响了页面内dom元素的时候，会造成渲染堵塞，在脚本加载完之前，后面的图片、css文件以及其他脚本都会处于阻塞状态，直到该脚本加载完成后才继续加载，这将会影响页面的加载速度导致用户体验不佳。处理的方法可以将脚本放在body标签后，等页面加载完成了再加载脚本文件，避免造成页面堵塞，或者可以给脚本加上defer属性，添加defer属性可以让脚本优先级降到最低。