一.引起内存泄漏的操作有哪些? 1.全局变量引起 2.闭包引起 3.dom清空,事件未清除 4.子元素存在引用 5.被遗忘的计时器
二、简要介绍ES6? ES6在变量的声明和定义方面增加了let、const声明变量,有局部变量的概念,赋值中有比较吸引人的结构赋值, 同时ES6对字符串、 数组、正则、对象、函数等拓展了一些方法,如字符串方面的模板字符串、函数方面的默认参数、 对象方面属性的简洁表达方式,ES6也 引入了新的数据类型symbol,新的数据结构set和map,symbol可以通过typeof检测出来, 为解决异步回调问题,引入了promise和 generator,还有最为吸引人了实现Class和模块,通过Class可以更好的面向对象编程, 使用模块加载方便模块化编程,当然考虑到 浏览器兼容性,我们在实际开发中需要使用babel进行编译。
三、对js原型的理解? 我们知道在es6之前,js没有类和继承的概念,js是通过原型来实现继承的。 在js中一个构造函数默认自带有一个prototype属性, 这个的属性值是一个对象, 同时这个prototype对象自带有一个constructor属性,这个属性指向这个构造函数,同时每一个实例 都有一个__proto__属性指向这个prototype对象,我们可以将这个叫做隐式原型,我们在使用一个实例的方法的时候, 会先检查 这个实例中是否有这个方法,没有则会继续向上查找这个prototype对象是否有这个方法,刚刚我们说到prototype是一个对象 , 那么也即是说这个是一个对象的实例,那么这个对象同样也会有一个__proto__属性指向对象的prototype对象。
四、对js模块化的理解? 在ES6出现之前,js没有标准的模块化概念, 这也就造成了js多人写作开发容易造成全局污染的情况, 以前我们可能会采用立即执行 函数、对象等方式来尽量减少变量这种情况, 后面社区为了解决这个问题陆续提出了AMD规范和CMD规范, 这里不同于Node.js的 CommonJS的原因在于服务端所有的模块都是存在于硬盘中的, 加载和读取几乎是不需要时间的,而浏览器端因为加载速度取决于网速, 因此需要采用异步加载, AMD规范中使用define来定义一个模块,使用require方法来加载一个模块,现在ES6也推出了标准的模块 加载方案, 通过export和import来导出和导入模块。
五.水平居中的方法? 1.元素为行内元素,设置父元素text-align:center 2.如果元素宽度固定,可以设置左右margin为auto; 3.如果元素为绝对定位,设置父元素position为relative,元素设left:0;right:0;margin:auto; 4.使用flex-box布局,指定justify-content属性为center 5.display设置为tabel-ceil 六.垂直居中的方法 1.将显示方式设置为表格,display:table-cell,同时设置vertial-align:middle 2.使用flex布局,设置为align-item:center 3.绝对定位中设置bottom:0,top:0,并设置margin:auto 4.绝对定位中固定高度时设置top:50%,margin-top值为高度一半的负值 5.文本垂直居中设置line-height为height值
七、移动web开发中css常用的单位有哪些? 移动web开发中的css单位除了PC web开发常见的px、em、百分比,还有rem、vh、vw,rem类似于em,是一个相对字体大小, 不过rem相对的是根元素的字体大小,vw和vh是相对于viewport的宽高,这两个单位将viewport等分为100份, 也就是说1vw 相当于viewport宽度的百分之一。
八、常见的网页性能优化方法? 减少HTTP请求 使用雪碧图、内联图片,合并脚本和样式表。 使用内容分发网络(CDN) 添加Expires头 压缩组件 压缩样式表和脚本,开启gzip压缩大概减少70%的大小 样式表放在顶部 将脚本放在底部 避免CSS表达式 使用外部JavaScript和CSS 减少DNS查找 精简JavaScript 避免重定向 网站中除了域名首页外缺少斜杠将引起301重定向,个人测试工作室网站这个重定向消耗的时间在30ms左右 删除重复脚本 配置ETag 使Ajax可缓存
九、页面从输入URL到展现发生了什么? 输入URL之后,需要寻找到这个url域名的服务器IP,为了找到这个IP,浏览器首先会寻找缓存, 查看缓存中是否有记录, 缓存中查找的顺序是浏览器缓存、系统缓存、路由器缓存,缓存中没有则 查找系统的hosts文件中是否有记录, 如果没有记录则会查询DNS服务器,得到服务器的IP地址之 后,浏览器根据这个IP以及相应的端口号, (如HTTP协议默认的端口号为80,HTTPS协议的默认 端口号为443,当然可以在url中指定端口号)构造一个HTTP请求, 并将这个HTTP包请求封装在 一个TCP包中,(这个HTTP请求报文会包含这次请求的信息,主要是请求方法、请求的说明和请 求附带的数据), 这个tcp包依次会经过传输层、网络层、数据链路层、物理层到达服务器,服 务器解析这个请求来做出响应, (我们假定这个url是一个类似谷歌、淘宝这样的网站首页,而 不是简单的文件),服务器返回相应的HTML给浏览器, 因为HTML是一个树形结构,浏览器根据 这个HTML来构建DOM树在DOM树的构建过程中如果遇到js脚本和外部js连接, 则会停止构建DOM 树来执行和下载相应的代码,这会造成阻塞,这也就是为什么推荐js代码应该放在HTML代码的后 面, 之后根据外部样式、内部样式、内联样式构建一个CSS对象模型树(CSSOM树),构建完成之 后和DOM树合并为渲染树, 这里主要做的是排除非视觉节点,如script、meta标签和排除display 为none的节点,之后就是进行布局, 布局主要是确定各个元素的位置和尺寸,之后就是渲染页面。 因为HTML文件中会含有图片、音频、视频等资源,在解析DOM的过程中, 遇到这些都会进行并行下 载,当然浏览器对每个域的并行下载数量有一定的限制,一般是4-6个,当然在这些所有请求中我们 还需要关注的就是缓存,缓存一般通过Cache-Control、Last-Modify、Expires等首部字段控制。 Cache-Control和Expires的区别在于Cache-Control使用相对时间,Expires使用的是基于服务器 端的绝对时间 ,因为存在时差问题,一般采用Cache-Control,在请求这些有设置了缓存的数据时,会先 查看是否过期, 如果没有过期则直接使用本地缓存,过期则请求并在服务器校验文件是否修改, 如果上一次 响应设置了ETag值会在这次请求的时候作为If-None-Match的值交给服务器校验,如果一致, 继续校验 Last-Modified,没有设置ETag则直接验证Last-Modified,再决定是否返回304
十、HTTP状态的简要分类及HTTP状态码101、200、301、302、304的具体含义? 可以按照HTTP状态码的第一个数字分类,1xx表示信息,2xx表示成功,3xx表示重定向,这里需要注意的是304,表示未修改, 4xx表示客户端错误,最常见的是404,5xx表示服务端错误 101:切换协议 200:正常,OK,301:永久重定向,302:临时重定向,304:未修改