这是我参与8月更文挑战的第3天，活动详情查看：8月更文挑战
之前在做C端H5页面时，曾经做过首屏秒开的性能优化。本篇文章是对当时所做的性能优化点，做回顾和整理。
分析页面
- 做性能优化之前，需要对页面进行做具体的分析。chrome的network可以对请求和文件做一些粗粒度的分析。细粒度的可以使用Chrome的高级功能performance。
加载资源优化
- 加载资源的优化，主要是体现在减少资源请求和下载时间两方面。 我实践过的有：对icon图片进行合并，减少请求（现在打包工具就可以实现）；背景图片使用webp格式来减少文件体积。
- HTML、js、css开启服务端gzip压缩。一般开启gzip压缩后文件体积会减少70左右；还有就是js、css等静态资源缓存（使用现有的浏览器缓存策略，一方面是在服务器配置里面配置缓存策略，另一方面是高级一些缓存方法，例如Service-Worker等，不过这个我还没有实际，尝试过简单的pwa，还是能看出缓存的效果的）。
- 使用preload提前加载，prefetch预判加载，来做一些预处理，可以提高页面文件加载压力；同时使用CDN让静态资源加载更快；在分析页面资源后，将非首屏必须的资源异步加载。这个我当时是原生js直接使用的，使用的是script标签的async属性。vue项目在打包时，webpack配合import就可以实现按需加载。还可以做DNS预解析，在一些浏览器的a标签是默认打开dns预解析的，在https协议下dns预解析是关闭的，加入mate后会打开。
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//www.zhix.net">## <meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//www.zhix.net">
页面渲染优化
- 页面渲染优化的话，就是一些很基础的知识，最主要的就是减少对DOM的操作。例如CSS放head中，JS放body后，主要是js是边解析边执行，会阻塞页面；减少重绘和重排；另外操作DOM对DOM操作做缓存,对多个DOM进行操作时，尽量合并在一起执行（合并DOM插入）。另外对事件节流、防抖，比如最页面滚动的监听等，就需要做节流处理。
交互上优化，提升性能体验
- 交互上，我做的优化主要包括图片懒加载和骨架屏。这个主要是从交互体验上做提升。其实有时候技术瓶颈是一方面，如果站在用户的角度，去做改善或者解决问题，效果会非常出乎意料。
Webpack等工具，在打包过程中，做优化
这个主要是使用打包工具打包时，使用工具已有的功能，对项目打包优化，主要还是对文件进行拆分，目的在于减少文件体积。
总结
这个是我对之前做性能优化的思路和注意点的整理。不是很全，后面会再进行补充。另外具体优化细节还没有写，其实每个大点还是有很多内容，可以单独深入。
