面试题来源于我的项目「前端面试与进阶指南」
本章关于浏览器原理部分的内容主要来源于，这是一篇很长的文章，可以算上一本小书了，有精力的非常建议阅读。
| 浏览器/runtime | 内核（渲染引擎） | javascript 引擎 |
|---|---|---|
| chrome | blink（28~） webkit（chrome 27） |
v8 |
| firefox | gecko | spidermonkey |
| safari | webkit | javascriptcore |
| edge | edgehtml | chakra(for javascript) |
| ie | trident | chakra(for jscript) |
| phantomjs | webkit | javascriptcore |
| node.js | - | v8 |
图：浏览器的主要组件。
值得注意的是，和大多数浏览器不同，chrome 浏览器的每个标签页都分别对应一个呈现引擎实例。每个标签页都是一个独立的进程。
浏览器会『从右往左』解析css选择器。
我们知道dom tree与style rules合成为 render tree，实际上是需要将style rules附着到dom tree上，因此需要根据选择器提供的信息对dom tree进行遍历，才能将样式附着到对应的dom元素上。
以下这段css为例
我要评论.mod-nav h3 span {font-size: 16px;}
我们对应的dom tree 如下
若从左向右的匹配，过程是：
如果从右至左的匹配：
后者匹配性能更好，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点）；而从左向右的匹配规则的性能都浪费在了失败的查找上面。
单单改变元素的外观，肯定不会引起网页重新生成布局，但当浏览器完成重排之后，将会重新绘制受到此次重排影响的部分
重排和重绘代价是高昂的，它们会破坏用户体验，并且让ui展示非常迟缓，而相比之下重排的性能影响更大，在两者无法避免的情况下，一般我们宁可选择代价更小的重绘。
『重绘』不一定会出现『重排』，『重排』必然会出现『重绘』。
任何改变用来构建渲染树的信息都会导致一次重排或重绘：
我们往往通过改变class的方式来集中改变样式
// 判断是否是黑色系样式
const theme = isdark ? 'dark' : 'light'
// 根据判断来设置不同的class
ele.setattribute('classname', theme)
我们可以通过createdocumentfragment创建一个游离于dom树之外的节点，然后在此节点上批量操作，最后插入dom树中，因此只触发一次重排
var fragment = document.createdocumentfragment();
for (let i = 0;i<10;i++){
let node = document.createelement("p");
node.innerhtml = i;
fragment.appendchild(node);
}
document.body.appendchild(fragment);
将元素提升为合成层有以下优点：
提升合成层的最好方式是使用 css 的 will-change 属性：
#target {
will-change: transform;
}
关于合成层的详解请移步
短轮询的原理很简单，每隔一段时间客户端就发出一个请求，去获取服务器最新的数据，一定程度上模拟实现了即时通讯。
comet有两种主要实现手段，一种是基于 ajax 的长轮询（long-polling）方式，另一种是基于 iframe 及 htmlfile 的流（streaming）方式，通常被叫做长连接。
具体两种手段的操作方法请移步
长轮询优缺点：
长连接优缺点：
使用指南请看server-sent events 教程
sse（server-sent event，服务端推送事件）是一种允许服务端向客户端推送新数据的html5技术。
使用指南请看
websocket是一个全新的、独立的协议，基于tcp协议，与http协议兼容、却不会融入http协议，仅仅作为html5的一部分，其作用就是在服务器和客户端之间建立实时的双向通信。
后面性能优化部分会用到，先做了解
web worker 的作用，就是为 javascript 创造多线程环境，允许主线程创建 worker 线程，将一些任务分配给后者运行
后面性能优化部分会用到，先做了解
service workers 本质上充当web应用程序与浏览器之间的代理服务器，也可以在网络可用时作为浏览器和网络间的代理，创建有效的离线体验。
同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。
同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。
下表给出了相对http://store.company.com/dir/page.html同源检测的示例:
浏览器中的大部分内容都是受同源策略限制的，但是以下三个标签可以不受限制：
<img src=xxx><link href=xxx><script src=xxx>跨域是个比较古老的命题了，历史上跨域的实现手段有很多，我们现在主要介绍三种比较主流的跨域方案，其余的方案我们就不深入讨论了，因为使用场景很少，也没必要记这么多奇技淫巧。
jsonp本质上是一个hack，它利用<script>标签不受同源策略限制的特性进行跨域操作。
jsonp优点：
jsonp的缺点：
<script>标签只能get）jsonp的实现：
function jsonp({
url,
params,
callbackkey,
callback
}) {
// 在参数里制定 callback 的名字
params = params || {}
params[callbackkey] = 'jsonpcallback'
// 预留 callback
window.jsonpcallback = callback
// 拼接参数字符串
const paramkeys = object.keys(params)
const paramstring = paramkeys
.map(key => `${key}=${params[key]}`)
.join('&')
// 插入 dom 元素
const script = document.createelement('script')
script.setattribute('src', `${url}?${paramstring}`)
document.body.appendchild(script)
}
jsonp({
url: 'http://s.weibo.com/ajax/jsonp/suggestion',
params: {
key: 'test',
},
callbackkey: '_cb',
callback(result) {
console.log(result.data)
}
})
cors是目前主流的跨域解决方案，跨域资源共享(cors) 是一种机制，它使用额外的 http 头来告诉浏览器 让运行在一个 origin (domain) 上的web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 http 请求。
如果你用express，可以这样在后端设置
//cors middleware
var allowcrossdomain = function(req, res, next) {
res.header('access-control-allow-origin', 'http://example.com');
res.header('access-control-allow-methods', 'get,put,post,delete');
res.header('access-control-allow-headers', 'content-type');
next();
}
//...
app.configure(function() {
app.use(express.bodyparser());
app.use(express.cookieparser());
app.use(express.session({ secret: 'cool beans' }));
app.use(express.methodoverride());
app.use(allowcrossdomain);
app.use(app.router);
app.use(express.static(__dirname + '/public'));
});
在生产环境中建议用成熟的开源中间件解决问题。
nginx是一款极其强大的web服务器，其优点就是轻量级、启动快、高并发。
现在的新项目中nginx几乎是首选，我们用node或者java开发的服务通常都需要经过nginx的反向代理。
反向代理的原理很简单，即所有客户端的请求都必须先经过nginx的处理，nginx作为代理服务器再讲请求转发给node或者java服务，这样就规避了同源策略。
#进程, 可更具cpu数量调整
worker_processes 1;
events {
#连接数
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
#连接超时时间，服务器会在这个时间过后关闭连接。
keepalive_timeout 10;
# gizp压缩
gzip on;
# 直接请求nginx也是会报跨域错误的这里设置允许跨域
# 如果代理地址已经允许跨域则不需要这些, 否则报错(虽然这样nginx跨域就没意义了)
add_header access-control-allow-origin *;
add_header access-control-allow-headers x-requested-with;
add_header access-control-allow-methods get,post,options;
# srever模块配置是http模块中的一个子模块，用来定义一个虚拟访问主机
server {
listen 80;
server_name localhost;
# 根路径指到
location / {
root html;
index index.htm;
}
# localhost/api 的请求会被转发到192.168.0.103:8080
location /api {
rewrite ^/b/(.*)$ /$1 break; # 去除本地接口/api前缀, 否则会出现404
proxy_set_header host $host;
proxy_set_header x-real-ip $remote_addr;
proxy_set_header x-forwarded-for $proxy_add_x_forwarded_for;
proxy_pass http://192.168.0.103:8080; # 转发地址
}
# 重定向错误页面到/50x.html
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
其余方案来源于
参考文章:
想要实时关注笔者最新的文章和最新的文档更新请关注公众号程序员面试官,后续的文章会优先在公众号更新.
简历模板: 关注公众号回复「模板」获取
《前端面试手册》: 配套于本指南的突击手册,关注公众号回复「fed」获取
如对本文有疑问， 点击进行留言回复！！
同事牛逼啊，写了个隐藏 bug，我排查了 3 天才解决问题！
【JavaScript笔记（一）】万丈高楼平地起 - 基本概念篇
轻松解决 org.apache.taglibs.standard.tlv.JstlCoreTLV 困惑
网友评论