前端性能优化总结 一、什么是前端性能优化(what) 二、为什么要做前端性能优化(why) 三、前端性能优化的原则(rule) 四、从浏览器输入URL到页面展示都有哪些过程(process) 五、性能优化的具体方案(way)

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

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

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

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

      1、根据实际情况因地制宜

      2、不出bug

四、从浏览器输入URL到页面展示都有哪些过程(process)

      1、输入URL

      2、应用层DNS解析域名

      3、建立TCP连接

      4、浏览器向服务器发送http请求     

      5、服务器接收数据

      6、服务器响应请求

      7、服务器返回相应的文件

      8、页面渲染

五、性能优化的具体方案(way)

      1、使用CDN托管

      2、减少http请求

           21、文件打包,脚本合并(webpack、grunt)

           22、CSS雪碧图

                  通过background-image、background-position等属性定位

           23、文件压缩

                https://tinypng.com/(熊猫图片压缩)

           24、延迟加载图片

           25、CSS3图标

           26、避免重定向

                 301:永久重定向     302:暂时重定向   

                 重定向会增加http请求数,但必要的重定向有利于提高用户体验

                 方法:定义URL链接时使用完整的地址

      3、代码优化

            31、减少对DOM的操作

            32、减少重排与重绘

            33、避免CSS表达式

            34、缓存Ajax

                    ajax缓存和http缓存效果相同

            35、配置Etags