随笔分类 - Web
2020.2.22
摘要：一. babel(语法转换) 1. 浏览器很多都不支持es6的语法，或者仅仅是部分支持，babel就承担了“翻译”的角色，把es6，es7的写法转换成es5的写法 2. babel转换后的代码是遵循commonJS模块规范的es5写法，而这个规范，浏览器并不能识别。因此导入到浏览器中会报错，而nod
阅读全文
摘要：1. web项目vue框架使用qrcodejs2生成二维码，会生成canvas和img，但是发现在手机上都是使用canvas而img中不会有数据 2. 本意是使用a标签的download进行点击下载，但是经尝试使用uc浏览器和via都不行，只有chrome通过，兼容性不行 3. 浏览器自带长按保存图
阅读全文
摘要：一. 上古时代：(1990-2004) 这个时期，浏览器的开发者，以后台开发人员居多，大部分前后端开发是一体的，大致开发流程是：后端收到浏览器的请求 > 发送静态页面 > 发送到浏览器。即使是有专门的前端开发，也只是用 HTML 写写页面模板、CSS 给页面排个好看点的版式（要不是我堂堂程序员看不上
阅读全文
摘要：IntersectionObserver实现图片懒加载 通过IntersectionObserver可以实现监听用户看到的元素，实现当用户看到放置图片的元素才开始加载图片，避免一开始加载大量图片 注意： 1. 经测试，在使用过程发现似乎高版本ios设备可以使用，但是低版本ios设备是没有Inters
阅读全文
摘要：一. 浏览器主要渲染过程 1. 从服务器拿到Html文件代码后，浏览器在内存条开辟出一块栈内存，用来给代码执行提供环境，同时分配一个主线程去一行行的解释和执行代码 2. 代码一行行进栈执行，执行完出栈，当遇到link/script/img/video后浏览器会开辟全新的线程去加载资源文件，然后主线程
阅读全文
摘要：F12打开调试窗口，在console中键入：document.designMode = ‘on’ 此时就可以开心的编辑此网站文字啦！！!
阅读全文
摘要：特性cookiesessionStoragelocalStorage 数据生命期 生成时就会被指定一个maxAge值，这就是cookie的生存周期，在这个周期内cookie有效，默认关闭浏览器失效 页面会话期间可用 除非数据被清除，否则一直存在 存放数据大小 4K左右（因为每次http请求都会携带c
阅读全文
摘要：1. 新开窗口 注：如果没有用户操作调用会被浏览器拦截，正确做法是用户点击调用新开窗口不会被拦截 var url = 'https://xxx.com'; window.open(url); 2. 关闭窗口 注：如果是浏览器直接新加的窗口不能通过此方法关闭，只有代码触发新开的窗口才可以使用此方法关闭
阅读全文
摘要：一. 事件的传播分为三个阶段 1. 捕获阶段（capture phase）从外向内：在捕获阶段时从最外层的祖先元素（window对象），向目标元素进行事件的捕获，但是默认此时不会触发事件 2. 目标阶段（target phase）：事件捕获到目标元素，捕获结束开始在目标元素上触发事件 3. 冒泡阶段
阅读全文
摘要：因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。*最简单的初始化方法就是（不建议）： {padding: 0; margin: 0;} 淘宝的
阅读全文
摘要：npm和yarn使用 他们都属于js包管理工具，都可以安装包或者模块yarn 是由facebook、google等联合开发推出的 区别： npm 下载包的话 比如npm install，它是按照包的排序，也就是队列挨个下载，一个下载完成后，再下载另一个 yarn是将要下载的包进行同时下载，并行下载，
阅读全文
摘要：图片拉伸用于适配不同比例设备 原文地址：https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit 经测试object-fit可以用在视频和图片 contain被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的
阅读全文
摘要：复制url事故：出现特殊的字符%E2%80%8B 问题：直接其他地方复制过来的中文字进行网页搜索、或者中文字识别排序等情况的，会出现搜索不到的情况。 解决方法：可能存在复制源里面的文字带了空白url编码%E2%80%8B，空白编码没有宽度，虽然看不到但是会影响结果无法正确匹配对应的中文字。可以把文字
阅读全文
摘要：Promise异步编程 一. Promise用法 1. Promise基本用法 实例化Promise对象，构造函数中传递函数，该函数中用于处理异步任务 resolve和reject两个参数用于处理成功和失败两种情况，并通过p.then获取处理结果 在调用then时可以只传入正常情况函数处理，不传入异
阅读全文
摘要：应用提交谷歌商店JavaScript Interface Injecttion错误解决 方法 2：确保 WebView 不会加载不受信任的网络内容 如果您的应用需要向 WebView 的 JavaScript 界面提供对象，请确保 WebView 不会通过未加密的连接加载网络内容。您可以在清单中将
阅读全文
摘要：应用提交谷歌商店SSL Error Handler错误解决 解决办法：在webview重写此方法，代码如下 1 public void onReceivedSslError(WebView view,final SslErrorHandler handler, 2 SslError error) {
阅读全文
摘要：chrome调试安卓机错误 chrome调试安卓机的时候打开的调试页面会显示 “HTTP/1.1 404 Not Found ”错误 解决办法： 开启电脑vpn，全局模式即可解决。
阅读全文
摘要：深入学习网址：https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps 谷歌官方网址：https://codelabs.developers.google.com/codelabs/your-first-pwapp/index
阅读全文
摘要：1. 页面优化 优化内容： 提升网页响应速度：减少请求，文件大小，页面性能 对搜索引擎，屏幕阅读器友好： 提高可读性，可维护性：规范代码 优化操作： 减少请求：小图标使用sprite拼图合并为一个图片，减少图片请求，通过background去定位显示图标，多个css文件进行合并 页面性能：css建议
阅读全文
摘要：监听浏览器后退（不适配） 注意：电脑手机谷歌浏览器不适用，只会偶尔成功。发现问题所在谷歌浏览器需要用户进入页面有交互，如点击后才会生效监听浏览器后退，但是电脑360浏览器必现可以直接监听 1. 代码这样写就会浏览器历史压入一个历史并前进到此 history.pushState({title: 'vi
阅读全文
浙公网安备 33010602011771号