2019.9.4面试题
1. 输入url，到渲染数据，共进行了几步，请详细说明一下从服务端到客户端做了哪些操作？
在网址中输入url -> DNS解析 (根据域名找到IP地址 -> IP地址发送http请求到服务端) -> 服务端接收数据 -> 服务端返回html响应-> 客户端加载css并接收html开始进行渲染 -> 客户端发送嵌入在html对象的请求 -> 客户端发送异步请求 -> 服务端返回请求数据 -> 客户端将返回的数据绑定在html标签上
2.服务端渲染和客户端渲染是什么？详细描述一下
服务端渲染：每当客户端向服务端请求页面时，服务端会先将指定页面在后端渲染，渲染成功后将完整页面返回到客户端
客户端渲染：每当客户端向服务端请求页面时，服务端会先将模版页面返回到客户端，然后客户端中html对象请求服务端获得数据，再返回到客户端，客户端将数据与html相关联，进行渲染页面
服务端渲染的好处：对SEO友好，因为服务端会返回一个完整的页面进行渲染，爬虫会爬到页面上抓取关键字进行记录
服务端渲染的坏处：对服务器压力很大
服务端渲染的优化：可本地缓存，减缓服务器对压力
客户端渲染的好处：对服务器压力不大
客户端渲染的坏处：对SEO不友好
客户端渲染的优化：可使用nuxt.js, node.js 配合使用，或者查看vue官网给出的方法
3.存储的方法有哪几种？
localstorage， sessionstorage， cookie
4.html5有哪些新特性
1.语义化标签
2.表单
3.canvas
4.视频和音频 video，audio
5.拖放API
6.地理定位 window.navigator.geoLocation
7.SVG绘图
8.webstorage localstorage, sessionstoage
9.webworker
10.websocket send发送， onmessage接收
5.选择器有哪几种，给其排序
id < class < 标签 < 子选择器（ul > li ） < 后代选择器 ( ul li ) < 伪类 < 属性选择器 （input[type='text']）
6.call, apply, bind区别与相同点
call(obj, a, b) 立即执行
apply(obj, [a, b]) 立即执行
bind(obj, a, b) 不立即执行，后面加()立即执行
这三者都是为了改变this指向
7.display，position的属性值有哪些？box-sizing: content-box与border-box有什么区别？
dispaly：flex；block；none；inline-block；inline；table；inline-table；table-row；table-column；
position：absolute；fixed；relative；static；inherit；
box-sizing: content-box; 标准盒模型，不包括padding和border
box-sizing: border-box；怪异盒模型，包括padding和border
8.jquery的.bind和.live，.delegate()和.on()区别是什么？
9.跨域通信有哪几种？分别讲述一下如何进行跨域的？什么是跨域？
1.nginx 在nginx中反向代理api
2.jsonp 动态添加script，img，iframe标签通过get的方式请求数据 （jsonp为什么可以解决跨域，因为script，img，iframe标签可以请求第三方资源）
3. window.name + iframe
4. window.domain + iframe
a.html <iframe></iframe> <script>window.domain = '你好' var user = '小明'</script>
b.html <script>window.domain = '你好' console.log(window.parent.user) <script>
5.location.hash + iframe
10.将下面['a', 'b', 'ab'].upperCase() => ['A', 'B', 'AB']
['a', 'b', 'ab'].upperCase( e => e.toUpperCase() )
11.[1 2 38 7 5 6 4 9 8] => [1 2 3 4 5 6 7 8 9]
12.nginx是如何进行跨域的？nginx是什么？
nginx中需要配置域名，端口号，请求api，nginx最强的地方是反向代理，
举例：在浏览器中输入www.a.com，请求接口是www.b.com
nginx配置
server { listen 80; server_name www.a.com; access_log logs/test.access.log; # 匹配以/apis/开头的请求 location ^~ /apis/ { proxy_pass http://www.b.com/; #注意域名后有一个/ } location / { root html/a; index index.html index.htm; } # error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } }
13.express.js是什么
14.如何进行移动端的兼容？如何实现每部手机都展示相同的页面？
使用rem根据UI给的设计图安装750px设置； 1rem = 1px;
或者也可根据postcss进行设置，默认UI设计图1px = 1px；
15.1rem等于多少px？
rem是相对于根元素<html>, 并不是相对于<body>
html { font-size: 12px } 那么 1rem = 12px
body { font-size: 12px } 是为了固定页面的默认字体大小
16.vue和jquery的区别和优势是什么？哪个更好？
vue主要以数据和视图完全分开，并相互绑定，可以处理一些复杂数据操作界面，侧重于数据绑定
jquery主要使用Dom实现js侧重样式操作，动画效果等
如果进行复杂数据操作可选择vue；如果需要动画效果很棒，可使用jquery
