SS和JS在网页中的放置顺序是怎样的？
CSS放入<head>标签中,用link方式引入.因为link在页面加载的同时能加载CSS文件.
JS放入在<body>标签的最后面,JS如果中途发生阻塞就会停止加载,为了保证基本页面的加载,放在后面.
解释白屏和FOUC
白屏,浏览器空白现象
1.当把CSS放置在页面底部,有的浏览器需要在html和css加载完毕后再对页面进行渲染,而不会从上到下显示出来.
2.对于IE浏览器,使用@inmport,即使放入link和页面头部也会出现白屏现象.
3.把JS放入页面头部,JS在加载过程中会禁止并发,其他资源不能进行加载,出现白屏现象.
FOUC,逐步加载无样式的内容,等CSS加载后页面突然展现样式.
样式放入页面底部,会造成这样的现象.
async和defer的作用是什么？有什么区别
没有这里两者,JS将会读到就进行加载并执行,并在加载完JS之前阻塞后续的文档加载渲染.async和defer使js的加载执行和后续的文档加载渲染能并行进行.
defer,<script defer src="script.js"></script>,在页面元素加载完成之后才进行执行.
async,<script async src="script.js"></script>,在JS加载完成后就执行,不会再等待页面元素是否加载完成.
简述网页的渲染机制
- 解析 HTML 标签, 构建 DOM 树
- 解析 CSS 标签, 构建 CSSOM 树
- 把 DOM 和 CSSOM 组合成 渲染树 (render tree)
- 在渲染树的基础上进行布局, 计算每个节点的几何结构
- 把每个节点绘制到屏幕上 (painting)
JavaScript 定义了几种数据类型? 哪些是简单类型?哪些是复杂类型?
NaN、undefined、null分别代表什么?
NaN属于Number类型,是一种特殊数值,表示一个本来返回数值的操作数为返回数值的情况.1.任何涉及NaN操作都会返回NaN. 2.NaN与任何值都不相等,包括NaN自己.
undefined使用var声明,但未对其初始化.
null表示空指针，也就是不存在的东西.
typeof和instanceof的作用和区别?
typeof是来确定变量是哪种数据类型的操作符,但是对于变量的值是一个对象或null,则typeof返回的都是Object.
var i=null;var o=new Object();alert(typeof i) //objectalert(typeof o) //object
instanceof 用来判断一个对象是否是数组或者判断某个变量是否是某个对象的实例,返回布尔值.
代码题
完成如下代码判断一个变量是否是数字、字符串、布尔、函数
function isNumber(el){ if(typeof el==="number"{ return true;}else{ return false}}function isString(el){ if(typeof el==="string"{ return true;}else{ return false;}}}function isBoolean(el){ if(typeof el==="boolean"{ return true;}else{ return false;}}function isFunction(el){ if(typeof el==="function"{ return true;}else{ return false;}}var a = 2, b = "jirengu", c = false;alert( isNumber(a) ); //truealert( isString(a) ); //falsealert( isString(b) ); //truealert( isBoolean(c) ); //truealert( isFunction(a)); //falsealert( isFunction( isNumber ) ); //true
以下代码的输出结果是?
console.log(1+1); console.log("2"+"4"); console.log(2+"4"); console.log(+new Date());console.log(+"4");console.log(1+1); //2console.log("2"+"4"); //"24"console.log(2+"4"); //"24"console.log(+new Date()); //1467006173037console.log(+"4"); //4
以下代码的输出结果是?
var a = 1;a+++a;typeof a+2; var a = 1;a+++a;// a++结果为2,2+a结果为3.即3typeof a+2;//"number"+2,即"number2"
遍历数组，把数组里的打印数组每一项的平方
var arr = [3,4,5]// todo..// 输出 9, 16, 25var arr = [3,4,5]for(var i=0;i<arr.length;i++){ array=Math.pow(arr[i],2); console.log(array);}
遍历 JSON, 打印里面的值
var obj = { name: 'hunger', sex: 'male', age: 28}//todo ...// 输出 name: hunger, sex: male, age:28var obj = { name: 'hunger', sex: 'male', age: 28}for(var r in obj){console.log(r+":"+obj[r])}
下面代码的输出是? 为什么
console.log(a);var a = 1;console.log(a);console.log(b);console.log(a);//undefinedvar a = 1;console.log(a);//1console.log(b);//error
js的变量提升机制,让第一个相当于
var a ;console.log(a);
b由于未进行声明,所以报错.
- 图片懒加载的原理是什么？
将一张空白图片或者正在加载的图片保存在img的src属性中，将需要展示的图片放在img的自定义属性中，判断图片是否在可视范围，若不在，则不加载，等图片进入可视范围后再把自定义属性中的图片替换到src属性中；起到性能优化的作用
-
1. nodejs 是什么？可以做什么？为什么擅长做？
- Node.js不是一个JS应用，并且是一个C++编写成的一个基于V8引擎的JS运行环境，本质就是把浏览器的JS解释器封装起来作为服务器运行平台，用类似javascript的结构语法进行编程操作后端，
- Node.js是一个后端的JS运行环境，这就可以让你在编写系统或者服务端的JS代码，交给Node.js来解释执行；
- Node.js采用事件驱动、异步编程、为网络服务而设计，Node.js的设计思路是以事件驱动为核心，充分利用了系统资源，执行代码不需要阻塞等待某种操作完成，有限的资源可以用于其他的任务，在服务器开发中，并发的请求处理是一个大问题，阻塞式的函数会导致资源浪费和时间延迟，通过事件注册、异步函数
2. npm 是什么? 如何安装 node 应用？全局安装和本地安装有什么区别？ --save与–saveDev的区别？ node_module的查找依赖的路线是怎样的?
- npm：node package manager，通称为node包管理器，主要用于管理node包，包括：安装、卸载、更新、查看、搜索、发布等；
- 下载nodejs，就会自动得到npm，使用
npm install 模块名命令安装node应用。
- 全局安装和本地安装有什么区别：
- 1.全局安装：
npm install -g xxx，模块将会被下载安装到全局目录中，这个全局目录可以用npm config set prefix来设置，通过npm config get prefix获取，安装的package能够在所有的目录下使用；
- 2.本地安装：
npm install xxx，模块会被下载到当前的目录，当然也只能在当前目录下使用，跑到别的目录去之后，你安装的包就无法运行；安装xxx之后，当前目录下面就会多出一个node_modules目录，xxx就会被安装在里面，然后在控制台输出一些信息；
- 当你为你的模块安装一个依赖模块时，一般的流程是先安装他们，然后连同版本号手动将他们添加到模块配置文件package.json的依赖里(dependencies)；
- –save和-saveDev的区别：
- 1.-save和save-dev可以省掉你手动修改package.json文件的步骤。
- 2.我是全局安装之后，再CD到我自己的目录，结果提示找不到package.json，我是通过CD到自己的目录，npm init然后一步步输入，最后才有这个json；
- 3.
npm install -save module-name自动把模块和版本号添加到dependencies部分，产品依赖模块。
- 4.
npm install -save-dev module-name自动把模块和版本号添加到devdependencies部分，开发依赖模块。
- 5.至于配置文件区分这俩部分，是用于区别产品依赖模块和开发依赖模块；
- node_module的查找依赖的路线：
先从本地文件中找，找不到就往上级目录中找，再找不到就往上上级目录中找，直到系统根目录。所以全局安装后的模块可以在所有的目录下使用，怎么感觉有点像函数内部的局部变量 = = ！
3. 安装browser-sync并了解它的使用方式
- 1.安装：通过
npm install -g browser-sync安装，我这边加了sudo
![]()
- 2.开启：输入
browser-sync start --server --files 'css/*.css'如果除了兼容css之后，还需要监控html的话；
broeser-sync start -server --files 'css/*.css,*.html'；注意这里有相对路径的，是继续你CD的目录开始跳跃
![]()
- 3.Tips:
- 1.开启之前，记得CD到你的Html所在的目录，再开启，要不然就会出现CANNOT GET；
- 2.直接start的话，然后你的Html名称不是index.html，也会出现CANNOT GET；
- 3.并不是IDE里面写什么马上浏览器就变了，要么是点击浏览器切换到浏览器，要么在IDE里面保存一下，浏览器才会改变
4. 什么是前端构建，有哪些常见的前端构建工具?
构建工具在我的理解之中就是自动化，再直白一点就是可以"偷懒"，当一个页面的文件足够多的时候, 拆分文件为单个的模块会比较好, 然后在发布的时候, 对拆分后的各模块进行合并, 再根据优化规则, 尽量减小文件大小, 这时候又需要对文件进行压缩之类的操作，而这些构建工具,就是帮助你通过配置或者编写约定好的代码, 来自动完成你上面的这些功能的一个工具；
常见前端构建工具：Grunt，gulp，webpack，Yeoman；
5.代码
踩的坑：
- 1.全局安装gulp之后，再你CD到的目录之后，再npm init一下，要不然你的目录没有package.json；
- 2.如果不做第一步，
npm install -save-dev module-name之后，只会提示你找不到package.json；
- 3.html中，把css和js的src都给改写成被压缩后的地址；
- 4.如果同时依赖模块，然后
text/javascript又要去用，必须在gulpfile.js中的每一个task中加一个return，要不然你依赖模块的接口，就是未定义；
- 5.我按照老师写得最后一项的，结果被提示task少一个dafault，所以我改写成了
gulp.task('default',['html','css','js','pic','font']);,在控制台输入gulp之后，压缩的所有资源正常运行了；
Github
CSS放入
<head>标签中,用link方式引入.因为link在页面加载的同时能加载CSS文件. JS放入在
<body>标签的最后面,JS如果中途发生阻塞就会停止加载,为了保证基本页面的加载,放在后面.白屏,浏览器空白现象
1.当把CSS放置在页面底部,有的浏览器需要在html和css加载完毕后再对页面进行渲染,而不会从上到下显示出来.
2.对于IE浏览器,使用
@inmport,即使放入link和页面头部也会出现白屏现象. 3.把JS放入页面头部,JS在加载过程中会禁止并发,其他资源不能进行加载,出现白屏现象.
样式放入页面底部,会造成这样的现象.
没有这里两者,JS将会读到就进行加载并执行,并在加载完JS之前阻塞后续的文档加载渲染.
async和defer使js的加载执行和后续的文档加载渲染能并行进行.<script defer src="script.js"></script>,在页面元素加载完成之后才进行执行.<script async src="script.js"></script>,在JS加载完成后就执行,不会再等待页面元素是否加载完成.NaN属于Number类型,是一种特殊数值,表示一个本来返回数值的操作数为返回数值的情况.1.任何涉及NaN操作都会返回NaN. 2.NaN与任何值都不相等,包括NaN自己.undefined使用var声明,但未对其初始化.null表示空指针，也就是不存在的东西.typeof是来确定变量是哪种数据类型的操作符,但是对于变量的值是一个对象或null,则typeof返回的都是Object.var i=null;var o=new Object();alert(typeof i) //objectalert(typeof o) //object
instanceof 用来判断一个对象是否是数组或者判断某个变量是否是某个对象的实例,返回布尔值.function isNumber(el){if(typeof el==="number"{return true;}else{return false}}function isString(el){if(typeof el==="string"{return true;}else{return false;}}}function isBoolean(el){if(typeof el==="boolean"{return true;}else{return false;}}function isFunction(el){if(typeof el==="function"{return true;}else{return false;}}var a = 2,b = "jirengu",c = false;alert( isNumber(a) ); //truealert( isString(a) ); //falsealert( isString(b) ); //truealert( isBoolean(c) ); //truealert( isFunction(a)); //falsealert( isFunction( isNumber ) ); //true
console.log(1+1);console.log("2"+"4");console.log(2+"4");console.log(+new Date());console.log(+"4");console.log(1+1); //2console.log("2"+"4"); //"24"console.log(2+"4"); //"24"console.log(+new Date()); //1467006173037console.log(+"4"); //4
var a = 1;a+++a;typeof a+2;var a = 1;a+++a;// a++结果为2,2+a结果为3.即3typeof a+2;//"number"+2,即"number2"
var arr = [3,4,5]// todo..// 输出 9, 16, 25var arr = [3,4,5]for(var i=0;i<arr.length;i++){array=Math.pow(arr[i],2);console.log(array);}
var obj = {name: 'hunger',sex: 'male',age: 28}//todo ...// 输出 name: hunger, sex: male, age:28var obj = {name: 'hunger',sex: 'male',age: 28}for(var r in obj){console.log(r+":"+obj[r])}
console.log(a);var a = 1;console.log(a);console.log(b);console.log(a);//undefinedvar a = 1;console.log(a);//1console.log(b);//error
var a ;console.log(a);
将一张空白图片或者正在加载的图片保存在img的src属性中，将需要展示的图片放在img的自定义属性中，判断图片是否在可视范围，若不在，则不加载，等图片进入可视范围后再把自定义属性中的图片替换到src属性中；起到性能优化的作用
1. nodejs 是什么？可以做什么？为什么擅长做？
- Node.js不是一个JS应用，并且是一个C++编写成的一个基于V8引擎的JS运行环境，本质就是把浏览器的JS解释器封装起来作为服务器运行平台，用类似javascript的结构语法进行编程操作后端，
- Node.js是一个后端的JS运行环境，这就可以让你在编写系统或者服务端的JS代码，交给Node.js来解释执行；
- Node.js采用事件驱动、异步编程、为网络服务而设计，Node.js的设计思路是以事件驱动为核心，充分利用了系统资源，执行代码不需要阻塞等待某种操作完成，有限的资源可以用于其他的任务，在服务器开发中，并发的请求处理是一个大问题，阻塞式的函数会导致资源浪费和时间延迟，通过事件注册、异步函数
2. npm 是什么? 如何安装 node 应用？全局安装和本地安装有什么区别？ --save与–saveDev的区别？ node_module的查找依赖的路线是怎样的?
- npm：node package manager，通称为node包管理器，主要用于管理node包，包括：安装、卸载、更新、查看、搜索、发布等；
- 下载nodejs，就会自动得到npm，使用
npm install 模块名命令安装node应用。 - 全局安装和本地安装有什么区别：
- 1.全局安装：
npm install -g xxx，模块将会被下载安装到全局目录中，这个全局目录可以用npm config set prefix来设置，通过npm config get prefix获取，安装的package能够在所有的目录下使用； - 2.本地安装：
npm install xxx，模块会被下载到当前的目录，当然也只能在当前目录下使用，跑到别的目录去之后，你安装的包就无法运行；安装xxx之后，当前目录下面就会多出一个node_modules目录，xxx就会被安装在里面，然后在控制台输出一些信息； - 当你为你的模块安装一个依赖模块时，一般的流程是先安装他们，然后连同版本号手动将他们添加到模块配置文件package.json的依赖里(dependencies)；
- 1.全局安装：
- –save和-saveDev的区别：
- 1.-save和save-dev可以省掉你手动修改package.json文件的步骤。
- 2.我是全局安装之后，再CD到我自己的目录，结果提示找不到package.json，我是通过CD到自己的目录，npm init然后一步步输入，最后才有这个json；
- 3.
npm install -save module-name自动把模块和版本号添加到dependencies部分，产品依赖模块。 - 4.
npm install -save-dev module-name自动把模块和版本号添加到devdependencies部分，开发依赖模块。 - 5.至于配置文件区分这俩部分，是用于区别产品依赖模块和开发依赖模块；
- node_module的查找依赖的路线：
先从本地文件中找，找不到就往上级目录中找，再找不到就往上上级目录中找，直到系统根目录。所以全局安装后的模块可以在所有的目录下使用，怎么感觉有点像函数内部的局部变量 = = ！
3. 安装browser-sync并了解它的使用方式
- 1.安装：通过
npm install -g browser-sync安装，我这边加了sudo - 2.开启：输入
browser-sync start --server --files 'css/*.css'如果除了兼容css之后，还需要监控html的话；broeser-sync start -server --files 'css/*.css,*.html'；注意这里有相对路径的，是继续你CD的目录开始跳跃 - 3.Tips:
- 1.开启之前，记得CD到你的Html所在的目录，再开启，要不然就会出现CANNOT GET；
- 2.直接start的话，然后你的Html名称不是index.html，也会出现CANNOT GET；
- 3.并不是IDE里面写什么马上浏览器就变了，要么是点击浏览器切换到浏览器，要么在IDE里面保存一下，浏览器才会改变
4. 什么是前端构建，有哪些常见的前端构建工具?
构建工具在我的理解之中就是自动化，再直白一点就是可以"偷懒"，当一个页面的文件足够多的时候, 拆分文件为单个的模块会比较好, 然后在发布的时候, 对拆分后的各模块进行合并, 再根据优化规则, 尽量减小文件大小, 这时候又需要对文件进行压缩之类的操作，而这些构建工具,就是帮助你通过配置或者编写约定好的代码, 来自动完成你上面的这些功能的一个工具；
常见前端构建工具：Grunt，gulp，webpack，Yeoman；
5.代码
踩的坑：
- 1.全局安装gulp之后，再你CD到的目录之后，再npm init一下，要不然你的目录没有package.json；
- 2.如果不做第一步，
npm install -save-dev module-name之后，只会提示你找不到package.json； - 3.html中，把css和js的src都给改写成被压缩后的地址；
- 4.如果同时依赖模块，然后
text/javascript又要去用，必须在gulpfile.js中的每一个task中加一个return，要不然你依赖模块的接口，就是未定义； - 5.我按照老师写得最后一项的，结果被提示task少一个dafault，所以我改写成了
gulp.task('default',['html','css','js','pic','font']);,在控制台输入gulp之后，压缩的所有资源正常运行了；
