问题的复盘 某一天海外运营告知说最近几天的海外站点pv,uv下降严重，希望技术帮忙查看一下原因。WTF，这跟技术有毛线关系，该用的都用了，TM的页面不吸引人，用户不想来，我能怎么办？...搬来梯子，熟练的打开海外站点，速度还可以，这个时候差点就给pass了，幸好去看了一下世界各个地区的加载时间后发现，有些地区的加载时间简直不能看。好吧，实锤。 在查找慢速过程中收获很多决定记录下来。...节点数多意味着可供用户选择的响应节点多，优中选优，不必多说了，优秀。 网页加载时间 网页加载时间其实可以看作是页面响应时间。那么，它是由哪些部分组成的？影响因素都有哪些？哪些我们是可以优化的？...First Byte Time 表示浏览器在从服务器接收第一个字节数据之前需要等待多长时间。获取该数据所需的时间越长, 显示页面所需的时间就越长。 这部分主要能做的就是使用CDN和优化后端性能。...最后 通过这次排查慢速的过程，不止学到了技术方面可以改进的地方，也真正认识到了对于网站来说，时间就是生命。加载时间长，用户真的是不惯着你。 优秀的站点之所以优秀，就在于把每个细节都做的很优雅。
来自内部 黄树炫 同学的分享 背景 响应式设计指的是根据屏幕视口尺寸的不同，对 Web 页面的布局、外观进行调整，以便更加有效地进行信息的展示。我们日常生活中接触的很多应用都遵循响应式的设计。...此外，CSS 的媒体查询存在着循环引用的问题，window.onresize 和 window.matchMedia 则都需要在 viewport 大小变化时手动获取元素的大小，一旦操作过于频繁则可能导致浏览器多次...需要注意的是，内部获取元素的大小是通过调用 getComputedStyle 实现的，那么多次调用 getComputedStyle 会不会导致浏览器频繁 layout/reflow ？...实例调用 getComputedStyle 时就有可能导致浏览器 reflow 但此时为了获取准确的元素信息， reflow 是无法避免的；因为不涉及到 绘制paint，所以开销还是可接受的 无限循环...深度限制可能会使得页面展示不是完全准确的，但是相比于页面UI卡死，这个问题对于用户而言是更好接受的。
它们是将不同样式应用到不同上下文的好方法，无论它是基于视口大小、运动偏好、首选的配色方案、特定的交互，甚至是特定的设备，如打印机、电视和投影仪等。 但你知道我们对JavaScript也有媒体查询吗?...例如，如果我们改变窗口大小低于我们的目标窗口大小，没有任何更新方式与CSS直接开箱即用。这是因为.matches非常适合一次性的即时检查，但无法持续地检查更改。...Add a listener for when the window resizes window.addEventListener('resize', checkMediaQuery); 因为每次浏览器调整大小时都会调用...我们还看到了侦听窗口上的resize事件的“老”方法。尽管它仍然被广泛使用，并且是响应窗口大小变化的一种完全合法的方式。但是 innerWidth，无法对高级媒体条件执行检查。...我们还看到了侦听窗口上的resize事件的“老”方法。尽管它仍然被广泛使用，并且是响应窗口大小变化的一种完全合法的方式。但是 innerWidth，无法对高级媒体条件执行检查。
整体流程 夜间模式开关按钮：用来手动切换夜间模式的，会存储cookie。 自动夜间模式：当cookie为空时，浏览器时间大于22点小于6点时会自动进入夜间模式，并存储cookie。...后端配合：php判断是否有cookie，有的话直接输出夜间css，避免切换页面时网页闪烁。...CSS文件加载，默认不渲染。...>stylesheet" type="text/css" title="dark"> 适配 Mac 的 Dark Mode 纯js判断设备是否进入了夜间模式，感谢simplify提供代码 if ( window.matchMedia...&& window.matchMedia("(prefers-color-scheme: dark)").matches ) { alert('进入夜间模式'); } 旧版适配 Mac 的 Dark
换一个角度，现在系统都有深色模式，浏览器也有深色模式，那么看着别人的网站也有深色，自己的网站怎么能少？开发网站，这个优先级必须提高呀。...既是使用进行限制，页面加载是自上而下，但是onMounted的生命周期，发生在DOM元素加载完毕；所以也会造成闪烁问题。...，默认为underfined所以默认是不会执行的。...'，紧接着，查看项目的module.ts，便可以找到script的来源： 图片 最后，我们可以知道：它通过直接在中内联一个脚本，这个脚本会在页面其他元素渲染前执行: 该脚本会立即读取本地存储和系统偏好的值...的分享，就到这里啦。其实现在细想，还是存在优化的地方，比如： 如果想提高效率，localstorge的渲染还是存在延时读取问题，相对的Cookie就不存在这个问题。
以下是一个简单的示例，展示如何基于用户使用的浏览器类型进行判断并跳转：if (/(mobile|android|iphone|ipad|iemobile|windows phone)/i.test(navigator.userAgent...navigator.userAgent 中是否存在典型的移动设备标识符，如果存在，则认为用户正在使用移动设备，并将页面重定向到指定的移动版网址。...然而，这种方法并不完全可靠，因为用户代理字符串是可以被伪造的，并且随着现代浏览器的发展，响应式设计已经更为推荐，可以根据屏幕尺寸而不是设备类型来优化网站布局。...另外，也可以使用更现代的方法如 navigator.maxTouchPoints 或者媒体查询 (window.matchMedia) 来辅助判断：// 检查触控点数量以大致推测是否为移动设备...另外，现代的网站设计通常使用响应式设计（Responsive Design）来适应不同大小的设备和屏幕，而不是简单地根据设备类型进行重定向。响应式设计可以让你的网站在各种设备上都有良好的用户体验。
页面加载后，根据用户需求加载不同的样式列表 推荐阅读《webpack 换肤功能多主题/配色样式打包解决方案》，配置文件： https://github.com/hiyangguo/webpack-mutiple-theme-bundle-css-demo...，最终实现该部分功能的是 less-loader，该加载器把 less 转为 CSS，在 webpack 中每个文件或模块都是有效的 JS 模块，因此我们还需要 css-loader 将CSS样式文件转换为变成...CSS 的媒体查询 prefers-color-scheme 是一种用于检测用户是否有将系统的主题色设置为亮色或者暗色的 CSS 媒体特性。...利用其设置不同主题模式下的 CSS 样式，浏览器会自动根据当前系统主题加载对应的 CSS 样式。...不做兼容性处理的话那页面可能就是一团糟了。
前端常用utils工具方法小总结 // 数组去重 const uniqueArray = arr => [...new Set(arr)]; // 从url获取参数，并且转换成对象 const...const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ...document.documentElement.scrollHeight; //重定向到一个url const redirectToUrl = (url) => window.location.href = url //打开浏览器的打印页面...，若在 n 秒内被重复触发，则重新计时 节流就是指连续触发事件但是在 n 秒中只执行一次函数。...节流会稀释函数的执行频率 export const debouncer = (fn, time, interval = 200) => { if (time - (window.debounceTimestamp
[效果图] 媒体查询的优缺点 很多文章会介绍你直接使用媒体查询来适配暗色模式；的确高版本的浏览器，可以提供媒体查询功能，使用CSS，加入媒体判断即可： /\* 常规浅色模式下的网页背景颜色及文本颜色 \...，但是坏处也有,主要的体现是无法用户主动切换： 举个例子，有些用户习惯把系统长期设置为暗色模式，访问你网站时，想看清你网站的图片，希望调整成亮色模式，却必须到系统设置内，手动把系统配色调成亮色再刷新网站...暗色标识符：由暗色/亮色按钮调用的JS实现存储在Cookies或localStorage内，用来提示JS展现那种页面配色。...End 这个JS是在用户进入网站，加载到标签时，进行判断，是否需要在表情内加入class="night"。...，触发onclick函数事件，这边为还替换了页面id为nightMode标签内的图标： [图标替换] 系统配色切换监听 其实，配置已经基本配置完成，但是如果用户设置的是自动变换配色，如Mac用户的外观自动
这种 API 让你可以简单地控制浏览器，使得一个元素与其子元素，如果存在的话，可以占据整个屏幕，并在此期间，从屏幕上隐藏所有的浏览器用户界面以及其他应用。...，通过该机制，代码可以监视元素的大小更改，并且每次大小更改时都会向观察者传递通知。...，返回一个MediaQueryList对象，在页面满足指定的媒体查询规则时触发绑定的事件处理器； mqList = window.matchMedia(mediaQueryString); //返回MediaQueryList...，Tab 页，frame 或者 iframe 下的 浏览器上下文 (通常是同一个网站下不同的页面) 之间的简单通讯。...使用这个工具，用户可以从他们的屏幕上采样颜色，包括浏览器窗口之外的颜色，该API目前只有Chrome浏览器支持。
每次修改location的属性（hash除外），页面都会以新URL重新加载！！浏览器的历史记录中会生成一条记录，点击“后退”按钮会导航到前一个页面。...（有可能从缓存中加载） location.reload(true); // 重新加载（从服务器重新加载） 注意：不传递参数时，页面会以最有效的方式重新加载。...如果页面自上次请求以来并没有改变过，页面就会从浏览器缓存中重新加载。传递参数true，会强制从服务器重新加载。 三、navigator对象 识别客户端浏览器的实际标准。...window.resizeTo(screen.availWidth, screen.availHeight); 注意：许多浏览器都会禁用调整浏览器窗口大小的能力（如：Chrome） 五、history对象...// 后退一页 history.go(-1); history.back(); // 前进一页 history.go(1); history.forward(); 示例：检查是否是打开的第一个页面 if
从历史上看，有两个浏览器的功能已被用于“触摸屏检测”：媒体查询 和 Touch APIs。但这些离做到万无一失还很遥远。 跟我一起看下去。...最初的 iPhone （在2007年发布）是第一个支持 Touch Events 的设备，但是，从二十世纪70年代开始触摸屏已经以一种或另一种形式存在。...不管是 Safari 还是 Opera 都还没有在他们的桌面浏览器实现触摸接口，所以他们在触摸设备上也没有结果。...这是动态的, Jim ¶ 一个触摸屏可以作为一个外围设备连接到另一个非触摸式笔记本电脑，或者一个 KVM 开关可以从非触摸屏切换到触摸屏。这可以在浏览器会话过程中的任何时间发生。...当应用在执行时，浏览器不应该添加和移除接口——这会造成混乱——所以随着已连接设备的变化，这种特性检测可能出现失败。
利用其设置不同主题模式下的 CSS 样式，浏览器会自动根据当前系统主题加载对应的 CSS 样式。...页面已经加载了对应深色主题的样式： ?...那么，针对不支持 CSS 变量的 IE 浏览器怎么办呢？不做兼容性处理的话那页面可能就是一团糟了。...Theme 指定的是浅色模式，darkTheme 指定的是深色模式，程序会根据系统设定的暗黑模式自动匹配模式。...总结 以上分别介绍了在 App 应用中对 H5 页面和客户端的深色模式适配方案，当然其中 H5 的方案页同样适应于 PC 端。使用前一定要确保你的系统和浏览器是兼容深色模式的，不然就没有效果了呢。
本文整理了一些实用的 JavaScript 单行代码，非常好用~~ ---- 获取浏览器Cookie的值 通过document.cookie 来查找cookie值 const cookie = name...但是，不同浏览器的具体要求不同，因为这是一个新的API。有关详细信息，请查看compatibility table and Clipboard availability in Clipboard。..., 8); console.log(timeFromDate(new Date(2021, 0, 10, 17, 30, 0))); // Result: "17:30:00" 校验数字是奇数还是偶数...使用以下代码检查用户的设备是否处于暗模式。...const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
使用 resizeTo() 和 resizeBy() 方法可以调整浏览器窗口的大小。...这个方法可以接收 4 个参数: 要加载的 URL、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。...为了确定用户是单击了 OK 还是 Cancel，可以检查 confirm() 方法返回的布尔值: true 表示单击了 OK，false 表示单击了 Cancel 或单击了右上角的 X 按钮 prompt...与位置有关的最后一个方法是 reload()，作用是重新加载当前显示的页面。如果调用 reload() 时不传递任何参数，页面就会以最有效的方式重新加载。...location.reload(); //重新加载(有可能从缓存中加载) location.reload(true); //重新加载(从服务器重新加载) 位于 reload() 调用之后的代码可能会也可能不会执行
运行速度是网站成功与否的关键因素。 WordPress受到前所未有的推崇，如果能被调整到最合适的状态，WordPress会达到最佳运行效果。...加载页面时，如果浏览器还要执行PHP查询，就会延长加载时间。 可以用静态HTML代替PHP查询，这样每次加载页面时，浏览器就只需要读取HTML代码。 4....6.用这个工具优化你的图片 Shrink O’Matic是一款可以轻松（批量处理）改变图片大小（缩小）的AIR应用程序。 它可以处理JPG, GIF和PNG格式的图片。...更重要的是，它可以兼容IE浏览器，即使浏览器并不支持数据URI。...12.显示页面加载次数和查询次数 将下面的代码添加到你的模板上就可以显示加载你的页面需要的时间和执行的sql查询次数了。 这个方法可以快速了解你的WordPress博客优化程度。
则表示该容器中页面视图区的大小（减去边框宽度）。...resizeTo()、resizeBy()：可以调整浏览器窗口的大小。...这个方法可以接收4个参数：要加载的URL、窗口目标、一个特性字符串、一个表示新页面是否取代浏览器历史纪录中当前加载页面的布尔值。...这个超时调用ID是计划执行代码的唯一标识符，可以通过它来取消超时调用。...location.reload(); //重新加载（有可能从缓存中加载） location.reload(true); //重新加载（从服务器重新加载） 三、navigator 对象 识别客户端浏览器的事实标准
userAgent已经从官方标准中废弃，但是它仍然在所有主流浏览器中得到很好的支持。 URL window.location是一个对象，该对象包含有关当前页面URL的信息。...如果传递参数true，会强制浏览器从服务端重新加载页面，而不是使用缓存的页面。 assign()方法可以用来从参数提供的URL中加载另一个资源。...该方法接收两个参数，分别是窗口要移动到的屏幕的X轴和Y轴坐标： window.moveTo(0,0); // 移动窗口到屏幕的左上角 你可以使用window.resizeTo()方法来调整窗口大小。...从可用性的角度来看，调整或移动用户窗口的大小也是一个坏主意。 许多浏览器阻止弹出式窗口，并在某些情况下不允许调用其中的一些方法。例如，如果有一个以上的标签打开，你就不能调整一个窗口的大小。...你也不能移动或调整一个不是用window.open()创建的窗口的大小。 尽量少的使用这些方法是明智的，所以在使用它们之前要仔细考虑。几乎总是会有一个更好的替代方案，而一个优秀程序员会努力找到它。
大学时候有个项目也是自己设计和实现的 dark mode 支持，当时是手写的，依稀记得后面从哪些文章里看到说可以一行代码实现暗黑模式云云，于是企图在这次实践过程中应用下这些奇技淫巧，然而经过一天的实践，...开启方式 一般来说会有两种开启方式，一种会在页面 (通常右上角) 使用一个 switch 开关控制页面是 light 还是 dark，一种会根据系统或者应用的 Preference 来自动切换。...，再在加载的过程中判断是偏好 light 或 dark。...原因在于我们对系统偏好的判断，是通过 window.matchMedia 来的，这个在直出的 server 端必然获取不到，这里我们 server 返回的 html 字符串就是错误的。...当页面返回到 client 这边，加载的 js 会执行各种生命周期函数，componentDidMount 这里的 setState 值和 constructor 中的初始 state 值是一样的，就不会触发
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
云直播
对象存储
腾讯会议
