怎么做网站赚流量手机网站怎么布局

怎么做网站赚流量,手机网站怎么布局,要制作自己的网站需要什么,怎样查看别人网站流量应用场景#xff1a; 状态同步#xff1a;多标签页之间同步数据#xff0c;比如同步设备展示状态#xff0c;同步数据信息。消息通知#xff1a;通知其余标签页执行动作#xff0c;比如说跳转其他页面#xff0c;完成后#xff0c;通知打开页面执行状态变更或刷新灯操…应用场景状态同步多标签页之间同步数据比如同步设备展示状态同步数据信息。消息通知通知其余标签页执行动作比如说跳转其他页面完成后通知打开页面执行状态变更或刷新灯操作。隐私数据通信基于加壳客户端实现 H5 页面之间的本地通信机制不经过网络层传输还根据随机加密值实现跨权限式加密信道。实现场景需要跨域Websocket、父子窗口。无需跨域LocalStorage、SharedWorker、BroadcastChannel。LocalStroage利用同域下 LocalStorage 共享策略。实现跨标签页的信息同步。实现简单。存在问题LocalStorage 有 5MB 大小限制需要注意消息限制问题。使用A 页面监听storage事件。B 页面通过调用 LocalStorage 方法触发事件传给 A 页面进行使用通过获取e.newValue变化即可得知当前的传送的消息。当执行removeItem时e.newValue会变为 null。通过e.url判断消息是否为自己发出避免重复处理或者监听消息来源。// A 页面window.addEventListener(storage,(e){console.log(e.key)// keyconsole.log(e.oldValue)// 旧值console.log(e.newValue)// 新值即设置的值console.log(e.storageArea)// 被操作的 storage 对象console.log(e.url)// 文档改变的对象地址来源})// B 页面window.LocalStorage.setItem(xx,xxx)window.LocalStorage.removeItem(xxx,xxx)SharedWorker基于共享线程来完成通信是独立于主线程的后台共享线程。SharedWorker 本身承载业务共享逻辑底层通信手段基于MessagePort实现。通过port通信降低主线程和 Shared Worker 的耦合度。生命周期和连接的主线程相关主线程全部释放SharedWorker 也会终止可能会等待异步任务执行完成但是每测试出来。可能异常情况SecurityError不能正常启动 Shraed Worker。NetworkErrorShared Worker 不是application/json格式。SyntaxErrorURL 无法解析。存在问题兼容性问题很多移动端浏览器不支持。增加请求和维护成本定义额外的 js 文件。调试困难需要通过chrome://inspect#workers界面查看调试信息。使用主线程连接 SharedWorker。通过shareWorker.port.postMessage向所有连接的页面发送消息。通过shareWorker.port.onmessage接收发来的消息。// 页面内主线程constshareWorkernewShareWorker(share-worker.js)shareWorker.port.onmessage(e){const{type,data}e.dataif(typeBROADCAST){// 处理逻辑}}// 处理连接错误worker.port.onerrorfunction(error){console.error(Shared Worker 错误:,error);};// 显示激活shareWorker.port.start()functionsendMessage(){shareWorker.port.postMessage({type:MESSAGE,data:{...}})}functiondisconnect(){shareWorker.port.postMessage({type:DISCONNECT})shareWorker.port.close()}shared worker文件通过self.onconnect监听连接事件只要完成初始化就会触发。使用 Set 集合connections存储端口支持 O(1) 操作消耗。操作通过port.onmessage监听任一主线程发来的消息遍历connections广播消息。在使用完成时通过port.close关闭端口并清除端口在connections中的缓存一定要清除连接避免出现缓存端口导致广播无效端口的情况出现。port.start用于触发端口激活调用不会触发什么内容但是部分浏览器不调用可能会阻塞消息发送。// share-worker.js (share Worker线程)// 通过 connections 管理端口constconnectionsnewSet();// 消息广播functionbroadcast(){connections.forEach(p{// 排除自身if(p!port){p.postMessage({type:BROADCAST,data:${data}});}});}functiondisconnect(port){connections.delete(port);port.close();// 关闭端口}self.onconnect(e){// 1. 读取端口自动去重constporte.ports[0];connections.add(port);// 2. 监听消息port.onmessage(e){const{type,data}e.data;switch(type){caseMESSAGE:console.log(收到主线程消息,data);// 广播给所有连接的主线程broadcast(data,port)break;caseDISCONNECT:disconnect(port)break;}};// 3. 监听端口错误/关闭自动清理无效端口port.onerror(err){console.log(端口错误:,err);connections.delete(port);};// 显示激活端口部分浏览器需显式调用port.start();};Brocastchannel支持同源下跨标签页通信方案适用于广播消息方案。创建频道名称只要在同个频道名称下的标签都能接收广播消息。无需像 SharedWorker 那样遍历广播直接发送即可。实现简单几行代码即可搞定。存在问题2022 年才稳定的 API 需要考虑下兼容性问题。无法控制广播域需要通过多频道来区分广播形式或者通过标识符判断要处理消息的页面。使用通过new BroadcastChannel(channelName)创建频道。通过监听message来监听广播消息。通过channel.postMessage()发送消息。constbroadcastChannelnewBroadcastChannel(channel);// 接收其他同频道的广播消息broadcastChannel.addEventListener(message,(e){const{type,data}e.data});// 为同频道广播消息broadcastChannle.postMessage({type:message,data})父子窗口当使用window.open()打开窗口可以通过父子窗口执行通信。利用 **浏览器窗口句柄Window Handle**和消息传递 支持了父子通信。可以使用父窗口作为中间层实现各个子窗口的流通性以及广播功能。兼容性好。存在问题需要窗口之间存在父子引用关系。需要额外维护子窗口的引用信息。使用父窗口通过window.open打开子窗口同时保留子窗口的引用。基于window.name区分子窗口便于后续跨子窗口通信。监听各自window的message事件实现通信 。父窗口通过child.postMessage()发送消息子窗口通过window.opener.postMessage()回复消息如果要跨域可以通过 postMessage 第二参数指定目标源*代表向所有源发送消息。// 父窗口constchildwindow.open(/some-page)// 给子窗口定义唯一id便于通信child.namewin_id()window.addEventlistener(message,(){// 监听子窗口传递的消息})// 在子窗口 /some-page 页面// 发送数据到父窗口window.opener.postMessage({type:message,name:window.name,data})window.addEventlistener(message,(){// 监听父窗口传递的消息})Websocket通过 websocket 以服务端做中转实现跨域通信方案。支持跨域同时支持跨浏览器跨设备。可以结合其他跨标签方案实现复用 websocket 连接的操作。存在问题需要服务端支持实现较为复杂。MessageChannel这个方案还是比较常用在 iframe 跨域通信机制中仅记录。MessageChannel 本质也是依赖 MessagePort 来实现的通信机制本质和 SharedWorker 一样。如果实现跨标签页通讯需要有中间人且支持结构化克隆算法来协助传递 port 端口信息。参考内容Window: postMessage() 方法 - Web API | MDN - MDN 文档BroadcastChannel - Web API | MDNSharedWorker - Web API | MDNMessagePort - Web API | MDN