前端性能优化

前端性能优化

因为前端效果是直接展示为用户的，如果响应速度慢、白屏、卡顿都会大大降低用户体验，导致流失用户。

具体需要优化的点：

1. 页面加载速度||响应速度
2. 用户交互体验（用户体验）
3. SEO优化（其实和性能无关）

雅虎公司曾发布过一个《雅虎十四条》

页面加载速度的优化

有哪些因素会影响加载速度？提出问题，解决问题。

1. 页面体积

   压缩HTML代码、分离独立的css样式文件与js脚本文件。

2. 减少http请求，减小资源体积

   合并css、js并压缩，图片选择合适的格式，压缩图片，css sprits
   按需加载

3. ssr 服务端渲染

4. ajax缓存，将频繁切换的ajax获取到的数据可以保存在全局变量中、redux’store中等等，但是每次重新进入页面就会消失，所以我们可以考虑存储在本地存储或者cookie中，但是需要注意的是，为了用户能访问到最新数据，需要根据项目类型来设置过期时间，有的项目不适合这么做

5. cdn 内容分发网络 content Delivery network， 减少DNS查询次数

   图片cdn服务器 青牛， 千牛…

   2 - 4 服务器就最好，包括cdn服务器

YSlow
https://blog.csdn.net/mangxi8200/article/details/81129173

react的性能优化
shouldComponenWillUpdate
return false/true

用户体验

1. 兼容性优化，保持跨浏览器一致性， css reset…

2. 提高页面的操作性能：

   避免css表达式的使用，减少dom的js操作，尽量使用css3动效

3.能用css实现的就不要用js

4.白屏问题：
发到QQ
1. 来个加载动画
2. 来个骨架

浏览器地址栏输入www.baidu.com后会发生什么？

1. DNS解析，将域名解析成ip地址
2. 查找ip地址对应的服务器
3. 建立TCP连接，进行TCP的三次握手
4. 请求入口文件
5. 解析入口文件，如果有外部文件，继续发生请求