前端性能优化因为涉及到计算机网络、数据算法、图形图像处理、浏览器渲染等多方面计算机知识。
页面优化
一、避免页面卡顿
拆分代码段———— 用 requestAnimationFrame（）获取任务去执行
减少layout————减少重排，重排要重新计算页面再渲染
简化DOM结构————帮助搜索引擎快速渲染
优化html空格注释等————减小内存
代码优化——html嵌套少、css选择器简单层数少、js少用闭包
二、加快页面打开速度
①减少渲染堵塞
1、js放在 body后面 或者用defer异步加载（能用则不用，因为defer的加载优先级会降到最低）
2、DNS预读取——并行下载，不会堵塞页面渲染，可以缩短资源加载时间
②减少head标签里的css文件————如果文件太大会阻塞渲染，如果放在body里面会导致重新layout
1、不要放太多的base64在css，因为图片转换成base64也挺大的，图片转换css不能有选择性加载的优势了，因为有的会根据设备屏幕进行选择性加载，做成字体图标。
2、文件不大的话可以把css样式做成内联的，压缩一下。因为cdn服务的请求解析下载需要时间消耗。
③优化图片
1、使用响应式图片，srcset、picture
2、图片使用懒加载
④压缩和缓存
1、gzip压缩——Nginx服务器中配置
2、Cache-Control 、
3、Last Modified ——Nginx服务器中配置——缺点：每次生成文件的last modified都不一样，max-age也难以计算
4、etag——对文件做一个校验和———缺点：如果文件较大增加服务器计算的负担，且etag用了较少数的字符表示，虽然重合的概率很小，但是还是存在的
⑤升级到HTTP/2
对于一个域只建立一次TCP连接，使用多路复用，请求多个资源，可以减少使用雪碧图，合并js/css发送请求了
且兼容性好，不妈祖条件做蛋糕切换到HTTP/1.1
三、增强用户体验
①加loading效果——（页面初始化菊花转、进度条）
②加过度动画——轮播图、导航栏、弹窗
③单击输入——有按下去的动作
④记住用户使用习惯——记住用户的输入信息，本地存储实现，如果用户开启了隐身模式，本地存储将会被禁掉，可以改用cookies
⑤避免页面闪动——可以把样式内联，因为他是和DOM一起出来的。
四、用好chrome调试工具
①打印 —— log table dir 打印带样式
②检查没有用的css/js —— Coverage 用到的用绿色 没用到的用红色
③截全屏功能 —— Capture full size screenshot debugger
④ios真机模拟器 —— Xcode safari
⑤用console.trace追踪函数调用
⑥查看某个函数绑定的事件
7、模拟断网做些出错处理
8、研究重绘
9、检查内存泄漏
10、查看连接时间 Network
11、查看内存消耗
12、垃圾回收 Timeline
13、页面性能评测 Audits
题目：提升页面性能的方法有哪些？
1.资源压缩合并，减少HTTP请求
2.非核心代码异步加载—异步加载的方式—异步加载的区别
3.利用浏览器缓存—缓存的分类—缓存的原理
4.使用CDN
5.预解析DNS
<meta http-equiv="x-dns-prefetch-control" control="on"> //一般浏览器a标签是默认打开DNS预解析，但是使用HTTPS时DNS预解析关闭的，所以添加这一条语句强制开启
<link rel="dns-prefetch" href="//host_name_to_prefetch.com">
异步加载的方式：
1.动态脚本加载
2.defer
3.async
异步加载的区别：
详细区别参照：https://juejin.im/post/5bcdaed7e51d457a8254e1b7
https://www.jianshu.com/p/9ce2896f8f84
1.defer是在HTML解析完之后才会执行的，如果是多个，按照加载的顺序依次执行
2.async是在加载完之后立即执行，如果是多个，执行顺序和加载顺序无关
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>性能优化</title>
<!-- <script src="./defer1.js" charset="utf-8" defer></script>
<script src="./defer2.js" charset="utf-8" defer></script> -->
<script src="./async1.js" charset="utf-8" async></script>
<script src="./async2.js" charset="utf-8" async></script>
</head>
<body>
<div class="">
test
<script type="text/javascript">
console.log('write');
document.write('<span>write</span>');
</script>
<script type="text/javascript">
for (var i = 0; i < 200000; i++) {
if (i % 20000 === 0) {
console.log(i);
}
}
</script>
</div>
</body>
</html>
浏览器缓存：
https://juejin.im/post/5b9346dcf265da0aac6fbe57
https://segmentfault.com/a/1190000008377508
https://www.jianshu.com/p/54cc04190252
缓存的分类：
强缓存：（不询问服务端是否过期，直接把缓存拿来用）
Expiress Expires:Thu,21 Jan 2017 23:39:02 GMT（服务端发送的绝对时间）
Cache-Control Cache-Control:max-age=3600（相对时间）
协商缓存：（和服务器问一下，是否过期了）
Last-Modified If-Modified-Since Last-Modified:Wed, 26 Jan 2017 00:35:11 GMT
Etag If-None-Match
总结：
image.png
原文链接：https://blog.csdn.net/u014465934/article/details/86491034
网友评论