随笔分类 - 1_前端（前端测试、react等）
摘要：前端性能优化 2、图片响应式加载 一、总结 一句话总结： 图片响应式加载 就是根据不同的显示情况，在不太影响显示效果的情况下，加载最小的资源，以提高用户的响应速度。 二、图片响应式加载 博客对应课程的视频位置：2、图片响应式加载https://www.fanrenyi.com/video/22/18
阅读全文
摘要：前端性能优化 1、懒加载和复杂资源点击时再请求 一、总结 一句话总结： 懒加载和复杂资源点击时再请求 的原理和作用都是一样的，都是等到资源要用的时候再去请求，这样可以降低最初用户加载页面的响应时间，也可能可以在一定程度上降低服务器的负载 二、懒加载和资源点击时再请求 博客对应课程的视频位置：1、懒加
阅读全文
摘要：设置跨域资源共享 一、总结 一句话总结： 服务器带Access-Control-Allow-Origin 这个 Header，浏览器根据服务器的header里面有没有Access-Control-Allow-Origin进行拦截 1、CORS 通过 HTTP 请求中附带 Origin 的 Heade
阅读全文
摘要：阿里云oss解决资源跨域 一、总结 一句话总结： 阿里云oss资源跨域的话，在oss的跨域规则里面设置一下就好了，来源的话写要跨域的网站，也就是referer，Allowed Methods可以写get、post、head，Allowed Headers可以是*号，其它默认即可 二、阿里云oss解决
阅读全文
摘要：oss中字体文件跨域 一、总结 一句话总结： 字体文件跨域的话，在oss的跨域规则里面设置一下就好了，来源的话写要跨域的网站，也就是referer，Allowed Methods可以写get、post、head，Allowed Headers可以是*号，其它默认即可 二、oss中字体文件跨域 转自或
阅读全文
摘要：legend3 阿里云oss无法加载font-awesome字体 一、总结 一句话总结： 跨域和防盗链：先设置字体文件跨域，再要小心字体文件是css的相对引用，所以具体调用字体文件的时候referer是服务器，是css在调用，所以防盗链白名单里面要加上 本oss，而且报的403错误，一下子就应该想到
阅读全文
摘要：OSS上无法使用字体文件解决方案 一、总结 一句话总结： 跨域和防盗链：先设置字体文件跨域，再要小心字体文件是css的相对引用，所以具体调用字体文件的时候referer是服务器，是css在调用，所以防盗链白名单里面要加上 本oss，而且报的403错误，一下子就应该想到防盗链 二、OSS上无法使用字体
阅读全文
摘要：php和apache设置Access-Control-Allow-Origin 头跨域 一、总结 一句话总结： php就是header方法设置响应头，apache的话可以直接在vhost下Header set来设置响应头 php: $origin = 'https://www.google.com,
阅读全文
摘要：http请求头中Referer的含义和作用 一、总结 一句话总结： 什么是Referer：Referer表示请求的来源，比如什么网站经过链接跳转过来的 Referer作用：Referer是 防盗链 和 防止恶意请求 1、什么是Referer？ 什么是Referer：Referer表示请求的来源，比如
阅读全文
摘要：阿里云oss存储静态资源 一、总结 一句话总结： 阿里云oss存储静态资源的时候，静态资源可以通过oss客户端来导入，支持文件夹结构和很多文件，非常方便 二、oss存储静态资源 转自或参考：用oss储存云服务的js,css图片文件,是怎么做的呢? - 的回答 - SegmentFault 思否htt
阅读全文
摘要：前端跨域请求及解决方案 一、总结 一句话总结： 跨域请求是当前发起请求的域（协议、域名、端口）与该请求指向的资源所在的域不一致，常见的解决方式有 JSONP、跨域资源共享CORS、反向代理等 1、JSONP2、跨域资源共享CORS（Cross-Origin Resource Sharing）3、反向
阅读全文
摘要：Access-Control-Allow-Origin跨域 一、总结 一句话总结： 1、跨域中，Access-Control-Allow-Origin，标识允许哪个域的请求。 2、当然，如果服务器不通过，根本没有这个字段，接着触发XHR的onerror，再接着你就看到浏览器的提示xxx的服务器没有响
阅读全文
摘要：head请求是什么 一、总结 一句话总结： HEAD方法跟GET方法相同，只不过服务器响应时不会返回消息体。一个HEAD请求的响应中，HTTP头中包含的元信息应该和一个GET请求的响应消息相同。这种方法可以用来获取请求中隐含的元信息，而不用传输实体本身。也经常用来测试超链接的有效性、可用性和最近的修
阅读全文
摘要：base64格式1*1的透明色块 一、总结 一句话总结： lazy load的时候，图片的src可以用1px的base64格式透明色块：data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNg
阅读全文
摘要：jpg与png图片的优缺点 一、总结 一句话总结： png是无损压缩，所以图片较大，jpg是有损压缩，所以图片较小，所以网页中尽量用jpg格式的图片 1、jpg格式图片优缺点？ jpg优点：尺寸较小，节省空间；打开速度快 jpg缺点：有损格式，在修图时不断保存会导致图片质量不断降低；不支持透明 2、
阅读全文
摘要：前端性能优化之重排和重绘 一、总结 一句话总结： 重绘（repaint或redraw）：当盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来之后，浏览器便把这些原色都按照各自的特性绘制一遍，将内容呈现在页面上。 重排（重构/回流/reflow）：当渲染树中的一部分(或全部)因为元素的规模尺
阅读全文
摘要：谷歌浏览器 Unchecked runtime.lastError: The message port closed before a response was received. 一、总结 一句话总结： 原因是chrome扩展程序的问题，逐一排查，关闭即可 二、谷歌浏览器 Unchecked ru
阅读全文
摘要：前端面试题总结 一、总结 一句话总结： 还是求职或者面试的时候学习效率和做事效率要高一点，而且还能有急迫感，建议保持 1、弹性盒子实现水平垂直居中？ display: flex设置弹性盒子，然后弹性盒子水平属性和垂直属性都设置为center即可 #wrap { display: flex; just
阅读全文
摘要：重新认识caniuse 一、总结 一句话总结： can i use网站可以查询css、js等的一些兼容性，比如不同浏览器对flex弹性布局属性的支持，网站地址：https://www.caniuse.com/ 二、重新认识caniuse（转） 转自：https://segmentfault.com/
阅读全文
摘要：前端超级实用技巧 2、css、js兼容性查询网站can i use 一、总结 一句话总结： can i use网站可以查询css、js等的一些兼容性，比如不同浏览器对flex弹性布局属性的支持，网站地址：https://www.caniuse.com/ 二、css、js兼容性查询网站can i us
阅读全文
浙公网安备 33010602011771号