web
题词策
总有一天你会站在世界最亮的地方。活成自己渴望的模样
展开
-
mixin(公共样式定义)
minxin公用样式src/scss/_mixin.scss//宽高@mixin wh($width, $height) { width: $width; height: $height; display: block;}//超出一行变成...@mixin ellipsis() { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: norm原创 2020-06-27 13:59:02 · 1426 阅读 · 0 评论 -
PWA(渐进式 web 应用)
Progressive Web Application背景PWA 全称是渐进式 web 应用,它是用一系列前端技术来实现的,目标是提供类似原生APP一样的体验。解决的问题:Web 的用户体验首屏加载速度网页离线无法访问用户留存Native App 安装完毕桌面上有一个入口Native App 能够通过发送通知让用户再次回到应用中来Web App需要记住URL并输入地址Device API 的不完善Native App 更方便访问设备硬件和设备上的数据WebAPI原创 2020-06-27 09:38:06 · 556 阅读 · 0 评论 -
JS线程__详解
JS线程很多文章在介绍线程以及线程之间的关系,都存在着脱节的现象。还有的文章过于广大,涉及到了内核,本文希望以通俗易懂的话去描述晦涩的词语,可能会和实际有一丢丢的出入,但是更易理解。我们都知道JS是单线程的,即js的代码只能在一个线程上运行,也就说,js同时只能执行一个js任务,但是为什么要这样呢?这与浏览器的用途有关,JS的主要用途是与用户互动和操作DOM。设想一段JS代码,分发到两个并行互不相关的线程上运行,一个线程在DOM上添加内容,另一个线程在删除DOM,那么会发生什么?以哪个为准?所以为了避免原创 2020-06-15 09:29:39 · 3275 阅读 · 1 评论 -
常见兼容问题
如何处理兼容问题在JS代码里使用对象检测,判断该特性是否支持 eg:‘XMLHttpRequest’ in window‘WebkitMask’ in document.documentElement.style使用postcss做样式的后处理样式问题清除浏览器默认样式引入common.css或reset.css重置默认样式引入common.css或reset.css重置默认样式引入common.css或reset.css重置默认样式;Ios滑动卡顿问题body {-webk原创 2020-06-12 00:02:33 · 272 阅读 · 0 评论 -
React生命周期
React生命周期1、componentDidMount() // 组件挂载完成之后触发的生命周期 相当于vue的mountedcomponentDidMount(){ setInterval(()=>{ // 修改state的唯一方法 // @param 要修改的数据 // @param 修改完成之后的回调函数 this.setState({ index:this.state.index++原创 2020-06-09 20:48:19 · 1524 阅读 · 5 评论 -
阿里巴巴笔试+面试
阿里面试考查知识点安全方面:XSS: 跨站脚本攻击(通过input框或者地址栏注入js脚本)CSRF:跨站请求伪造(通过浏览器请求自动携带cookie)SQL注入:路由相关:路由模式(hash,browser)路由传参(url,state, path+query, name+params)路由监听(beforeEach, afterEach, subscribe)路由原理(hashChange + popState)webpack:entryoutputmodules原创 2020-06-09 14:51:07 · 767 阅读 · 2 评论 -
什么是BFC?(CSS)
前言(BFC 神奇背后的原理)BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等)。虽然我知道如何利用 BFC 解决这些问题,但当别人问我 BFC 是什么,我还是不能很有底气地解释清楚。于是这两天仔细阅读了CSS2.1 spec 和许多文章来全面地理解BFC。一、BFC是什么?在解释 BFC 是什么之前,需要先介绍 Box、Formatting Context的概念。Box: CSS布局的基本原创 2020-06-09 10:27:43 · 307 阅读 · 0 评论 -
前端必看面试(CSS/JS/ES5/ES6等等)
CSS篇:盒模型:怪异模式:box-sizing = border-box, width = content+padding+border标准模式:box-sizing = content-box, width = content垂直居中方法:// 不定宽高{ position: fixed; top: 0; bottom: 0; left: 0; right: 0;}{ display: flex; align-items: ce原创 2020-06-09 10:13:13 · 684 阅读 · 4 评论 -
网络安全
网络安全重要性随着互联网的发达,各种WEB应用也变得越来越复杂,满足了用户的各种需求,但是随之而来的就是各种网络安全的问题。了解常见的前端攻击形式和保护我们的网站不受攻击是我们每个优秀fronter必备的技能。分类XSS攻击CSRF攻击网络劫持攻击(运营商劫持)控制台注入代码虚假网站钓鱼XSS攻击XSS是一种经常出现在web应用中的计算机安全漏洞,为了和 CSS 区分,这里把攻击的第一个字母改成了X,于是叫做XSS,它允许恶意web用户将代码植入到提供给其它用户使用的页面中原创 2020-06-08 23:07:25 · 350 阅读 · 0 评论 -
项目优化
项目优化为什么需要项目优化在互联网快速发展的今天,在实现完功能之后,项目优化是一个被经常提到的话题。很多项目会在开发排期中留大量时间去做一轮又一轮的性能优化,就是为了让页面尽可能早的到达用户,提高交互的流畅程度。在系统可利用系统资源有限的大背景下,3秒呈现内容的原则下,项目优化显得格外重要。每减少0.1秒加载速度可能会给你带来几百甚至几千的用户活跃;每减少100K的内容请求可能会给你带来几千甚至几万的的服务端费用;每提高10%的交互流畅度可能给你带来几万甚至几十万的销售额。于情于理,我们都需要去原创 2020-06-08 22:51:56 · 750 阅读 · 0 评论 -
前后端是如何交互的
前后端是如何交互的iOS,H5,安卓等前端开发的如何跟后台进行交互?应该怎么去规避一些不该属于自己的任务而被后台强加于自己?1.前端请求数据URL由谁来写?在开发中,URL主要是由后台来写的,写好了给前端开发者.如果后台在查询数据,需要借助查询条件才能查询到前端需要的数据时,这时后台会要求前端提供相关的查询参数,这里的查询参数也就是URL请求的参数。2.接口文档主要由谁来写?接口文档也是主要由后台开发者来写的,因为直接跟数据打交道的就是后台,后台是最清楚,数据库里面有什么数据,能返回什原创 2020-06-08 22:31:05 · 264 阅读 · 0 评论 -
开发流程
开发流程图解需求评审召集需求涉及到的UI、开发、产品、测试人员整理业务流程,同步信息,明确分工 明确需求目的,考虑当前需求设计是否可满足目的 整理流程中如果涉及的其他人员,则召集商讨 如需求设计上影响现有业务功能,应要求产品重新设计实现方案,然后重新评审注意事项业务流程同步:评审后重新梳理流程,存在疑问处及时找产品沟通 周边需求依赖:评审功能与依赖功能并行开发,由于前置需求未完成导致当前需求时间成本被压缩 埋点需求:提前与产品明确是否需要埋点 造数据:提前了解测试数据制造的困难程度,原创 2020-06-08 22:23:23 · 246 阅读 · 1 评论 -
浏览器的缓存
浏览器的缓存概念:浏览器缓存主要是指http请求的缓存,作用是不言而喻的,能够减少资源请求,极大的改善网页性能,提高用户体验。浏览器第一次获取到资源后,然后根据返回的信息来告诉如何缓存资源,可能采用的是强缓存,也可能告诉客户端浏览器是协商缓存,这都需要根据响应的header内容来决定的。同时当相应header里没返回cache-control和expires的时候,浏览器可以根据LM-Factor算法计算出一个试探性最大使用期。图解:资源请求分类对比分析从上面分类很容易看出缓存分为强原创 2020-06-08 22:06:08 · 326 阅读 · 0 评论