页面渲染的全过程
输入url后，先拿到html文件，html下载完以后会开始对它进行解析
html在解析的过程中，如果文本里有外部资源链接，比如css、js和img时，会立即启用其他线程下载这些静态资源。
特殊的是当遇到js文件的时候，html解析会停下来，等js文件下载结束并且执行完，再进行html执行。
在html解析的同时，解析器会把解析完的html转化成DOM对象，构建成DOM树。
当css下载完，css解析器开始对css解析，把css解析成css对象，把css组装起来，构建CSSOM树。
DOM和CSSOM树构建完毕，浏览器根据两棵树建一颗渲染树。
HTML
Hyper Text Markup Language 超文本标记语言
html5为什么只需要写<! DOCTYPE HTML>
答:这是w3c制定的规则,是文档类型声明,语义化说是告诉浏览器和其他开发者,这个文档使用的是html5标准。
2.html5新特性有哪些
答:header、footer、aside、nav、video、audio、canvas、localStorage、sessionStorage、cookie、output、datalist、keygen、data、time、email、url、search···
< img > 的 title 和 alt 有什么区别？
答： alt 是图片加载失败时，显示在网页上的替代文字；
title 是鼠标放上面时显示的文字。
这些都是表面上的区别，alt是img必要的属性，而title不是。
XHTML和HTML有什么区别
答:XHTML:
1)所有的标记都必须有一个相应的结束标记;
2)所有标签的元素和属性的名字都必须使用小写;
3)所有的XHTML标记都必须合理嵌套;
4)所有的属性都必须用引号""括起来;
5)XHTML文档必须拥有根元素。
如何在 html 页面上展示 < div> < /div> 这几个字符
答：使用忽略HTML标记< xmp>，
如：<p><xmp><div></div></xmp></p>
什么是渐进式渲染
答:指打开页面先加载首页显示内容;,之后再随着时间或者滚动页面进行后面的加载。
前端页面有哪三层构成,分别是什么?作用是什么?
结构标准:制作网页按照html标准结构写网页;
表现标准:用来美化网页CSS;
行为标准:用来实现网页中用户的动作处理JavaScript。
浏览器的内核有哪些
答:
Trident(IE内核):IE、腾讯TT、猎豹安全浏览器、360极速浏览器、百度浏览器等;
Gecko(firefox):火狐浏览器
webkit(Safari):Apple
Blink:谷歌浏览器
我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。
什么是语义化的HTML
答:就是写出的HTML代码符合内容的结构,选择合适的标签,能够便于开发者阅读和写出更优雅的代码,比如页面结构写顶部用header标签,导航有nav标签等,同时也让浏览器的爬虫和机器更好的解析。
实体字符
CSS
Cascading Style Sheets 层叠样式表
特性
层叠性、继承性、优先级
块级元素
特点:块级独占一行;可以设置宽高;如果没设置宽度,那么其宽度等于父元素的宽度。
比如:div,p,ul,ol,dl,li,dd,h1-h6
转换:display:block;
行内元素
特点:都在一行显示,不能设置宽度和高度。
比如:a b em font i img input br label span small select textarea
转换:display:inline
行内块元素
特点:都在一行上显示,可以设置宽度和高度。
比如:
转换:display:inline-block;
选择器优先级
!important>行内样式>id选择器(#)>类选择器(class)>标签选择器>通配符选择器
CSS3新特性有哪些
答:颜色--RGBA、文字阴影--text-shadow、边框圆角--border-radius、边框阴影--box-shadow、盒子模型--box-sizing、设置背景图片的尺寸--background-size、渐变--linear-gradient、过渡动画--transition、媒体查询多栏布局、伸缩布局、transform:translate···
清除浮动的几种方式
1)父级div设置height;
2)结尾处加空div标签clear:both;
3)父级div定义伪类:after和zoom;
4)父级div定义overflow:hidden或者auto;
link和@import有什么区别
@import引用的css会等到页面被加载完毕后再加载，link在页面加载时会同时被加载。
link是html标签，无兼容问题。link方式的样式权重高于@import
transition和animation的区别
他们都是随时间改变元素的属性值，主要区别是transition需要触发一个事件才能改变属性，而animation不需触发任何事件就会随时间改变属性值。
meta viewport标签相关
<!DOCTYPE html> H5标准声明，使用 HTML5 doctype，不区分大小写 <head lang=”en”> 标准的 lang 属性写法 <meta charset=’utf-8′> 声明文档使用的字符编码,防乱码 <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/> 优先使用 IE 最新版本和 Chrome <meta name=”description” content=”不超过150个字符”/> 页面描述 <meta name=”keywords” content=””/> 页面关键词 <meta name=”author” content=”name, [email protected]”/> 网页作者 <meta name=”robots” content=”index,follow”/> 搜索引擎抓取 <meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> 为移动设备添加 viewport <meta name=”apple-mobile-web-app-title” content=”标题”> iOS 设备 begin <meta name=”apple-mobile-web-app-capable” content=”yes”/> 添加到主屏后的标题（iOS 6 新增） 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 <meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”> 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） <meta name=”apple-mobile-web-app-status-bar-style” content=”black”/> <meta name=”format-detection” content=”telphone=no, email=no”/> 设置苹果工具栏颜色 <meta name=”renderer” content=”webkit”> 启用360浏览器的极速模式(webkit) <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> 避免IE使用兼容模式 <meta http-equiv=”Cache-Control” content=”no-siteapp” /> 不让百度转码 <meta name=”HandheldFriendly” content=”true”> 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 <meta name=”MobileOptimized” content=”320″> 微软的老式浏览器 <meta name=”screen-orientation” content=”portrait”> uc强制竖屏 <meta name=”x5-orientation” content=”portrait”> QQ强制竖屏 <meta name=”full-screen” content=”yes”> UC强制全屏 <meta name=”x5-fullscreen” content=”true”> QQ强制全屏 <meta name=”browsermode” content=”application”> UC应用模式 <meta name=”x5-page-mode” content=”app”> QQ应用模式 <meta name=”msapplication-tap-highlight” content=”no”> windows phone 点击无高光 设置页面不缓存 <meta http-equiv=”pragma” content=”no-cache”> <meta http-equiv=”cache-control” content=”no-cache”> <meta http-equiv=”expires” content=”0″>
< meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
详细的描述一下position
1)position:absolute--绝对定位的元素,相对于其父元素进行定位。
2)position:relative--生成相对定位的元素,相对于其正常位置进行定位。
3)position:fixed--固定定位,相对于浏览器窗口进行定位。
4)position:static--默认值,没有定位,元素在正常的文档流
JavaScript
JavaScript的组成
1)ECMAScript:是JS的核心,描述了语言的基本语法和数据类型,是JS的语法规范
2)BOM:浏览器对象模型,通过BOM可以操作浏览器窗口,如:弹出框
3)DOM:文档对象模型,一套操作页面元素的API
JavaScript的输入、输出方式
输出:
1)alert() --弹出一个提示框(提示/警告文字)
2)document.write() --会将输入的内容放置到body标签内部,作为html内容
3)console.log() --代码后台
输入:
prompt('提示文字', 默认值);
对象的创建方式
1)对象字面量
var o = {
name: 'jay',
age: 18,
sex: true,
sayHi: function () {
console.log(this.name);
}
};2)new Object()创建对象
var person = new Object();
person.name = 'Jolin';
person.age = 16;
person.job = 'actor';
person.sayHi = function() {
console.log('Hello,everyBody');
}3)工厂函数创建对象
function createPerson(name, age, job) {
var person = new Object();
person.name = name;
person.age = age;
person.job = job;
person.sayHi = function(){
console.log('Hello,everybody');
}
return person;
}
var p1 = createPerson('Jay', 18, 'actor');4)自定义构造函数
function Person(name, age, job){
this.name = name; //this是关键字，这里代表“自己”，“当前对象”
this.age = age;
this.job = job;
this.sayHi = function(){
console.log('Hello,everybody');
}
}
var p1 = new Person('Jay', 18, 'actor');new关键字运行机制
1)new会在内存中创建一个新的空对象
2)new会让this指向这个新的对象
3)执行构造函数 目的是给这个新对象加属性和方法
4)new会返回这个新对象
this的使用场景
1)普通函数调用时,指向全局window
2)构造函数调用时,指向实例对象
3)对象方法调用时,指向该方法的对象
4)事件绑定时,指向绑定事件的对象
5)箭头函数中this指向外部函数作用域的this
==和===有什么区别
=是赋值
==（相等）返回一个布尔值，相等返回true，不相等返回false，允许不同数据类型的转换。
===（全等）只要数据类型不一样，就会返回false。
JavaScript内置对象之Math(求绝对值,取整,随机数)
Math.random() 生成一个0-1之间的随机小数
Math.floor()/Math.ceil() 向下取整/向上取整
Math.round() 取整,四舍五入
Math.abs() 绝对值
Math.max()/Math.min() 求最大值/最小值
Math.sin()/Math.cos() 正弦/余弦
Math.pow/Math.sqrt() 求指数次幂/求平方根
JavaScript内置对象之Date(处理时间和日期,基于1970年1月1日)
getTime() 返回毫秒数和valueOf()结果一样
getMilliseconds()
getSeconds() 返回0-59
getMinutes() 返回0-59
getHours() 返回0-23
getDay() 返回星期几 0代表是周日 6代表是周六
getDate() 返回当前月的第几天
getMonth() 返回月份,从0开始
getFullYear() 返回4位的年份 如 2016
JavaScript内置对象之Array
push()/pop() 加入数组的末端/删除数组的最后一项
unshift()/shift() 在数组最前面插入项/删除数组中前面项
reverse() 翻转数组
sort() 根据字符,从小到大排序
slice() 从当前数组中截取一个新的数组，不影响原来的数组，参数start从0开始,end从1开始
splice() 删除或替换当前数组的某些项目，参数start, deleteCount, options(要替换的项目)
indexOf() 索引位置
forEach() 遍历数组不返回值,返回参数
join() 把数组中的所有元素放入一个字符串
JavaScript内置对象之String
concat() 拼接字符串,等效于'+','+'更常用
slice(start,end) 从start位置开始,截取到end位置,end取不到
substring() 方法同slice
substr(start,length) 从start位置开始,截取到length个字符,如果没有length参数,则截取到最后
toUpperCase() 转换为大写
toLowerCase() 转换为小写
search() 查找,返回找到的位置
replace() 替换,注意:一次只能替换一个
split() 将字符串以指定的字符分割为数组
JavaScript中动态操作DOM的方法
createElement 创建一个元素节点
creatTextNode 创建一个文本节点
appendChild 向元素的末尾追加一个节点
inserBefore(a,b) 意思是a节点会插入b节点的前面
removeChild 删除一个子节点
cloneChild 复制节点,接收布尔值参数,true表示深复制(复制节点及其所有子节点),false表示浅复制(复制节点本身,不复制子节点)
replaceChild 替换节点
document.getElementsByTagName() 通过标签名称查找节点
document.getElementsByName() 通过元素的Name属性的值查找节点
document.getElementById() 通过元素ID查找节点
事件的三个阶段,如何阻止事件冒泡
答:目标、捕获、冒泡
event.stopPropagation
call,apply,bind有什么区别
三者都是用来改变函数的this对象指向，调用其方法改变函数执行的上下文，从而改变this指向。
call()和apply()的第一个参数相同,是指定的对象,这个对象是该函数的执行上下文
call()可以接受多个参数，在第一个参数之后的后续所有参数就是传入该函数的值
apply()只有两个参数,第一个是对象,第二个是数组
bind()不会立即执行该函数,他的参数和call()相同
闭包函数
1.什么是闭包?
当函数执行时,首先会形成一个私有作用域,这个私有作用域保护私有变量不收外界的干扰,我们把这个体制称为闭包。闭包是指有权访问另一个函数作用域中变量的函数。
2.闭包优点:
1)保护函数内的变量安全,加强了封装性;
2)在内存中维持一个变量,方便调用上下文的局部变量;
3.闭包缺点:
1)内存消耗;
2)滥用闭包函数会造成内存泄露,不能被垃圾回收机制所回收。
递归函数
1.什么是递归函数
答:递归函数即自调用函数,在函数体内直接或者调用自己本身函数
2.递归函数的优点
答:代码更加简洁清晰,可读性更好
3.递归函数的缺点
答:大量使用递归函数,会消耗空间,造成系统卡顿,非必要时建议不要使用递归函数。
面向对象和面向过程
答:面向对象:开发过程中分析大体步骤,找到辅助的开发工具
面向过程:开发过程中专注于每个功能的具体实现方式
面向对象的三个特征
封装性:多个相同操作的功能封装到一个对象中
继承性:让功能复用
多态性:增强功能使用性灵活性
正则表达式
答:对字符串进行操作的一组工具,作用:匹配,替换,提取功能
/^$/ 这个是个通用的格式。
^ 匹配输入字符串的开始位置；$匹配输入字符串的结束位置
*匹配前面的子表达式零次或多次；
+匹配前面的子表达式一次或多次；
?匹配前面的子表达式零次或一次；
\d 匹配一个数字字符，等价于[0-9]
校验11位手机号案例:
function checkPhone(){
var phone = document.getElementById('phone').value;
if(!(/^1[35678]\d{9}$/.test(phone))){
alert("手机号码有误，请重新填写");
return false;
}
}校验邮箱案例:
function isEmail(str){
var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
return reg.test(str);
}原型三者关系
实例对象：实例对象都具有__proto__,就是原型对象
原型对象：原型对象都具有constructor属性，就是构造函数
构造函数：构造函数都具有prototype属性，就是原型对象
如何在JS中清空数组
如：var list = [1,2,3,4]
- 方法一：
list= []; //设置一个新的空数组，如果从另一个变量引用到这个数组，那么原始的引用数组将保持不变。
- 方法二：
list.length=0; //这种方式会更新指向原始数组的所有引用变量。
- 方法三：
list.splice（0,list.length）; //也将更新对原始数组的所有引用。
- 方法四：
while(list.length){
list.pop();
};
//不建议经常使用该方式。JS中的转义字符是什么
能够在不破坏应用程序的情况下编写特殊字符，转义字符（\）用于处理特殊字符，如单引号、双引号、撇号和&号，在字符前放置。
如：console.log(" I am a \"beautiful\"girl")原文链接：https://juejin.im/post/5cf725d6f265da1b8608754a
作者：HoneyCC鱼瑜于