为了账号安全,请及时绑定邮箱和手机立即绑定

页面性能类

标签:
JavaScript

题目:页面性能的方法有哪些?
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">

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消