专栏首页Linyb极客之路前端性能优化归纳总结篇

前端性能优化归纳总结篇

关于前端性能优化的总结,随处都可以看到这方面的文章,而优化方法,也无外乎那些“固定”方面,当然,有些方面已经过时,所以,在这里,我自己也总结一遍吧,加深理解,也希望是一种不同的总结形式。

什么是前端性能优化(what)?

从用户访问资源到资源完整的展现在用户面前的过程中,通过技术手段和优化策略,缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。

为什么要做前端性能优化(why)?

在构建web站点的过程中,任何一个细节都有可能影响网站的访问速度,如果不了解性能优化知识,很多不利网站访问速度的因素会形成累加,从而严重影响网站的性能,导致网站访问速度变慢,用户体验低下,最终导致用户流失。

前端性能优化的原则(rule)

1、不要按照准则照本宣科的做,需要根据实际情况因地制宜;

2、不出bug!

从浏览器发起请求到页面能正常浏览都有哪些阶段(process)?

预处理——>DNS解析——>建立连接——>发起请求——>等待响应——>接受数据——>处理元素——>布局渲染

性能优化的具体方法(way)

一)内容层面

1、DNS解析优化(DNS缓存、减少DNS查找、keep-alive、适当的主机域名)

2、避免重定向(/还是需要的)

3、切分到多个域名

4、杜绝404

二)网络传输阶段

1、减少传输过程中实体的大小

1)缓存

2)cookie优化

3)文件压缩(Accept-Encoding:g-zip)

2、减少请求的次数

1)文件适当的合并

2)雪碧图

3、异步加载(并发,requirejs)

4、预加载、延后加载、按需加载

三)渲染阶段

1、js放底部,css放顶部

2、减少重绘和回流

3、合理使用Viewport 等meta头部

4、减少dom节点

5、BigPipe

四)脚本执行阶段

1、缓存节点,尽量减少节点的查找

2、减少节点的操作(innerHTML)

3、避免无谓的循环,break、continue、return的适当使用

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)按回车、浏览器刷新按钮、F5、Ctr+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

2、DNS解析过程

http://blog.chinaunix.net/uid-28216282-id-3757849.html

3、HTTP

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/

本文分享自微信公众号 - Linyb极客之路(gh_c420b2cf6b47)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-05-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • linux内存源码分析 - SLAB分配器概述

    233333
  • Service Worker和HTTP缓存

    用户1258909
  • Python操作Redis的最佳实践

    致码DevOps
  • 高可用高并发的 9 种技术架构!

    精讲java
  • Cache 和 Buffer 都是缓存,主要区别是什么?【转】

    233333
  • tomcat性能优化

    用户1112962
  • Linux 内存池【转】

    233333
  • 我在平安的两年

    HaHack
  • cocos2d-js Shader系列2:在cc.Sprite上使用Shader(黑白、灰度、造旧效果)

    用户1258909
  • 面对海量请求,缓存设计还应该考虑哪些问题?

    陈树义

扫码关注云+社区

领取腾讯云代金券