女王控的博客

前端

115 篇文章

客服新窗口技术探索

需求背景 由于客服聊天组件需要支持以新窗口的形式打开,也就是以 window.open 的新窗口打开,同时需要支持嵌入公司自己的产品端,在技术攻关的过程中遇到很多问题,特此记录 问题及解决方案 标记为横线的为完成需求后发现现阶段不需要做的 跨域窗口间的通信: 编写底层通信库 、通过 url 传递 嵌入公司产品端:独立客服聊天组件的运行环境 设置新窗口位置:需要注意兼容分屏情况 监听新窗口打开情况: 通过底层库发消息 、获取 window.open 的 closed… »

移动端h5秒开方案总结

常用加速方法 通常的 web 优化方法,基本围绕在资源加载和 html 渲染两个方面。前者针对首屏,后者针对可交互。 资源优化上,我们总的方向是围绕更小的资源包上,比如常见的:压缩、减包、拆包、动态加载包及图片优化上。 html 渲染上总的方向是更快的展示内容,比如通过 cdn 分发、dns 解析、http… »

移动端Web页面适配

移动端 web 页面的开发,由于手机屏幕尺寸、分辨率不同,或者需要考虑横竖屏问题,为了使得 web 页面在不同移动设备上具有相适应的展示效果,需要在开发过程中使用合理的适配方案来解决这个问题。 方案概述 静态布局 + initial-scale + 各个元素 px 早期网页设计采用静态布局,通过 标签中的 应用设备标识识别移动设备,即 。 在 标签中的 viewport 标签中设置 width,通过 js 动态修改标签的 initial-scale… »

Webpack5新特性

从 2017 年发出关于 v5 的投票开始,到 2019 年 10 月发布第一个 beta 版本,目前是 5.0.0-beta.16。现在在收集使用反馈、生态升级的过程中,相信不久后就可以正式发布了。这次升级重点:性能改进、Tree Shacking、Code Generation、Module Federation。 下面我们跟着 Changelog 来动手,测测重点内容~ 优化持久缓存 首先简单说 Webpack 中 graph 的概念: Webpack 在执行的时候,以配置的 entry… »

javascript专题笔记

防抖 前言 在前端开发中会遇到一些频繁的事件触发,比如: window 的 resize、scroll mousedown、mousemove keyup、keydown 为此,我们举个示例代码来了解事件如何频繁的触发: 我们写个 index.html 文件: debounce.js 文件的代码如下: 我们来看看效果: 从左边滑到右边就触发了 165 次 getUserAction 函数! 因为这个例子很简单,所以浏览器完全反应的过来,可是如果是复杂的回调函数或是 ajax 请求呢?假设… »

0%