文章目录
- 基础知识掌握
- CDN(内容分发网络)加速原理
- DOM
- 服务端渲染和客户端渲染
- XSS
- 排序算法的时间复杂度
- 盒子模型
- webpack
- fetch
- ES6基本数据类型
- 应用层协议
- 浏览器缓存
- 前端跨域问题的解决
- UTF-8和GBK
- js的模块规范
- css属性能触发GPU的硬件加速
- MD5 SHA1 Base64 DSA
- CDN技术原理
- 对于元素塌陷问题的解决
- webpage
- http
- 元素居中
- react 常见问题
- vue常见问题
- MVVM的理解
- js的数据双向绑定
- vue组件间的参数传递
- 父与子传递参数
- 兄弟组件传值
- 路由
- vue-router路由钩子函数(导航守卫)
- vuex(全局状态管理器)
- vue自定义过滤器
- Jquery原理和仿写
- js数据类型
- 原型和原型链和闭包(比较浅层的知识)
- 在浏览器地址栏里输入一个地址回车
- this
- js nodetype
- get post区别
- angularjs特性
- 前端布局问题
- Sass
- 重绘和重排
- 错误码
- em和rem
- Requirejs
- 请求头和响应头
- link和import的区别
- sessionStorage 和localStorage 以及cookie session的区别和联系
- js严格模式
- 前端性能优化
- js垃圾回收
- css常见兼容性
- tap点透问题
- 计算机网络相关面试题
- 跨域
- html5新特性
- http的八种请求
- 大学基础课程
- Ajax
- json和jsonp的区别
- 图片预加载和懒加载
基础知识掌握
向海绵一样吸收吧,星光不负有心人
CDN(内容分发网络)加速原理
CDN网络是在网络和服务器之间增加Cache层,主要是通过接管DNS实现,将用户请求引导到Cache获得服务器的数据,从而降低网络的访问速度。
工作流程
当用户访问已经加入CDN服务的网站时,首先通过DNS重定向技术确定最接近用户的最佳CDN节点,同时将用户的请求指向该节点。当用户的请求到达指定节点时,CDN的服务器(节点上的高速缓存)负责将用户请求的内容提供给用户。
具体流程
用户在自己的浏览器中输入要访问的网站的域名,浏览器向本地DNS请求对该域名的解析,本地DNS(域名系统,将通过域名找到相应的IP地址)将请求发到网站的主DNS,主DNS根据一系列的策略确定当时最适当的CDN节点,并将解析的结果(IP地址)发给用户,用户向给定的CDN节点请求相应网站的内容。
DOM
虚拟dom和真实dom的区别:虚拟dom不会进行排版和重绘操作,它进行重复修改之后然后一次性比较并修改真实dom中需要修改的部分。
浏览器渲染页面的两大步骤
- 输入网址在通过DNS解析之后得到服务器地址,浏览器向服务器发起http请求,经过三次握手,服务器将需要的代码发回给浏览器
- 浏览器进行的三大步骤
- dom构造,将html构造成一颗DOM树
- 布局,浏览器按从上到下,从左到右的顺序读取文档节点,顺序的放到一个虚拟的传送带上—文档流,文档流走完之后开始计算节点的坐标大小等css属性作为盒子的包装说明。(知道每个节点放置的位置)
- 绘制页面,将页面可视化。
点击详细知识点
服务端渲染和客户端渲染
spa是一种网络应用程序模型(客户端渲染),简单来说就是单页面,传统的网站是切换页面是直接加载出一个新的页面,但是它是将要换的地方进行重写,但是其他地放不变,如vue.js,左边的导航栏一直不变。
优点:前后端分离,开发效率高,用户体验更好,用户点击不会频繁跳转
缺点:首屏响应慢,不利于SEO优化因为爬虫不认识SPA,因为它只是记录了一个页面。
SEO 搜索引擎优化,根据搜索的关键字来调整网站
SPA和SEO的冲突,一些搜索引擎不支持AJAX获取数据,但是SPA通常是用AJAX获取数据的,而且有些搜索引擎也不支持js,但是对于知乎这种主要以内容输出为主,SEO显得很重要。
SSR(服务器端的缩写Server-Side Rendering),解决spa打开首屏慢的问题(spa都是在浏览器上进行渲染的)而它由浏览器渲染出HTML。发送到浏览器中,所以还需要SPA框架进行配合,在浏览器上混合成可交互的应用程序,因此也有能更好的获得SEO。
优点:SSR首屏快,能直接将SEO的关键信息在后天就渲染成html
缺点:占用很多的cpu和内存资源,常用的浏览器api无法使用如:window,docment和alert等,如果使用要对运行环境加以判断。开发调试会变的困难,导致spa的一些组件生命周期变得复杂,以及服务器和客户端渲染的结果不一致。
点击查看详细优缺点
XSS
全程跨站脚本攻击,是一种代码注入攻击。攻击者在目标网站上注入恶意脚本,获得用户的敏感信息。本质是:浏览器没有检测到恶意代码而直接执行。
xss分类:存储型,反射性(由后端的安全漏洞),DOM属于前端的安全漏洞。还可以分为:浏览区读取恶意代码,用户提交恶意代码。
- 防止浏览区执行恶意代码措施:
- 防止html中出入注入。
- 防止JavaScript执行是,执行恶意代码。
- 预防存储型和反射性xss攻击:
- 改成纯前端渲染,把代码和数据分开。
- 对html进行充分转义。
- 预防DOM型XSS攻击
- js代码一定得严谨,不要把不可信数据当做代码执行
- 其他措施
- Content Security Policy 和输入内容长度控制,验证码,和禁止js读取某些敏感COOkie。
详细点击
- Content Security Policy 和输入内容长度控制,验证码,和禁止js读取某些敏感COOkie。
排序算法的时间复杂度
盒子模型
盒模型就是又一个个盒子堆砌成的,每个html都可以叫做一个盒模型,盒模型是包括:边距,边框,填充,内容组成
- 标准盒模型:盒模型的所有组成相加
- 怪异盒模型:只包括width+margin(左右)(因为width包括了padding和border)
两者之间的转换可以用box-sizing :border-box(怪异)/content-box(标准)
webpack
模块打包工具,能实现热更新:在运行的时候就能替换,添加和删除各种模块。
fetch
向服务器发送请求的一种方式
ES6基本数据类型
number ,String,null,undefined,symbol(表示独一无二的值),Boolean
应用层协议
FTP,http等等
浏览器缓存
浏览器缓存设置在ajax请求头的,分为两个强缓存和协商缓存
而强缓存又分为内存缓存(页面关闭则没有),硬盘缓存,强缓存http之后设置了有效期,一旦有效期过了则请求后端协商缓存服务,
前端跨域问题的解决
jsonp,iframe,cors
UTF-8和GBK
GBK占用两个字节且全部包含中文字符,而utf-8占用三个字节包含全世界所有国家使用字符
详细点击
js的模块规范
AMD,CMD,COMMONJS,UMD,ES6
点击查看详细知识
css属性能触发GPU的硬件加速
硬件加速就是将浏览器的渲染过程交给GPU,而不是用自带的比较慢的渲染器
硬件加速原理:浏览器接收到页面文档之后,会将文档中的语言解析为DOM树,然后加上css成为渲染树,每个渲染元素被划分到每一个图层,每个图层加上GPU渲染层纹理,而tansform是不会触发GPU的tepain(重绘的)他们有单独的合成器进行处理。
浏览器会在以下情况下创建独立的复合图层,3D或者csstransform,和
css filters opacity ,元素覆盖是使用z-index属性,visibility
点击大牛文章查看
前端常见算法
MD5 SHA1 Base64 DSA
** MD5**
不可逆就比如牛被炸成了牛肉干,牛肉干不能复原成牛,可以用于用户密码保存,加盐的MD5=密码+用户名(盐)作为输入参数(原始信息)
** SHA-1**
和MD5相似原理,但是他的数量级比MD5更高,导致它不容易受到黑客攻击,但是速度上比MD5慢
Bease64 可逆
正确的方向比做正确的事情更重要
CDN技术原理
CDN中文理解则是内容分发网络解决网站拥塞问题
有关计算机网络。
对于元素塌陷问题的解决
一般对于塌陷问题一般指的是父元素的高度塌陷问题,意味着父元素的高度对于子元素的高度失效
** 解决方法 **
- 给父元素加上:overflow:hidden
- 在dom元素中添加一个 //在父元素中添加一个空标记
- 给父元素添加一个伪类:after(选择器在被选择元素的内容后面插入内容)然后将其样式设置为:添加空内容并且对这个空内容清除浮动
<style>
.父元素:after{
display: block;
clear: both;
content: "";
}
</style>
webpage
一个文件打包器
http
http是一个属于面向对象的协议特点是:1.简单快捷2.灵活3.无连接(服务器处理完成客户的请求,并收到客户的应答后,即断开连接)5.无状态
(对事务处理没有记忆能力)
请求方法
- get 请求获取资源
- post 在所标识的资源后附加新的数据
- put 请求服务器存储一个资源
- delete请求服务器删除一个资源
- head请求获取资源的响应消息报头
- 等等
状态码
元素居中
- 居中元素使用定位记住边框值是负数
position: absolute;
left:50%;
top:50%;
margin-top:-100px;
margin-left:-100px;
- 弹性盒模型 在需要定位的元素中编写
display:flex;
align-items: center;
justify-content: center;
-
transform平移转换(不太好使)
-
行类元素居中则按照文本居中方式即可
react 常见问题
基本知识
react是facebook在2011年开发的JavaScript库,它遵循组件的方法,有助于构建可重用的UI组件。使用虚拟dom可以用服务器端渲染,遵循单向数据流和数据绑定。可以方便客户端和服务端使用,使用react,编码UI测试用例变得非常容易。(虚拟dom是一个js对象,最初只是真实dom的副本,它是一个节点树)。
为什么浏览器无法读取jsx,因为它只能读取js对象,因此需要用到转换器将其转换。
react组件
解释一下react中render()的目的,是原生DOM组件的表示。如何将两个或多个组件嵌套入一个组件中,写在一个文档里面,然后一个利用标签名调用另一个。
如果更新组件状态:this.setState()
####react组件的生命周期的阶段:
- 初始渲染阶段
- 更新阶段
- 卸载阶段
生命周期的方法
- componentWillMount 在渲染之前使用
- WillunMount dom卸载之后使用清除内存
- DidMount 在第一次渲染之后使用
- WillReceiveProps 当从父类接收到props并且调用另一个渲染器之前调用
- shouldComponentUpdate 在dom中进行渲染之前调用
- WillUpdate 在dom中进行渲染之前调用
- didUpdate 在渲染发生后立即调用
模块化react中的代码可以使用export和import来导入
react Redux
一个前端开发库,redux遵循的三个原则是:
- 单一事件源:整个应用的状态存储在单个store中的对象里
- 状态是只读的,改变状态的唯一方法使触发一个动作
- 使用纯函数进行修改,纯函数是那些返回值取决于其参数值的函数。
列举出Redux的组件
- store 整个程序的状态都保存在它其中。
- action 这是一个用来发生了什么事情的对象
- reducer 这是一个确定状态将如何变化的地方
- view 显示store提供 的数据
react路由
react路由使用switch关键字是因为匹配到指定路径之后会绕过其他路线。
vue常见问题
生命周期
template:在script中编写的html,
生命周期的运行顺序:
点击开始运行的时候则出现以下四个生命周期但是如果没有el选项则在created就暂停了
如果有el则开始判断是否有template选项如果有则将其编译为render函数如果没有则用外部html作为模板则可以看出前者优先级高,但是由于vue中自带render函数则它本身的优先级最高
**beforeMount在还没挂载之前就调用,render函数首次被调用,
Mount被新创建的el选项替换,被挂载到实例上去之后调用该钩子。
当vue中的数据更新之后会触发新的组件重新渲染触发beforeUpadate和updated钩子函数
beforeUpdate发生在view层的改变之前,也就是页面还没有更换值,updated是发生在view层改变之后,而updated则发生在页面重新渲染之后
beforeDestroy是在实例销毁之前调用,在这一步实例完全可以调用,destroyed是在实例被销毁之前调用的。
MVVM的理解
Model代表数据模型可以在其中数据修改和操作的业务逻辑,View 代表UI组件将数据模型转换为UI展现出来,VM是他们两者之间的中间实现数据双向绑定
js的数据双向绑定
- 双向数据绑定:属性拦截。拦截方式用es5中的Object.defineProperty()将对象属性变成访问器属性。
数据双向绑定
vue组件间的参数传递
父与子传递参数
父元素传递给子组件:子组件通过props:[‘title’]方法和父元素挂钩,父元素之间:title=“哈哈哈”即可
子元素传递给父元素:子元素之间@click=“
e
m
i
t
(
父
元
素
方
法
名
,
参
数
)
”
即
可
调
用
父
元
素
方
法
,
父
元
素
则
通
过
emit(父元素方法名,参数)”即可调用父元素方法,父元素则通过
emit(父元素方法名,参数)”即可调用父元素方法,父元素则通过event接收
兄弟组件传值
总的来说就是bus.
o
n
(
方
法
名
,
f
u
n
c
t
i
o
n
(
)
)
和
b
u
s
.
on (方法名,function(){})和bus.
on(方法名,function())和bus.emit(方法名,参数)
首先在要接收其他兄弟的组件中引入bus(import bus from ‘@/bus.js’),然后定义方法。
created () {
// 实例对象.$on(事件名称,function(形参,形参){}事件事件的回调方法)
// 注意:回调函数变为箭头函数,使得this可以正确使用
bus.$on('jieshou', msg => {
// console.log(msg)
// 把数据给dt接收
this.dt = msg//父元素定义dt属性来接收
})
}
原文链接:https://blog.csdn.net/jyn15159/article/details/108991713
然后将要调用的兄弟组件中也引用bus然后编写方法传递参数
/ 给大哥组件传值
back () {
// 使得bus调用自己的事件(是大哥给bus声明的)
// bus.$emit(事件,参数,参数)
bus.$emit('jieshou', '1000元保护费')
}
}
路由
vue路由实现
hash模式
路由有井号
history模式
路由没有井号
两者的区别:对于后端来说即使没有做到对路由的全面覆盖也不会报出404的错误而history必须得一致
路由调转
- router-link
<router-link :to="{name:'home', params: {id:1}}">
如果不在路由配置中写上传递参数,那么页面刷新之后就会消失
/script 取参 this.$route.params.id
<router-link :to="{name:'home', query: {id:1}}">
类似于在路由后面配置参数
// html 取参 r o u t e . q u e r y . i d / / s c r i p t 取 参 t h i s . route.query.id // script 取参 this. route.query.id//script取参this.route.query.id - this$router.push()(函数里面调用)
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({name:'home',params: {id:'1'}})
- this.$router.replace() (用法同上,push)比较调转之后没有办法返回但是push可以
- this.$router.go(n) 可以为正数或者负数
vue和react的区别
相同点:两者都使用了虚拟dom(如果更新元素不是很频繁建议不要用虚拟dom)
- 两者都鼓励组件化应用
- 都用了props允许父元素向子元素传递参数
- 都有自己的构建工具 create react app 和vue-cli
不同点:
- vue鼓励去编写近似常规的html模板很好上手,而react则是推荐你所有的模板按照js扩展语法jsx书写。(jsx只是js混合着xml语法)vue技术也支持render函数和jsx只是不默认而已。
- 对象属性状态管理
react中必须得用this.setState({name})去更改值而vue中state对象不是必须的,数据由date属性在vue中那个对象中进行管理。
vue和react的区别
vue-router路由钩子函数(导航守卫)
beforeEach主要有三个参数,to,from,next
路由钩子详细教程
vuex(全局状态管理器)
- state:用来数据共享数据存储
- mutation:用来改变数据状态
- getters:用来对数据进行过滤操作
- action 解决异步改变共享数据
modules
当项目特别复杂的时候可以让每个模块都拥有自己的vuex const moduleA={
state:{}}
**vue-cli新增自定义指令 directives(指令名称dir1{
inserted(el){}}全局指令则在directives上添加vue.
vue自定义过滤器
自定义过滤器
Vue.filter(‘dataFormant’,function(参数){
return 返回值}
自定义私有过滤器
filters:{ 变量名(参数){
一些构造 return返回值}}
使用的时候直接{{datename变量名}}
keep-alive的用法
大牛对keep-alive的了解
应用场景:keep-alive保存组件的渲染状态
超详细生命周期讲解
点击查看详细知识点
前端常用设计模型
单例模式
定义:保证一个类只有一个实例
需求:一些对象我们往往只要一个比如浏览器的window对象和登录浮窗等等
观察者模式
定义:对象间的一种一对多的依赖关系
需求:当一个对象的状态发生变化是,所有依赖她的对象都得到通知
工厂模式
定义:将其成员对象的实例化推迟到子类来实现的类
需求:创建对象的流程赋值的时候,比如依赖很多设置文件等;处理大量具有相同属性的对象,用一个方法来觉得到底要创建哪个类的实例,而这些实例经常都拥有相同的接口,这种模式主要用所在实例化的类型在编译期间不能确定,而是在执行期决定的情况。
详细描述
Jquery原理和仿写
JQuery的本质是一个封装了众多方法的库这个 库的框架是一个闭包
(function(window, undefined) {
var jQuery = function () {}
window.jQuery = window.$ = jQuery;//暴露全局
})(window)
如果叫我仿写我就这么干
var temp = "Hello World!";
(function( window, undefined ) {
var temp = "ByeBye World!";
window.temp = temp;
})( window );
alert(temp);
js数据类型
基本数据类型:string number boolean null undefined
undefined:定义了没有赋值,函数的参数没有传值,访问对象中没有访问属性。对象有只是没有值
null:指代对空对象的引用(对象的占位符)尚未存在的对象
引用数据类型:(是保存在推内的意思是变量中国保存的实际上只是一个指针,而这个指针指向内存中的另一个位置,该位置保存对象)基本数据类型则在栈中
原型和原型链和闭包(比较浅层的知识)
原型
原型:js中的对象都包含了一个prototype的内部属性,这个属性对于的就是该对象的原型。原型就是一个模板,更准确的说是一个对象模板。
所有对象都有_proto_属性指向该对象的原型。
原型链
**利用原型让一个引用类型继承另一个引用类型的属性和方法。**当我们方法对象属性时,如果这个对象内部不存在这个属性就会去原型里找这个属性,原型又会有自己的原型,因此依次查找就可以了。(所有方法对象都继承obj这个父类,都能去她里面找,其他的就只能在自己继承的里面找)
闭包
闭包就是能够读取其他函数内部变量的函数,也就是函数a被函数b包含然后函数a能运用引用b中定义的变量就构成了闭包。(能让函数中的值一直不消失,存储在内存中,以及读取函数内部的变量)
闭包使用情况:函数封装,在使用定时器的时候
闭包的优点:
- 减少全局变量
- 减少传递函数的参数量
- 封装
缺点:使用闭包会占用内存资源,过多的使用闭包会导致内存溢出等。
内存泄露解决的方法:不需要的变量,但是垃圾回收又收不走的那些赋值为null,然后让垃圾回收走。
实操:原型链继承和构造函数继承的例子吧。
具体描述加问题显现
在浏览器地址栏里输入一个地址回车
this
windows下的方法都是指向window比如定时器和普通函数
在一个对象中的方法this指向当前对象,谁new的就指向谁
绑定事件就是真正触发的事件源
js nodetype
nodetype属性可以用来区分不同类型的节点,比如元素,文本和注释。
get post区别
get和post是http请求方式的两种,get是请求 post是提交,一般来说get数据量小,post很大,get是在请求头里,放在地址栏不安全,post是在包里相对安全
详细区分
angularjs特性
- 双向数据绑定,提供用mo的类投射到view的方法,angularJS的双向绑定
- MVC
- 指令系统创建自己所需的标签
- 模块化
简单确认一下
前端布局问题
水平居中
- 水平居中 行内元素 首先变成块状元素然在text-align:center
- margin:0 auto;
- flex布局然后justify-content:center
垂直居中
- 弹性盒模型 然后align-items:center
- 绝对定位 position:absolute,top:50% ;transform:translate(o,-50%)
水平垂直居中
多列布局
- 左列定宽,右列自适应,左边宽带写死右边不写死即可。要么使用弹性布局自适应的那块写上flex:1
- 右列定宽,左列自适应
- 两列定宽,一列自适应 A:定宽的前两个写上浮动然后不定宽的写上overfloat,B:用flex布局
- 两侧定宽中间栏自适应 A:左右两边的浮动中间不浮动写上宽度100%B:用浮动解决
- 多列等分布局 boder-size:border-box;ie盒模型设置的宽度就是所有元素加起来的宽度,content-box设置的宽度只是文子的宽度
- 九宫格布局 利用flex实现布局然后设置相应的属性值即可
- 全屏布局
- 响应式布局 meta标签的使用
Sass
Sass是对css3的一种语法扩充,是一款强化css的辅助工具,增加了变量和嵌套,混合,导入等高级功能,有利于更好的组织管理样式文件
Sass和Scss的区别
两者其实是一种东西都称为Sass,区别是文件扩展名不同,Sass严格以缩进语法来书写的,不带大括号和分号,而Scss语法书写和css非常相似。
-
用KaTeX parse error: Expected 'EOF', got '#' at position 62: …候,我们就必须在使用的时候加上#̲{color}
-
嵌套:按照html方式嵌套即可如果是伪类选择器的话直接在选择器里面加上&:hover
-
混合宏(@mixin @include)
-
继承@extend 不能传递参数,继承的时候智会将相同的属性写在一起不同的单独写出来
-
占位符 %class1 跟继承属性连着用会将继承属性单独写出来的
-
@import导入一个css文件
-
自定义函数@function
-
@if @else @for @each@while 可以用在需要逻辑和大量有类似文件名的地方列如
重绘和重排
重绘是当元素的外观被改变是,但没有改变布局和宽高的情况下发生的如背景色 visibility等等
重排是dom的变化影响到了元素的几何属性(宽高)如改变窗口大小文字大小和内容的改变等等
错误码
em和rem
em是相对于父元素设置字体大小的 rem是相对于根元素《html》设置的
px是固定单位但是也是相对的,比如在普通屏幕和视网膜屏上1px就不一样。
Requirejs
问题出现:所有的代码都放在一个代码里面,然后随着代码加多然后一个文件不够,必须分成多个文件
这么写有个问题就是网页容易失去响应,因为必须一个个加载然后必须要严格保持秩序,依赖性最大的模块一定要放到最后加载,当依赖关系很复杂的时候,代码的编码和维护都很困难。
解决问题 js的异步加载避免网页失去响应,管理模块之间的依赖性
运用require.js的加载
第一步先去下载然后放在js目录下然导入
<script src="js/require.js" defer async="true"></script>
然后加上我们自己的代码文件相当于c语言中的main函数所有的所有的代码运行都从它开始
<script src="js/require.js" data-main="js/main"></script>
require()函数接收;两个参数,第一个数一个数组,第二个参数是回调函数,当前面的加载成功之后它才会被调用,
// main.js
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
// some code here
});
模块加载
require.config({
baseUrl: "js/lib",
paths: {
"jquery": "jquery.min",
"underscore": "underscore.min",
"backbone": "backbone.min"
}
});
AMD模块的写法
require.js加载模块必须采用AMD规范,必须按照define()函数定义模块。
当require()函数加载上面这个模块的时候,就会先加载myLib.js文件。
define(['myLib'], function(myLib){
function foo(){
myLib.doSomething();
}
return {
foo : foo
};
});
// main.js
require(['math'], function (math){
alert(math.add(1,1));
});
加载非规范的模块,这样的模块在用require()加载之前,要先用require.config()方法,定义它们的一些特征。
请求头和响应头
link和import的区别
- link属于html标签,而@import是css提供的
- 页面被加载的时候link会同时被加载而import会等到页面被加载的完的时候在加载
- import只在IE5以上才能被识别,而link是html标签无版本兼容问题
- link方式的权重高于import的权重
sessionStorage 和localStorage 以及cookie session的区别和联系
共同点:都是保存在浏览器端的
区别:
- cookie数据始终在同源的http请求中携带,在浏览器和服务器间来回传递,因此数据量小大小不超过4k,数据在设置的有效时间内都有效果
- sessionStorage和localStorage都是本地存储,不能直接传给服务器端,数据量大一点,sessionStorage页面关闭之后数据消失,而localStorage一直存在于浏览器中
- 作用域不同,sessionStorage即使同一个页面也不能在不同的浏览器中共享,localStorage在所有的同源窗口中都是共享的,cookie也是所有同源窗口共享的。
js严格模式
设置目的
- 消除js语法的一些不合理不严谨之处,减少一些怪异行为
- 消除代码运行的一些不安全之处,保证代码运行的安全
- 提高编译器效率,增加运行速度
- 为未来新版本做铺垫
进入标志,在文件首行或者方法里加上这句代码即可
“use strict”
前端性能优化
js垃圾回收
原理:垃圾收集器会定期(周期性)找出那些不在继续使用的变量,然后释放其内存。
(1)标记清除法
类似于给变量打上yes和No的标签当变量进入环境的时候(自己作用域被引发的时候)打上yes 出了环境的时候打上no,js引擎一定时间间隔内扫描发现之后,对no标签进行剔除。
(2)引用计数
一般说来,就是被引用的次数如果变量被引用,赋值给其他变量则计数加1,如果此时这个变量引用了其他则在原来的基础上减1,直到引用次数为0时则被内存空间回收。
css常见兼容性
tap点透问题
点透的现象:比如你点击弹出层的按钮,但是也触发了弹出层下面的页面的点击事件。同时绑定这两个事件阻止冒泡且在pc端和移动端都能实现。
$("#save_and_back").on("touchend",function(e){
save_article(article_data).then(function(res){
location.href = "home.html";
});
e.preventDefault();
});
$("#save_and_back").on("click",function(e){
save_article(article_data).then(function(res){
location.href = "home.html";
});
e.preventDefault();
});
计算机网络相关面试题
跨域
跨域:同源策略(浏览器为了安全性考虑实施的非常重要的安全策略:从一个域加载的脚本不能访问其他域的脚本)的限制
何为同源:URL由协议、域名、端口和路径组成,如果两个URL的协议、域名和端口相同则表示他们同源
三种方法:
- 在js语句中,在a.com的代码中加入
在b.com中执行echo callback(要回传给a.com的数据)
html5新特性
http的八种请求
大学基础课程
Ajax
客服端与服务器端异步的通信技术
json和jsonp的区别
JSON是一种基于文本的数据交换方式,或者叫做数据描述格式,JSONP是一种信息传递双方约定的方法。
JSONP产生原因是:AJAX直接请求普通文件存在跨域无权限访问的问题。但是如果调用js文件(一般以JSon为后缀)时则不存在跨域问题,因此客户端使用了这样的文件传递自己的数据,便于客户使用逐渐形成了一种非正式的传输协议,人们把他称作JSONP。该协议要点是允许用户传递一个callback参数给服务器,然后服务器返回数据时会将这个callback参数(回调函数)作为函数名来包裹住JSON数据,这样客户端就可以随意制定自己的函数自动来处理数据。
AJAX和Jsonp的区别
图片预加载和懒加载
懒加载:先把img的src指向一个小图片,等到此图片出现在视野范围内了,获取img元素,把data-src里的值赋给src。
图片预加载