页面性能类

题目：页面性能的方法有哪些？
1、资源压缩合并，减少HTTP请求
     1-1：笔记：HTML、CSS、JS、图片精灵压缩，文件合并
    1-2：讲小课：你有一个文具盒，把铅笔、圆珠笔、橡皮擦、卷笔刀合理的分配放置，才能更加节省空间，你的文具盒就可以装更多的东西，拿起来也方便携带。
    1-3：会迁移：
        1、我所学的这件事，它能用在什么地方？
              资源压缩，减少请求，提升页面性能（本质减少请求次数，提高请求效率）还可以用在什么地方
            1-1、每次买东西前，写出要买的清单，下次下去购买商品时效率更快。
            1-2、每次出门的时候，把垃圾带下去，顺路扔掉，减少下楼的次数
            1-3、做学习计划，完成每日任务，减少发呆和不必要浪费时间，提高时间的使用效率
        2、这个知识不能迁移到什么地方？
            1、它的经验是在什么背景下长出来的？
                 本质：通过降低一部分请求响应速度，提高请求的效率，减少请求次数。
                 前提条件：服务器响应速度足够快，请求文件不是很大。
            2、什么情况下使用？
                 当服务器处理速度足够快，请求数量较多，
            3、应用类型有哪些？
                  应用类型：人数使用较多，需要高质量提高用户体验和效率的应用，比如：淘宝、微信、支付宝等
            4、不能迁移的地方？
                4-1、吃饭，不能一次性吃很多，然后一天不吃东西，原因胃的容量太小了，无法处理那么的食物。
                4-2、学习，不能一次性学很多，然后之后就不学习了，原因是大脑学习的容量有限，处理效率有限。
                4-3、锻炼，不能一次性锻炼过猛，然后就不锻炼了，原因是肌肉需要有一个适应变化的过程
    1-4、实践
        

2、非核心代码异步加载→异步加载的方法→异步加载的区别
    2-1 异步加载的方式
        1、动态脚本加载,用JS创造一个标签，然后把这个标签加载到body里面或者head里面,动态创建节点 
             1-1：笔记：动态、创造、标签、加载节点
             1-2：讲小课：等你学会走路了，再告诉你怎么跑步
             1-3：会迁移：
                1、我所学的这件事，它能用在什么地方？
                     本质：需要某些知识为前提，才能做后面的事情
                 1-1、你只有先走出去认识更多的人，才可以交朋友，才能改善自己的内向与自信
                 1-2、你只有先学会切菜，才能学会怎么做饭
                 1-3、你只有先找到工作，赚了钱，才能去寻找自己的热爱的东西
                2、这个知识不能迁移到什么地方？
                    1、它的经验是在什么背景下长出来的？
                    本质：用户需要使用该应用时，该应用要给与一定的反馈，当应用自给自足的时候，就不需要使用了。
                    2、什么情况下使用？  
                        需要与HTML结构进行交互的时候
                    3、应用类型有哪些？
                        绑定事件、添加标签、文本等等
                    4、不能迁移的地方？
                    4-1、喝水，身体内部新陈代谢可以进行循环，不需要和外界进行交互
                    4-2、看艺术展，只需要用自己价值观和审美去观赏化作，作者不需要向每个人介绍自己的思想
                    4-3、当一个人欲望较低的时候，对事物的追求也会下降。
            1-4、实践：
        2、defer   
            2-1：记笔记：HTML解析、先运行同步脚本、加载顺序、依次执行
            2-2：讲小课：我要下楼买苹果和酱油，下楼就是解析的过程，顺便把垃圾带下去扔掉就是同步脚本，先去便利店买酱油，再去水果店买苹果（加载顺序，依次执行）
            2-3：会迁移：
                1、我所学的这件事，它能用在什么地方？
                     本质：先以一个行为为基础，然后这个行为上行为搭载其他行为，完成这些行为后，再按照顺序完成目标任务，前一个动作完成，后一个动作才能执行。
                1-1、点外卖吃饭，打开饿了么APP找商家下单，顺便让骑手带一瓶啤酒，然后等待接收外卖，最后吃饭喝啤酒。
                1-2、去上学，骑自行车上学，到学校门口，顺便买个早餐，吃完后进入学校，走进教室上课。
                1-3、做饭，先去菜市场买菜，顺便买点日用品，然后回来煮饭、洗菜、切菜、炒菜
               2、这个知识不能迁移到什么地方？
                    1、它的经验是在什么背景下长出来的？
                    本质：必须先做完基础动作，再按顺序做完目标任务，一件做完，再做下一件。
                     2、什么情况下使用？ 
                        做一些简单的，单线程的事情，并且两件事情使用是同一个东西
                    3、应用类型有哪些？
                        加载事件，滚动事件等等
                    4、不能迁移的地方？
                        4-1、边吃饭，边刷剧，吃一口饭，看一会电视剧，原因：吃饭用口，看剧用眼
                        4-2、边刷牙，边听新闻，原因：刷牙用手和口，听新闻用耳朵
                        4-3、边走走路，边打电话，原因：走路用腿，打电话用耳朵、手、嘴巴、大脑
           2-4、实践
        3、async   
            3-1:记笔记：加载完成，立刻执行，根据返回数据先后来执行
            3-2：讲小课：再网上购物下单，收货的时间都不相同，根据商家处理时间、距离、库存等因素决定。先收到货的，先拆快递。
            3-3：会迁移
                1、我所学的这件事，它能用在什么地方？
                    本质：我先执行一个或多个动作，后续动作由其他人完成，所用时间由其他人来决定，我只负责处理完成后的动作
                1-1、点菜，我点了几个菜，后厨负责制作，所用时间由厨师决定，我根据上菜顺序来吃饭。
                1-2、使用迅雷下载电影，我同时下载几个电影，迅雷负责找资源数量，资源数量根据由多少人下载决定，我根据那个电影先下好就先看哪个。
                1-3、完成了某个页面制作、和UI讨论设计图，由后端完成页面接口和UI画完设计图，根据他们谁先完成的时间，再决定先做哪一个。
                2、这个知识不能迁移到什么地方？
                       1、它的经验是在什么背景下长出来的？
                            某件事需要别人长时间的制作，并且任务和任务之间没有关联性
                        2、什么情况下使用？ 
                            需要根据服务器响应时间来决定是否使用
                        3、应用类型有哪些？
                            Ajax
                        4、不能迁移的地方
                            1、刷牙洗脸，原因：两个任务都要使用手，自己做、时间短
                            2、跑步散步，原因：都要使用脚，自己做
                            3、写文章冥想，原因：大脑要思考，自己做，时间短

    2-2、异步加载的区别
        1、defer是在HTML解析完之后才会执行，如果是多个，按照加载顺序依次执行，先运行同步脚本，再运行异步脚本

        2、async是在加载完成之后立即执行，如果是多个，执行顺序和加载顺序无关
        
