a coder's diaries

0%

一,功能

1,小程序支持自定义组件,视频直播,模板消息,将web页面用web-view插入小程序,获取用户信息包括手机号…功能很丰富,可查看官方API

2,在小程序内可打开或返回同一公众号下的小程序

3,同一微信开放平台下的不同应用,用户的openid是不一样的,但是unionid是唯一的

4,页面最多有5层,代码包大小2MB

二,兼容

微信客户端的每个版本都携带小程序的稳定版基础库,当用户的基础库不支持小程序功能时,可在微信公众平台设置最低版本,届时提醒用户更新微信。在开发时可用wx.canIUse判断当前基础库是否支持要加功能

三,性能与分析

1,频繁或者大量setData会造成页面卡顿;图片尽量放在服务器上;及时清理没用的代码和资源,缩小代码包。参考文档

2,使用abd工具和微信开发者工具的Trace面板分析小程序性能。参考文档adb安装教程

3,可在微信公众平台自定义分析数据,创建事件和漏斗。经管理员授权后可用小程序数据助手查看分析结果

阅读全文 »

同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。

同源是指
  • 协议相同
  • 域名相同
  • 端口相同
限制范围
  • Cookie、LocalStorage 和 IndexDB 无法读取。
  • DOM 无法获得。
  • AJAX 请求不能发送。
一级域名相同,二级域名不同时共享Cookie
  1. 设置相同的document.domain
  2. 服务器也可以在设置Cookie的时候,指定Cookie的所属域名为一级域名
解决跨域问题
  1. 片段识别符

把信息加在URL的#后面,子窗口监听haschange事件

1
2
3
window.onhaschange = () => {
let message = window.location.hash;
}

子窗口改变父窗口片段识别符

1
parent.location.href = target + "#" + hash
  1. 将信息写入子窗口的window.name中

  2. HTML5的window.postMessage

阅读全文 »

常见的http缓存只能缓存get请求响应的资源,根据是否需要重新向服务器发起请求来分类,可分为强缓存和协商缓存。

总图

1. 强缓存

如果Cache-Control的max-age没有过期或者Expires的缓存时间没有过期,就直接使用浏览器的缓存数据
强缓存

2. 协商缓存

如果不用强缓存,浏览器第二次请求时就会与服务器进行协商,如果服务器端的资源没有修改,那么就会返回304状态码
协商缓存


参考链接:
一文读懂http缓存(超详细)

HTTP是基于TCP/IP协议的应用层协议。它不涉及数据包(packet)传输,主要规定了客户端和服务器之间的通信格式,默认使用80端口。

版本 出版时间 方法 响应内容 新增功能
HTTP/0.9 1991 GET 字符串 服务器只能回应HTML格式的字符串,发送完毕,就关闭TCP连接
HTTP/1.0 1996.05 + POST、HEAD + 图像、视频、二进制文件 状态码(status code)、多字符集支持、多部分发送(multi-part type)、权限(authorization)、缓存(cache)、内容编码(content encoding)
HTTP/1.1 1997.01 + PUT、PATCH、HEAD、 OPTIONS、DELETE + 头部Host + 持久连接(persistent connection、管道机制(pipelining)
HTTP/2 2015 + 头信息和数据体都是二进制 双向的、实时的多工(Multiplexing)通信、头信息压缩、服务器推送(server push)

注释:

  • +号表示包含上个版本的内容
  • 1.0版本非标准声明Connection: keep-alive支持持久连接,1.1版本不用声明,关闭连接时发送Connection: close
  • 对于同一个域名,大多数浏览器允许同时建立6个持久连接
  • 管道机制,即在同一个TCP连接里面,客户端可以同时发送多个请求
  • HTTP/2只有在 HTTPS 环境才会生效
  • HTTPS在HTTP的基础下加入SSL层
阅读全文 »