前端项目上的一些资源加载、解析渲染的优化

前端性能优化

用户体验	描述
它在发生吗？happening	网页浏览顺利开始了吗？服务端有响应吗？
它是否有用？useful	用户是否能看到足够的内容？
它是否可用？usable	用户是否可以和页面交互，还是页面仍在忙于加载？
它是否令人愉快的？idle	交互是否流程和自然，没有卡段或闪烁？

Google 的网页性能优化工具 pageSpeed insights

针对移动设备或桌面设备生成网页的实际性能报告，并能够提供关于如何改进网页的建议

页面加载的优化

• 建议最好把html,css,js,font,img这些资源放在cdn上
• 没钱买cdn服务，尽可能少的加载外链的css和js代码 ，在头部增加dns-prefetch ，减少Dns的解析

<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//static.360buyimg.com"/>

• 不是在首屏展示的资源，不要立即加载，可以在首屏渲染完之后再加载，例如懒加载，数据延迟分批加载
• 减少http请求次数和请求资源的大小

	- 资源合并压缩 
	- 字体图标 base64
	- 考虑资源合并请求

• script 加载脚本会阻塞浏览器主线程 使用defer或async
• 利用好缓存 ，http响应头缓存字段开启静态资源缓存，减少资源下载

有哪些缓存点

• Service Worker：浏览器独立线程进行缓存
• Memory Cache ：内存缓存
• ClientCache ：客户端缓存，本质上指硬盘缓存
• HttpCache

- http请求缓存头 （请求头header包含各种缓存的信息）
- http协商缓存vs 强缓存原理 
- 强缓存 ： 根据第一次请求资源时返回的响应头来确定的   （expires/cache-control）
- 协商缓存：浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程
- 强缓存与协商缓存的区别，可以用下表来进行描述：

	获取资源形式	状态码	发送请求到服务器
强缓存	从缓存取	200（from cache）	否，直接从缓存取
协商缓存	从缓存取	304（not modified）	是，正如其名，通过服务器来告知缓存是否可用

解析渲染优化：

• CSS嵌套层级不要太深，不超过3级，避免在最内层使用通配选择器。
• JS脚本不要太复杂，考虑轻量化架构，降低JS复杂性，减少解析时间，尽量不要引用复杂的第三方脚本。
• 按需加载模块，按需打包，首页仅仅加载和执行和首屏相关的脚本。其他脚本延迟加载执行。
• 考虑依赖的第三方模块是不是必须，需不需要精简。
• 打包优化 ，常用webpack和rollup的优化。
• 用户交互相关事件绑定（比如页面scroll，用户左右滑动等），添加参数{passive:true}，减少浏览器事件等待。