[TOC] ### 1.请说出三种减低页面加载时间的方法： - 压缩css、js文件 - 合并js、css文件，减少http请求 - 外部js、css文件放在最底下 - 减少dom操作，尽可能用变量替代不必要的dom操作 ***** ### 2.如何提高页面性能优化? 内容方面: 1.减少 HTTP 请求 2.减少 DOM 元素数量 3.使得 Ajax 可缓存 针对CSS: 1.把 CSS 放到代码页上端 2.从页面中剥离 JavaScript 与 CSS 3.精简 JavaScript 与 CSS 4.避免 CSS 表达式 针对JavaScript : 1. 脚本放到 HTML 代码页底部 2. 从页面中剥离 JavaScript 与 CSS 3. 精简 JavaScript 与 CSS 4. 移除重复脚本 ***** ### 3.介绍js的基本数据类型 Undefined、Null、Boolean、Number、String、 > ECMAScript 2015 新增:Symbol(创建后独一无二且不可变的数据类型 ) ***** - 介绍js有哪些**内置对象**？ Object Boolean String Number Function Array RegExp Date Error Math - js常用的数组操作**内置函数** （添加）push、unshift、（删除）pop、shift、（转换）join、（排序）reverse、sort、（连接）concat...... - javascript中几种为false的值： undefined、null、false、0、NaN、""或''（空字符串） ***** ### 4. 说几条写JavaScript的基本规范？ 1.不要在同一行声明多个变量。 2.请使用 ===/!==来比较true/false或者数值 3.使用对象字面量替代new Array这种形式 4.不要使用全局函数。 5.Switch语句必须带有default分支 6.函数不应该有时候有返回值，有时候没有返回值。 7.For循环必须使用大括号 8.If语句必须使用大括号 9.for-in循环中的变量 应该使用var关键字明确限定作用域，从而避免作用域污染。 ***** ### 5.请指出document load和document ready的区别? **共同点**：这两种事件都代表的是页面文档加载时触发。 **异同点**：**ready 事件**的触发,表示文档结构已经加载完成(不包含图片等非文字媒体文件)。**onload事件**的触发,表示页面包含图片等文件在内的所有元素都加载完成。 ***** ### 6.使用正则表达式验证邮箱格式 **规则：** 以数字字母开头，组件可以使多个数字字母下划线或“-”；然后是@符号，后面是数字字母，然后是.符号加2-4个字母结尾。 ``` email.onchange = function () { var email = this.value; var reg =/^(\[a-zA-Z\]|\[0-9\])(\\w|\\-)+@\[a-zA-Z0-9\]+\\.(\[a-zA-Z\]{2,4})$/; if (reg.test(email)) { alert("邮箱格式正确"); } else { alert("邮箱格式不正确"); } } ``` 其中包含的知识有: > 预定义字符集：[0-9] \d [0-9a-zA-Z_] \w 空格 \s 量词： 1、确定数量：{m,n} -->至少m个，最多n个 2、不确定数量：?--> 1个或0个 + --> 1个以上 * --> 多个或没有 ^ --> 以什么开头 $ --> 以什么结尾 严格匹配时，头尾必须加 ***** ### 7.浏览器是如何渲染页面的? 渲染的流程如下: 1.解析HTML文件,创建DOM树。 自上而下,遇到任何样式(link、style)与脚本(script)都会阻塞(外部样式不阻塞后续外部脚本的加载)。 2.解析CSS。优先级:浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式; 3.将CSS与DOM合并,构建渲染树(Render Tree) 4.布局和绘制,重绘(repaint)和重排(reflow) ***** ### 8. 那么问题来了，重绘和重排是什么？ - 重绘：当渲染树中的元素外观（如：颜色）发生改变，不影响布局时，产生重绘 - 重排：当渲染树中的元素的布局（如：尺寸、位置、隐藏/状态状态）发生改变时，产生重绘回流 - **重排必将引起重绘，而重绘不一定会引起回流** ***** ### 9.分析 ['1', '2', '3'].map(parseInt) 答案是多少？ （这题困扰了我好久,有毒!!） - 答案:[1, NaN, NaN] - parseInt(string, radix) 第2个参数 radix 表示进制。省略 radix 或 radix = 0，则数字将以十进制解析 - map 每次为 parseInt 传3个参数(elem, index, array)，其中 index 为数组索引 - 因此，map 遍历 ["1", "2", "3"]，相应 parseInt 接收参数如下 ``` parseInt('1', 0); // 1 parseInt('2', 1); // NaN parseInt('3', 2); // NaN //例子 parseInt('15', 10); // 15 parseInt('0xa', 16); // 10 parseInt('15', 6); // 11 (1*6^1+5*6^0) parseInt('16', 5); // 1 "1",5 =>1 ``` 当然上面没看懂的话，就是parseint忘记了，我历经千辛万苦，终于搞懂了，写了一个我理解的说法( • ̀ω•́ )✧： parseInt(string, radix); string：必需，要被解析的字符串 radix：可选，表示要解析的数字的基数 > 如果省略该参数或其值为 0，则数字将以 10 为基础来解析。如果它以“0x” 或 “0X” 开头，将以 16 为基数。 ``` 当string<radix时：为本身值 当string=radix时：nan 当string>radix时：两种情况： 1.radix<string<10时，nan (等于10就是她本身值了嘛) 2.string>10,有两种情况： 1."xy",z 当y<z时，按照x*z^1+y*z^0来算 2."xy",z 当y>=z时，除掉y值，只要x值来算z。等于回到了上面的string<radix时。 ``` ***** ### 10.DOM事件流，阻止事件的默认行为 **DOM事件流分三个阶段：自上而下的捕获，作用在最深处的目标阶段，以及自下而上的冒泡** > 事件的默认行为是指浏览器在事件传递和处理完成后自动执行的与该事件关联的默认动作。例如，单击一个超链接的默认行为是访问其定义的url。  IE和其他浏览器阻止事件的默认行为的方法不同。在IE中，可以通过**设置event对象的returnValue属性为false来阻止事件的默认行为**；在其他浏览器中，则可以通过**设置event对象的preventDefault()方法来实现**。 **冒泡的阻止**：stopPropagation ***** ### 11.**push()-pop()-shift()-unshift()分别是什么功能？** 1、push 方法 将新元素添加到一个数组中，并返回数组的新长度值。 2、pop 移除数组中的最后一个元素并返回该元素。 3、shift 移除数组中的第一个元素并返回该元素。 从头删除 4、unshift 将指定的元素插入数组开始位置并返回该数组。 从头增加 ***** ### 12.**let/const/var的区别：** `var：声明全局变量` `let：声明块级变量，即局部变量。` `const：用于声明常量，也具有块级作用域` ***** ### 13.**http与https的区别：** >[success] **超文本传输协议**HTTP协议被用于在Web浏览器和网站服务器之间传递信息，HTTP协议以明文方式发送内容，**不提供任何方式的数据加密**，如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息，因此，**HTTP协议不适合传输一些敏感信息**，比如：信用卡号、密码等支付信息。 >[success] 为了解决HTTP协议的这一缺陷，需要使用另一种协议：**安全套接字层超文本传输协议**HTTPS，为了数据传输的安全，HTTPS在HTTP的基础上加入了**SSL协议**，SSL依靠证书来验证服务器的身份，并为浏览器和服务器之间的通信加密。 ***** ### 14.**判断一个对象是否为数组：** - **1、constructor** ``` onsole.log(a.constructor==Array);//ture ``` - **2、obj instanceof Array** instanceof只会返回一个布尔值 ~~~ [] instanceof Array       ==>   true ~~~ - **3、Array.isArray()方法。** ~~~ rray.isArray([1, 2, 3]); // true Array.isArray({foo: 123}); // false ~~~ ***** ### **15.前端页面有哪三层？** **结构层（HTML）、表示层（CSS）、行为层（JavaScript）** ***** ### **16.谈谈document.ready和window.onload的区别** >[success] 这两个方法的效果都是一样的，都是在dom文档树加载完之后执行一个函数（注意，这里面的文档树加载完不代表全部文件加载完）。 而**window.onload**是在dom文档树加载完和所有文件加载完之后执行一个函数。也就是说$(document).ready要比window.onload**先执行**。 ### **17.cookie和session的区别有哪些？** **cookie:** cookie 确实非常小，它的大小限制为[4KB]左右；**数据的生命期**是关闭浏览器后失效；安全性一般。 **sessionStorage:** 用于临时保存同一窗口(或标签页)的数据，刷新页面数据依旧存在，在[关闭窗口或标签页之后]将会删除这些数据。**生命周期**是仅在当前会话下有效，关闭页面或浏览器后被清除；大小可以达到5m或更大；安全性更优。 **localStorage** 大小可以达到5m或更大；储存持久数据，浏览器关闭后数据不丢失除非主动删除数据 ### **18.浏览器内核：** Trident(IE内核)、Gecko(Firefox内核)、Webkit(Safari内核,Chrome内核原型,开源)