js经典试题之w3规范系列

js经典试题之w3规范系列

1：w3c 制定的 javascript 标准事件模型的正确的顺序？

答案：事件捕获->事件处理->事件冒泡

解析：先事件捕获从windows > document 往下级直到 特定的事件节点，然后进行事件处理，再事件冒泡，从特定节点往上级，这个完整的过程

2：列举javascript  Browser 对象？

答案：

Navagator：提供有关浏览器的信息

Window：Window对象处于对象层次的最顶层，它提供了处理Navagator窗口的方法和属性

Location：提供了与当前打开的URL一起工作的方法和属性，是一个静态的对象

History：提供了与历史清单有关的信息

Document：包含与文档元素一起工作的对象，它将这些元素封装起来供编程人员使用

3：列举页面的性能指标的阶段？

答案：

白屏时间（first Paint Time）——用户从打开页面开始到页面开始有东西呈现为止

首屏时间——用户浏览器首屏内所有内容都呈现出来所花费的时间

用户可操作时间(dom Interactive)——用户可以进行正常的点击、输入等操作，默认可以统计domready时间，因为通常会在这时候绑定事件操作

总下载时间——页面所有资源都加载完成并呈现出来所花的时间，即页面 onload 的时间

分析：

请参考：传送门

4：有效的javascript变量定义规则？

答案：第一个字符必须是一个字母、下划线（_）或一个美元符号（$）；其他字符可以是字母、下划线、美元符号或数字。

5：假设val已经声明,可定义为任何值。则下面js代码有可能输出的结果为？

console.log('Value is ' + (val != '0') ? 'define' : 'undefine');

答案：define

解析：加号优先级高于 三目运算。低于括号。 所以括号中无论真假 加上前边的字符串都为 TRUE 三目运算为TRUE是 输出 define

6：下面哪一个是JSON数据？

｛name:"xiaoming",age,"student"｝

｛"name":"xiaoming","age":"student"｝

｛"xiaoming","student"｝

["xiaoming","student"]

答案：｛"name":"xiaoming","age":"student"｝

解析：json中key也是个字符串，要加引号。key和value之间是用：号来表示的

7、CORS（跨域资源共享）

CORS跨域分两种

第一种，简单跨域。

解决方案：HTTP输出标头增加如何节点

注意有前端框架版本，对安全要求较高，不能使用通配符*，要指定跨域域名。

Access-Control-Allow-Origin：*

下面节点可填，可不填，根据实际情况，自行决定

Access-Control-Allow-Methods：GET,POST,OPTIONS
Access-Control-Allow-Credentials：true
Access-Control-Allow-Headers：根据请求头的内容，填写

第二种，复杂跨域。

复杂跨域比要简单跨域麻烦，更花费性能。因为复杂跨域在请求之前会先发一个options预请求，根据响应判断服务器是否支持跨域。也就是说，实际上请求了两次。

8、列举JavaScript的全局函数

9、简述html页面的渲染过程

浏览器接收到html代码，可能是一份完整的文档，也可能是一个chunk，即开始解析。解析过程是先构建dom树，再根据dom树构建渲染树，最后浏览器将渲染树绘制到页面上。

构建dom树的过程即根据html代码自上而下进行构建，当遇到script文件加载／执行会阻塞后面dom树的构建（javascript可能会改变dom树），而遇到css文件则会阻塞渲染树的构建，即dom树依然继续构建（除非遇到script标签并且css文件依旧未加载完成），但不会渲染绘制到页面上。而无论哪个阻塞，该加载的文件还是会加载，例如html文档中的其他css／js／图片文件。