前端-性能优化

HTML

1. 层级优化, 感觉还有点用, 少用无用标签(这个我就觉得很无关痛痒了, 多一个少一个), 一定要 :: before ::after看
2. 不要写内联样式,不利于维护, 且性能低, 用class, 写公共样式等…
3. 使用模板引擎

浏览器

1. 并非请求1.1是 6个, 多域名的话…

重绘重排(回流) 重排必重绘.

1. 重排的性能消耗更大, 因为涉及到布局的变化, (重新排列), 如果只是改变颜色, 则只是重绘, 它不需要再重新计算布局.
2. 增删DOM
3. vue 的虚拟dom 就很大程度上减少了重绘重排…

哪些情况引起重绘重排

1. 布局位置变变化
2. 窗口resize 
3. getComputedStyle  为啥使用这些属性会触发重绘重排??? 因为使用这些属性会强制渲染刷新队列.
4. offsetTop/offsetLeft/offsetWidth/offsetHeight    scrollTop/scrollLeft/scrollWidth/scrollHeight client/...
5. 浏览器渲染机制

怎么减少?

1. transform 代替top?
2. visibility替换display:none;减少重排
3. 避免table布局(也没用过)
4. 在DOM树的最末端改变class ??
5. 避免多层内联样式, css 选择符从右向左查找的, 避免层级过多.
6. position:absolute/fixed 的元素上上动画. requestAnimationFrame可以控制动画速度
7. 避免css 表达式
8. css3硬件加速
9. 避免频繁操作样式, class, 避免频繁操作DOM, 使用documentFragment

css 优化

1. 选择器的效率问题, 它是从后往前找, 所以层级越少, 效率越高, 少用标签选择器.

1. 打包优化

webpack rollup grunt gulp

01. treeshaking- 打包删除无用的代码

1. DCE dead code elimination 这个是uglify做的
2. babel-plugin-import-fix 缩小引用范围
3. webpack-css-treeshaking-plugin css 删除无用代码
4. webpack-bundle-analyzer 去除重复的引用

2. http

01. 缓存机制

原理：通过HTTP 请求头中的 If-Modified-Since（If-No-Match） 和响应头中的Last-Modified（ETag）来实现，HTTP请求把 If-Modified-Since（If-No-Match）传给服务器，服务器将其与Last-Modified（ETag）对比，若相同，则文件没有被改动过，则返回304，直接浏览器缓存中读取资源即可。

1. 强缓存(本地缓存??)和协商缓存, 服务端配置Cache-Control(优先级比expired高)
   • 相同点: 都是缓存, 所以都从客户端获取资源
   • 区别: 强缓存不发请求到服务器，协商缓存会发请求到服务器, 做下检查看是不是最新版本的…

Cache-Control: no-store才是真正的不缓存数据到本地 // no-cache 是协商缓存
Cache-Control: public可以被所有用户缓存（多用户共享），包括终端和CDN等中间代理服务器
Cache-Control: private只能被终端浏览器缓存（而且是私有缓存），不允许中继缓存服务器进行缓存

先判断是否有强制缓存,再看协商缓存

<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="expires" content="0"/>

在图片地址后加上随机数，表示每次加载图片地址不同

<img src="图片地址?random="+Math.random(); />

200：强缓Expires/Cache-Control存失效时，返回新的资源文件
200(from cache): 强缓Expires/Cache-Control两者都存在，未过期，Cache-Control优先Expires时，浏览器从本地获取资源成功
304(Not Modified )：协商缓存Last-modified/Etag没有过期时，服务端返回状态码304
但是！但是！
现在的200(from cache)已经变成了from disk cache(磁盘缓存)和from memory cache(内存缓存)两种

---

前提是网络安全问题
3. xss攻击 跨站点脚本攻击

4. 使用post
5. 过滤/检验用户输入的一切内容
6. session(token),验证码,http引用头检测

7. SSH

vue性能优化

1. 首屏优化(路由懒加载,三种方式)

2. component: resolve => require(["../components/login.vue"],resolve)
3. component: ()=>import("@/components/HelloWorld")
4. component: r => require.ensure([], () => r(require('@/components/about')), 'demo-01')

响应速度(网站静态化)
5.

参考文章

Tree-Shaking性能优化实践 - 实践篇
Tree-Shaking性能优化实践 -原理篇
前端静态资源缓存最优解以及max-age的陷阱