关于前端性能优化的总结, 随处都可以看到这方面的文章, 而优化方法, 也无外乎那些固定方面, 当然, 有些方面已经过时, 所以, 在这里, 我自己也总结一遍吧, 加深理解, 也希望是一种不同的总结形式
----------------------- 正文总这里开始 ------------------------------------
一什么是前端性能优化 (what)?
从用户访问资源到资源完整的展现在用户面前的过程中, 通过技术手段和优化策略, 缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度
二为什么要做前端性能优化 (why)?
在构建 web 站点的过程中, 任何一个细节都有可能影响网站的访问速度, 如果不了解性能优化知识, 很多不利网站访问速度的因素会形成累加, 从而严重影响网站的性能, 导致网站访问速度变慢, 用户体验低下, 最终导致用户流失
三前端性能优化的原则 (rule)
1 不要按照准则照本宣科的做, 需要根据实际情况因地制宜;
2 不出 bug!
四从浏览器发起请求到页面能正常浏览都有哪些阶段 (process)?
预处理 > DNS 解析 > 建立连接 > 发起请求 > 等待响应 > 接受数据 > 处理元素 > 布局渲染
五性能优化的具体方法 (way)
一) 内容层面
1DNS 解析优化 (DNS 缓存减少 DNS 查找 keep-alive 适当的主机域名)
2 避免重定向 (/ 还是需要的)
3 切分到多个域名
4 杜绝 404
二) 网络传输阶段
1 减少传输过程中实体的大小
1) 缓存
2)cookie 优化
3) 文件压缩 (Accept-Encoding:g-zip)
2 减少请求的次数
1) 文件适当的合并
2) 雪碧图
3 异步加载 (并发, requirejs)
4 预加载延后加载按需加载
三) 渲染阶段
1js 放底部, CSS 放顶部
2 减少重绘和回流
3 合理使用 Viewport 等 meta 头部
4 减少 dom 节点
5BigPipe
四) 脚本执行阶段
1 缓存节点, 尽量减少节点的查找
2 减少节点的操作 (innerhtml)
3 避免无谓的循环, breakcontinuereturn 的适当使用
4 事件委托
六与性能优化相关的细节的探索
1 缓存
1)Expires Cache-Control Last-Modified ETag If-Modified-Since If-None-Match 这些请求头部在浏览器缓存中分别起什么作用, 如何起到缓存的作用?
1. 当某一文件在浏览器中第一次被访问的时候, 这个时候浏览器是没有缓存的, 直接从服务器获取文件, 返回给客户端, 并且存入浏览器缓存; 此时, 返回状态码 200, 并且服务端可以设置响应头部 Expires 或者 Cache-Control,Last-Modified 或者 ETag
2. 如果设置了 Expires 或者 Cache-Control, 那么在指定时间内再次请求该文件时, 只要不强制刷新缓存 (F5 等), 浏览器会直接读取缓存而不再去请求服务器
3. 如果没有设置 Expires 或者 Cache-Control 或者过期了, 就需要再次请求服务器了, 浏览器会发起条件验证, 发起请求时在请求头加上 If-Modified-Sinse 或者 If-None-Match, 服务器端判断最新的文件是否发生了更新, 如果没有, 总则返回响应状态码 304, 并且不带任何响应实体, 也就是说, 传输到客户端的只有一些相应头部, 响应实体是空的, 这样就大大减少了传输的体积, 浏览器接受到了 304 响应, 就知道了要读取浏览器缓存了
2) 按回车浏览器刷新按钮 F5Ctr+F5 的区别?
1. 按回车, 浏览器会判断是否有缓存, 并且根据 Expires 或者 Cache-Control 判断缓存是否过期, 如果没有, 就不会发起请求, 直接使用缓存否则就需要像服务器发起请求再验证
2. 浏览器刷新按钮和 F5 效果相同, 不管是否有 Expires 或者 Cache-Control, 都会强制去请求服务器, 进行再验证, 根据 If-Modified-Sinse 或者 If-None-Match 判断是否要返回 304, 如果是, 浏览器就会继续使用缓存
3. 按 Ctr+F5 时, 也是不管是否有 Expires 或者 Cache-Control, 都会强制去请求服务器, 但是并不会进行再验证, 服务器会直接把最新的内容返回给浏览器, 压根就不考虑缓存的存在或者是否过期
3) 为什么用 Last-Modified 还不够, 要用 ETag 实体标签验证?
1. 有些文档会被周期性的重写, 但实际包含的数据是一样的 (尽管内容没有变化, 最后修改日期却会发生变化)
2. 有些文档可能被修改了, 但是修改并不重要, 没必要更新缓存
3. 有些服务器无法准确判定页面的最后修改日期
4. 文档在毫秒级间隙发生变化 (如实时监控), 以秒为颗粒度的 Last-Modified 就不够用了
4)post 请求拉取大量数据的缓存策略?
http://blog.csdn.net/grandpang/article/details/47701515
2DNS 解析过程
- http: //blog.chinaunix.net/uid-28216282-id-3757849.html
- 3HTTP
1) 所有常用状态码的含义?
http://blog.csdn.net/grandpang/article/details/47446561
2)301 跳转和 302 跳转的区别?
http://blog.csdn.net/grandpang/article/details/47448395
3)http 头部信息详解?
http://www.cnblogs.com/li0803/archive/2008/11/03/1324746.html
4) 并发连接数请求数并发用户数分别是什么意思?
http://www.4wei.cn/archives/1002399
4 浏览器
1) 浏览器加载渲染网页的过程
http://blog.163.com/seo_luofeng/blog/static/176575024201242412342680/
2) 浏览器工作原理
http://blog.csdn.net/zzzaquarius/article/details/6532299/
来源: http://www.92to.com/bangong/2018/02-07/33289107.html