iframe懒加载_前端常见问题
原地址:https://blog.csdn.net/Mr_JavaScript/article/details/84311068
1. flex布局:又叫做弹性布局
任何一个容器都可以指定flex布局,如display:flex 或 display:inline-flex
注意:设置了flex布局以后,子元素的float,clear,vertical-align属性将失效
容器的属性:
flex-direction flex-wrap flex-flow justify-content align-items align-content
2. js有哪些遍历数组的方法
es5方法:
(1)for循环:通过下标遍历数组的每一项
(2)array.forEach(item, index, array)
(3) array.map(item, index, array => return 格式化数组)
(4) array.filter(item, index, array => return 过滤条件)
(5) array.every(((item, index, array)=>{ return //判断条件 }))
如果每个元素都符合条件,则返回true,否则返回false;
6)array.some(((item, index, array)=>{ return //判断条件 }))
只要有一个元素符合条件,就返回true,否则返回false;
7)array.reduce((prev,cur,index,array)=>{})
从左到右遍历数组,并返回回调函数的值(应用于求和,求幂等);prev为上一轮函数执行结果(previousResult),cur为当前值(currentValue)
8)array.reduceRight((prev,cur,index,array)=>{})
从右到左遍历数组,并返回回调函数的值;
ES6方法:
1)for(let item of array){ //等到每个元素 }
for(let index of array.keys()) { //keys()返回数组的键(index) }
for(let keyAndValue of array.entries()){ //entries()返回数组的键值对(index:element) }
2)array.find((value, index, array)=>{ return //条件 }
返回第一个符合条件的元素,如果没找到返回undefined(找到第一个符合条件的元素,则停止遍历)
3)array.findIndex((value, index, array)=>{ return //条件 }
返回第一个符合条件的元素下标,如果没找到则返回-1(找到第一个符合条件的元素,则停止遍历)
3、箭头函数的特性
1)箭头函数是匿名函数,自身没有this和arguments,它的this从上下文捕捉而来;
2)箭头函数不能作为构造函数,和 new 一起用就会抛出错误;
3)箭头函数没有原型属性(prototype);
4)箭头函数不能当做Generator函数,不能使用yield关键字;
5、MVVM模式介绍
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定。
beforeCreate() 创建组件
created() 创建完成
beforeMounte() 组件被挂载前
mounted() 组件挂载完成
beforeUpdate() 组件更新前
updated() 组件更新后
beforeDestory() 组件摧毁前
destoryed() 组件摧毁后
7、Vue数据双向绑定原理
vue.js是采用数据劫持结合发布者-订阅者模式的方式实现数据双向绑定,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调,从而更新视图层的数据。
vue的数组如何实现的双向绑定
9、web缓存
http请求头缓存
1)强制缓存:
第一次请求即把数据缓存起来,在缓存数据未失效的情况下,之后的请求都直接使用缓存数据。
缓存规则(header里配置) Cache-Control,参数:private(客户端可以缓存),public(客户端和代理服务器都可缓存),max-age=xxx 缓存时长(s),no-cache使用缓存前,再向服务器发送验证请求,no-store禁止缓存。
2)协商缓存:
第一次请求时拿到缓存数据和缓存标识,再次请求时向服务器发送缓存标识,服务器判断缓存是否有效,若有效则返回304状态码,请求数据从缓存读取,若无效则返回202,需要重新发送http请求数据。
缓存数据的修改时间(header里配置) Last-Modified(第一次请求) 数据最后修改时间,If-Modified-Since(再次请求)上次请求时的最后修改时间。
缓存标识(header里配置):Etag(第一次请求)由服务器生成的唯一标识,If-None-Match(再次请求)第一次请求获取的唯一标识。
常用浏览器缓存
1)Cookie主要用于用户信息的存储,Cookie的内容可以自动在请求的时候被传递给服务器;
2)LocalStorage的数据将一直保存在浏览器内,直到用户清除浏览器缓存数据为止;
3)SessionStorage的其他属性同LocalStorage,只不过它的生命周期同标签页的生命周期,当标签页被关闭时,SessionStorage也会被清除;
4)IndexDB主要用在前端有大容量存储需求的页面上,例如,在线编辑浏览器或者网页邮箱。
10、web跨域方式
同源策略:协议,域名,端口三者中有一个不同就算跨域。
跨域方式:
1)JSONP,通过
2)CORS “跨域资源共享”(Cross-origin resource sharing),它允许浏览器向跨源服务器,发出XMLHttpRequest请求。分为简单请求和非简单请求;(浏览器自动完成)
3)WebSocket(网络通信协议),不受同源的限制,可在客户端和服务器端之间双向通信;(客户端可以向服务器发送请求,服务器也可以向客户端发送请求,而http只能由客户端向服务器发送请求,不能反过来)
4)postMessage(),H5新增的跨域通信方法。应用场景:窗口 A (http:A.com)向跨域的窗口 B (http:B.com)互通信息;
5)Hash,原理:Hash的改变,页面不会刷新。应用场景:A 通过iframe或frame嵌入了跨域的页面 B,A与B间可以通过hash通信。(A和B的domain相同)
12、大数的加减乘除
1)使用插件:如bignumber.js、bigInteger.js
13. 判断两个单链表是否相交及找到第一个交点
如果两个单链表有共同的节点,那么从第一个共同节点开始,后面的节点都会重叠,直到链表结束。
因为两个链表中有一个共同节点,则这个节点里的指针域指向的下一个节点地址一样,所以下一个节点也会相交,依次类推。所以,若相交,则两个链表呈“Y”字形。如下图:
1.暴力解法。
从头开始遍历第一个链表,遍历第一个链表的每个节点时,同时从头到尾遍历第二个链表,看是否有相同的节点,第一次找到相同的节点即第一个交点。若第一个链表遍历结束后,还未找到相同的节点,即不存在交点。时间复杂度为O(n^2)。这种方法显然不是写这篇博客的重点。。。不多说了。
2.使用栈。
我们可以从头遍历两个链表。创建两个栈,第一个栈存储第一个链表的节点,第二个栈存储第二个链表的节点。每遍历到一个节点时,就将该节点入栈。两个链表都入栈结束后。则通过top判断栈顶的节点是否相等即可判断两个单链表是否相交。因为我们知道,若两个链表相交,则从第一个相交节点开始,后面的节点都相交。
若两链表相交,则循环出栈,直到遇到两个出栈的节点不相同,则这个节点的后一个节点就是第一个相交的节点。
3.遍历链表记录长度。
同时遍历两个链表到尾部,同时记录两个链表的长度。若两个链表最后的一个节点相同,则两个链表相交。
有两个链表的长度后,我们就可以知道哪个链表长,设较长的链表长度为len1,短的链表长度为len2。
则先让较长的链表向后移动(len1-len2)个长度。然后开始从当前位置同时遍历两个链表,当遍历到的链表的节点相同时,则这个节点就是第一个相交的节点。
4.哈希表法。
既然连个链表一旦相交,相交节点一定有相同的内存地址,而不同的节点内存地址一定是不同的,那么不妨利用内存地址建立哈希表,如此通过判断两个链表中是否存在内存地址相同的节点判断两个链表是否相交。具体做法是:遍历第一个链表,并利用地址建立哈希表,遍历第二个链表,看看地址哈希值是否和第一个表中的节点地址值有相同即可判断两个链表是否相交。
我们可以采用除留取余法构造哈希函数。
构造哈希表可以采用链地址法解决冲突。哈希表冲突指对key1 != key2,存在f(key1)=f(key2),链地址法就是把key1和key2作为节点放在同一个单链表中,这种表称为同义词子表,在哈希表中只存储同义词子表的头指针,如下图:
14. 一行代码实现数组去重?
[...new Set([1,2,3,1,'a',1,'a'])]
15. 怎么判断两个对象相等?
最开始的思路是遍历来判断,但是最后好像没有说清楚,查了下,好像可以转换为字符串来判断。
JSON.stringify(obj)==JSON.stringify(obj2);//trueJSON.stringify(obj)==JSON.stringify(obj3);//false
16. 项目做过哪些性能优化?
1、减少HTTP请求数
2、减少DNS查询
3、使用CDN
4、避免重定向
5、图片懒加载
6、减少DOM元素数量
7、减少DOM操作
8、使用外部JavaScript和CSS
9、压缩JavaScript、CSS、字体、图片等
10、优化CSS Sprite
11、使用iconfont
12、字体裁剪
13、多域名分发划分内容到不同域名
14、尽量减少iframe使用
15、避免图片src为空
16、把样式表放在 中
17、把脚本放在页面底部 欢迎补充。。。
17. 模块化开发是怎么做的?
使用命名空间。
18. Vue router 跳转和 location.href 有什么区别?
router是hash改变location.href是页面跳转,刷新页面
19. Set 和 Map 数据结构
ES6提供了新的数据结构Set它类似于数组,但是成员的值都是唯一的,没有重复的值。
ES6提供了Map数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object结构提供了“字符串—值”的对应,Map结构提供了“值—值”的对应,是一种更完善的Hash结构实现。
20. 实现一个deepclone函数
function deepClone(obj) {
let objClone = Array.isArray(obj) ? [] : {};
if (obj && typeof obj === "object") {
for (key in obj) {
if (obj.hasOwnProperty(key)) {
//判断ojb子元素是否为对象,如果是,递归复制
if (obj[key] && typeof obj[key] === "object") {
objClone[key] = deepClone(obj[key]);
} else {
//如果不是,简单复制
objClone[key] = obj[key];
}
}
}
}
return objClone;
}
// 测试代码
let a = [1, 2, [1,5], 4],
b = deepClone(a);
a[0] = 2;
a[2][0] = 5;
console.log(a, b);
21. diff比较方式
22. vuex
23. cookie
24. computed methods watch
25. css js预加载
26. 实现继承的几种方式
27. 原型 原型链
28. 事件循环
29. 数组方法
30. 请求头 响应头
iframe懒加载_前端常见问题相关推荐
- dll文件懒加载_前端性能优化
# 前端性能优化 写在最前面:下面都是我对webpack的一些性能优化,想系统的学习性能优化方面的知识 推荐大家看看这本书 很系统 感觉面试也能如鱼得水 ## 构建优化 ### webpack优化 ( ...
- iframe懒加载_如何实现图片懒加载
背景 图片懒加载是针对图片加载时机的一种优化,在一些图片量比较大的网站(比如电商网站首页,或者团购网站.小游戏首页等),如果我们尝试在用户打开页面的时候,就把所有的图片资源加载完毕,那么很可能会造成白 ...
- iframe懒加载_懒加载是如何实现的?
作为网页内容的一部分,图像和视频通常要消耗很多资源加载.要提高网页应用的性能,如何避免资源浪费在加载图像和视频上就很重要了.但是,很多时候我们都不愿意减少网页上的媒体资源,所以我们经常无从下手.幸运的 ...
- js让iframe延时加载_延迟加载IFRAME
js让iframe延时加载 We've known for a decade that lazy loading resources like JavaScript, CSS, and especia ...
- vue路由懒加载_优化vue项目的首屏加载速度
最近使用vue-cli3构建了一个小型的博客系统,完工之后,build打包出来发现一个chunk-vendors包就有1.1m,部署上去之后,访问的时候,首屏加载非常慢.居然需要21s,体验极差. 这 ...
- spring预加载与懒加载_通过Spring将继承树加载到List中
spring预加载与懒加载 我注意到有趣的Spring功能. 我的一位同事使用它将Spring Bean的整个继承树加载到列表中. 在学习Spring文档时错过了这一点. 让我们来看看Spring b ...
- dll文件懒加载_一步步学习NHibernate(5)——多对一,一对多,懒加载(2)
请注明转载地址:http://www.cnblogs.com/arhat 通过上一章的学习,我们建立了Student和Clazz之间的关联属性,并从Student(many)的一方查看了Clazz的信 ...
- Java对图片懒加载_[Java教程]JQuery实现图片懒加载_星空网
JQuery实现图片懒加载 2018-08-16 0 懒加载的原因: 对于图片过多的场景,为了提高页面的加载速度,降低服务器的负载,增强用户体验,我们对还没出现在视野的图片先不加载,当元素出现在我们视 ...
- 模块化加载_前端模块化简单总结
来源 | http://www.fly63.com/article/detial/9827 前言 JavaScript初期就是为了实现简单的页面交互逻辑,如今CPU.浏览器性能得到了极大的提升,很多页 ...
最新文章
- t-top 命令详解
- UNION会自动删除重复项,union与union all的差异
- 程序员转正述职报告_程序员转正述职报告范文
- 快学Scala-第八章 继承
- C++Jump Search跳转搜索的实现算法(附完整源码)
- linux:scp命令
- golang中的类和接口的使用
- 机器学习中的不平衡分类方法(part5)--决策树与随机森林
- php导出页面居中设置,PHPExcel导出插入图片和居中问题
- 英语笔记:写作:Nothing succeeds without a strong will
- 2019年Java程序设计讲课笔记目录
- 第5章 简易毛笔字(《Python趣味创意编程》教学视频)
- SpringNote01.基于SpringMVC-Hibernate的Blog系统
- Qt之指针与float--setNum使用
- 时间序列深度学习:状态 LSTM 模型预测太阳黑子(二)
- 分享过滤条件中增加一个自定义过滤变量插件代码
- 记录mt7615e wifi 驱动移植到openwrt cc
- 韩顺平 教学资料下载
- 微信小程序制作-----日历记事本
- Normalized Cut的C++代码 Linux Win
热门文章
- javaScript第六天(1)
- 51NOD 1125(交换机器最小代价) (贪心) 思想 !思想!
- jQuery 操作 CSS
- Print! Print! Print!
- 使用MeanJS Yeoman Generator
- 标准模板库(STL)学习指南之List容器
- 设计模式C++学习笔记之十三(Decorator装饰模式)
- 多语言制作工具(2013-01-24更新,支持VS2005、2008、2010、2012)(已开源)
- v-slot vue2.6新增指令使用指南
- 初次就这么给了你(Django-rest-framework)