如何实现里两栏布局
利用float+margin实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
#left {
background-color: #f00;
float: left;
width: 100px;
height: 500px;
}
#right {
background-color: #0f0;
height: 500px;
margin-left: 100px; /*大于等于#left的宽度*/
}
</style>
<body>
<div id='left'>左列定宽</div>
<div id='right'>右列自适应</div>
</body>
</html>
使用float+overflow实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
#left {
background-color: #f00;
float: left;
width: 100px;
height: 500px;
}
#right {
background-color: #0f0;
height: 500px;
overflow: hidden; /*触发bfc达到自适应*/
}
</style>
<body>
<div id="left">左列定宽</div>
<div id="right">右列自适应</div>
</body>
</html>
优缺点：
优点：代码简单，容易理解，无需关注定宽的宽度，利用bfc达到自适应效果
缺点：浮动脱离文档流，需要手动清除浮动，否则会产生高度塌陷；不支持ie6
使用table实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
#parent{
width: 100%;
display: table;
height: 500px;
}
#left {
width: 100px;
background-color: #f00;
}
#right {
background-color: #0f0;
}
#left,#right{
display: table-cell; /*利用单元格自动分配宽度*/
}
</style>
<body>
<div id="parent">
<div id="left">左列定宽</div>
<div id="right">右列自适应</div>
</div>
</body>
</html>
优缺点：
优点：代码简单，容易理解，无需关注定宽的宽度，利用单元格自动分配达到自适应效果
缺点：margin失效；设置间隔比较麻烦；不支持ie8-
使用绝对定位实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
#parent{
position: relative; /*子绝父相*/
}
#left {
position: absolute;
top: 0;
left: 0;
background-color: #f00;
width: 100px;
height: 500px;
}
#right {
position: absolute;
top: 0;
left: 100px; /*值大于等于#left的宽度*/
right: 0;
background-color: #0f0;
height: 500px;
}
</style>
<body>
<div id="parent">
<div id="left">左列定宽</div>
<div id="right">右列自适应</div>
</div>
</body>
</html>
使用flex实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
#parent{
width: 100%;
height: 500px;
display: flex;
}
#left {
width: 100px;
background-color: #f00;
}
#right {
flex: 1; /*均分了父元素剩余空间*/
background-color: #0f0;
}
</style>
<body>
<div id="parent">
<div id="left">左列定宽</div>
<div id="right">右列自适应</div>
</div>
</body>
</html>
实现斐波那契数列
递归法
这是最容易实现的方法，写起来简单，但是效率并不是很高。
var count;
var count=0;
var fib=function(n){
count++;
if(n==1||n==2){
return 1;
}
else{
return fib(n-2)+fib(n-1);
}
}
闭包递推法
虽然这里也是使用了递归，但是闭包大大减少了递归的次数，因为它是最先递归到fiba(3)，就可以将fiba(3)存储到数组中，这样就可以根据数组中arr[3]+arr[2]，得到fiba(4)的值，并存储在数组中，如此往复，便会得到最终结果。可以说，这是典型的用空间换时间的例子。
var count2=0;
var fiba = (function(){
var arr = [0,1,1]; //第0位只是占位，从第一位开始算起
return function(n){
count2++;
var res=arr[n]; /*因为内部引用了arr，并返回，导致arr一直在内存中*/
if(res){
return res;
}else{
arr[n]=fiba(n-1)+fiba(n-2);
return arr[n];
}
}
})();
浏览器的渲染机制？各环节怎么进行优化？
浏览器的渲染机制一般分为以下几个步骤：
- 处理 HTML 并构建 DOM 树。
- 处理 CSS 构建 CSSOM 树。
- 将 DOM 与 CSSOM 合并成一个渲染树。
- 根据渲染树来布局，计算每个节点的位置。
- 调用 GPU 绘制，合成图层，显示在屏幕上。
优化：
DNS预解析
浏览器缓存
懒执行，懒加载
图片优化（减少像素点，base64，雪碧图）
script放在底部，因为js文件执行会阻塞渲染，加defer或async
CDN
网友评论