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

前端性能优化-通用的缓存SDK

难度中级
时长 4小时28分
学习人数
综合评分9.27
27人评价 查看评价
9.3 内容实用
9.2 简洁易懂
9.3 逻辑清晰
  • 先驱者userData 优点: 第一个吃螃蟹的人 缺点:存储限制大小,单个文件的大小限制是128KB,一个域名下总共可以保存1024KB的文件,文件个数应该没有限制。在受限站点里这两个值分别是64KB和640KB Cookie兼容性最好的本地存储 优点:兼容性最好,几乎所有的浏览器都支持。 缺点:大小有限制,而且每次发送请求,请求头里会带着Cookie一起发过去,现在基本大多数登录的合法性验证都是用Cookie验证的。
    查看全部
    1 采集 收起 来源:userData+cookie

    2018-03-10

  • sessionStorage 临时存储神器 优点:临时存储神器,关闭页面标签自动回收,不可以跨页面交互。 缺点:不能存储持久化的东西。
    查看全部
    0 采集 收起 来源:sessionStorage

    2018-03-10

  • 视频的外部资源可使用link 加载样式的方式加载,会被提前加载。起到提前加载视频所需外部资源,让视频先运行的作用。
    查看全部
    1 采集 收起 来源:资源提前

    2018-03-10

  • 浏览器工作流程
    查看全部
  • 触发重绘: 1、改变字体 2、增加或移除样式表 3、内容变化,如用户在input框输入文字 4、激活css伪类,如:hover 5、脚本操作DOM 6、计算可见的宽高属性 7、设置style属性的值
    查看全部
    0 采集 收起 来源:如何分辨重绘

    2018-01-18

  • documentFragment api可省去一次回流 var fragment = document.createDocumentFragment(); var spanNode = document.createElement('div'); for(var i=0;i<10;i++){ (function(i){ spandNode.innerHTML= spandNode.innerHTML + 'number:'+i+'<br>'; fragment.appendChild(spandNode); })(i) } document.body.appendChild(fragment);
    查看全部
  • 处理图片的方法
    查看全部
    0 采集 收起 来源:未来方法+结语

    2018-01-17

  • 默认图占位,获取设备信息,然后根据设备信息返回最合适的图片
    查看全部
    0 采集 收起 来源:未来方法+结语

    2018-01-17

  • 【SessionStorage】-ie7以下不支持 优点:临时 存储神器,关闭页面标签自动回收,不可跨页面交互。同一浏览器不同标签中Sessionstorage是不共享的 缺点:临时 成了萧何败也萧何,因为是临时所以不能存储持久化的东西 【userData】-ie支持 优点:比SessionStorage早 缺点:存储限制太小。单个文件大小限制是128KB,一个域名下总共可以保存1024KB的文件,文件个数应该没有限制。在受限站点里这两个值分别是64KB和640KB 【Cookie】-兼容性最好的本地存储 优点:兼容性最好,几乎所有的浏览器都支持 缺点:大小有限制,而且每次发送请求,请求头里会带着Cookie一起发过去,现在基本大多数登陆的合法性验证都是用cookie验证的。 【openDatabase】-一般支持html5的都支持 优点:就是一个完整的数据库。 缺点:可能对于前端同学来说,成本高。 【localstorage】-可在页面关闭后依然保存,其他与sessionStorage无异 优点:兼容性中等,操作简单,就是key-value形式,几乎现代的浏览器都支持。不能跨浏览器取,不能跨域取。 缺点:存在大小限制,ie9,ie10不支持
    查看全部
  • 视频的外部资源可使用link 加载样式的方式加载,会被提前加载。起到提前加载视频所需外部资源,让视频先运行的作用。
    查看全部
    0 采集 收起 来源:资源提前

    2018-01-16

  • 播放器形式 【video】 优点:不需要下载额外资源(如:flash播放器需要下载.swf辅助插件),控制简单有较为完整的api 缺点:每个浏览器的外观都不一样,如果要统一需要自己写ui实现 【Flash】 优点:兼容性好,只要有flash player播放器插件,都可以进行播放。 缺点:1、需要下载额外的swf播放文件才可以播放,浏览器必须有flash player插件 2、flash player版本的碎片化 3、UI定制需要写as,学习成本较高 优化方案:Flash 和 html5相结合如: Flowplayer 功能简单,使用方便,https://flowplayer.org/player/ VideoJs 功能强大,使用复杂,http://videojs.com
    查看全部
  • CSS-Sprites 图片工具 http://alloyteam.github.io/gopng by 鹅厂 http://fits.baidu.com/ by 狼厂 http://gruntjs.com/ by 可爱的开发者 图片标签 <picture> <source srcset="smaller.png" media="(max-width:768px)"> <source srcset="big.png" media="(min-width:1000px)"> <img srcset = "default.png" alt="MyDefaultImg"> </picture>
    查看全部
    0 采集 收起 来源:未来方法+结语

    2018-03-22

  • 图片压缩时的算法决定了其显示时的方式 小波算法:先模糊然后清晰 离散余弦变换:清晰,逐行显示
    查看全部
  • 图片分类: jpg,jpeg,以24位颜色存储单个位图,可压缩 png,可做透明图片,体积较大,需要清晰的显示颜色丰富的图片时用 gif,全透/全不透,不支持半透明 svg,矢量图,地图中用的多,体积小 apng,webp:jpg+png优点,未被所有浏览器采纳
    查看全部
  • 浏览器配置的dns永远高于本地host配置
    查看全部
    1 采集 收起 来源:问题解决+结语

    2018-01-16

举报

0/150
提交
取消
课程须知
1、对html基础知识已经掌握。 2、最好看过上一节前端性能优化的基础认知
老师告诉你能学到什么?
1、一个针对实际存在项目做的优化 2、业内通用的必须掌握的优化方案 3、高性能dom的实战 4、图片加载的原理,以及优化方案 5、自定义一个高性能的播放器。 6、一起开发一个所有项目都能使用的性能优化工具类。 7、从一个bug的出现到,分析、解决的方法论

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!