1、前端页面有哪三层构成?前端页面有哪三层构成? HTML结构层、CSS表示层、JS行为层。
2、浏览器内核(渲染引擎)
①IE内核 -- Trident
②Firefox内核 -- Gecko
③Safari内核(曾经Chrome内核) -- Webkit
④现Chrome内核 -- Blink
3、绑定事件的方式?
1、直接在dom里绑定:
2、在js中通过onclick绑定:xxx.onclick=test;
3、通过事件绑定:dom.addEventListener("click", ele, boolean)
(拓展:js事件流模型?)
“事件冒泡”:事件由最具体的元素接收,然后逐级向上传播;
“事件捕捉”:事件由最不具体的节点先接收,然后逐级向下,一直到最具体元素;
“dom事件流”:三个阶段:事件捕捉,目标阶段,事件冒泡;
e.stopPropagation() 阻止冒泡
e.preventDefault() 阻止默认事件
4、form表单提交与ajax提交什么区别?
1、Ajax在提交、请求、接收时都是异步进行的,网页不需要刷新;
而Form提交则是新建一个页面,哪怕是提交给自己本身的页面,也是需要刷新的。
2、Ajax在提交时是在后台新建一个请求;Form却是放弃本页面,而后再请求。
3、Ajax在提交、请求、接收时整个过程都需要程序来对其数据进行整理;
Form提交却是根据表单结构自动完成,不需要代码干预。
4、Ajax必须要使用JS来实现,不启用JS的浏览器无法完成该操作;
Form却是浏览器的本能,无论是否开启JS都可以提交表单。
5、为什么要用Ajax?
使用Ajax用户体验会更“敏捷”:数据提交页面不会闪屏;页面局部更新速度快;网络带宽占用小
6、离线存储--本地存储和离线缓存 及优缺点
1.本地存储--1) cookie 2) localStorage 3) sessionStorage
2.离线缓存--1) Application Cache (Manifest)
Cookie
优点:
可控制过期时间,使其不会长期有效
可扩展、可用性比较好
可加密减少cookie被破解的可能性
缺点:
数量和长度有限制,最多20条,最长不能超过4k
请求头上带着数据安全性差
主要应用:
购物车、客户端登录
localStorage(本地存储)
优点:
localStorage拓展了cookie的4k限制
localStorage可以将第一次请求的5M大小数据直接存储到本地,相比于cookie可以节约带宽
localStorage的使用也是遵循同源策略的,所以不同的网站直接是不能共用相同的localStorage
缺点:
需要手动删除,否则长期存在
浏览器大小不一,版本的支持也不一样
localStorage只支持string类型的存储,JSON对象需要转换
localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡
特点:
同源策略限制、只在本地存储、永久保存、同浏览器共享、存储方式、存储上限限制(大多数5MB以下)。
应用场合:
数据比较大的临时保存方案。如在线编辑文章时的自动保存。
sessionStorage(会话存储)
特点:
同源策略限制、只在本地存储、单标签页限制、存储方式、存储上限限制(大多数5MB以下)。
应用场合:
适合单页应用程序,方便在各业务模块进行传值。
离线缓存--Application Cache (Manifest)
优势:
离线浏览:用户可在应用离线时使用它们
速度:已缓存资源加载速度块
减少服务器负载:浏览器只从服务器下载更新过的资源
使用方法:
在html标签添加manifest属性,属性值为manifest文件的路径
< !DOCTYPE HTML >
< html manifest=""demo.manifest"">< /html >
编写manifest文件
manifest文件可分为三部分:
(1) CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
(2)NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存
(3)FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)
CACHE MANIFEST
#version 1.1 /*版本号*/
CACHE:
html/index.html /*需要缓存的文件*/
NETWORK:
js/jquery.js /*不需要缓存的文件*/
FALLBACK:
html/index.html /*当页面无法访问时的回退页面*/
HTML
1、HTML 块级元素、行内元素
块级元素:块状元素排斥其他元素与其位于同一行,可以设定元素的宽块级元素:
①总是在新行开始;
②宽高,行高以及内外边距都可控制;
③宽度缺省是它的容器的100%,除非设定一个宽度。
④它可以容纳内联元素和其他块元素
from table ol ul dl div p h1-h6
nav、header、section、footer。
行内元素:
①和其他元素都在一行上;
②宽高,行高及内外边距不可改变,除左右方向的外边距margin、内边距padding;
③内联元素只能容纳文本或者其他内联元素
lable span a em
行内块状元素:
综合了行内元素和块状元素的特性,显示效果为行内元素,但它拥有块状元素的属性。
select textarea button
这三者可以通过 display 相互转换。
2、表单标签的readonly与disabled的区别
readonly 只读,只用于文本输入框,input type="text/password"、textarea;
使用表单提交时会提交此元素,应用在用户只读同时需要提交数据的场景。
disabled 禁用,可用于所有表单标签,使用表单提交时不会提交此元素。
3、H5 新特性
1、语义特性 -- 新增语义化标签,例如 header section footer nav
2、本地存储特性 -- 对本地离线存储更好的支持,
例如 localStorage sessionStorage ApplicationCache应用程序缓存。
3、设备访问特性 -- 地理位置API - 获取用户的地理位置 getCurrentPosition()。媒体访问API getUserMedia()
4、连接特性 -- Web Sockets
5、网页多媒体特性 -- Audio 和 Video 标签
6、三维图形 特性 -- 可缩放矢量图形 SVG。画布 Canvas
JS
1、JS是一门什么样的语言及特点?
JavaScript是客户端脚本语言,是一种动态、弱类型、基于原型的语言;
1.不需要编译就可以由解释器直接运行;
2.语法类似于常见的高级语言,如C和Java;
3. 变量松散定义,属于弱类型语言;
4. 面向对象的。
2、JS的数据类型
基本数据类型 String Number Boolean undefined null -- 指的是简单的数据段,按值访问。
引用数据类型 Object(Array Date Regxp Function) -- 可能有多个值构成的对象 按引用访问。
3、JS如何查找元素?
document
getElementById()
getElementsByClassName()
getElementsByName()
getElementsByTagName()
querySelector()
querySelectorAll()
节点指针
父节点.firstChild -- firstElementChild
父节点.lastChild -- lastElementChild
父节点.childNodes
兄弟节点.previousSibling -- previousElementSibling
兄弟节点.nextSibling -- nextElementSibling
子节点.parentNode
4、JS如何创建节点?
docuement.
createElement(元素标签) 创建元素节点
createAttribute(元素属性)
createTextNode(文本内容) 创建文本节点
5、JS如何操作节点(插入、替换、复制、删除)?
插入
appendChild(添加的新子节点) 向子节点列表末尾添加新的子节点
insertBefore(插入当前节点的新节点,已知子节点) 在已知的子节点之前插入新的子节点
son.parentNode.insertBefore
替换节点
replaceChild(要插入的新元素, 将被替换的老元素)
删除节点
removeChild(要删除的节点)
复制节点
需要被复制的节点.cloneNode(true/false)
true -- 复制当前节点及其所有子节点
false -- 仅复制当前节点
6、JS属性操作?
获取属性 getAttribute
元素节点.getAttribute(元素属性名)
设置属性 setAttribute
元素节点.setAttribute(元素属性名, 属性值)
删除属性 removeAttribute
元素节点.removeAttribute(元素属性名)
7、什么是伪数组?
1、具有 length 属性。
2、按索引方式存储数据。
3、不具有数组的 push()、pop() 等方法或期望 length 属性有什么特殊的行为。
比如 arguments 对象,调用 getElementsByTagName
document.childNodes 之类的返回 NodeList对象都属于伪数组。arguments可以通过Array.prototype.slice.call(fakeArray) 将伪数组转换成真正的Array对象;
jQuery中的 $() 对象都是伪数组对象,保存的是DOM对象。基于此也就更能理解 jQuery 的 this。
8、var
that=this;
this 关键字代表函数运行时自动生成的一个内部对象,只能在函数内部使用,指向调用函数的那个对象。
9、eval();
eval()函数就像是一个ECMAScript解析器,只接收一个参数,即执行的ECMAScript字符串。将传入的字符串当作实际的语句来解析。
10、什么是Ajax和JSON,它们的优缺点?
Ajax Asynchronous Javascript And XML/异步的javascript和xml
优点:
可以使页面不重载全部内容的情况下加载局部内容,降低数据传输量。
避免用户不断刷新或者跳转页面,提高用户体验。
缺点:
对搜索引擎不友好。
要实现ajax下的前后退功能成本较大
可能造成请求数的增加
跨域问题限制
JSON:1、一种轻量级的数据交换格式,占用带宽小;
2、易阅读编写解析;
3、支持复合数据类型;
4、基于纯文本,跨平台传递极其简单,Javascript原生支持,理想的数据交换格式;
缺点:相对xml通用性较差,数据可描述性较差
11、JSONP与JSON
跨域请求的概念 同一域名不同端口 不同协议(http~https) 不同二级域名 域名和域名对应ip
JSON是一种基于文本的数据交换方式 (不支持跨域);
JSONP是一种非官方跨域数据交互协议
JSON
1、一种轻量级的数据交换格式,占用带宽小;
2、容易阅读编写解析;
3、支持复合数据类型;
4、基于纯文本,跨平台传递极其简单,Javascript原生支持,理想的数据交换格式;
没办法跨域直接获取,就将json包裹在一个合法的js语句中作为js文件传过去。json是想要的东西,jsonp是达到这个目的而普遍采用的一种方式
JSONP是怎么产生的
1、 Ajax直接请求普通文件存在跨域无权限访问的问题
2、Web页面拥有"src"属性的标签都拥有跨域的能力
dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数
12、js中的同步和异步
JS 是一门“单线程”的语言,就像一条流水线,不能同时进行多个任务和流程。
差别就在于这条流水线上各个流程的执行顺序不同。
同步任务指的是,在主线程上排队执行的任务,形成一个执行栈(execution context stack),只有前一个任务执行完毕,才能执行后一个任务;
异步任务指的是,不进入主线程、而进入"任务队列"(task queue)的任务,只有等主线程任务执行完毕,"任务队列"通知主线程请求执行任务,该任务才会进入主线程执行。
最基础常见的异步是setTimeout和setInterval函数。
13、get 与 post
1、get参数通过url传递,post 放在request body 中。
2、get请求在url中传递的参数是有长度限制的(2048个字符),post没有。
3、get比post更不安全,因为参数直接暴露在url中,所以不能用来传递敏感信息。
4、get产生一个TCP数据包,post产生两个TCP数据包。
HTTP1.0定义了三种请求方法: GET, POST 和 HEAD方法。
HTTP1.1新增了五种请求方法:OPTIONS,
PUT, DELETE, TRACE 和 CONNECT 方法
14、http与https
*HTTP*是超文本传输协议,定义了客户端与服务器端之间文本传输的规范。
HTTP协议以明文方式发送内容,不提供任何方式的数据加密,如果攻击者截取Web浏览器和网站服务器之间的传输报文,就可以直接读取其中的信息,所以不适合传输一些敏感信息,比如:信用卡号,密码支付信息。
HTTP默认使用80端口,这个端口指的是服务端的端口,而客户端使用的端口是动态分配的。当我们没有指定端口访问时,浏览器会默认帮我们添加80端口。
*https*
为了解决HTTP协议的这一缺陷,需要使用另一种协议:安全套接字层超文本传输协议HTTPS,为了数据传输的安全,HTTPS在HTTP的基础上加入了SSL协议,SSL依靠证书来验证服务器的身份,并为浏览器和服务器的之间的通信加密。
主要作用可以分为两种:一种是建立一个信息安全通道,来保证数据传输的安全;另一种就是确认网站的真实性。
1. HTTPS协议需要到ca申请证书,一般免费证书较少,因而需要一定费用。
2. HTTP是超文本传输协议,信息是明文传输,HTTPS则是具有安全性的SSL加密传输协议。
3. HTTP的连接很简单,是无状态的;HTTPS协议是由SSL+HTTP协议构建的可进行加密传输,身份认证的网络协议,比HTTP协议安全。
ES6
1、ES6
1、块级作用域
ES5 只有全局作用域和函数作用域,let、const 实际上为JS 新增了块级作用域
不存在变量提升、不允许重复声明。
let 命令
暂时性死区(let声明变量a,但在这声明之前对a声明、赋值会报错),typeof不再是一个百分之百安全的操作
const 命令
声明一个只读的常量且必须赋值。一旦声明,常量的值就不能改变。如果是对象则不能改变对象的引用,或可以增加属性。
ES6 声明变量的六种方法
var、function(ES5)
let、const、import、class
2、字符串
静态字符串一律使用单引号或反引号,不使用双引号。动态字符串使用反引号。
3、解构赋值 -- 对应关系赋值
使用数组成员对变量赋值时,优先使用解构赋值。
4、对象
①单行定义的对象,最后一个成员不以逗号结尾。多行定义的对象,最后一个成员以逗号结尾。
②对象尽量静态化,不得随意添加新的属性。如果添加属性不可避免,要使用Object.assign方法。
5、数组
①使用扩展运算符(...)拷贝数组。
②使用 Array.from 方法,将类似数组的对象转为数组(ES5 -- Array.prototype.slice.call)。
6、箭头函数 -- 匿名函数的简写 -- 比如setTimeout
不绑定this与arguments,不能用作构造器,也没有prototype属性,隐式返回值。立即执行函数可以写成箭头函数的形式
简单的、单行的、不会复用的函数,建议采用箭头函数。如果函数体较为复杂,行数较多,还是应该采用传统的函数写法。
7、Map、Set
8、Class
9、模块
①使用import取代require。
②使用export取代module.exports。
10、使用ESLint
一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。
CSS
1、CSS选择器?引用CSS的方式?CSS 优先级如何计算?盒模型?
①通配选择符、标签名选择符、类选择符、ID选择符、后代选择符(包含)、子选择符、相邻选择符、兄弟选择符、属性选择符、伪类、伪对象。
②行内样式、内嵌式、link链接式、import导入式。
③!import 》行内样式》ID》class 》标签名选择符,选择符越具体等级就越高。
④Margin、border、padding、content。
box-sizing: border-box; // content-box
// 定义 浏览器 应该如何计算一个元素的总宽高;更改元素默认的 CSS 盒子模型
兼容性
1、position属性--底部absolute、fixed元素在安卓浏览器里面会被输入法顶上去。
解决方法:①页面加载完成后计算底部元素到顶部的距离
②在父级容器中定义容器高度,并设定position属性的值为relative即可解决此问题
(body:relative; 没有验证)。
2、伪类 :active 失效
body添加ontouchstart onmousemove两个空事件
3、对非可点击元素如(label,span)监听click事件,ios下不会触发
css增加 -- cursor:pointer;
4、上下拉动滚动条时卡顿、慢
body { -webkit-overflow-scrolling:touch; overflow-scrolling: touch; }
5、iphone及ipad下输入框默认内阴影
-webkit-appearance:none;
6、ios和android下触摸元素时出现半透明灰色遮罩
-webkit-tap-highlight-color:rgba(255,255,255,0)
设置alpha值为0就可以去除半透明灰色遮罩,备注:transparent的属性值在android下无效。
扫一扫 加微信咨询