关于小程序

  1. 从用户角度，不用安装，打开直接可以，体积小最多不超过1M。
  2. 从技术角度，基于微信，同时兼容IOS、Android；
  3. 视图层中WXML和WXSS分别对应了HTML和CSS，逻辑层仍旧是JS；
  4. 没有DOM操作；
  5. 提供了一些方法和属性可以调用微信的API，如扫码、上传下载、地理位置等；
  6. 支持模块化、ES6；
  7. 增加了rpx属性，1rpx=屏幕宽度／750，和vw相似；
  8. 选择仅支持class、ID、标签、伪元素::before和::after这些，不支持后代选择器；
  9. 所有的HTML标签都不能用，只能用WXML提供的组件，这些组件也是有标签名、属性、内容、样式组成，可以嵌套，可以用选择器修改样式。这点类似于一些MVVM框架中的组件；
  10. 事件绑定方式，不阻止事件冒泡用bind + 事件名，组织事件冒泡用catch + 事件名，JS一些事件是不支持的；

前端性能与安全

一、前端性能优化：

  1. 内容部分：尽量减少HTTP请求、减少DNS查找、避免跳转、缓存Ajax、预加载、减少DOM 元素数量、减少页面层级嵌套、用域名划分页面内容、使frame数量最少、避免404错误、减少Cookie体积；
  2. 服务器部分：使用内容分发网络、使用Gzip、避免空图片、文件地址等；
  3. CSS部分：文件合并、放顶部、避免使用import、避免使用滤镜、避免使用表达式；
  4. JS部分：文件合并、放底部、封装代码去除重复的、减少DOM操作；
  5. Image部分：合并小图标、不要在HTML缩放图片、延迟加载图片、图片预加载。

二、前端安全防护：

  1. XSS攻击：在前端方面可以理解为JS注入。防范：将前端数据转义、保护好cookie。
  2. CSRF攻击：ajax的get、post提交数据时候发生。防范：提交时候带上session、token之类的验证。
  3. 网络劫持攻击：访问的时候，数据被中间代理劫持者所获。防范：建议使用HTTPS加密。
  4. 控制台注入代码：诱惑用户去控制台粘贴东西。防范：控制台加上提示警告。
  5. 钓鱼攻击：对网站的伪造。超出前端范围了
    开发时候注意事项：
  • 用户信息进行严格检测
  • 用户输入信息进行过滤或转义
  • 重要内容加密再传输
  • 检查、验证请求来源
  • 使用黑名单、白名单

三、从输入URL到页面加载发生了什么？

  1. DNS解析：查找URL对应的IP地址
  2. TCP连接：发送HTTP请求建立连接
  3. 服务器处理请求并返回数据
  4. 浏览器解析并渲染页面：
    • 由上到下开始解析HTML
      • 当解析到头部的css文件时候，同步下载
      • 接着解析body部分，边解析边生成DOM树
      • css下载完后就同步生成对应的DOM节点和CSS渲染树
      • 渲染树有了结构模型，就开始渲染节点的布局位置
      • 渲染中遇到图片，就会去下载，并返回到相应的图片位置
      • 渲染中遇到JS调整DOM，可能从渲染DOM那里重新来过。

H5直播总结

一、视频协议：

目前直播主流的协议有HLS和RTMP。

  1. HLS基于HTTP请求、响应。适合移动端。IOS支持比较好，高版本的android也支持。兼容问题网上有一些方案，sewise-player、MediaElement、videojs-contrib-hls、jwplayer；
    优点：适应性好、跨平台；缺点：有延迟现象。
  2. RTMP基于falsh。延迟小、实时性好。适合PC端、互动性比较强。HTML5 video标签无法播放 RTMP 协议的视频，可以通过 video.js 来实现。
    adobe公司到2020停止falsh。

二、直播流程：

  1. 采集端：通过摄像头、麦克风在电脑或者手机上采集；
  2. 服务端：通过服务器将采集的视频编译，然后推送到视频播放端；
  3. 播放端：播放端有手机电脑的播放器，H5的video标签、客户端的native播放器

三、直播形式：

  1. 底部H5的video视频层当背景播放
  2. 关注、评论、赞赏层，通过ajax时时发送或者获取信息

四、直播技术中的坑：

  1. autoplay中IOS中不支持，可以在clik、touch等事件中调用video.paly()；
  2. 内联播放，playsinline；
  3. 视频层级问题，如果是QQ浏览器或者微信中，可以加 x5-video-player-type="h5"和x5-video-player-fullscreen="true";
  4. video事件很多不支持，timeupdate和ended;
  5. 全屏问题，webkitEnterFullscreen() 或 webkitRequestFullScreen();可以使用伪全屏的方式，就是设置video的宽高100%；
  6. 去掉IOS默认播放图标 video::-webkit-media-controls-start-playback-button { display: none; }