性能优化是前端开发无法避免的点，给客户带去良好的访问体验也是开发人员必须关注的问题。
前端性能优化大体分为两个部分：代码优化、资源及其他优化，本文主要记录资源及其他优化要怎么做。
1、CSS样式文件在页面头部引入，Javascript文件在页面尾部引入
页面加载单线程可能会阻塞页面的加载。
2、服务端渲染（SSR）
前后端分离的开发方式，页面构建在客户端渲染，很容易造成页面初次渲染的白屏。
制作SSR页面，能够使服务器直接返回页面，减少首屏的渲染时间。
3、gzip压缩
服务器配置支持gzip压缩的资源传输方式，这样在浏览器支持gzip解析的时候，服务器就可以推送gzip的资源。
4、静态资源cnd缓存
静态资源如css、js、图片、应用程序安装包等可以做cdn缓存，把资源发布到全国或全球各地的节点，使用户可以更快访问到。
5、静态资源使用单独域名
浏览器请求有并发限制，同一域名在同一时间请求的资源有数量限制，所以给静态资源使用单独域名可以减少请求资源的数量，也方便做cdn缓存和分流。
6、字体图标代替图片图标
页面中一些通用的小图标，如箭头、加号，可以使用字体图标，以减少请求次数，使渲染更快。
7、精灵图
页面中一些带有功能特色的小图标，如购物车、表情，可以使用精灵图，让一张图上带多个小图，然后使用css背景定位来显示在合适的位置，大大减少请求次数。
8、图片懒加载
多图片的页面初次渲染时，为了使渲染更快，可以先设置一张加载图，当页面滚动到可视区域时再替换位真正的图片。
如果页面有尺寸很大的高清图，可以先渲染分辨率低缩略图，在页面基本构建完成后再替换为高清图。
9、图片预加载
在页面加载完成之后请求一些其他地方需要的图片，当进去那个页面或位置之后，浏览器可以从缓存里直接读取该图片。
10、使用PNG格式的图片
PNG是Web图像中最通用的格式，它是一种无损压缩格式。
11、小于10k的图片打包为base64格式
使用base64格式传输图片，虽然数据大小会大1/3，但是可以减少一个http请求。
12、尽量减少HTTP请求的数量
html文件里的css、js等资源，每一个文件都会有一个http请求，而减少http请求的次数可以减少资源加载的时间。
另外浏览器也会限制同一个域名同一时间建立的tcp连接的数量。
13、使用HTTP2.0
http2.0采用二进制格式传输数据而不是文本格式，减小数据大小；对消息头采用Hpack进行压缩，节省消息头占用的网络流量；采用异步连接多路复用；Server Push使服务器端能够更快的把资源推送给客户端；且能够保持与HTTP 1.1语义的向后兼容。
这些都优化了服务器端的数据传输。
14、设置浏览器缓存策略
优化浏览器的缓存方式，可以合理的加快页面的加载。
15、白屏时间做加载动画
白屏时制作加载动画，增强用户体验。
标签：Web,请求,渲染,前端,图片,页面,优化,资源,加载 From： https://www.cnblogs.com/wuxxblog/p/17986201