meta标签
设定一些网页信息. 属性与值分别以name, content的形式成对出现.
http-equiv
http-equiv意义: The http-equiv attribute is essentially used to simulate an HTTP response header.
-
X-UA-Compatible
指定IE和Chrome使用最新版本渲染当前页面：
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> -
x-dns-prefetch-control
对于https协议的a标签, 浏览器可能会关闭dns预解析, 用此meta标签强制打开:
<meta http-equiv="x-dns-prefetch-control" content="on"> -
content-security-policy
防止XSS, 脚本：只信任当前域名
<object>标签：不信任任何URL，即不加载任何资源
样式表：只信任cdn.example.org和third-party.org
框架（frame）：必须使用HTTPS协议加载
其他资源：没有限制
:<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:"> -
cache-control
HTTP缓存:<meta http-equiv="cache-control" content="no-cache">
共有以下几种值：
1.no-cache: 不使用强缓存, 使用协商缓存. 先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。
2.no-store: 不允许缓存，每次都要去服务器上，下载完整的响应。（安全措施）
3.public: 缓存所有响应(允许客户端和代理服务器)，但并非必须。因为max-age也可以做到相同效果
4.private: 响应只能被单个用户缓存(只允许客户端)，因此不允许任何中继进行缓存。（比如说CDN就不允许缓存private的响应）
5.maxage: 表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。例如：max-age=60表示响应可以再缓存和重用 60 秒。
-
must-revalidate: 必须重新验证
- refresh
2秒后跳转此URL:<meta http-equiv="refresh" content="2；URL=http://www.lxxyx.win/">
网页将在设定的时间后，刷新并重定向设定的网址。
常见meta name:
- 'SEO'
keywords:<meta name="keywords" content="Lxxyx,博客，文科生，前端">
description:<meta name="description" content="××是业界最领先的××平台，提供全球优质的××，更有丰富的××">
revisit-after:<meta name="revisit-after" content="7 days" >
设置爬虫重新抓取延迟时间. 如果设置的重访时间过短，爬虫将按它们定义的默认时间来访问。
robots:<meta name="robots" content="none">
定义搜索引擎爬虫索引方式, 参数如下：
1.none : 搜索引擎将忽略此网页，等价于noindex，nofollow。
2.noindex : 搜索引擎不索引此网页。
3.nofollow: 搜索引擎不继续通过此网页的链接索引搜索其它的网页。
4.all : 搜索引擎将索引此网页与继续通过此网页的链接索引，等价于index，follow。
5.index : 搜索引擎索引此网页。
6.follow : 搜索引擎继续通过此网页的链接索引搜索其它的网页。
- viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">: 这些scale属性是相对于ideal viewport来进行缩放的, 为1时, 打开网页宽度即为屏幕宽度
<meta name="viewport" content="viewport-fit=cover">
<style>
@media (orientation: portrait) {
.element {
padding-left: max(15px, env(safe-area-inset-left, 12px));
}
}
</style>
↑ 为iPhone等非正方形屏幕进行安全区域适配, 需设置viewport-fit=cover才能启用env函数, env函数中包含safe-area-inset-[left|right|top|bottom]四个变量, 第二个参数用于当变量无法识别时的fallback值.
-
author
作者信息:<meta name="author" content="name, username@mail.com"> -
copyright
版权信息:<meta name="copyright" content="Lxxyx"> -
rederer
优先使用webkit:<meta name="renderer" content="webkit">
IE兼容模式:<meta name="renderer" content="ie-comp">
IE标准模式:<meta name="renderer" content="ie-stand">
优化
提升页面性能
- 资源压缩, 减少HTTP请求
- 非核心代码异步加载
(script的异步加载有几种方式，区别是什么？)
<script>标签中的async属性
异步加载的方式:
- 动态脚本加载 2) defer 3) async
异步加载的区别 - defer: HTML解析完后才执行, 如果有多个, 按照加载的顺序一次执行
- async: 加载完之后立即执行, 如果有多个, 执行顺序和加载顺序无关
3. 浏览器HTTP缓存
缓存的分类
- 强缓存
Expires: Thu, 21 Jan 2018 23:39:02 GMT 绝对时间
Cache-Control: max-age=3600
Expires
Exprires的值为服务端返回的数据到期时间。当再次请求时的请求时间小于返回的此时间，则直接使用缓存数据。但由于服务端时间和客户端时间可能有误差，这也将导致缓存命中的误差，另一方面，Expires是HTTP1.0的产物，故现在大多数使用Cache-Control替代。
Cache-Control
private：客户端可以缓存
public：客户端和代理服务器都可以缓存
max-age=t：缓存内容将在t秒后失效
no-cache：需要使用协商缓存来验证缓存数据
no-store：所有内容都不会缓存
must-revalidate: 必须重新验证
当同时使用 Cache-Control 和 Expires 时，Cache-Control 获得优先权。
- 协商缓存
response中:
Last-Modified: Wed, 26 Jan 2018 00:12:32 GMT
Etag: (hash)
请求虽然modified可能变动时间, 但是内容没变, 因此HTTP1.1添加了Etag
require中:
If-Modified-Since: (上次Last-Modified的时间值)
If-None-Match: (上次Etag的hash)
注意只有在资源过期的情况下，检查验证才会发生。但是实际应用中由于Etag的计算是使用算法来得出的，而算法会占用服务端计算的资源，所有服务端的资源都是宝贵的，所以就很少使用Etag了。
一个通常的建议是：避免使用 ETag。这不是一个总是有用的建议。ETag 在判断内容是否真的改动方面确实提供了更为精确的控制。针对生成的 ETag，默认的Apache方法需要把文件的索引节（inode），大小（size）和最后修改时间作为输入求值得到。这会导致在负载均衡的环境中，生成的 ETag 值变得毫无用处，因为每个服务器都会针对相同的文件生成一个不同的 Etag 值。这个可能就是唯一的问题导致很多人完全禁用 ETag，其实只要精确地针对一个匹配的文件生成一个独一无二的 ETag 值，就没有必要禁用 ETag 了。
缓存的原理
强制缓存
协商缓存
- CDN
DNS预解析（性能优化）
第一个要加入head标签中优化的项目, 预解析加速加载图片：dns预解析说明
<link rel="dns-prefetch" href="//host_name_to_prefetch.com">
对于https协议的a标签, 浏览器可能会关闭dns预解析, 用此meta标签强制打开
<meta http-equiv="x-dns-prefetch-control" content="on">
图片格式webp
模块化
了解简单使用，配置，区别，以及它们是怎么处理模块化的，此部分，视面试网站开发者工具-Source选项中的模块化工具按需准备。
CommonJS
RequireJS
Webpack
Gulp
稍微了解下Gulp与Grant区别。
移动端知识
数据mock
HTML语义化
掘金HTML5语义化标签
Web安全
同源限制中的源: 协议 域名 端口.
1. CSRF
- 基本概念和缩写:cross-site request forgery 跨站请求伪造
- 攻击原理：在B网站引诱用户访问A网站的链接（用户之前登陆过A网站，浏览器cookie缓存了身份验证信息），调用A网站的接口攻击A网站. 假设网站中有一个通过 Get 请求提交用户评论的接口，那么攻击者就可以在钓鱼网站中加入一个图片，图片的地址就是评论接口.
- 防御措施：
1.token验证：登陆成功后服务器下发token令牌存到用户本地，再次访问时要主动发送token，浏览器只能主动发cookie，做不到主动发token隐藏令牌： 令牌放在http header头中，而不是链接中.
也可以加上验证码
2.Get 请求不对数据进行修改
3.不让第三方网站访问到用户 Cookie
4.阻止第三方网站请求接口
5.referer与UserAgent验证：判断页面来源是否自己站点的页面，不是不执行请求-----不推荐
因为referer 是在 HTTP Request Head 里面的，也就是由请求的发送者决定的,可以手动给 referer 任何值。
2. XSS
-
缩写: cross-site scripting跨域脚本攻击, 是注入攻击的一种。其特点是不对服务器端造成任何伤害，而是通过一些正常的站内交互途径，例如发布评论，提交含有 JavaScript 的内容文本。这时服务器端如果没有过滤或转义掉这些脚本，作为内容发布到了页面上，其他用户访问这个页面的时候就会运行这些脚本。
-
特征 不需要登陆认证，向你的页面通过合法渠道注入脚本.
-
攻击原理: 攻击者将恶意代码提交到目标网站的数据库中。
用户打开目标网站时，网站服务端将恶意代码从数据库取出，拼接在 HTML 中返回给浏览器。
用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行。
恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。
或攻击者构造出特殊的 URL，其中包含恶意代码。用户打开带有恶意代码的 URL 时，网站服务端将恶意代码从 URL 中取出，拼接在 HTML 中返回给浏览器。 -
防御：令xss无法执行: 输入过滤, 对HTML做转义. 白名单过滤输入的标签.
严格的 CSP(content security policy 网站安全策略) 在 XSS 的防范中可以起到以下的作用：
禁止加载外域代码，防止复杂的攻击逻辑。
禁止外域提交，网站被攻击后，用户的数据不会泄露到外域。
禁止内联脚本执行（规则较严格，目前发现 GitHub 使用）。
禁止未授权的脚本执行（新特性，Google Map 移动版在使用）。
CSRF与xss的区别：
csrf需要用户登陆，利用网站自己的接口漏洞进行攻击
xss通过注入脚本执行自己的代码
使用Vue，React时遇到哪些问题? 项目过程中遇到了什么难点, 怎么解决的? 学习过程中最大的困难是什么, 如何克服的?
日期选择器的核心思路
Manifest离线缓存
Cookie
与Session的区别? session如何保存用户状态?
回调地狱怎么解决? 怎么用Promise或者async? Promise原理?
h5的css动画手机上加速: transform: translate3d?
2em与1em的差异
框架最新版本是什么?
npm
npm常用命令:
npm i [-P|--save-prod|-D|--save-dev|-O|--save-optional] [--no-save] --no-save:不将依赖加入package.json
npm [view|v]
npm search
npm [mv|uninstall]
查看依赖: npm ls 只查看自己的--depth=0
查看scripts: npm run
打开npm包对应仓库: npm repo ['package-name']
跨域
JSONP
- 动态生成一个JavaScript标签，其src由接口url、请求参数、callback函数名拼接而成，利用js标签没有跨域限制的特性实现跨域请求;
- callback函数要绑定在window对象上; 服务端返回数据有特定格式要求：callback函数名+'('+JSON.stringify(返回数据) +')';
- 只支持get请求 （js标签本身就是一个get请求）
const jsonp = function (url, data) {
return new Promise((resolve, reject) => {
// 初始化url
let dataString = url.indexOf('?') === -1 ? '?' : '&'
let callbackName = `jsonpCB_${Date.now()}`
url += `${dataString}callback=${callbackName}`
if (data) {
// 有请求参数，依次添加到url
for (let k in data) {
url += `&${k}=${data[k]}`
}
}
let jsNode = document.createElement('script')
jsNode.src = url
// 触发callback，触发后删除js标签和绑定在window上的callback
window[callbackName] = result => {
delete window[callbackName]
document.body.removeChild(jsNode)
if (result) {
resolve(result)
} else {
reject('没有返回数据')
}
}
// js加载异常的情况
jsNode.addEventListener('error', () => {
delete window[callbackName]
document.body.removeChild(jsNode)
reject('JavaScript资源加载失败')
}, false)
// 添加js节点到document上时，开始请求
document.body.appendChild(jsNode)
})
}
jsonp('http://192.168.0.103:8081/jsonp', {a: 1, b: 'str'})
.then(result => { console.log(result) })
.catch(err => { console.error(err) })
Hash
postMessage
WebSocket
CORS
见这里
fetch与XMLHTTPRequest, 默认不会带上cookie，如果要请求附带cookie，需要传参时带上credentials: 'include'或withCredentials: true.服务端需要配置response header:
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Origin: http://www.xxx.com");
大概率会问: HTTPS
HTTPS是什么?为什么https比较安全?中间的加密过程是什么?
对称加密与非对称加密的区别.
HTTPS原理: 一个故事讲完https
为什么HTTPS更安全?
SSL证书加密如何保证数据安全
- 服务器将其非对称公钥的副本发送到浏览器。
- 浏览器通过比较
消息摘要验证证书安全, 之后创建对称会话密钥，并使用服务器的非对称公钥对其进行加密后再发送到服务器。 - 服务器使用其非对称私钥解密加密的会话密钥，以获得对称会话密钥。
- 服务器和浏览器现在使用对称会话密钥对所有传输的数据进行加密和解密。这允许使用安全通道，因为只有浏览器和服务器知晓对称会话密钥，并且会话密钥仅用于特定会话。如果浏览器第二天要连接到同一服务器，则会创建一个新的会话密钥。
使用权威机构的公钥解密数字证书，得到证书内容（服务器的公钥）以及证书的数字签名，然后根据证书上描述的计算证书签名的方法计算一下当前证书的签名，与收到的签名作对比，如果一样，表示证书一定是服务器下发的，没有被中间人篡改过。因为中间人虽然有权威机构的公钥，能够解析证书内容并篡改，但是篡改完成之后中间人需要将证书重新加密，但是中间人没有权威机构的私钥，无法加密，强行加密只会导致客户端无法解密，如果中间人强行乱修改证书，就会导致证书内容和证书签名不匹配。所以证书签名就能判断证书是否被篡改
再考虑证书被掉包的情况：中间人同样可以向权威机构申请一份证书，然后在服务器给客户端下发证书的时候劫持原证书，将自己的假证书下发给客户端，客户端收到之后依然能够使用权威机构的公钥解密证书，并且证书签名也没问题。但是这个时候客户端还需要检查证书中的域名和当前访问的域名是否一致。如果不一致，会发出警告！
什么是 HTTPS
HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全
HTTPS（全称：Hyper Text Transfer Protocol over Secure Socket Layer），是以安全为目标的HTTP通道，简单讲是HTTP的安全版。即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。 现在它被广泛用于万维网上安全敏感的通讯，例如交易支付方面。
HTTP 与 HTTPS 的区别
- HTTP 是明文传输，HTTPS 通过 SSL\TLS 进行了加密
- HTTP 的端口号是 80，HTTPS 是 443
- HTTPS 需要到 CA 申请证书，一般免费证书很少，需要交费
- HTTP的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全
HTTPS协议需要到CA申请证书，一般免费证书很少，需要交费。
HTTP协议运行在TCP之上，所有传输的内容都是明文，HTTPS运行在SSL/TLS之上，SSL/TLS运行在TCP之上，所有传输的内容都经过加密的。
HTTP和HTTPS使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
HTTPS可以有效的防止运营商劫持，解决了防劫持的一个大问题。
为什么要使用 HTTPS
- 建立一个信息安全通道，来保证数据传输的安全
- 确认网站的真实性，防止钓鱼网站
HTTP
HTTP协议的主要特点
1.简单快速：直接输入URI即可访问
2.灵活：可完成不同数据类型的传输
3.无连接：只连接一次就可以断开，不用保持连接
4.无状态：客服端和服务端是两种身份，下次再连接，服务端无法区分两次是否由同一客户端发起的请求
HTTP报文的组成部分
1.请求报文：请求行、请求头、空行、请求体
请求行：请求方法、URL字段、HTTP协议版本字段。它们用空格分隔。
例如，GET /index.html HTTP/1.1。
请求头：由key:value组成，每行一对，传递服务端一些获取数据必须信息。
User-Agent：产生请求的浏览器类型。
Accept：客户端可识别的内容类型列表。
Host：请求的主机名，允许多个域名同处一个IP地址，即虚拟主机。
Content-Type:
Content-Length:表示实体内容长度，客户端（服务器）可以根据这个值来判断数据是否接收完成。
空行：最后一个请求头之后是一个空行，发送回车符和换行符，通知服务器请求头结束。
请求体：数据列表（GET时不可用）
2.响应报文：状态行，响应头、空行、响应体
状态行：例如，HTTP/1.1 200 OK`。
其余部分与请求大同小异。
HTTP方法
| HTTP协议常用方法 | 解释 |
|---|---|
| GET | 获取资源 |
| POST | 传输资源 |
| PUT | 更新资源 |
| DELETE | 删除资源 |
| HEAD | 获得报文首部 |
POST和GET的区别
1.get回退无害。post会被重新请求
2.get的请求会被浏览器主动缓存，post默认不会，可以手动设置
3.get的请求相对post不安全，参数明文显示，不适合传送隐私数据
4.get参数通过url传递，有可能会被截断，post通过request Body
5.get请求参数有字节限制，2kb，格式仅限ASCII，post没有
HTTP状态码
200 OK 表示请求被服务器正常处理
204 No Content 表示请求已成功处理，但是没有内容返回
206 Partial Content 表示服务器已经完成了部分GET请求, 部分内容，客户发送了带有Range头的GET请求，服务器按照Range截取数据返回，常用于Audio、Video标签。
301 Moved Permanently：永久转移，所请求的页面已转移至新url。
302 Found：临时重定向。
304 Not Modified：服务端通知客户端，缓存的文档并未发生改变，可继续使用。
400 Bad Request：客户端请求语法错误
401 Unauthorized 请求未通过身份认证
403 Forbidden 服务器理解请求客户端的请求，但是拒绝执行此请求
500: 服务器错误
502: bad gateway 作为网关或者代理工作的服务器尝试执行请求时，从远程服务器接收到了一个无效的响应
503: 服务器目前无法处理请求(停机维护/超负荷)。
1xx：指示信息 - 请求已接受，继续处理
2xx：成功 - 请求已成功接受
3xx：重定向 - 要完成请求需进一步操作
4xx：客户端错误 - 请求语法错误或请求无法实现
5xx：服务器错误 - 服务器未能实现合法的请求
Connection: Keep-Alive
HTTP 1.1所有连接默认都是持久连接, 不会默认完成后立刻断开连接，在出现对服务器的后续请求时，避免了重新建立连接。
管线化
把请求一次打包传输过去，响应一次性返回过来
持久连接：请求1→响应1→请求2→响应2→请求3→响应3
管线化：请求1→请求→请求3→响应1→响应2→响应3
- 管线化机制通过keep-alive完成，仅HTTP/1.1支持此技术
- 只有GET和HEAD请求可以管线化, POST有所限制
- 管线化不会影响响应到来的顺序,如上例子
- HTTP/1.1要求服务端支持管线化,但不要求服务端对响应进行管线化处理,只要求对管线化的请求不失败即可
- 由于上述原因, 开启管线化很可能性能提升不大, 而且很多服务端和代理程序对管线化的支持并不好, 因此Chrome,Firefox默认未开启管线化支持
渲染机制类
什么是DOCTYPE及作用？
DTD(document type definition文档类型定义):一系列语法规则，定义xml、html的文件类型，浏览器会使用它来判断文档类型，决定使用何种协议来解析以及切换浏览器模式。
DOCTYPE：声明当前文档类型和使用的DTD规范，主要用途是文件合法性验证。如果文件代码不合法，浏览器解析时会出一些差错。
从浏览器输入URL打开都发生了什么?
- DNS解析, 将域名解析成IP
URL格式:scheme://host.domain:port/path/filename
1、浏览器中输入想要访问的网站的域名，操作系统会先检查本地的hosts文件是否有这个网址映射关系，如果有，就先调用这个IP地址映射，完成域名解析。
2、如果hosts里没有这个域名的映射，客户端会向本地DNS服务器发起查询。本地DNS服务器收到查询时，如果要查询的域名包含在本地配置区域资源中，则返回解析结果给客户机，完成域名解析。
3、如果本地DNS服务器本地区域文件与缓存解析都失效，则根据本地DNS服务器的设置，采用递归或者迭代查询，直至解析完成。
- TCP连接, 三次握手
双方listen
一, 浏览器: 将要发送请求, SYN=1,seq=x, SYN_SENT
二, 服务器: 已准备接受, 浏览器可以发送,SYN=1,ACK=1,ack=x+1,seq=y,SYN_RECV
三, 浏览器: 已准备发送,ACK=1,ack=y+1,seq=y+1,ESTABLISHED
双方ESTABLISHED
面试官问我：一个 TCP 连接可以发多少个 HTTP 请求？
这之后可能会发生TLS握手
- 发送HTTP请求
请求行: 请求方法 URL 协议版本:POST /chapter17/user.html HTTP/1.1 - 服务器处理并返回HTTP响应
首先浏览器会判断状态码是什么，如果是 200 那就继续解析，如果 400 或 500 的话就会报错，如果 300 的话会进行重定向，这里会有个重定向计数器，避免过多次的重定向，超过次数也会报错
浏览器开始解析文件，如果是 gzip 格式的话会先解压一下，然后通过文件的编码格式知道该如何去解码文件
- 浏览器解析渲染页面
浏览器渲染过程
- 将HTML自上而下解析成DOM tree。
- 当遇到style或link的css文件，浏览器会开启一个异步的线程去下载和CSS解析成 CSSOM tree，该线程会阻塞js线程的执行，但不会阻塞html线程的解析。
- 遇到 script 标签的话，会判断是否存在 async 或者 defer ，
前者網頁繪製不會停下， demo.js 在背景下載，待 DOMContentLoaded 再執行 demo.js
后者網頁繪製不會停下， demo.js 在背景下載。
待 demo.js 下載完畢，網頁繪製停下，執行 demo.js 。
待 demo.js 執行完畢，網頁繪製繼續。
如果以上两个属性都没有，就会阻塞住渲染流程直到 JS 下载执行完毕, 之后才将控制权返还给html解析器继续解析构建dom树 - 根据DOM树和CSSOM来构造Render Tree(只包括渲染网页所需的节点，
HTML 被完全加载和解析后会触发 DOMContentLoaded 事件 - 通过渲染树，layout计算每个节点精确位置和大小。
- 绘制，并使用UI后端层绘制每个节点图层.
断开TCP连接, 四次挥手
双方ESTABLISHED
一, 浏览器: 请求发送完, 准备关闭,不发送,可接受,FIN=1,seq=x,FIN_WAIT-1
二, 服务器: 请求接收完, 准备关闭,仍然可能发送,ACK=1,ack=x+1,seq=y,CLOSE_WAIT,FIN_WAIT_2
三, 服务器: 响应发送完, 告知准备关闭,等待最后ack,FIN=1,ack=x+1,seq=z,LAST_ACK
四, 浏览器: 响应接受完, 等2MaxiumSegmentLifetime关闭,ACK=1,ack=z+1,seq=x+1,TIME_WAIT
等待2MSL如果没收到ACK, 双方CLOSED
重排Reflow
定义
DOM结构中的各个元素都有自己的盒模型，这些都需要浏览器根据样式计算并根据计算结果将元素渲染到具体位置，这个过程称之为reflow。
触发
- 盒模型相关的属性: width，height，margin，display，border，etc
- 定位属性及浮动相关的属性: top,position,float，etc
- 改变节点内部文字结构也会触发回流: text-align, overflow, font-size, line-height, vertival-align，etc
除开这三大类的属性变动会触发reflow，以下情况也会触发：
- resize窗口
- 修改CSS样式
- 元素内容变化，尤其是输入控件
- dom操作（增加、删除、修改）
- css伪类激活
- 计算元素的offsetWidth、offsetHeight、clientWidth、clientHeight、width、height、scrollTop、scrollHeight
重绘Repaint
定义
当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。
触发
页面中的元素更新样式风格相关的属性时就会触发重绘，如background，color，cursor，visibility，etc。
reflow必将会引起repaint，repaint不一定会引起reflow。
布局Layout
微信小程序
组件的relations
Component({
relations: {
'./custom-li': {
type: 'child', // 关联的目标节点应为子节点
linked: function(target) {
// 每次有custom-li被插入时执行，target是该节点实例对象，触发在该节点attached生命周期之后
},
linkChanged: function(target) {
// 每次有custom-li被移动后执行，target是该节点实例对象，触发在该节点moved生命周期之后
},
unlinked: function(target) {
// 每次有custom-li被移除时执行，target是该节点实例对象，触发在该节点detached生命周期之后
}
}
},
methods: {
_getAllLi: function(){
// 使用getRelationNodes可以获得nodes数组，包含所有已关联的custom-li，且是有序的
var nodes = this.getRelationNodes('path/to/custom-li')
}
},
ready: function(){
this._getAllLi()
}
})
hash路由与history路由区别 手动实现一个history路由需要哪些api
彻底弄懂前端路由
hash:
let hash = window.location.hash;
// 监听hash变化，点击浏览器的前进后退会触发
window.addEventListener('hashchange', function(event){
let newURL = event.newURL; // hash 改变后的新 url
let oldURL = event.oldURL; // hash 改变前的旧 url
},false)
let hash = location.hash.slice(1)
history:
pushState, replaceState均接收三个参数（state, title, url）
state：合法的 Javascript 对象，可以用在 popstate 事件中
title：现在大多浏览器忽略这个参数，可以直接用 null 代替
url：任意有效的 URL，用于更新浏览器的地址栏
history.go(-1); // 后退一页
history.go(2); // 前进两页
history.forward(); // 前进一页
history.back(); // 后退一页
history.pushState(); // 添加新的状态到历史状态栈
history.replaceState(); // 用新的状态代替当前状态
history.state // 返回当前状态对象
//监听popstate
listenPopState(){
window.addEventListener('popstate',(e)=>{
let state = e.state || {},
path = state.path || '';
this.dealPathHandler(path)
},false)
}
//全局监听A链接
listenLink(){
window.addEventListener('click',(e)=>{
let dom = e.target;
if(dom.tagName.toUpperCase() === 'A' && dom.getAttribute('href')){
e.preventDefault()
this.assign(dom.getAttribute('href'));
}
},false)
}
让我手写一个订阅发布
然后有如何配置webpack按需加载
然后有redux与其它的状态管理的区别
问我promise A+
还有flex实现他手画的一个类似瀑布流的布局
diff算法
2、负责运行保持高效的前端性能，优秀的代码维护性，良好的浏览器兼容性（ie9以上）等工作；
3、与后台相关开发人员协作，开展适应前后端分离工作模式。
1、需要准备canvas以及svg的用法和区别、特性、应用场景；
2、需要了解css3动画在不同移动端的兼容；
3、主要对移动端的兼容和性能调优比较了解
4、大型网站开发经验该怎么破？
vue3.0使用的proxy与Object.defineProperty优缺点及实现原理
数据劫持优点:
1.无需显示调用: 例如Vue运用数据劫持+发布订阅,直接可以通知变化并驱动视图,简单的data.name = 'name'后直接触发变更,react需要显示调用setState。
- 可精确得知变化数据：劫持了属性的setter,当属性值改变,我们可以精确获知变化的内容newVal,因此在这部分不需要额外的diff操作,否则我们只知道数据发生了变化而不知道具体哪些数据变化了,这个时候需要大量diff来找出变化值,这是额外性能损耗。
Object.defineProperty缺点:
Object.defineProperty的第一个缺陷,无法监听数组变化。 然而Vue的文档提到了Vue是可以检测到数组变化的，但是只有以下八种方法,vm.items[indexOfItem] = newValue这种是无法检测的。
Object.defineProperty的第二个缺陷,只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历，如果属性值也是对象那么需要深度遍历,显然能劫持一个完整的对象是更好的选择。
Proxy优点:
Proxy可以直接监听对象而非属性, 可以直接监听数组的变化
Proxy有多达13种拦截方法,不限于apply、ownKeys、deleteProperty、has等等是Object.defineProperty不具备的。
Proxy返回的是一个新对象,我们可以只操作新的对象达到目的,而Object.defineProperty只能遍历对象属性直接修改。
Proxy作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利。
缺点: 兼容性问题,而且无法用polyfill磨平
webpack
gulp
- 你觉得你最大的优势(可以多个)是什么？你为什么选择前端？
- 你碰到过的最难的编程问题，以及怎么解决的？
- 前后端分离的原理及意义？
- node 异步模型简单概述一下，node 在性能上的优缺点，以及为什么？
- koa 和 express 有什么不同？koa 解决了什么问题？有什么意义？koa1 基于 generator 的实现的 同步风格写异步代码 的原理是什么?（对这个问题有兴趣的同学可以看我写的这个 koa 学习心得及核心源码分析 - 知乎专栏）
- 你对异步模型有哪些理解？
- 你对 react 有什么理解？基于 react 的开发模式比起传统 jqurey 开发模式的最大优势(可以有几个)是什么？
- 你对页面进行性能优化的思路和思想是什么？
- 你写代码有过哪些设计和思想？你怎么看 oop 和函数式？（代码设计的思想可以看我这一篇文章 编程的几个思想 - 知乎专栏）
ajax
XMLHttpRequest
.open()
.send()
.onreadystatechange
readyState
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
网友评论