![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端学习
文章平均质量分 85
Abelce
一个不太称职的程序员
展开
-
css container 容器查询
inline-size: 为容器的内联轴上的维度查询建立查询容器,就是水平方向建立;size: 为块和内联轴上的维度查询建立查询容器,就是水平和垂直方向都建立;normal:该元素不是块和内联轴上任何维度查询的查询容器,就是水平和垂直方向均bujianli;原创 2022-10-20 16:30:49 · 2241 阅读 · 0 评论 -
手写JSON.stringify
一、JSON.stringify作用将一个对象或值转换成一个JSON字符串。console.log(JSON.stringify({ x: 5, y: 6 }));// "{"x":5,"y":6}"console.log(JSON.stringify(true));// "true"console.log(JSON.stringify(new Date()));// 2020-03...原创 2020-03-02 09:16:22 · 785 阅读 · 2 评论 -
bind、call、apply实现
if (!Function.prototype.bind) {Function.prototype.bind = function(that) {if (typeof this === ‘function’) {throw new TypeError(‘Function.prototype.bind - what is trying to be bound is not callable’)...原创 2019-03-30 17:40:50 · 100 阅读 · 0 评论 -
a == 1 && a == 2 && a == 3
方法一:var a = { value: 1, toString: function() { return this.value++; }, valueOf: function() { return this.value++; }}有其他方法希望交流学习...原创 2019-04-01 15:49:08 · 144 阅读 · 0 评论 -
prerender-spa-plugin linux运行报错问题
使用prerender-spa-plugin进行react预渲染时,本地开发打包没问题,但在服务器上部署是,出现Error: Failed to launch chrome!在服务器上分别执行下面两行命令即可yum install pango.x86_64 libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 libXext.x...原创 2019-04-16 15:37:49 · 1770 阅读 · 0 评论 -
base64转码、解码
最近有业务需要使用base64转码,现在整理一下转码window.btoa解码window.atob示例window.btoa("test") // dGVzdA==window.atob("dGVzdA==") // test如果字符串中包含中文,直接使用btoa会报错,可以先使用encodeURIComponent进行编码window.btoa(window.en...原创 2019-04-22 19:29:17 · 203 阅读 · 0 评论 -
初探web component的使用(一)
Web Components是一套不同的技术,允许您创建可重用的定制元素(它们的功能封装在您的代码之外)并且在您的web应用中使用它们。web component主要由四项主要技术组成:custome element、shadow DOM、HTML template、HTML imports,可参考MDN。一、customElements示例customeElements.define...原创 2019-05-15 18:38:52 · 1835 阅读 · 0 评论 -
web component使用(二)
web components中可以将html、css和行为封装在一起,就可以与页面上的其他功能分离开来,使代码更加干净,这些都是Shadow DOM来完成的。定义Shadow DOM将隐藏的DOM树添加到常规的DOM树中,它以shadow root为根结点,在根结点的下方,可以是任意的元素,和普通的DOM元素一样。图片来源于MDNshadow host: 一个常规DOM,Shad...原创 2019-05-27 23:14:46 · 417 阅读 · 0 评论 -
web component使用(三)
使用template和slot创建弹性模版,提高组件的灵活性template在网页上使用重复的html的时候,使用模版<template>比直接复制显然是更好的选择,不会被DOM直接的渲染出来,但通过javascript可以获取到 <template id="custome-detail"> <style> ...原创 2019-06-02 13:46:57 · 628 阅读 · 0 评论 -
img标签的title和alt
titletitle属性用于鼠标放在图片上时,显示的文字altalt在图片链接无效或没有时显示的文本,用于代替图片原创 2019-07-01 17:36:23 · 378 阅读 · 0 评论 -
浏览器性能优化
在工作中会碰到各种各样性能问题,本文根据自己在工作中的实践并且结合各方面了解到的知识形成,可能不会谈到具体的实现,只描述可能的方向,包括如下:js/css加载、第三方js加载、CDN、图片懒加载、首屏渲染、react性能优化、webpack打包、浏览器缓存、预加载、预解析一、浏览器缓存缓存可以显著提高浏览器加载速度。通常使用的缓存有两种:强缓存、协商缓存浏览器使用缓存过程如下:浏...原创 2019-09-10 09:33:43 · 113 阅读 · 0 评论 -
页面性能调优
最近利用闲的时间对页面进行优化,这次不是对项目的代码进行优化,而是从网络方面入手,所以不全面。使用cdn项目去年就开始使用cdn,所以这次只是进行设置的调整cdn里面设置缓存时间,尽可能的长一点(一年)。开启http2,利用http2的特性加快资源的加载(需要先开启https)。升级http2由于部分项目没有采用cdn,所以还是有必要升级,结果可以是加速两秒(公司服务器国外,速...原创 2019-09-24 19:54:55 · 116 阅读 · 0 评论 -
强制缓存和协商缓存
浏览器缓存是浏览器在本地对用户最近请求的文档进行存储,当用户再次请求同一个页面时,就可以直接从本地读取数据的行为。浏览器缓存的优势:减少了冗余数据的传输,节省了网费。减小了服务器的负担,提升了网页的性能。加快了客户端加载网页的速度。缓存的分类缓存可以分为两类:强制缓存和协商缓存强制缓存强制缓存是利用http返回头中的Expires和Cache-Control两个字段来控制,...转载 2019-03-14 20:28:43 · 337 阅读 · 0 评论 -
XSS
xss(跨站脚本攻击)是攻击者再web页面输入script代码,用户打开这个页面时,script代码执行,达到攻击的目的分类XSS可以分为:DOM Based XSS、服务器存储的XSSDOM Based XSS例如a.com网站的URL中有content参数,并且页面的内容跟content有关,那么我们可以跟使用这个网站的用户发送一个超链接http://www.a.com?cont...原创 2019-03-14 20:23:49 · 920 阅读 · 0 评论 -
跨站请求伪造(CSRF)
CSRF(跨站请求伪造)攻击者盗用了你的身份,以你的名义发起请求。原理从图中可以看出,要完成一次CSRFF攻击,需要两个步骤:用户C登陆A,并获得cookie在不登出A的情况下,访问危险网站B由于你无法保证在打开危险网站B时登出了A(或者是登陆过期)...原创 2019-03-14 20:22:48 · 157 阅读 · 0 评论 -
Resize Observer使用
Resize Observer是一个新的JavaScript API,与Intersection Observer API、Mutation Observer等其他观察者API非常相似。 它允许在尺寸发生变化时通知元素。基本用法使用Resize Observer非常简单,只需实例化一个新的ResizeObserver对象并传入一个回调函数,该函数接收观察到的条目const.........原创 2018-05-09 21:26:07 · 4716 阅读 · 0 评论 -
URlSearchParams的使用
前几天读axios的源码时看到了URLSearchParams,现在对其做一个简单的介绍。一、作用用于处理url中的查询字符串构造函数URLSearchParams()构造并返回一个实例,开始的”?”字符将被忽略。var url = new URL('https://example.com?foo=1&bar=2');var params = new URLS...原创 2018-06-02 00:17:38 · 7360 阅读 · 0 评论 -
ruby元素
今天看大漠的文章时见到了ruby元素,所以打算记录下来,仅做参考,如有欠妥,欢迎指正。目前只有Firefox浏览器有较好的支持。ruby是用于对东南亚字形进行注释,就像语文课本的拼音: 例如: 中 zhong 国 guo <ruby> <rb>中</rb> <rt>zhong</rt&g...原创 2018-06-26 21:57:44 · 291 阅读 · 0 评论 -
es6学习(一)
这篇文章介绍本人在es6使用过程中遇到的一些问题,是本人没有理解透语法造成的问题。箭头函数在class中的运用 直接看效果,有如下代码: class A { onChange = () => { console.log('A') } } class B extends A { onChange = () => { su...原创 2018-06-27 00:42:28 · 253 阅读 · 0 评论 -
css使用笔记
:focus-within这个伪类和:hover很相似,是在使用了:focus-within的元素或其子元素成为焦点时显现。比如使表格的某一行高亮,hover在使用鼠标时很好用,但是如果使用tab键获取焦点后,使当前行高亮,可以使用javascript,更简单的方式是使用:focus-within....原创 2018-08-27 22:28:52 · 101 阅读 · 0 评论 -
for-in、Object.keys()、Object.getOwnPropertyNames()的区别
for-in遍历对象本身和原型链上的所有可枚举的属性名Object.keys()返回对象本身所有可枚举的属性名数组Object.getOwnPropertyNames()返回对象本身的所有属性名组成的数组(包括不可枚举、但不包括Symbol值作为名称的属性...原创 2018-09-26 15:54:06 · 311 阅读 · 0 评论 -
Object. defineProperty()学习笔记
Object. defineProperty()用于在一个对象上添加或者修改属性,并返回这个对象。Object. defineProperty(obj, prop, descriptor)参数obj: 目标对象,要在上面添加或修改属性的对象prop:要定义或修改的属性descriptor:属性描述符通过赋值操作添加的属性是可以枚举的,可以使用for-in、Object.key...原创 2018-09-27 00:17:23 · 174 阅读 · 0 评论 -
css行数限制
<style>.text1 {/*单行*/ width:200px; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; -webkit-text-overflow:ellipsis; -moz-text-overflow:ellipsis; white-space:n...原创 2019-03-14 20:14:55 · 278 阅读 · 0 评论 -
点击劫持
点击劫持(clickjacking):点击劫持实际上是一种视觉欺骗,攻击者将一个透明的iframe覆盖在一个网页上,通过调整iframe的位置,诱使用户在页面上进行操作,在不知道情的情况下用户恰好点击在iframe上的功能按钮上。防御使用http头中的x-frame-option,她有三个可能的值:DENY: 拒绝浏览器加载任何的iframeSOMEORIGIN: ifame页面的地址...原创 2019-03-14 20:16:44 · 183 阅读 · 0 评论 -
css模型
一、盒子模型内容范围包括:margin、border、padding、content主要属性包括:width、height、padding、border、margin 1. width: 内容的宽度 2. height:内容的高度 3. padding:内边距 4. margin: 外边距二、属性使用2.1 margin默认值: 0示例:margin: 10px;四个外边距都是10原创 2017-11-05 14:11:17 · 141 阅读 · 0 评论