GaHingZ 发布的文章

前端监听资源加载错误


前言

页面上有很多资源元素,比如<img>,<iframe>等,我们需要知道其加载情况,根据加载成功与否进行下一步的处理。

常见的做法是给这些元素上设置onload,onerror方法。

比如:<img onerror="errFn()" onload="loadFn()">

支持onload的标签:<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>

支持onerror的标签:<img>, <input type="image">, <object>, <script>, <style> , <audio>, <video>

注意IE9.0及以上才支持<audio>, <video>标签

此外几乎所有浏览器都支持onloadonerror,

这种做法的缺点:

  1. 每个要处理的元素都要绑定事件,html和js耦合太深,处理的脚本不能通用化、插件化,比如给另一个页面也能方便使用
  2. Windows 7 下的 Internet Explorer 11 不支持<audio>, <video>的 onerror 事件(我没试过。


flv格式说明


总体结构

说明:举例 表示值为不固定,仅举例一个符合取值范围的值 本文md解析有问题,附上文档md源码

  • Header[9B]
    • Signature[3B]:文件标识,固定FLV三个字符(0x464C56)
    • Version[1B]:FLV版本号
    • Flags[1B]:第0位和第2位分别表示video与audio的存在情况(1存在0不存在);0x05表示都存在
    • DataOffset[4B]:表示FLV的Header长度,固定为0x00000009(个人感觉这边可以改进


W3C_Preload


![]C4V[7X~JQIHR36YZ`MV7.png]1# preload简介

一种资源预加载的方式。用于提高性能,方便开发人员控制资源加载。

preload 指示浏览器预先请求当前页面接下来会需要用到的资源。

在chrome中,采用 preload 预加载资源后,后续没有在对资源进行请求(3s),控制台会提示说是否有必要预加载该资源。


JS异步下载按序执行


前言

前端优化有个原则,叫资源懒加载。

对于某些js资源,我们在页面load前并不需要用到,加载反而会影响到首屏速度。

把这些js放到 load 后进行加载,我们称之为js异步加载。