前言 作为一名优秀的前端开发者,必须了解浏览器以及http协议中的缓存策略。...因为在日常的开发中,我们会经常接触到一些性能优化的需求,那么缓存(cache)这种技术无论是在前端开发领域也好,后端开发领域也好,也是一种非常常见以及有效的方案。...只是前后端之间的缓存方式不太一样,而且后端很多时候需要缓存的是数据,而前端往往需要利用浏览器和http协议去缓存数据或者文件,从而达到提升加载速度的效果。
是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。https://weui.io/
通常第一次打开页面的时候因为要加载很多资源文件,所以这个过程通常会很耗费时间,给用户带来不好的体验。 那针对这个问题有哪些优化思路呢? 首先加载的资源文件能否压缩,比如把1兆的图片压缩到几kb。...写在最后,懒加载带来了首次打开页面的加载速度,但是也不能损害后续操作的性能。利用预加载的能力,把后续需要加载的资源在空余时间利用空余的带宽资源提前加载到本地是一个非常好的生产实践。
这是前端最好的时代——论前端的“三化”建设 原文发表于:CSDN 作者: 腾讯AlloyTeam, 李成熙LeeHey "每18至24个月,前端都会难一倍"(注:2015深JS大会上,赫门在《前端服务化之路...自动化属于"三化"中的基础,它的发展极大释放了前端的手脚,让前端有更多的时候专注于实时化与服务化的发展。大会带来与前端相关的主题是前端的测试自动化。这相信是前端自动化比较棘手的问题。...其一,他们的做法主要是针对于Javascript的逻辑,或者是一些基本的UI交互的测试,浏览器兼容性的测试、前端页面与设计稿的对齐方面的测试,基本都是空白。...对于前端页面与设计稿对齐的测试,我们团队AlloyTeam也有一些尝试,曾开发过一个AlloyDesigner的工具。...用Node.js作为接入层,让前端涉足"后台"的业务成为可能,而且能提高开发效率,还能更方便地使用最新Web技术,如Big Pipe, WebSocket等对页面进行优化。
作者: zimo segmentfault.com/a/1190000011358507 前言 现在,我们被称为前端工程师。然而,早年给我们的称呼却是页面仔。...或许是职责越来越大,整体的前端井喷式的发展,使我们只关注了js,而疏远了css和html。 其实,我们可能经常在聊组件化,咋地咋地。...移动端的时代 或许,手机占用了人们大部分的时间,对于前端工程师来说,不仅需要会h5和大前端的技术,还需要去适配不同的手机屏幕。...这种界面有个特点就是页面元素的复杂度比较高,而使用flex进行布局会导致页面被拉伸,但是上下的高度却没有变化等问题。示例图: ? ? 具体的讲解可以看这篇比较好的文章。...相信这是一篇值得去收藏的一篇文章。
Vue操作 1 组件以及页面之间跳转 1.1 返回上一页面 1.2 组件跳转至页面 2....按钮点击前后转变样式 1 组件以及页面之间跳转 1.1 返回上一页面 methods:{ handleToBack(){...uni.navigateBack() } } 效果图标 1.2 组件跳转至页面 uni-app跳转页面的方法: 要区分是否属于tarbar内的页面?...1.tarbar内的页面: uni.switchTab({ url: ‘…/job/job’, }) 2.非tarbar页面: 使用redirectTo,navigateTo跳转: uni.redirectTo
注意xhr.open('post', '/log', false)的第三个参数, false为同步请求,也就是document unload之前必须等待请求发...
跨页面传递参数 这里有假如传递一个参数,在另一个页面接收时,只需要js中写入如下代码: localhost:8080/index.jsp?
记录一下前端实现页面加密的思路。 加密基础知识 双向加密 可还原的加密算法,可以逆向解密。 对称加密(单密钥加密) 采用单钥密码系统的加密方法,同一个密钥同时用作信息的加密和解密。...页面内容加密 图片 内容加密算法 通过比对密码和输入的 md5 值来判断密码是否输入正确 密码验证通过后,开始解密内容 拿到正确的输入值的 sha256 值的部分内容 然后按照加密规则解秘内容 这里利用
上报页面错误数据! 言简意赅!不废话!...本文分为4个部分 1、页面错误分类 2、错误监听具体处理 页面错误分类 页面错误这种数据上报的重要性,想必不用我多说了吧 页面通常就分为3种错误 1、js 报错 2、资源加载错误 3、请求报错 其中js...不属于 promise 错误 所以它会被前面的 window.onerror 捕获到,而不会触发 unhandledrejection 事件 资源报错 监控资源报错我们在另一篇内容有总结,具体可以看 【前端监控...所以我们这里只监听资源错误就好了 window.document.addEventListener('error',handler, true) 请求报错 请求报错的内容,也已经写过,具体可以参考 【前端监控...最后可以看下我们对于线上页面监控的一个异常数据对比图,大概长这样(数据是假的) 可以很清楚看到线上页面的稳定性,一个字,稳 最后 鉴于本人能力有限,难免会有疏漏错误的地方,请大家多多包涵, 如果有任何描述不当的地方
Web前端杂记 学习链接https://www.bilibili.com/video/av75501761?p=2 默认未设置定位 父元素 宽度最大填充父元素,高度正好容纳子元素。...如果子元素左浮动,则宽度仍在容纳子元素的基础上最大填充父元素,高度正好容纳子元素 如果子元素右浮动,则宽度正好容纳子元素,高度正好容纳子元素 这是因为子元素默认就是独占一行,向左对齐的。...浮动 1.将元素排除在普通流之外 2.元素将不在页面中占据空间 3.将浮动元素放置在包含框的左边或者右边 4.浮动元素依旧位于包含框之内 浮动的框可以向左或者向右移动,直到他的外边缘碰到包含框或者另一个浮动框的边框为止...W3C 怪异盒模型: IE,IE盒子模型的宽和高包括了border和padding box-sizing允许指定标准盒模型和怪异盒模型 content-box(标准) border-box(怪异) 前端浏览器屏幕相关参数的获取
以360浏览器为例,优先通过Webkit内核渲染主流网站,只有少量的网站通过IE内核渲染,以保证页面兼容性。...浏览器默认内核的指定只需在head标签中添加一行代码即可: 若页面需默认用极速核,增加标签: 若页面需默认用ie兼容内核...,增加标签: 若页面需默认用ie标准内核,增加标签:<meta name="renderer" content="ie-stand
一、前言 前端部分的搭建,需要考虑使用哪种模式进行页面之间的跳转交互, 而项目内的页面交互,不可避免的需要相互之间的数据共享。 ...这就引出了本篇博客的目的,一起来谈谈:项目前端部分的构建方式以及数据共享方式。...二、正文 (一)、搭建前端部分所需要注意的问题 1)方便性 结合开发的时间需求和方便性选择适合的前端模式; 2)性能 在项目的体量比较大,或者某个页面需要加载较多文件时...(二)、前端搭建的模式选择(多页面模式和单页面模式) 图片来源:https://blog.csdn.net/u013291076/article/details/53667382 1)多页面模式(MPA...,是一件很可怕而又不稳定的无奈选择 三、结语 前端的明天在框架,得学vue了
1.元素使用rem单位(相对于html的font-size,单位px) 1 /* 自动调节页面适配 */ 2 $(function(){ 3 (function(){ 4...320px){ 10 #example { 11 font-size: 10px; 12 } 13 } 媒体查询样式的条件 可以使用 and 满足想要的范围 注意:手机页面都要加上这个
页面加载 页面加载就是从你输入网址+enter开始,发生的一些列过程,最终到页面显示。...(6) 页面加载完毕。//load执行 其实,说到这里,这篇文章就已经结束了。 想得美。 这只是,页面加载很浅的一块,前端能在页面加载上做的工作其实超级多。...有兴趣,可以参考:赖小赖小赖 接下来,我们一步一步来看一下,页面加载的整个过程. redirect 这是页面加载的第一步(也有可能没有)....(6) 页面加载完毕。...另外提供一个doScroll方式 doScroll兼容 这是IE低版本特有的,不过IE11已经弃用了。
前端页面热更新 了解过前端性能优化的同学应该清楚,给页面加载提速的终极方案就是CDN,这是BS架构本身的特点决定的,无论什么前端提速手段,最终都会回到客户端文件的传输上来;与之相对的CS架构则不存在加载压力...这就是本文要探讨的一种方案:前端热更新。...”这个破坏连贯性的动作隐藏于无形;前端页面的加载则相当于每次都是“全量更新”,如果能让前端页面也能用上“本地模板”,那将极大缩短前端加载时间,而且以此为前提,我们也可以实现一个前端的模板热更新机制,做到不影响页面更新的实时性...最终可以做到热更新页面无论改版还是做活动,只需要前端发版就可以,完全不需要APP端参与。 场景二:追求加载速度的web页面。...activeVersion": { "id": "18", "url": "", "cycle": "2018,02,01-2018,02,10", "template": "" } } 模板文件 前端页面由三种语言构成
但模拟毕竟是模拟,当开发完毕,使用真机访问页面出现问题时如何调试呢? 下面介绍一种针对android机的调试方法 1. 在pc和android手机上都安装最新版本的chrome 2. ...5.在手机侧chrome中访问页面 比如:m.haha.sogou.com 同步的,我们会在pc侧的chrome上看到到手机侧访问的页面,如下图所示 ? 6. ...手机打开的页面被直接拉到pc上显示了。调试更加事半功倍! ?
XHTML 可能使您的页面更加符合标准,但是它大量使用标记(强制性的 和 标记),这意味着浏览器要下载更多代码。所以,事情都有两面性,尝试在您的网页中使用较少的 XHTML 代码,以减小页面大小。...七、删除任何不必要的元素 可能这是所有技巧中最显而易见的一个,但是它也是最容易忘记的一个技巧。如果您真正需要在网页上放置许多内容,考虑将网页分为 2 个、3 个或更多的独立页面。...十二、将 CSS 图像映射用于装饰功能 使用图像映射代替多个图像,这是另一种缩短加载时间的方式,因为同时下载图像的各个独立部分能够加快整个页面的下载进度。...十三、尽可能延迟脚本加载 一种提升页面下载速度的潜在方式是将脚本放在页面的底部,使页面加载更迅速。...Gears 允许用户离线访问 Web 应用程序,但是也允许将页面元素持久化到用户的计算机上。
在本机目录新建一个nats.conf文件,例如/home/xxx/nats.conf,文件内容如下
二、帮助页面开发搞测试平台嘛,肯定是需要开发一个帮助页面,总不能每次同事一有问题就都来找我问怎么解决吧。...三、痛点帮助页面,隔三岔五会有新增功能或者原有功能调整啥的,肯定是需要时常编辑和调整的,如果修改一次帮助文档,就改一次前端页面代码,那肯定是不太方便的。...四、解决思路markdwon,各位都不陌生,页面简洁,维护简单,大家用了都说好。那么我们是不是可以直接用markdown文档来维护一份帮助文档,然后直接在前端显示呢?...src="/static/js/jquery-3.7.1.slim.min.js">2、前端页面新增...getHelpDoc()4、后端维护一份markdown文档六、遇到的问题1、 图片显示大小在markdown文档中,我们也markdown语法插入图片时,在本地显示图片大小是正常的,而在前端页面经过
领取专属 10元无门槛券
手把手带您无忧上云