跨域学习笔记
前言: 当一个资源,向与之所在服务器不同的域或端口请求另一个资源时,这个HTTP请求,我们认为是跨域的请求。出于安全考虑,浏览器会限制脚本发起的跨域HTTP请求。 那天后端让我把token放到http请求头字段里,说是为了和RN端统一,在此之前我都是放在请求体或者URL里的。于…
webpack全教程,收啦
gka一简单的、高效的帧动画生成工具
欢迎使用或建议
这些JavaScript编程黑科技,装逼指南,高逼格代码,让你惊叹不已
莫装逼、白了少年头,2333。。。
SVG全攻略(进阶篇)
SVG全面介绍下
浅析 Hexo 搭建博客的原理
一直在用 Hexo 写博客,但是对其原理并不是很清晰,在网上找了一些资料,对 Hexo 有了新的认识,现在就来记录一下 使用 Hexo + github pages 搭建博客 记得刚开始知道 Hexo + github pages 搭建博客是在 2016 年,那时候,闺蜜非常激动…
「前端那些事儿」② 极限性能优化
然而前端优化策略却是一件老生常谈的问题,百度一把大量的博文,曾拜读过张成文大大的《现代前端技术解析》,关于前端知识体系与架构思维的一本书,里面有一章讲到前端优化策略,前人总结的较为全面,自知能补充的内容也不多,索性添添简简做一个优化速查列表,以便后期回读,同大家分享。 PC端优…
好用的前端API备忘录
记住所有API几乎是不可能的,这时候你需要一份备忘录!下面是我收集的最棒的前端备忘录。
捋一捋容易被忽略的API用法
Date 获取某月的天数 下一月的第0天就是当前月的最后一天。 function daysInMonth(year, month) { let date = new Date(year, month + 1, 0); return date.getDate(); } // 注意在…
说一下性能优化
性能优化是一个老生长谈的事情, 我们在说性能优化的时候, 到底在说什么?
【源码拾遗】axios —— 极简封装的艺术
本文分析了axios是如何通过朴素而简单的方式,实现了网络请求封装中的各种扩展功能的
localStorage 还能这么用
只知道用 localStorage 存储键值对,那你就 out 了
anyupload是一个极度纯净的上传插件,通过简单调整就可以融入到任何项目,支持多文件上传、上传速率动态控制、真实进度监控kb/s、分块生成MD5、分块上传、MD5校验秒传、暂停、取消等。
anyupload是一个极度纯净的上传插件,通过简单调整就可以融入到任何项目,支持多文件上传、上传速率动态控制、真实进度监控kb/s、分块生成MD5、分块上传、MD5校验秒传、暂停、取消等。
https://www.threecss.com/AnyU...
使用 Headless Chrome 进行自动化测试
本文翻译自:Automated testing with Headless Chrome 作者:Eric Bidelman (Google 工程师) 译者:justjavac 如果您想使用 Headless Chrome 进行自动测试,请不要再观望了!本文将教你如何使用 Karm…
[[译] 这个API很“迷人”—— (新的 Fetch API)](https://juejin.im/entry/59891...
JavaScript 通过 XMLHttpRequest(XHR) 来执行异步请求,这个方式已经存在了很长一段时间。虽说它很有用,但它不是最佳 API。它在设计上不符合职责分离原则,将输入、输出和用事件来跟踪的状态混杂在一个对象里。而且,基于事件的模型与最近 JavaScript 流行的 Promise 以及基于生成器的异步编程模型不太搭(事件模型在处理异步上有点过时了 —— 译者注)。
网页转 PDF
将网页转换为 PDF 的过程记录。
懒加载和预加载
懒加载也就是延迟加载。
当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次,俗称占位图),只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来。这就是图片懒加载。
很多页面,内容很丰富,页…
HTML5+JS 拖拽与点击上传
目前 GET 到的 HTML5 文件上传
history API 和锚点链接在单页应用页面切换中的应用
Ajax的流行和前端MVVM框架的快速发展给Web开发带来了极大的便利,也让Web应用体验越来越好,近些年单页应用也随之流行起来。Ajax的应用可以让网页实现无刷新更新数据,但其也会造成浏览器无法前进和后退(浏览器和手机的物理返回键)的问题。早期这个问题通常是借助iframe来…
前端本地文件操作与上传
第一种是最常用的手段,通常还会自定义一个按钮,然后盖在它上面,因为type="file"的input不好改变样式。如下代码写一个选择控件,并放在form里面: 可以看到文件的路径是一个假的路径,也就是说在浏览器无法获取到文件的真实存放位置。同时FormData打印出来是一个空的…
打造自己的JavaScript武器库
作为战斗在业务一线的前端,要想少加班,就要想办法提高工作效率。这里提一个小点,我们在业务开发过程中,经常会重复用到日期格式化、url参数转对象、浏览器类型判断、节流函数等一类函数,这些工具类函数,基本上在每个项目都会用到,为避免不同项目多次复制粘贴的麻烦,我们可以统一封装,发布…
网站性能优化实践总结
网站性能优化实践总结
CSS 新属性 contain: 允许开发者限定浏览器 style、layout、paint 的工作范围
来自 justjavac 的「你可能不知道的前端知识点」
妈妈再也不用担心我不会webpack了
webpack前端工程中扮演的角色越来越重要,它也是前端工程化很重要的一环。本文将和大家一起按照项目流程学习使用wbepack,妈妈再也不用担心我不会使用webpack,哪里不会看哪里。这是一个由浅入深的文章。 现在vue、react等脚手架都会自动将开发环境使用的webpac…
HTML5 一些有用的 APIs
HTML5 一些有用的 APIs
能让你开发效率翻倍的 VSCode 插件配置(上)
工欲善其事必先利其器,软件工程师每天打交道最多的可能就是编辑器了。入行几年来,先后折腾过的编辑器有 EditPlus、UltraEdit、Visual Studio、EClipse、WebStorm、Vim、SublimeText、Atom、VSCode,现在仍高频使用的就是 …
一键集成悬浮按钮; 注解配置 测试页面:开发过程配置辅助小工具,
开发过程辅助工具,QA/Debug Tool
- 一行代码,就能在当前页面出现悬浮窗,点击悬浮窗可以出来功能测试页面;
- 测试的页面可以使用注解来实现,无需关心布局,只关心要测试的功能;
HTML5 桌面通知:Notification API
Notification API 是 HTML5 新增的桌面通知 API,用于向用户显示通知信息。该通知是脱离浏览器的,即使用户没有停留在当前标签页,甚至最小化了浏览器,该通知信息也一样会置顶显示出来。 想要向用户显示通知消息,需要获取用户权限,而相同的域名只需要获取一次权限。…
BetterScroll:可能是目前最好用的移动端滚动插件
作者:滴滴webapp架构组-付楠 BetterScroll 是一款重点解决移动端各种滚动场景需求的开源插件(GitHub地址),适用于滚动列表、选择器、轮播图、索引列表、开屏引导等应用场景。 为了满足这些场景,它不仅支持惯性滚动、边界回弹、滚动条淡入淡出等效果的灵活配置,让滚动…
前端性能优化
工作中遇到的一些前端性能问题,及对应的解决方案
web前端资源文件的部署和优化
现在网上也有很多关于前端文件加载的性能优化,我相信大部分的前端程序猿,应该都听说过雅虎的14条优化原则 1. 尽可能的减少 HTTP 的请求数 content 2. 使用 CDN(Content Delivery Network) server 3. 添加 Expires 头(或…
Mockjs,再也不用追着后端小伙伴要接口了
相信大家都存在这样的一个困扰,在前后端分离的大环境下, 前端需要后端的接口去完成页面的渲染, 但是大部分的情况下,前后端需要同时进行开发, 这种情况下,后端还没完成数据输出,前端只好写静态模拟数据。 那么问题就来了 数据太长了,将数据写在js文件里,完成后挨个改url。 某些逻辑…
浏览器兼容性问题解决方案 · 总结
普及:浏览器的兼容性问题,往往是个别浏览器(没错,就是那个与众不同的浏览器)对于一些标准的定义不一致导致的。俗话说:没有IE就没有伤害。 贴士:内容都是自己总结的,不免会出现错误或者bug,欢迎更正和补充,本帖也会不断更新。 Normalize.css 不同浏览器的默认样式存在差…
大话WEB前端性能优化基本套路
前端性能优化这是一个老生常谈的话题,但是还是有很多人没有真正的重视起来,或者说还没有产生这种意识。
当用户打开页面,首屏加载速度越慢,流失用户的概率就越大,在体验产品的时候性能和交互对用户的影响是最直接的,推广拉新是一门艺术,用户的留存是一门技术,拉进来留住用户,产品体验很关键,这里我以美柚的页面为例子,用实例展开说明前端优化的基本套路(适合新手上车)
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
RegExp 是正则表达式(Regular expression)的缩写,作用是对字符串执行模式匹配。
通常用于格式验证、正则替换、查找子串等
各种编程语言的正则表达式基本相同,不同的语言可能会有一些细小的差别
前端性能优化的常用手段
反正,前端性能优化就是很重要,不好好学习怎么进阶到20K+的薪水啊?! 性能优化方面一直有所关注,但如果不去对自己所负责的项目进行一下回锅,实践实践,优化优化,总会有点“书上得来终觉浅”的感觉吧! 从最开始的CSS放到
里面、js放到前面、使用雪碧图等,到…html5 postMessage解决跨域、跨窗口消息传递
html5引入的message的API可以更方便、有效、安全的解决这些难题。postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨文本档、多窗口、跨域消息传递。
简单易用的开源 JavaScript 动画图标库 -- Titanic
如果你用过 Font Awesome 等图标,你可能会觉得它们很好看,用起来很很方便。但是,在用户点击这些图标的时候,它们是不会有反应的。如果有这些图标会动的话,那就更加好。 Titanic 提供一系列的动画图标,以及以 JavaScript 的调用图标动画的方法。
如果你想要看 Hello, World 的版本的话,你可以到我的 Codepen 里面,测试一下。