图片
-
可以考虑图片的备选技术，例如CSS效果，CSS动画。提供与分辨率无关的效果，在任何分辨率和缩放级别都可以显示得很清晰，占用空间也很小。网络字体，很多图标哭也是用字体的方式提供，保持文字的可搜索性的同时扩展显示的样式。
-
各类图片特别总结：
- jpg：体积比较小
- png: 可以透明，体积比较大（需要清晰显示颜色丰富的图片使用png）
- gif：只支持全不透明或者全透明，不支持半透明
- svg：矢量图，地图类用的比较多，很小
- 页面中图片的加载效果，是图片文件本身决定的
- 小波算法：从模糊变清晰
- 离散余弦变换：逐行加载显示
-
CSS-Sprites
雪碧图通过合并文件减少网络请求，提升页面加载性能。
推荐
鹅厂的gopng。http://alloyteam.github.io/gopng（手动）
狼厂的fis。http://fis.baidu.com （自动） -
未来响应式图片设计思路（未被浏览器支持）：
<picture>
<source srcset="large.jpg" media="(min-width: 800px)">
<source srcset="medium.jpg" media="(min-width: 600px)">
<img srcset="small.jpg">
</picture>
视频
- 播放器形式
-
video标签：HTML5引入的标签。
优点：不需要下载额外资源，控制简单有较为完整的API。
缺点：每个浏览器的外观不一样。 - Flash播放器：
优点：兼容性好，只要有flash player播放器插件，都可以进行播放
缺点：需要下载额外的swf播放文件才可以播放，浏览器必须有flash player插件。UI定制需要写as。flash player版本碎片化。
-
目前的方案：
Flash+HTML5两种方案结合。
Flowplayer 功能简介，使用方便。
https://flowplayer.org/player/
VideoJs功能强大，使用复杂。
http://videojs.com/ -
video标签的UI定制
自定义工具栏，将播放器相关事件绑定到自定义的工具栏上。 -
让视频第一时间加载
- 把初始化播放器的代码执行顺序提前。
- 把播放器播放时所需要的资源提前。
因为浏览器会默认把多媒体的资源放在最后加载，所以选用样式表的类型来提前加载多媒体资源。
缓存技术选型
- 前端最常用的资源：
CSSJavascripts -
SessionStorage
优点：临时存储，关闭页面标签自动回收，不可以跨页面交互。（刷新 时不会释放）
缺点：不能存储持久化的信息。 -
cookie
优点：兼容性最好，几乎所有浏览器都支持。
缺点：大小有限制。每次发送请求，请求头里都会带着cookie。 - HTML5本地数据库(
IndexedDB)
优点：就是一个完整的数据库。
缺点：学习成本高。
存在浏览器的缓存文件中。 -
Localstorage
优点：兼容性中等，操作简单，key-value形式。
缺点：存在大小限制。(5M左右)
存在浏览器的缓存文件中。
高性能DOM
- reflow:render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。
- repaint:当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。
- DOM元素的添加、修改、删除会触发回流+重绘
- 仅修改DOM元素的字体颜色，只会触发重绘。
- 回流一定触发重绘，但是重绘不一定触发回流。
- 减少回流和重绘
-
display只会影响render树，不影响dom树。 - 使用
DocumentFragment创建完之后一次性加入document
-
在chrome开发者工具中，可以看到重绘：
image.png
网友评论