前言 flash作为h5 video未完全替代的产物,在目前的pc端仍占有具有的比例,而前端如何去根据浏览器进行判断并根据需要提示给页面是我们必备的常识。
前端的错误监控有哪些方法呢。 一、错误分类 常见的web错误主要分为两类: 1.
Web 原生开发解决方案 从 2012 年开始,H5 成为 html 最后一个稳定版本,不再兼容之前的 API,从此诞生的每一个新 API,一旦结束试验期将永远存在,2015 年 ES6 的出现又淘汰掉一堆 JavaScript 框架,再结合 CSS3,前端原生 API 已经可以替代任何脚手架和打包工具,本文介绍使用原生代码替代前端流行框架的解决方案:分析框架提供的每一个特性以及相对应的原生替代品。 SSR 构建时 从前端生产线中剔除【打包构建(SSR)】这一过程是一种大胆的、极具挑战性、里程碑式的创新。 HTTP2.0 前端打包工具能将多个 js 文件合并,在 http1.1 下能减少连接数,但在 http2.0 中则无需这个步骤,因为 http2.0 的多路复用能够并发地请求文件,因此后端开启 http2.0 单页面应用 单页面应用并不是前端脚手架的独创,使用原生代码也能轻松实现,但是单页面既有优点也有缺点,对于小型应用单页面足够,对于我们中等规模的前端应用,适当分为 2~3 个独立页面即可。
它有这些功能: 开发打包有不同配置 eslint 验证 代码风格统一 commit 规范验证 接口mock 热更新 异步组件 Mock功能介绍 市面上讲前端mock怎么做的文章很多,整体上阅读下来的没有一个真正站在前端角度上让我觉得强大和易用的 下面就说下我期望的前端mock要有哪些功能: mock功能和前端代码解耦 一个接口支持多种mock情况 无需依赖另外的后端服务和第三方库 能在network看到mock接口的请求且能区分 mock数据、 接口配置和页面在同一个目录下 mock配置改变无需重启前端dev 生产打包可以把mock数据注入到打包的js中走前端mock 对于后端已有的接口也能快速把Response数据转化为mock数据 上面的这些功能我讲其中几点的作用 conf: { dev: { title: "前端模板", pathPrefix: "/react-starter", // 统一前端路径前缀 apiPrefix 在线可视化部署前端项目 配置热更新 在线Postman及接口文档 支持前端路由渲染, 支持模板 接口代理及路径替换 Web安全支持 Ajax请求验证,Referer 校验 支持插件开发和在线配置 可实现
新bug又出现即前两天出现z-index不生效后, 后又出现 table 局部全屏下,第二个Modal弹窗,会被第一个Drawer抽题遮挡,如下图,经排查,也不是 z-index问题,最终祭出一个终极解决方案 5、尝试解决思路2:上网查网上总结下几个解决方案:方案1:修改getContainer,改为 body或者全屏元素,如下代码;结论:不可用,不可能每个组件都改一下,太麻烦了。 再使用定位fixed目标元素,改变z-index;问题:position: fixed滚动条无法滚动;原因:position:fixed相对于视口viewport的定位,元素在屏幕滚动时不会发生改变;解决方案 6、尝试解决思路3:终极解决方案根据以上方案带来的思路,发现所有的矛盾点都指向了 局部元素 全屏,因为局部元素 全屏的优先级要比 body 要高,但是所有 Modal、Message等又都是挂载到到body
AJAX 请求不能发送 跨域解决方案 1)jsonp 跨域 关于 jsonp 的原理把握一下几点: 1) html 标签的 src 属性没有同源限制(支持跨域),浏览器解析 script 标签时,会自动下载 目前,所有浏览器都支持该功能(IE8+:IE8/9 需要使用 XDomainRequest 对象来支持 CORS)),CORS 也已经成为主流的跨域解决方案。 XDomainRequest兼容 // 前端设置是否带cookie xhr.withCredentials = true; xhr.open('post', 'http://www.chuchur.com xhrFields: { withCredentials: true // 前端设置是否带cookie }, crossDomain: true, // 会让请求头中包含跨域的额外信息, 实现: 1.)前端代码:
这篇文章介绍了一些使前端应用程序加载更快并提供良好用户体验的技术。 我们将研究前端的总体架构,如何首先加载必需的资源,并最大化资源缓存的概率。
http://www.domain1.com/a.js http://www.domain2.com/b.js 不同域名 不允许 跨域解决方案 目前,所有浏览器都支持该功能(IE8+:IE8/9需要使用XDomainRequest对象来支持CORS)),CORS也已经成为主流的跨域解决方案。 1、 前端设置: 1.)原生ajax // 前端设置是否带cookie xhr.withCredentials = true; 示例代码: var xhr = new XMLHttpRequest(); 前端代码示例: var xhr = new XMLHttpRequest(); // 前端开关:浏览器是否读写cookie xhr.withCredentials = true; // 访问nginx 1.)前端代码示例: var xhr = new XMLHttpRequest(); // 前端开关:浏览器是否读写cookie xhr.withCredentials = true; // 访问http-proxy-middleware
name: 'home', node: document.getElementById('home'), } }, } </script> 解决方案
在ES7中有了更加标准的解决方案,新增 async/await 两个关键词。async 声明一个异步函数,await 操作符用来等待 promise 或任何值。 总结 在前端可能不会遇到太深的嵌套回调问题,在小程序场景下api大部分为异步调用,异步代码嵌套使用场景也更丰富。
如果Reflow的过于频繁,CPU使用率就会噌噌的往上涨,所以前端也就有必要知道 Repaint 和 Reflow的知识。 5、高效使用HTML标签和CSS样式 基本原理: HTML是一门用来描述网页的一种语言,它使用标记标签来描述网页,作为一名合格的前端开发,你有必要去知道其常用标签代表的含义(SEO)和属性(表现形式)。 一名专业的前端开发也是一名优秀的重构,因为在页面中经常会有各种不合理的嵌套和重复定义的CSS样式,我不是要你重构页面,只是希望你在碰到这种情况的时候解决这些问题。 现在由于工作的细分,专业的前端工程师已经少有机会去切图了,可是关于图片压缩还是得略微了解,一般图片压缩的方式有: 1.缩小图片分辨率; 2.改变图片格式; 3.降低图片保存质量。 关于图片精灵(Sprite)技术就和我们工作直接相关,不管是在CSS中的图片还是在HTML结构中的图片都会产生HTTP请求,前端优化的第一条就是减少请求数,最直接有效的方法是使用图片精灵(CSS Sprite
背景: 今天在改功能的时候,居然有一个批量挂接电子文件的这样的一个功能,前端要求选择文件夹? 解决方案: 1:选择多个文件 2:其次前端选择文件夹 如果没有浏览器要求建议使用选择文件夹,比较方便,省的一个一个选,当然,他的缺点就是你必须把要上传的东西放到一个文件夹中 存在的问题: 不是所有的前端浏览器都支持
image.png 关于路径别名 一个前端项目通常会演变成复杂的嵌套目录结构。
本文为前端异步编程解决方案实践系列第二篇,主要分析 Promise 内部机制及实现原理。后续异步系列还会包括 Generator、 Async/Await相关,挖坑占位。 但仔细思考前面解决方案,实际还是以回调函数作为基础,并没有从语法结构来改变异步写法。 区别于普通函数,Generator Function 可以在执行时暂停,后面又能从暂停处继续执行。 异步流程控制 Generator 函数可以暂停和恢复执行,next() 可以做函数内外数据交换,这使得生成器函数可作为异步编程的完整解决方案。 前端很少涉及进程、线程、协程知识点,这里就不在赘述。 可迭代协议和迭代器协议 前面说到迭代器,再顺便解释下 可迭代协议 和 迭代器协议。 目前异步流程最佳解决方案已是 async/await 组合,相比而言语义更清晰,不需要额外自动执行模块。
解决方案: 1、获取性能指标: 使用window.performance.timing API (https://developer.mozilla.org/zh-CN/docs/Web/API/PerformanceTiming
对于前端而言,和后端处于同一个监控系统中,前端有自己的监控方案,后端也有自己等监控方案,但两者并不分离,因为一个用户在操作应用过程中如果出现异常,有可能是前端引起,也有可能是后端引起,需要有一个机制,将前后端串联起来 1.1 前端异常分类 根据异常代码的后果的程度,对前端异常的表现分为如下几类 a. 2.1 采集内容 当异常出现的时候,我们需要知道异常的具体信息,根据异常的具体信息来决定采用什么样的解决方案。 3.1 前端存储日志 我们前面提到,我们并不单单采集异常本身日志,而且还会采集与异常相关的用户行为日志。单纯一条异常日志并不能帮助我们快速定位问题根源,找到解决方案。 接下来,我们究竟应该怎么合理使用IndexedDB,保证我们前端存储的合理性呢? 上图展示了前端存储日志的流程和数据库布局。
大家好,我是前端实验室的大师兄! 今天大师兄要分享的是一套开箱即用的前端解决方案:Ant Design Pro 简介 Ant Design Pro 是基于 Ant Design 和 umi 封装的一整套企业级中后台前端/设计解决方案。 知识概览 Ant Design Pro 是一个综合性的解决方案,涉及的知识点很多。我们可以通过下面的大图来了解整个架构。 每一个部分都是很重要的知识点。 想要了解更多内容,请查阅下方的官方地址 Ant Design Pro地址 https://pro.ant.design/zh-CN/ 写在最后 欢迎加入前端实验室读者交流群,群里有不少技术大神,不定时会分享一些技术要点
本文作者:IMWeb ouven 原文出处:IMWeb社区 未经同意,禁止转载 前端测试一直是前端项目开发过程中机器重要的一个环节,高效的测试方法可以减少我们进行代码自测的时间,提高我们的开发效率 一、前端自动化测试 前端自动化测试一般是指是在预设条件下运行前端页面或逻辑模块,评估运行结果。预设条件应包括正常条件和异常条件,以达到自动运行测试过程、减少或避免人工干预测试的目的。 在前端自动化测试中,我们通常是通过不同的工具来解决不同场景下不同的问题的。 二、单元测试解决方案 就前端而言,单元测试的实现工具比较多。主要有mocha,jasmine和qunit。我们先来看看使用mocha是怎样实现单元测试的。 三、集成化测试解决方案 除了模块单元的测试驱动开发,在系统功能测试阶段,我们希望自动化完成业务功能正确性的检测,此时我们就要考虑集成测试方案了。目前前端集成化测试自动化工具也有比较多。
(异步模式的重要性) 下面就带来几种前端异步解决方案: 一.传统方案 1.回调函数(callback): 异步编程的基本方法。 首先需要声明,回调函数只是一种实现,并不是异步模式特有的实现。 发展:Promise 是异步编程的一种解决方案,比传统的解决方案–回调函数和事件--更合理和更强大。 2.gengerator函数 在异步编程中,还有一种常用的解决方案,它就是Generator生成器函数。
一、模块化开发方案 前端发展到今天,已经有不少模块化的方案,比如 CommonJS(常用在服务器端,同步的,如nodejs) AMD(常用在浏览器端,异步的,如requirejs)(Asynchronous Sea.js 是一个成熟的开源项目,核心目标是给前端开发提供简单、极致的模块化开发体验。这里不多做介绍,有兴趣的可以查看官方文档。 这是一种彻底的命名冲突解决方案。 通过 require 引入依赖。这可以让依赖内置,开发者只需关心当前模块的依赖,其他事情 Sea.js 都会自动处理好。 六、前端模块化的优缺点 1、更好的分离 如果要加载多个就得放置多个 script 标签,如果是加载模块的话,对于 HTML 和 JavaScript 分离很有好处,在某些场景下这个分离度很重要。