前端优化

目录

网络层

1. 减少http请求

2. 减少压缩体积

3. 缓存

3.1 DNS缓存

3.2 CDN缓存

3.3 http缓存

3.4 给cookie优化

4. 优化TCP协议

渲染层优化

1. 优化网页渲染

2. 开启GPU渲染加速

3. 减少DOM访问

数据层优化

1. 图片加载处理

2. 异步请求的优化

移动端优化

设计角度

---

 

首屏优化

一次有很多次API 要怎么发送优化

我们通常意义上说的缓存主要包含两部分。第一个是用户浏览器端的缓存，第二个是服务器端为了提高访问速度而加的CDN。

防抖 节流 也是优化的一种手段。

 

• 网络层面的优化
• 数据层面的优化
• DOM操作与渲染层面的优化

 

网络层

1. 减少http请求

2. 减少压缩体积

3. 缓存

3.1 DNS缓存

DNS缓存：为了提高网站的访问速度，系统会在成功访问某网站后将该网站的域名、IP地址信息缓存到本地。只要浏览器在自己的cache里还保留着这条记录，它就不会向操作系统查询DNS。

3.2 CDN缓存

cdn的原理：在用户和服务器之间增加cache层，通过接管DNS,将用户的请求引导到cache上获得服务器的资源。cdn主要包括两部分：负载均衡服务器和高速缓存服务器。

用户通过浏览器等方式访问网站的过程如图所示。

 

①用户在自己的浏览器中输入要访问的网站域名。

②浏览器向本地DNS服务器请求对该域名的解析。

③本地DNS服务器中如果缓存有这个域名的解析结果，则直接响应用户的解析请求。

④本地DNS服务器中如果没有关于这个域名的解析结果的缓存，则以递归方式向整个DNS系统请求解析，获得应答后将结果反馈给浏览器。

⑤浏览器得到域名解析结果，就是该域名相应的服务设备的IP地址。

⑥浏览器向服务器请求内容。

⑦服务器将用户请求内容传送给浏览器。

3.3 http缓存

3.4 给cookie优化

 　　使用cookie的原因有很多，比如授权和个性化。HTTP头中cookie信息在web服务器和浏览器之间交换。重要的是保证cookie尽可能的小，以最小化对用户响应时间的影响。

• 清除不必要的cookie
• 保证cookie尽可能小，以最小化对用户响应时间的影响
• 注意给cookie设置合适的域级别，以免影响其它子域
• 设置合适的有效期，更早的有效期或者none可以更快的删除cookie，提高用户响应时间

4. 优化TCP协议

• TCP连接复用，使用keep-alive：连接回复加上请求头：keep-alive。第一次请求不断开，第二次请求复用。
• 使用http 2.0版本：多路复用，连接复用率会更高

渲染层优化

1. 优化网页渲染

• css的文件放在头部，js文件放在尾部或者异步
• 尽量避免內联样式（就是在html里写style=""）

• 对于css中可继承的属性，如font-size，尽量使用继承，少一点设置
• 缩短css选择器，多使用伪元素等帮助定位

• 不要用HTML缩放图片

  　　不要因为在HTML中可以设置宽高而使用本不需要的大图。如果需要

  1	<img width="100" height="100" src="mycat.jpg" alt="My Cat" />

  　　那么图片本身（mycat.jpg）应该是100x100px的，而不是去缩小500x500px的图片。

2. 开启GPU渲染加速

一般的css渲染，浏览器的渲染引擎都不会使用到它。但是，在3D渲染时，计算量较大，繁重，浏览器会开启显卡的硬件加速来帮助完成这些操作。所以，我们这里可以使用css中的translateZ设定，来欺骗浏览器，让其帮忙开启GPU加速，加快渲染进程。

3. 减少DOM访问

• 避免用JavaScript修复布局问题

数据层优化

1. 图片加载处理

2. 异步请求的优化

移动端优化

这块单独拎出来

设计角度

骨架屏、过渡的动画效果、首页加载动画

---

参考

https://www.jianshu.com/p/fe32ef31deed