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

原文地址:https://www.cnblogs.com/gqx-html/p/11468294.html