前端那些小面试总结(1)

1.一个页面又两个div,左右铺满整个浏览器,要保证左边的div宽度一直为100px,右边的div宽度随浏览器大小自由变化,有几种实现方式呢?

<style type="text/css">
*{margin:0px;padding:0px;}
.left{width: 300px;height: 40px;background-color: #ccc;float: left;}
.right{margin-left: 300px;height: 40px;background-color: green;}
</style>

<body>
<div class="left">我一直都是100px</div>
<div class="right">我随浏览器大小随意变化</div>
</body>

当然还有其他的方法,比如用flex这个方法也可以的。

 

2.有关前端性能优化的方法

a.减少Dom操作,原因就是因为在读取,修改,删除等dom操作时,会引起浏览器的渲染,而渲染是比较慢的;

b.部署前,图片和代码压缩;

c.优化js代码结构,减少冗余代码,代码尽量写的干净利落,不要拖泥带水;

d.减少HTTP请求,合理设置HTTP缓存;

e.使用内容分发cdn加速;

f.静态资源缓存;

g.图片延迟加载;

 

3.一个页面从输入url,到页面加载显示完成,整个过程发生了森么?

 1:当发送一个URL请求时,不管这个URL是Web页面的URL还是Web页面上每个资源的URL,浏览器都会开启一个线程来处理这个请求,同时在远程DNS服务器上启动一个DNS查询。这能使浏览器获得请求对应的IP地址。

    2: 浏览器与远程Web服务器通过TCP三次握手协商来建立一个TCP/IP连接。该握手包括一个同步报文,一个同步-应答报文和一个应答报文,这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信,而后服务器应答并接受客户端的请求,最后由客户端发出该请求已经被接受的报文。

    3:一旦TCP/IP连接建立,浏览器会通过该连接向远程服务器发送HTTP的GET请求。远程服务器找到资源并使用HTTP响应返回该资源,值为200的HTTP响应状态表示一个正确的响应。

    4:此时,Web服务器提供资源服务,客户端开始下载资源。请求返回后,便进入了我们关注的前端模块。简单来说,浏览器会解析HTML生成DOM Tree,其次会根据CSS生成CSSRule Tree,而javascript又可以根据DOMAPI操作DOM。

 

4.页面访问cookie的限制条件

a.跨域问题

b.设置了HttpOnly

posted on 2017-10-11 15:23  龟和兔子赛跑  阅读(113)  评论(0)    收藏  举报

导航