3、利用浏览器缓存→缓存的分类→缓存的原理
    3-1 缓存概念：缓存指的是资源文件在浏览器中的备份，比如图片，缓存到你的电脑磁盘文件上，浏览器下次请求的时候，直接在磁盘中直接读取，不会再去请求这个图片的地址
    3-2 缓存的分类
        1、强缓存：浏览器有某个缓存文件，再缓存有效不直接请求服务器，直接拿过来使用
            HTTP的头部信息：
            Expires Expires:Thu,21 Jan 2017 23:39:02 GMT
            Expires：表示缓存的过期时间，它的值是服务器下发的绝对时间，客户端的时间可能跟服务器的时间不一致
            Cache-Control Cache-Control:max-age=3600
            Cache-Control ：表示相对时间，表示我拿到这个文件之后，在3600秒之内，都不会去请求服务器       了，在这个时间之类，我都会在浏览器里面拿缓存
            PS：当expires和Cache-Control都下发了，以Cache-Control的时间为准
         2、协商缓存：浏览器有这个副本，想服务器询问一下，这个文件能不能用，是否过期
            Last-Modified ：文件下载时，服务器下发的时间
            If-modified-Since:  上一次文件的下载时间，用于再次请求，让服务器判断是否需要更新缓存
            Etag: 上次下载时文件，文件时间的哈希值
            If-None-Match: 上一次文件时间的哈希值
        3、面试题：跟缓存相关的HTTP的协议头有哪些？
            Expires 过期时间 （服务器端绝对时间）
            Cache-Control:相对时间 （ 客户端的）
            Last-Modified:文件下载时间 （服务器端）
            If-Modified-Since: 上传文件下载时间
            Etag: 文件下载时间的哈希值（服务端返回）
            If-None-Match: 上传文件下载时间的哈希值
4、使用CDN
    快速访问服务器资源
5、预解析DNS
    //强制打开a标签的预解析，http默认是打开的预解析的，https:默认是不打开a标签的预解析
    <meta http-equiv="x-dns-prefetch-control" content="on">
    <link rel="dns-prefetch" href="//host_name_to_prefetch.com">