Web前端开发面试八股文 |
您所在的位置：网站首页 › jquery绑定事件实现图片宽高加20 › Web前端开发面试八股文 |
Web前端开发面试八股文
|
HTML语义化
语义化标签
利于页面内容结构化
利于SEO
利于代码可读
使用HTML标签构建页面时，尽可能的使用具有语义的标签
HTML5有哪些新特性
HTML5新增： （1）新增语义化标签：nav、header、footer、aside、section、article （2）音频、视频标签：audio、video （3）数据存储：localStorage、sessionStorage （4）canvas（画布）、Geolocation（地理定位）、websocket（通信协议） （5）input标签新增属性：placeholder、autocomplete、autofocus、required （6）history API：go、forward、back、pushstate var 、let、const区别1.var声明的变量会挂载在window上，而let和const声明的变量不会 2.var声明变量存在变量提升，而let和const不存在变量提升 3.let和const声明形成块作用域，var声明不形成块作用域 4.同一作用域下let和const不能声明同名变量，而var可以声明同名变量 5.暂存死区：在使用let、const命令声明变量之前，该变量都是不可用的。这在语法上，称为暂时性死区。使用var声明的变量不存在暂时性死区。 6.let声明的变量允许重新赋值，const不允许 const声明的对象属性和数组的值是可以修改的 我们都知道const 是声明常量的，如果用const声明过后的变量是不可以修改的 但如果是const 声明了对象，其实对象的属性是可以修改的，对象属性被赋值为常量是不受保护的 如果是const声明了数组，数组里面的值也是可以修改的，数组的被定义为常量也是不受保护的 默认情况下，哪些HTML标签是块级元素、内联元素、空元素？ 内联(行内)元素有：a b span img input select strong 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p 常见的空元素：、、SQL注入问题、XSS跨站脚本攻击、XSRF跨站请求伪造、Session劫持 SQL注入问题的解决方案 1.做好客户端表单验证 2.做好服务端参数验证 3.数据库使用预编译的SQL语句 Session劫持的解决方案 Session IP双重认证、Token机制 XSS的解决方案（危机种类：窃取网页浏览的cookie值、劫持流量实现恶意跳转） 使用转义解决，将转义成 XSRF常见解决方案 token验证 对eventLoop机制的理解？浏览器中的事件循环机制又叫事件队列 axios 是基于Promise的，用于浏览器和nodejs的一个http客户端。 主要用于向后台发送请求，还有就是在请求中做更多的控制。 优点 支持Promise 提供了一些并发的方法，比如Promise.all 提供拦截器（守卫） 支持CSRF（跨站请求伪造） delete和Vue.delete删除数组的区别普通的delete删除一个数组中的元素，该元素会成为空值（empty）。数组长度不变。 vue.delete删除会直接删除一个数组元素，长度会减少。 Javascript设计模式的定义一套被反复使用，思想成熟，经过分类和无数实战设计经验的总结，使用设计模式是为了让系统代码，可重用，可扩展，可解耦，更容易被人理解且能保证代码可靠性 JavaScript设计原则开闭原则、里氏转换原则、依赖倒转原则、接口隔离原则、合成/聚合复用原则、迪米特原则 原型和原型链原型是每个函数都有prototype属性，因为这个属性的值是个对象，也称为原型对象 作用：存放一些属性和方法、在JavaScript中实现继承 原型链是由一些用来继承和共享属性__proto__的对象组成的对象键（一个原型对象的原型不为 null 的话） 原型链是一种查找规则 当访问一个对象的属性时，如果这个对象内部不存在这个属性，那么它就会去它的原型对象里找这个属性，这个原型对象又会有自己的原型，于是就这样一直找下去，这种链式查找过程称之为原型链 原型链的尽头是null。也就是Object.prototype.proto 同源策略同源策略是浏览器里的一种安全协议确保两页面间的协议、域名和端口都相同（一段脚本只能读取来自同一来源的窗口和文档的属性） 如何解决跨域问题 jsonp（原理是动态插入script标签，但是只支持get请求） 服务器上设置代理页面 CORS(跨域资源共享——服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求，前后端都需要设置) window.name+ iframe window.postMessage document.domain+iframe websocket location.hash+iframe display:none和visibility:hidden的区别display:none在文档布局中不再给它分配空间 visibility:hidden隐藏后还在文档布局仍保留原来的空间 JS节点操作 创建节点、追加节点1.createElement创建一个元素节点。 2.appendChild 追加一个节点。 3.createTextNode创建一个文本节点。 删除、移除节点removeChild(节点) 删除一个节点，用于移除删除一个参数（节点）。 其返回的被移除的节点，被移除的节点仍在文档中，只是文档中已没有其位置了。 替换节点replaceChild(插入的节点，被替换的节点) ，用于替换节点，接受两个参数， 第一参数是要插入的节点，第二个是要被替换的节点。返回的是被替换的节点。 查找节点childNodes 包含文本节点和元素节点的子节点。 复制节点cloneNode() 浏览器缓存机制分为强缓存和协商缓存，根据响应的header内容来决定 强缓存：浏览器直接从本地缓存中获取数据，不与服务器进行交互（不用请求服务器，直接使用本地缓存）-expires、cache-control 协商缓存：浏览器发送请求到服务器，服务器判断是否可使用本地缓存（浏览器发现本地有资源的副本，单不太确定要不要使用于是去问服务器）-Last-Modified/If-Modified-Since，Etag/If-None-Match Vue数据双向绑定的原理通过数据劫持结合发布者-订阅者模式的方式实现的，利用了Object.defineProperty()重新定义了对象获取属性值（get）和设置属性值（set） 双向数据绑定v-model的实现原理 通过input元素的value=this.name 绑定input事件this.name=$event.target.value data更新触发re-renderv-model只是语法糖(在内部为不同的输入元素使用不同的property并抛出不同的事件) text和textarea元素使用value property和input事件 checkbox和radio使用checked property和change事件 select字段将value作为property并将change作为事件 Object.defineProperty(target, key, options)，options可传什么参数？ value：给target[key]设置初始值 get：调用target[key]时触发 set：设置target[key]时触发 writable：规定target[key]是否可被重写，默认false enumerable：规定了key是否会出现在target的枚举属性中，默认为false configurable：规定了能否改变options，以及删除key属性，默认false，具体详细请看 Vue的核心点：数据劫持和组件系统渐进式代表的含义是：没有多做职责之外的事。 vue.js只提供了 vue-cli 生态中最核心的 组件系统 和 双向数据绑定。 数据劫持：ViewModel保证数据和视图的一致性 组件系统：应用类UI可以看作全部是有组件树构成的 组件化开发能大幅提高应用开发效率、测试性、复用性 常用的组件化技术：属性、自定义事件、插槽 降低更新范围，值重新渲染变化的组件 高内聚、低耦合、单向数据流 route和route和route和router的区别$route相当于当前正在跳转的路由对象 $router为vueRouter的实例，相当于一个全局路由对象，里面含有很多的属性和子对象 JSON的定义json是一种轻量级的数据交换格式，是基于JavaScript的一个子集 json转换成js对象（JSON.parse） js对象转换成json（JSON.stringify） 字符串转化为json JSON.parse（）json转化为字符串 JSON.stringify（） 变量提升和函数提升变量提升：将var变量的声明提升到所在作用域顶端去执行，赋值仍然在同一行显示 函数提升：将function声明的函数提升到作用域顶端执行，函数提升优先于变量提升 编写一个数组去重的方法 function sort（arr）{ for(var i=0; i < arr.length; i++) { for (var j = i+1; j < arr.length; j++) { if (arr[i] == arr[j]) { arr.splice(j,1) j-- // 删除一个元素后，后面的元素会依次往前，下标也需要依次往前 } } } return arr } 冒泡算法排序 for (var i=0; i < arr.length-1;i++) { for (var j=0;j < arr.length-1-i; j++) { if (arr[j]>arr[j+1]) { var temp = arr[j] arr[j] = arr[j+1] arr[j+1] = temp } } } Map和weakMap的区别 Map可以被遍历，weakMap不能被遍历 Map的键可以是任意类型，weakMap只接受对象作为键（null除外，不接受其他类型的值作为键） Map的键实际上是跟内存地址绑定的，只要内存地址不一样，就视为两个键， weakMap的键是弱作用，键所指指向的对象可以被垃圾回收，此时键是无效的 weakMap的应用数据缓存 部署私有属性 在DOM对象上保存相关数据 介绍下Set和Map的区别应用场景：Set用于数据重组、Map用于数据储存 Set： 成员不能重复 只有键值没有键名，类似数组 可以遍历，方法有add,delete,hasMap: 本质上是键值对的集合，类似集合 可以遍历，可以跟各种数据格式转换 Vue3新特性 组合式Api实现原理: 通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等。 通过Reflect（反射）: 对源对象的属性进行操作。 setup - 组件内使用 Composition API 的入口点 reactive（对象数据）, ref （单值数据）- 数据响应式 computed - 计算属性 watchEffect、watch - 侦听器 watchEffect立即执行传入的一个函数，并响应式追踪其依赖，并在其依赖变更时重新运行该函数。 watch对比watchEffect，watch允许我们： 懒执行副作用，也就是说仅在侦听的源变更时才执行回调； 更明确哪些状态的改变会触发侦听器重新运行副作用； 访问侦听状态变化前后的值。toRefs - 解构响应式对象数据 Vue3和Vue2的区别一、Vue3比Vue2更加友好地集成Typescript 二、响应式原理不同（Vue2是通过ES5的Object.defineProperty，Vue3是通过更快的原生proxy和reflect） 三、Vue3在Vue2的基础更加完善处 1.Vue3性能更比Vue2强（diff算法的优化、静态提升、事件监听缓存） 2.打包更科学，不再打包没用到的模块 3.Composition API（组合式API） 4.Fragment（碎片）、Teleport（传送门）、Suspense（悬念） 5.更加友好的支持和兼容TS 6.Custom Renderer API（自定义渲染API） Vue2和Vue3的生命周期对比 beforeCreate->setup() created->setup() beforeMount->onBeforeMount mounted->onMounted beforeUpdate->onBeforeUpdate updated->onUpdated beforeDestroy->onBeforeUnmount destroyed->onUnmounted activated-> onActivated deactivated-> onDeactivated errorCaptured-> onErrorCaptured beforeCreate组件实例被创建之初，组件的属性生效之前created组件实例已经完全创建，属性也绑定，但真实 dom 还没有生成，$el 还不可用beforeMount在挂载开始之前被调用：相关的 render 函数首次被调用mountedel 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子beforeUpdate组件数据更新之前调用，发生在虚拟 DOM 打补丁之前update组件数据更新之后activatedkeep-alive 专属，组件被激活时调用deactivatedkeep-alive 专属，组件被销毁时调用beforeDestory组件销毁前调用destoryed组件销毁后调用 vue中父子组件钩子的执行顺序父组件先于子组件created，而子组件先于父组件mounted 父子组件加载渲染过程： 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted 子组件更新：父beforeUpdate->子beforeUpdate->子updated->父updated 父组件更新过程：父beforeUpdate->父updated 销毁：父beforeDestroy->子beforeDestroy->子destroyed->父destroyed Vue项目前端性能优化 vue-router路由懒加载 打包优化-工程文件打包的时候不生成.map文件 切换多入口模式 使用字体图标代替切图 使用雪碧图 提取公共样式和方法 销毁控件 销毁定时器 路由离开及时解绑事件vm.off() 使用keep-alive 代码层面的优化 iframe的内存释放 Vue数据更新而视图不更新问题? 使用Vue.set/Vue.delete （this.$set(this.obj,'e',5)） 使用vm.forceUpdate强制更新视图（this.obj.d=′4′）(this.forceUpdate强制更新视图（this.obj.d='4'）(this.forceUpdate强制更新视图（this.obj.d=′4′）(this.forceUpdate()对视图进行强制更新) 使用深拷贝，重新赋值替换 Vue上线打包优化 禁止生成sourceMap文件 关闭prefetch(预先加载模块，提前获取用户未来可能会访问的内容 路由懒加载 ElementUI组件库按需加载 使用CDN加载外部资源 GZIP 图片压缩 代码压缩 防抖的原理及应用场景原理：事件响应函数在一段时间之后才会执行，如果在这段时间之内，再次调用，则重新计算执行时间（通过setTimeout的方式，在一定的时间间隔内，将多次触发转变为一次触发） 应用场景： scroll时间滚动触发 搜索框输入查询 表单验证 按钮提交事件 浏览器窗口缩放 节流的原理及应用场景原理：如果持续触发事件，每隔一段时间，只执行一次操作（减少一段时间之内的事件触发频率） 应用场景： DOM元素的拖拽 射击类游戏 计算鼠标移动的距离 哪些操作会造成内存泄漏？内存泄漏指由于疏忽或错误造成程序未能释放已经不再使用的内存 垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。 针对JavaScript的来及回收机制有以下两种方法（常用）：标记清除法，引用计数法 setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。 闭包 控制台日志console 没有清理对DOM元素的引用 意外的全局变量 new操作符具体干了什么呢? 创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型 属性和方法被加入到 this 引用的对象中 新创建的对象由 this 所引用，并且最后隐式的返回 this new操作符原理 创建个空对象。 空对象的proto指向类的prototype。 通过this添加属性和方法。 this指向实例对象。 返回实例。 var obj = {}; obj.__proto__ = Base.prototype; Base.call(obj); iframe的优缺点？优点： 解决加载缓慢的第三方内容如图标和广告等的加载问题 Security sandbox 并行加载脚本缺点： iframe会阻塞主页面的Onload事件 即时内容为空，加载也需要时间 没有语意 CSS哪些属性可以继承？哪些属性不可以继承？可继承的样式： font-size font-family color text-indent text-align line-height text-transform font-weight不可继承的样式： border padding margin width height px、em与rem的区别？px像素相对于显示器屏幕分辨率是固定不变的，不受浏览器缩放影响 em相对于父元素的字体大小font-size rem相对于根元素html的字体大小font-size Vue首屏白屏原因 由于把路由模式mode设置成history了，默认是hash（改为hash或者直接删除模式配置，如果非要用的话，在服务端加一个覆盖所有情况的候选资源。） 打包后的dist目录下的文件引用路径不对，因找不到文件而报错导致白屏（修改config下面index.js的模块导出路径。） 在项目中使用了es6语法，一些浏览器不支持es6，造成编译错误不能解析而造成白屏（安装Babel ，Babel 会把这些新语法转译成较低版本的代码。） vue项目实现路由按需加载（路由懒加载）的三种方式： Vue异步组件 ## resolve ES6标准语法import（）---------推荐使用！！！！！ webpack的require，ensure() 路由传参query和params区别 引入方式不同：query使用path引入，params使用name引入 接收方式不同：query使用this.route.query.name，params使用this.route.query.name，params使用this.route.query.name，params使用this.route.params.name 刷新页面时，query参数不会消失，params参数会消失。 query传过来的参数会显示在地址栏中、类似于?id=1，params传过来的参数不会显示在地址栏中，直白来说就是query相当于get请求，params相当于post请求。 首屏优化该如何去做 使用路由懒加载 非首屏组件使用异步组件 首屏不重要的组件延迟加载 静态资源放在CDN上 减少首屏上JS，CSS等资源文件的大小 使用服务器渲染 尽量减少DOM的数量和层级 使用精灵图请求 做一些loading 开启Gzip压缩 图片懒加载 首屏加载白屏怎么进行优化？ 采用路由懒加载的方式，当用户访问的时候，再加载相应的模块。 webpack开启gzip压缩。 使用CDN减小代码体积加快请求速度。 项目打包禁止生成map文件。 使用外链css和js文件 。 使用骨架屏，在首页加载的时候显示页面结构轮廓。 CDN的作用（为什么静态资源要放在CDN上）1. 加速网站的访问 2. 为了实现跨运营商、跨地域的全网覆盖 互联不互通、区域ISP地域局限、出口带宽受限制等种种因素都造成了网站的区域性无法访问。CDN加速可以覆盖全球的线路，通过和运营商合作，部署IDC资源，在全国骨干节点商，合理部署CDN边缘分发存储节点，充分利用带宽资源，平衡源站流量。 3. 为了保障你的网站安全 CDN的负载均衡和分布式存储技术，可以加强网站的可靠性，相当无无形中给你的网站添加了一把保护伞，应对绝大部分的互联网攻击事件。防攻击系统也能避免网站遭到恶意攻击。 4. 为了异地备援 当某个服务器发生意外故障时，系统将会调用其他临近的健康服务器节点进行服务，进而提供接近100%的可靠性，这就让你的网站可以做到永不宕机。 5. 为了节约成本投入 使用CDN加速可以实现网站的全国铺设，你根据不用考虑购买服务器与后续的托管运维，服务器之间镜像同步，也不用为了管理维护技术人员而烦恼，节省了人力、精力和财力。 6. 为了让你更专注业务本身 CDN加速厂商一般都会提供一站式服务，业务不仅限于CDN，还有配套的云存储、大数据服务、视频云服务等，而且一般会提供7x24运维监控支持，保证网络随时畅通，你可以放心使用。并且将更多的精力投入到发展自身的核心业务之上。 CSS中 link 和@import 的区别是？ link属于HTML标签，而@import是CSS提供的; 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载; import只在IE5以上才能识别，而link是HTML标签，无兼容问题; link方式的样式的权重 高于@import的权重 BFC（块级格式化上下文，用于清除浮动，防止margin重叠等）块级格式化上下文，是页面上一个隔离的独立渲染区域，并且有一定的布局规则（容器里面的资源元素不会影响到外面的元素）。 BFC区域不会与float box重叠 BFC是页面上的一个独立容器，子元素不会影响到外面 计算BFC的高度时，浮动元素也会参与计算那些元素会生成BFC/如何触发BFC： 根元素 float不为none的元素 position为fixed和absolute的元素 display为inline-block、table-cell、table-caption，flex，inline-flex的元素 overflow不为visible的元素 GET和POST的区别 get参数通过url传递，post放在request body中。 get请求在url中传递的参数是有长度限制的，而post没有。 get比post更不安全，因为参数直接暴露在url中，所以不能用来传递敏感信息。 get请求只能进行url编码，而post支持多种编码方式 get请求会浏览器主动cache，而post支持多种编码方式。 get请求参数会被完整保留在浏览历史记录里，而post中的参数不会被保留。 GET和POST本质上就是TCP链接，并无差别。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。 GET产生一个TCP数据包；POST产生两个TCP数据包。 GET和POST区别（高频） GET在浏览器回退不会再次请求，POST会再次提交请求 GET请求会被浏览器主动缓存，POST不会，要手动设置 GET请求参数会被完整保留在浏览器历史记录里，POST中的参数不会 GET请求在URL中传送的参数是有长度限制的，而POST没有限制 GET参数通过URL传递，POST放在Request body中 GET参数暴露在地址栏不安全，POST放在报文内部更安全 GET一般用于查询信息，POST一般用于提交某种信息进行某些修改操作 GET产生一个TCP数据包；POST产生两个TCP数据包Get和post的选择： 1.私密性的信息请求使用post（如注册、登陆）。 2.查询信息使用get。 请列举几种清除浮动的方法 父级div定义 height x 结尾处加空div标签 clear:both x 父级div定义 伪类:after 和 zoom + 父级div定义 overflow:hidden + 父级div定义 overflow:auto x 常见浏览器兼容性问题与解决方案？ 不同浏览器的标签默认的外补丁和内补丁不同——CSS里 *{margin:0;padding:0;} 块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大——块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大 设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度——给超出高度的标签 设置overflow:hidden;或者设置行高line-height 小于你设置的高度。 行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug——在display:block;后面加入display:inline;display:table; 图片默认有间距——使用float属性为img布局 标签最低高度设置min-height不兼容——如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;} 透明度的兼容CSS设置——一般在ie中用的是filter:alpha(opacity=0)和一般就是直接使用opacity:0,对于兼容的 浏览器的内核 IE: trident 内核 Firefox ： gecko 内核 Safari:webkit 内核 Opera: 以前是 presto 内核， Opera 现已改用 Google Chrome 的 Blink 内核 Chrome:Blink( 基于 webkit ， Google 与 Opera Software 共同开发 ) WebSocket的理解WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。依靠这种技术可以实现客户端和服务器端的长连接，双向实时通信。 特点: 事件驱动 异步 使用ws或者wss协议的客户端socket 能够实现真正意义上的推送功能缺点： 少部分浏览器不支持，浏览器支持的程度与方式有区别。 前端的项目如何进行优化 减少请求数量， 减少资源大小， 优化网络连接， 优化资源加载， 减少重绘回流， 使用性能更好的API和构建优化 web前端项目性能优化 减少HTTP请求 使用内容发布网络（CDN） 添加本地缓存 压缩资源文件 将CSS样式表放在顶部，把javascript放在底部（浏览器的运行机制决定） 避免使用CSS表达式 减少DNS查询 使用外部javascript和CSS 避免重定向 图片lazyLoad懒加载 arguments的理解 arguments是类数组对象，有length属性，不能调用数组方法 可用Array.from()转换 箭头函数获取arguments(可用…rest参数获取) 箭头函数和function有什么区别 箭头函数只能是匿名函数。 箭头函数不能用于构造函数，不能用new创建实例对象。 箭头函数的this从其所在上下文捕获，而普通函数拥有自己的this。注意：箭头函数的this一旦被捕获，就不会再发生改变，call、apply、bind均无法改变。 箭头函数没有arguments参数，取而代之的是三点运算符（...） 箭头函数不能使用Generator函数，不能使用yeild关键字。 箭头函数不具有prototype原型对象。 箭头函数不具有super。 箭头函数不具有new.target。 事件委托以及冒泡原理事件委托，又名事件代理。事件委托就是利用事件冒泡(自里向外)，就是把子元素的事件都绑定到父元素上。如果子元素阻止了事件冒泡，那么委托也就没法实现了。 事件委托是利用冒泡阶段的运行机制来实现的，就是把一个元素响应事件的函数委托到另一个元素，一般是把一组元素的事件委托到他的父元素上，委托的优点是减少内存消耗，节约效率，动态绑定事件。 指的是，不在事件的发生地（直接dom）上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上事件的触发，通过判断事件发生元素DOM的类型，来做出不同的响应。 好处：比较合适动态元素的绑定，新添加的子元素也会有监听函数，也可以有事件触发机制 事件冒泡，就是元素自身的事件被触发后，如果父元素有相同的事件，如onclick事件，那么元素本身的触发状态就会传递，也就是冒到父元素，父元素的相同事件也会一级一级根据嵌套关系向外触发，直到document/window，冒泡过程结束 数组去重的方法 ES6的set indexOf循环去重 Object 键值对去重；把数组的值存成 Object 的 key 值，比如 Object[value1] = true，在判断另一个值的时候，如果 Object[value2]存在的话，就说明该值是重复的。 splice循环去重 哈希集合循环去重 for循环嵌套，利用splice()去重； 创建新数组，利用indexOf()去重； ES6中利用(new Set())去重； 利用数组的sort()去重（相邻元素比较法）； 利用数组的includes()去重； 利用数组的filter()去重。 图片的懒加载和预加载预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。 懒加载：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。 两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。 懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。 null 和 undefined 的区别？相同： 在 if 语句中 null 和 undefined 都会转为false两者用相等运算符比较也是相等 首先 Undefined 和 Null 都是基本数据类型，这两个基本数据类型分别都只有一个值，就是 undefined 和 null。 不同： undefined 代表的含义是未定义， 定义了形参，没有传实参，显示undefined 一般变量声明了但还没有定义的时候会返回 undefined 对象属性名不存在时，显示undefined 函数没有写返回值，即没有写return，拿到的是undefined null 代表的含义是空对象。也作为对象原型链的终点 null 主要用于赋值给一些可能会返回对象的变量，作为初始化。 盒子模型的理解 标准盒子模型 （content-box）盒子总宽度 = width + padding + border + margin; 盒子总高度 = height + padding + border + margin width/height 只是内容高度，不包含 padding 和 border值 IE 怪异盒子模型 （border-box）盒子总宽度 = width + margin; 盒子总高度 = height + margin; width/height 包含了 padding和 border值 元素水平垂直居中的方法有哪些？如果元素不定宽高呢？ 利用定位+margin:auto .father{ width:500px; height:300px; border:1px solid #0a3b98; position: relative; } .son{ width:100px; height:40px; background: #f0a238; position: absolute; top:0; left:0; right:0; bottom:0; margin:auto; } 利用定位+margin:负值 .father { position: relative; width: 200px; height: 200px; background: skyblue; } .son { position: absolute; top: 50%; left: 50%; margin-left:-50px; margin-top:-50px; width: 100px; height: 100px; background: red; } 利用定位+transform .father { position: relative; width: 200px; height: 200px; background: skyblue; } .son { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100px; height: 100px; background: red; } table布局设置父元素为display:table-cell，子元素设置 display: inline-block。利用vertical和text-align可以让所有的行内块级元素水平垂直居中 .father { display: table-cell; width: 200px; height: 200px; background: skyblue; vertical-align: middle; text-align: center; } .son { display: inline-block; width: 100px; height: 100px; background: red; }flex布局 .father { display: flex; justify-content: center; align-items: center; width: 200px; height: 200px; background: skyblue; } .son { width: 100px; height: 100px; background: red; }grid布局 .father { display: grid; align-items:center; justify-content: center; width: 200px; height: 200px; background: skyblue; } .son { width: 10px; height: 10px; border: 1px solid red } 怎么理解回流跟重绘在HTML中，每个元素都可以理解成一个盒子，在浏览器解析过程中，会涉及到回流与重绘： 回流：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置 当渲染树中部分或者全部元素的尺寸、结构或者属性发生变化时，浏览器会重新渲染部分或者全部文档的过程 重绘：当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制 当页面中某些元素的样式发生变化，但是不会影响其在文档流中的位置时，浏览器就会对元素进行重新绘制 什么是响应式设计？响应式设计的基本原理是什么？如何做？响应式网站设计（Responsive Web design）是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整,是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。 响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta声明viewport |
【本文地址】
今日新闻 |
推荐新闻 |