前端是什么?
通常就是指网站前台部分,通俗的讲就是用户可以看到的部分。主要用来通过前端技术完成页面设计,界面制作,用户交互等。
——————————————HTML
html界面的渲染过程:
1、首先是构建DOM树
2、然后构建CSSOM(css object model)是一个建立在web页面上的css样式映射,只针 对 CSS。
3、创建render树,DOM与css构建好后,浏览器会根据这两个构造render树,确定了从属关系,也知道有哪些节点。
4、通过render构建布局,计算位置样式。
5、绘制,遍历render树,绘制每个节点。
6、重排reflow,当样式或者节点发生改变时。
7、重绘repaint,重新绘制页面
HTML语义化理解:
1、对开发者友好,让人更容易读懂,利于代码可读性
2、对机器友好,让搜索引擎更容易读懂,利于seo
label的作用是什么?如何适用?
1、控制表单控件关系,选择lable标签时,自动将焦点转到input上
2、用法:可以使用ID进行绑定,或者是通过嵌套;
严格模式与混杂模式
严格模式:以浏览器支持最高标准进行;
混杂模式:页面以宽松向下方式显示,兼容性强;
说一下HTML5有哪些更新/新增
1、新增了语义化标签,
2、音频视频标签;
3、新增localstorage,sessionstorage本地存储;
4、新增DOM查询 document.querySelector() 、 document.querySelectorAll();
5、表单的控制(email、time、search)
6、时间监听 addeventlistener(window的对象)
说一下怎么做好seo
语义化元素;
title和meta标签描述页面内容
logo使用a标签加背景图
说一下src和href的区别
1、src是引入外部资源下载到文档,会暂停其他资源的下载
2、href是链接外部资源,不会暂停其他资源的下载
说一下HTML5的离线存储
1、指的是没有网络连接的时候,可以正常访问应用,与网络连接时更新缓存文件;
2、在离线状态时,操作 window.applicationCache
进行离线缓存的操作;
3、在 cache.manifest
文件中编写需要离线存储的资源
4、清除缓存:更新 manifest 文件,通过 javascript 操作,清除浏览器缓存
常有都有哪些标签
1、body,html,label,h1-h5,p,span,a,img,input,text,textarea,button,tag,
form,ul,ol,li,audio,videl,dl,dt,dd
行内元素:a、span、img、input、select、label、button、textarea
块级元素:div、ul、li、dl、dt、dd、p、h1-h6
—————————————————————CSS
1、CSS盒子模型
标准盒子模型:box-sizing:content-box
传统盒子模型:box-sizing:border-box
2、CSS选择器分为:
1、id选择器
2、类选择器,伪类选择器
3、标签选择器
4、属性选择器
5、父选择器,子选择器,后代选择器
6、通配符选择器
3、CSS中的em 和 px的区别
em:表示的是继承父级的字体大小,不是固定的
px:表示的是固定的大小
4、CSS中的em px rem
em:表示的是继承父级的字体大小,不是固定的
px:表示的是固定的大小
rem:表示的是由html的根元素大小决定
5、CSS预处理器
1、less : 使用简单,保持css原来特性,只为css加入程序式语言特性。
2、sass:Ruby环境,如要引入less.js来处理代码,输出css到浏览器。
6、css的一些框架
1、bootstrap
2、element UI
3、Semantic UI
4、UIkit
5、Foundation
7、css有几种布局
1、单列布局(流式布局)
2、flex弹性布局(flex-content主轴方向,justify-content主轴子元素,align-items侧周方向,align-content侧周子元素排序方式)
3、圣杯布局
4、双飞翼布局
5、粘性局部
当main较长时,footer跟在main的下边;
当main较短时,footer粘在页面底部;
8、移动端的兼容性调整
媒体查询;
可以根据屏幕不同的宽,从而获得不同的样式,然后实现不同的样式显示;
rem适配布局
rem是一个相对单位,类似于em,不同的是rem的基准是相对于html元素的字体大小。
让一些不能等比自适应的元素,达到当设备尺寸发生改变的时候,等比例适配当前设备。
响应式布局;
通过同一份代码快速、有效适配手机、平板、PC设备等所有的屏幕。
如:
————————————————————————js部分
1,数据类型
基本数据类型:数值型,字符串,布尔,长整型,null,未定义,Symbol(表独一无二);
基本数据类型te:空间小,直接存才栈内存中;
引用数据类型:对象,数组,日期,函数,正则
引用:将指针存放在栈中,值存放在堆中。(堆:非连续性数据结构,先进先出。栈是先进后出)
2、变量和函数声明的提升
两种方式都会提升到最顶部执行,函数提升高于变量提升,函数内部如果用var声明相同的外部变量则不再向上寻找。匿名函数不会提升
3、闭包
能够读取其他函数内部的函数,叫做闭包函数。
闭包基本上就是一个函数内部返回一个函数。
好处:可以读取函数内部变量,让它始终在内存中,可以封装对象私有属性和方法。
缺点:消耗内存,使用不当可能造成内存溢出。
4、指向:
this总指向函数调用者,如果有new指向实例化对象,事件中指向触发事件的对象。
5、js数组和对象的遍历方式
for
for in
for each
for-of
6、map和for each区别
for each 最基本的,遍历,循环不改变源数组,
map会改变源数组。
7、同源策略
域名,协议,端口都相同
8、跨域问题
1、可以通过JSONP(利用<script>
标签没有跨域限制);
2、跨域资源共享(CORS);
3、nodejs代理,通过一个代理服务器,实现数据的转发;
或者头部设置安全域名。
9、严格模式限制
变量必须声明再调用,
函数的参数不能有同名属性,否则报错,
不能使用with语句,禁止this指向全局对象
10、ES6新增
模板字符串,箭头函数,for-of和promise等特性
11、attribute和property区别是:
attribute:是DOM中的属性,是JavaScript里的对象;
property:指对象的属性
对于html标准:attribute和property是同步,自动更新的。
对于自定义属性来说,他们是不同步的。
12、let和const区别
都不存在变量提升,都不允许重复声明,
let定义的是变量,可以修改,
const定义的是常量,不能修改,如果是对象内部属性可以修改。
13、内存泄漏
程序中动态分配的堆内存由于某种原因未能释放或无法释放引起的各种问题。
14、js的深浅拷贝:
浅拷贝:Object.assign,只拷贝一层,新对象只是原对象的引用,共用一个内存地址。
深拷贝:JSON.parse(JSON.string(object)),层层拷贝,内存中完整拷贝出来,修改不影响原对象。
15、异步编程的实现方式:
1、 回调函数:优点,简单,容易理解;缺点,不利于维护;
2、 事件监听:优点,容易理解,可以绑定多个事件,指定多个函数;缺点,事件驱动型,流程不够清晰。
3、发布、订阅:类似事件监听,不同的是,可以根据消息中心,确定有多少发布者与订阅者;
4 、Promise对象:优点:可以利用then方法,进行链式写法;缺点:编写理解较难。
5、async函数:优点:内置执行器,结构清晰;缺点:错误处理机制。
16、面向对象的编程思想:
使用对象,类,继承,封装等概念进行程序设计。
优点:好维护,易扩展,提升了开发效率。
17、项目优化
图片懒加载、压缩样式,避免重定向、减少DOM操作,减少DOM元素数量等。
18、单线程定义、和异步的关系:
单线程:只有一个线程,只能做一件事;
原因:避免DOM渲染冲突,
JS执行时候,浏览器,DOM渲染会暂停;两段JS不能同时执行;
webworker支持多线程,但是不能访问DOM
19、负载均衡
单台服务器共同协作,发挥服务器最大作用。
20、作用域链;
我们可以通过作用域链访问到父级里声明的变量或者是函数。
21、js垃圾回收机制
防止内存泄漏;
两种方式:标记清除(大部分浏览器)变量进入时标记,离开时清除;
引用计数(低版本浏览器),声明一个变量向另一个引用类型赋值时加1,为0时清除。
22、逐进增强和优雅降级
逐进增强:针对低版本浏览器,保证最基本功能,然后再针对高本版浏览器进行追加功能,增加用户体验。
优雅降级:一开始就完整的功能,针对不同的浏览器进行兼容调整。
23、如何在数组中进行增删改查
增:push()、UNshift()、splice
删:pop()、shift()、splice()
改:reverse()、sort()
查:slice()
拼接:concat() 可拼接数组或元素(不改变原数组内容或者函数)
24、如何在字符串中把数组装换位字符串
JSON.toString()
反之,可以用split()方法指定分隔符,或者Array.from()内置方法
25、js原型与原型链
原型:
1、所以对象都有'_ _proto'属性
2、每个函数都有一个prototype(原型)属性;
3、所有_proto_属性,指向它的原型prototype
原型链:
1、当访问对象中一个属性时,会先在这个对象中查找,如果没找到则在_proto_隐形原型中查找,如果还没有则到构造函数(prototype)中查找,如果没有则再构造函数prototype的_proto_中继续查找,深入直到Object,就形成了作用域链;
26、== 和 ===的区别
- ==是非严格意义上的相等
- 值相等就相等
- ===是严格意义上的相等,会比较两边的数据类型和值大小
- 值和引用地址都相等才相等
27、ES6新增
1、新增模板字符串
2、新增了promise对象
3、for-of,let和const命令
4、引入了模块概念
5、新增了箭头函数
28、js的原生函数
1、function cutstar ( )截取指定长度字符串;
2、function cutHost ( )截取域名主机
3、string.protype.trim = function ( )删除空格
4、function replaceAll ( )替换所有内容
5、function HTMLencode ( )转换为HTML标签
29、字符串的常用操作
查询:
find():检测某个子串是否包含在这个字符串中,如果在返回这个子串开始的位置下标,否则返回 -1
index(): 检测某个子串是否包含在这个字符串中,如果在 返回这个子串开始的位置下标,否则就报错
count():返回某个子串在字符串中出现的次数
replace(): 替换,
split()按照指定字符分割字符串
startswith()、endswith:检查字符串是否以指定子串开头/结尾,是则返回Ture,否则返回False。如果设置开始和结束位置下标,则在指定范围内检查。
30、DOM节点的基本操作
js 获取元素的三种方法是
创建、插入、删除DOM元素:
创建:createElement,appendChild
插入:insertBefore
删除:removeChild
其他获取节点方式:
childNode是用来获取该元素下所有的子节点
nodeType是用来判断节点类型的,如果是文本节点则返回3,元素节点返回1
children功能和childNode类似,但children不包括文本节点,只包括元素节点,相比于childrenNode更好用
firstchild:获得该元素下的第一个子元素,但是不兼容,只兼容ie6-8,高级浏览器则需要用,firstElementChild
31、null和underfined的区别?
underfined代表含义是未定义。
null表示的是空对象,多用在需要初始化对象中。
32、js作用域和作用域链
作用域:函数内部叫局部作用域;函数外边叫全局作用域。
作用域链:就是一个变量可以使用的范围,主要分为全局作用域和函数作用域。
33、对象和面向对象
对象:属性和方法的集合叫做对象(万物皆对象)。
面向对象:首先就是找对象,如果该对象没有需要的方法或属性,那就给它添加。 面向对象是一种编程思维的改变。通过原型的方式来实现面向对象编程。
34、递归的算法
遍历文件、
快速排序、
阶乘、
二叉树(先序遍历,中序遍历、后序遍历)、
斐波那契数列()
35、递归存在问题
1、调用层级太多,可能导致栈溢出;
2、重复计算导致效率较低
———————————————Vue
1、v-for为什么要加key 值?
vue组件高度复用,当增加key可以标识唯一性,高效的更新虚拟DOM
2、v-for和v-if为什么不能同时使用?
v-for的优先级高于v-if,每次遍历时都会执行v-if会影响效率。
解决方案:可以使用computed计算属性。
3、v-model的实现原理?
数据双向绑定,可以实时修改数据
4、v-model都绑定了什么?
绑定了事件监听(input,和change)
5、vue框架的渐进式?
声明式渲染——组件化应用——客户端路由——集中式状态管理——项目构建
声明式渲染:允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统;
组件化应用:可将每个功能模块当成一个组件,一个项目可以有多个组件构成
客户端路由:通过使用路由的特性实现单页面应用
集中式状态管理:Vue中vuex的概念(state,Getter,Mutation,Action,Module)
项目构建:在大型项目中由开发,打包,部署,上线等流程
6、返回函数和对象形式区别:
数据以函数的返回值形式定义,这样每复用一次组件,就会返回一个新的data
如果写成对象形式,则所有组件共用一个data,造成数据污染。
7、v-if和v-show的区别?
v-if会把元素从DOM中删除(销毁重建)
v-show仅把DOM元素的display=false;
v-if适合用在运行时很少改变条件的情况,v-show则反之。
8、vue中this的指向?
在生命周期和vue普通函数中this指向Vue实例;函数内部this指向的是window;vue箭头函数没有自己的this,它是继承来的。
9、在项目中如何获取节点?
可以利用js元素的DOM(document)方法,也可以通过引入jquery,还可以利用vue提供的方法,在dom标签加一个ref,通过this.$refs
10、watch立即监听和监督监听?
立即监听需要开启immediate= “true”,默认就是监督监听。
深度监听:deep:true
11、Vue优点:
轻量、速度快,复用性强,耦合性低,可以独立开发,视图, 数据, 结构分离
12、父级给子级传递数据:
父级传子级: props
子组件传父组件:
this.$emit('自定义事件',参数)
this.$parent.event()
13、如何让 CSS 只在当前组件中起作用?
在组件中的 style 前面加上 scoped
14、keep-alive作用:
对需要频繁切换的组件进行缓存,使其不需要重新渲染页面,节省了浏览器的访问时间。
15、Vue.cli项目中src目录中每个文件夹和文件的用法:
components存放组件,App.vue主页面入口,index.js主文件入口,ass存放静态资源文件;
16、$nextTick的使用:
vue中DOM是异步的,在页面发生重新渲染后,执行。
17、Vue的data为什么必须是一个函数:
因为JavaScript特性导致;组件中的data写成一个函数,每次复用都会生成一个新的data
18、Vue在双向数据绑定如何实现的?
通过数据劫持,组合,发布订阅模式来实现的。其核心方法是Object.defineProperty()方法来劫持各个属性的getter,setter,在数据变动时,发布消息给订阅者,进行回调。
19、vue和jQuery的区别:
jQuery是使用选择器($),选取DOM对象,对其进行赋值,取值事件绑定等。
Vue是通过Vue实例对象将数据和View完全分开了,对数据进行操作不再需要应用DOM对象。
20、delete和Vue.delate删除数组的区别:
delete只是被删除的元素,变成了empty、undefined,其他的元素的键值不变。Vue.delete直接删除了数组,改变了数组的键值。
21、生命周期:初始化 、 运行中beforeUpdate,update 、 销毁beforeDestory,Destory
每个Vue实例在被创建时要经历一系列的初始化过程,这个过程运行的一些函数叫生命周期函数;
作用:是为了用户可以在不同阶段可以添加自己的代码。
22、第一次页面加载时会触发那几个钩子?
beforeCreate ,create,beforeMount,mounted
23、vue获取数据一般在哪个生命周期中?
created,beforeMount和mounted中
24、created和mounted的区别?
created:在模板渲染成html前调用,
mounted:在模板渲染成html后调用,
25、Vuex是什么?
Vue框架中状态的管理
有五种属性:state,Getter,Mutation,Action,Module
state:保存数据,以对象方式导出
Getter:通过属性、方法访问数据
Mutation:保存所有方法,用来改变数据
actions:暴露给用户,借此触发mutations中的方法
Module:模块的局部状态,模块动态注册,
26、vue全家桶
Vue-cli 、Vuex 、 VueRouter 、VueAxios
27、Vue-cli常用的npm命令
npm install 下载 node_modules资源包的命令
npm run Dev 启动Vue-cli开发环境的npm命令
npm run build vue-cli生成环境部署资源的npm命令
npm run build-report 用于查看vue-clic生产环境部署资源文件的大小的npm命令
28、vue常用的修饰符
事件修饰符:
.stop阻止事件继续传播
.prevent阻止标签默认行为
.once事件只会触发一次
.capture使用事件捕获模式,即元素自身触发的事件先在此处理,然后才交由内部元素进行处理。
29、v-mode()l常用修饰符:
.lazy通过这个修饰符,转变为在change事件同步
.number自动将用户输入值转化为数值类型
.trim自动过滤用户输入的收尾空格
30、vue事件中如何使用event对象
获取事件对象,方法参数传递$event。
31、组件传值方式:
父传子,子传父,创建bus事件总线,vuex。
32、子组件调用父组件方法
可以通过在子组件使用this.$parent.event来调用
可以通过$emit()向父组件触发一个事件,父组件监听
父组件把方法传入子组件中,在子组件里直接调用这个方法
33、路由的跳转;
一、声明式路由导航router-link:
不带参数:
//注意:router-link中链接如果是‘/’开始就是从跟路由开始,如果不带,
//则从当前路由开始
<router-link :to="{name:'home'}">
<router-link :to="{path:'/home'}"> //name,path都行,建议都用name
带参数:
<router-link :to="{name:'home',params:{id:1}}">
<router-link :to="{name:'home',query:{id:1}}">
<router-link :to="/home/:id">
//传递对象
<router-link :to="{name:'detail',query:{item:JSON.stringify(obj)}}"></router-link>
二、 this.$router.push()路由跳转:
不带参数:
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
query传参:
1路由配置:
name:'home',
path:'home'
2跳转:
this.$router.push({name:'home',query:{id:'1'}})
htis.$router.push({path:'/home',query:{id:'1'}})
3获取参数:
html取参数:$route.query.id
script取参:this.route.query.id
params传参
1路由配置
path:'/home/:id'(获取path:'/home:id')
2跳转
this.$router.push({name:'home',params:{id:'1'}})
注意:
//只能用name匹配路由不能用path
//params传参(类似post),路由配置path:'/home/:id'或者path:"/home:id"否则刷新参数消失
3获取参数
html取参:$route.params.id
script取参:this.$route.params.id
直接通过path传参
1、路由配置
name:'home'
path:'/home/:id'
2、跳转
this.$router.push({path:'home/123'})
或者
this.$router.push('/home/123')
3、获取参数
this.$route.params.id
params和query的区别:
query类似于get,跳转后页面url后边会拼接参数?id=1.
params类似post,跳转后url后边不会拼接参数
三、this.$router.replace()跳转
用法同上
四、this.$router.go(n),跳转到那个路由页面
34、computed和watch的区别
computed计算属性:依赖其他属性值,且computed有数据缓存,只有它依赖的数据发生改变时,下次获取computed才重新计算;
watch侦听器,更多的是观察的作用,每当监听的数据发生改变都会执行后续操作。接收两个参数,新值和旧值,这两个值只能从父元素或者prop传递
35、过滤器(filter)
处理时间,数组等的显示格式
36、axios是什么
易用、简洁且高效的http库, 支持node端和浏览器端,支持Promise和拦截器等高级配置
37、开发时,如何解决数据层级结构太深问题
使用vm.$set手动定义一层数据:vm.$set("demo",a.b.c.d)
38、$route和$router的区别
$route是路由信息对象,例如:path,params、query等
$router是路由实例,包括路由跳转方法,钩子函数等。
39、哪些vue的性能优化:
对象层级不要太深,v-if和v-show要区分使用场景,v-for一定要有:key,图片懒加载,以及防抖、节流等
40、子组件为何不可以修改父组件传递的prop
为了防止从子组件意外改变父级组件的状态,导致应用的数据难以理解;
41、什么是防抖和节流?有什么区别?
防抖:如果n秒内高频事件再次被触发,则重新计算时间
节流:高频事件触发,但在n秒内只会执行一次
42、路由守卫:
1、全局路由(前置beforeEach、后置afterEach)
2、独享路由beforeEnter;
3、组件内部路由beforeRouterEnter,beforeUpdate;
43、watch和computed区别:
computed:只有当依赖数据发生变化时,再次才会重新计算且不支持异步;
watch:数据发生变化直接触发相应操作;支持异步;接收两个参数,一个是新值,一个旧值;监听数据必须是data中或者父组件传递过来的。
44、父组件与子组件创建顺序
父:created 子:created 子:mounted 父:mounted
45、Vue2的相应原理
(1)vue2.x版本响应式基于ES5的Object.defineProperty实现的,修改对象属性的权限标签;
状态改变后,视图也随之更新;首先通过数据劫持里边的setter,getter;然后是依赖收集,内部追踪依赖,在属性被访问和修改时通知变化;
缺点:增加,删除时不会更新;且直接修改下标数组,页面不更新;
46、vue3中的响应式原理
(2)Vue3.x版本响应式基于ES6(es2015)的Proxy实现
1、通过代理:拦截对象中属性的变化,读写,添加等
2、反射:对源对象进行操作
47、vue更新数组时触发视图更新的方法
增加:push(),unshift();
删除:pop(),shift();
修改:reverse(),sort();
查询:slice();
48、SPA首屏加载慢如何解决
安装动态懒加载所需插件;使用CDN资源(内容分发网络,加速静态资源),
49、单页面应用和多页面应用区别及缺点
单页面:通俗的说就是指只有一个主页面的应用,单页面的页面跳转,仅刷新局部资源。多用于pc端。
多页面(MPA):就是一个应用中有多个页面,页面跳转时是整页刷新。
50、单页面的优点,缺点:
单页面的优点:用户体验好,快,内容的改变不需要重新加载整个页面
单页面缺点:不利于seo;导航不可用,如果要使用导航需要自行设置;初次加载时耗时多,页面结构较为复杂。
————————————————————————浏览器
1、浏览器从输入url到网页显示,整个过程?
1、域名的解析
2、发起tcp三次握手
3、发起的http请求
4、服务器相应请求,浏览器得到html代码
5、浏览器解析html代码,请求代码中的资源
6、渲染并呈现
2、cookie的利端:
利:可以在客户端起到简单缓存数据作用,方便下次登录,且记录用户行为
弊:增加流量 消耗,有一定安全隐患,有数量和长度限制
解决方式:将cookie转换成 js 对象
3、sessionStorage和localStorage的区别:
sessionStorage只能用于同一个会话中的,结束后数据销毁;
localStorage用于持久本地数据,除非主动销毁;
4、bfc的理解
(block formatting context)即格式化上下文
它是一个独立容器,确定了元素如何对其内容进行定位,以及与其它元素的相互作用
简单来说,BFC 是一个封闭的盒子,盒子内、外元素不会互相干扰,且盒子内有盒子外元素所不具备的属性
5、如何对网站进行优化:
content方面:减少http请求,减少DOM元素数量;
Serve方面:使用CDN,对组件使用Gzip压缩;
JavaScript方面:将js脚本和css样式外界引入,压缩js和css代码;
6、浏览器缓存
也叫HTTP缓存,存在服务器与客户端之间,通常是客户端将请求的资源作为副本保存到本地,下次访问优先读取副本读取;
7、为什么使用缓存技术
通过缓存为资源副本,可以大大降低访问时间,减少宽度消耗,降低服务器压力;
8、Get、Post、Put、Delete请求方法
get:请求指定信息,通常用于请求服务器的某个资源。(商品列表,个人资料)
post:通常用在向服务器发送数据;
put:一般用在更新服务器资源,客户端向服务器传递数据,用在取代指定文档内容;
delete:用来请求服务器删除指定资源。但需要注意的客户端并不能确保服务器的删除操作一定会执行,HTTP规范允许服务器在不通知客户端情况下撤销删除。
9、HTTP状态码
200,请求成功;
304,上次请求后,请求的网页未修改,将从缓存中读取;
403,服务器接收请求,拒绝提供服务;
404,需要访问资源不存在;
500,服务器内部错误
10、HTTP请求报文组成
请求行、请求头、空行、请求体,
11、HTTP请求报文含义:
请求行:描述请求类型,访问资源与HTTP协议版本;
请求头:说明服务器所需要的附加信息;
空行:通知服务器请求头部到此结束
请求体:通过POST请求提交到服务器的数据
12、HTTP相应报文
状态行、相应头,空行、响应体
13、get/post?
1、get:缓存,长度有限,会保存历史,安全性较差
2、post:安全,可存放数据大,编码类型多;
14、浏览器的常用调试方法(按下f12弹出调试器)
1、Elements功能,调整节点样式
2、Console获取打印出来数据
3、Network获取请求路径,请求头,相应头,传递参数;
4、application查看本地存储等数据
5、Source存放文件,html,css,js等,可以设置断点
——————————————————————性能优化
1、性能优化的几个方面:
1、资源压缩合并,减少请求频率;
2、预解析DNS
3、利用浏览器缓存
2、异步加载
1、动态脚本加载
2、defer(html解析完执行,有多个则按顺序)
3、saync(加载完毕立刻执行)
defer和saync区别:
相同:都是异步的,
不同:
1、defer不会按照它们页面上次序执行;
2、saync会按照出现次序执行;
3、预加载:
1、可以一定程度上降低首屏的加载时间,
缺点:兼容性不好
4、DNS预解析
就是根据域名查出IP地址。你可以把它想象成一本巨大的电话本。
5、懒执行
将某些逻辑延迟到使用时再计算;一般通过定时器或者时间调用唤醒
6、懒加载
只加载自定义区域(通常可视区)内需要加载的东西,可以提高浏览器性能,节省资源的使用。
————————————————————————JQuery
1、JQuery的作用:
获取页面的元素,
修改页面的外观,
改变页面的内容;
响应用户的页面操作;
2、JQuery的优点:
都是封装好的函数;
有强大的选择器,支持近乎所有的css选择器;
简化了代码,提高了效率;
可以解决各种浏览器兼容问题;
3、Jquery缺点:
1.不能向后版本兼容。
2.插件兼容性也比较差,
3.插件容易冲突,
4.jQuery核心代码库对动画和特效的支持相对较差
4、jQuery中有哪几种类型的选择器?
1、基本选择器:直接根据id、css类名、元素名返回匹配的dom元素。
2、层次选择器:也叫做路径选择器,可以根据路径层次来选择相应的DOM元素。
3、过滤选择器:在前面的基础上过滤相关条件,得到匹配的dom元素。
5、body中的JavaScript window.onload函数和jQuery中的document.ready()有什么区别?
1、我们可以在页面中使用多个document.ready(),但只能使用一次onload()。
2、document.ready()函数在页面DOM元素加载完以后就会被调用,而onload()函数则要在所有的关联资源(包括图像、音频)加载完毕后才会调用。
6、jQuery里的each()是什么函数?
each()允许遍历一个元素集合。
7、如何将一个HTML元素添加到DOM树中?
可以通过使用jQuery的appendTo()方法,在指定DOM树末添加一个元素。
8、如果利用jQuery添加或移除css类?
利用addClass()和 removeClass()来实现。
——————————————Ajax
Ajax优点:
1、异步模式,提升了用户体验;
2、优化了浏览器和服务器传输,减少了不必要的数据,减少了贷款占用;
3、Ajax在客户端运行,承担了一部分服务器工作,减少了服务器的负载
Ajax缺点:
1、不支持后退功能;
2、兼容性较差;
3、数据由后台返回,对搜索引擎不友好;
4、需要配合节流,防抖,进行优化;
XMLhttprequest对象
Ajax核心就是XMLhttprequest。是一种异步请求技术。
Ajax解决浏览器缓存:
1、在请求地址后添加随机数,
2、添加时间戳;
3、在发送Ajax之前,添加xhr.setRequestHeader(''if-modified-since,'0')
Ajax和js区别
js是一种浏览器执行的脚本语言;Ajax是一个交互式网页应用的开发技术。
Ajax请求时候get和post方式区别
get一般用来查询操作,长度有限,安全性较低。
post一般用来提交数据,没有长度显示,安全性较高。
Ajax状态码
readyState === 0 : 表示未初始化完成,也就是 open 方法还没有执行 readyState === 1 : 表示配置信息已经完成,也就是执行完 open 之后 readyState === 2 : 表示 send 方法已经执行完成 readyState === 3 : 表示正在解析响应内容 readyState === 4 : 表示响应内容已经解析完毕,可以在客户端使用了
git协同开发:
git add . : 添加所有文件到暂存区
git pull :切换到最新分支,并合并;
git push :提交到远程仓库
git push origin 分支名 -u :远程创建分支后关联本地,并提交
git branch: 查看本地分支
git branch -r :查看远程分支
git branch newbranchname : 新建本地分支
git checkout -b branchname: 创建本地分支
git checkout branchname :切换分支
目录
————————————————————————JQuery
5、body中的onload()函数和jQuery中的document.ready()有什么区别?