前端知识总结2,java前端知识总结

摘要：

语义的优势：为了在没有css的情况下呈现良好的内容结构和代码结构，页面有利于用户体验和SEO与搜索引擎之间的良好沟通。固定宽度元素：100px；高度：80px；位置：绝对；左：50%；顶部：50%；边距：-40px00-50px；背景色：白蜡；要使DIV水平和垂直居中，必须知道DIV的宽度和高度，然后将位置设置为绝对位置。页面窗口的左边框和上边框之间的距离设置为50%。这50%是指页面窗口宽度和高度的50%。最后，分别向左和向上移动DIV。向左和向上移动的大小是DIV宽度和高度的一半。方法3：＜DIV＞＜DIV＞sdscsddd＜/DIV＞＜/DIV＜Js：＜！

（暂时撇开内容、样式、行为的分离）

一：

1-语义化及语义化标签

标签的语义化，是指在看到标签名的情况下基本能理解它所代表的含义，比较直观，便于浏览器的解析和阅读。

语义化的优点，（1）为了在没有css的情况下，页面也能呈现出很好地内容结构、代码结构（2）有利于用户体验（3）有利于SEO和搜索引擎建立良好的沟通。（4）方便其他设备解析以意义的方式来渲染网页、（5）便于团队开发和维护，增加可读性。

语义化的标签，<h1>~<h6> 、<p>、 <ul>、<ol>、<li>，<ul> 、<dl>、<dt>、<dd>，<dl> 、<em>、<strong>（<em> 是用作强调，<strong> 是用作重点强调）、<table>、<td>、<th>、<caption>、< title></title>、<header></header>、<nav></nav>、<article></article>、<section></section>、<aside></aside>、<footer></footer>、<figure></figure>、<cite></cite>、<figcaption></figcaption>（figure的标题，必须是figure内嵌的第一个或者最后一个元素。）、<cite></cite>（指明引用或者参考）、<blockquoto></blockquoto>、<q></q>（短的引述）、<time></time>（标记时间）、<address></address>（作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。）等。

2-布局

（一）居中布局

（水平居中）

（1）文字水平居中：可以将文字放置在p标签内，然后对p标签设置text-align:center;

（2）图片水平居中：将图片设置为block块状显示，然后设置margin：0 auto；或者将img标签放置在div内，然后同样地设置margin。

（3）定宽块状元素：设置宽高背景色，然后设置margin：0 auto；

（4）不定宽元素：方法1，将display设置为table，margin：0 auto；方法2，父元素设置text-align:center; ，子元素中设置display:inline-block; 居中内容放在父元素或子元素都可以。方法3，position:absolute;left:50%;transform:translateX(-50%);方法4，display:flex; justify-content: center; 方法5，父元素设置float:left;position:relative;left:50%;，子元素设置position:relative;left:-50%;且水平居中内容放在子元素中。

（垂直居中）

（1）单元格中内容：直接设置vetical-align：middle；

（2）定宽元素：单行文本：垂直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现height:100px；line-height: 100px;

（3）不定宽元素：方法1，position: absolute;top:50%;transform: translateY(-50%); 方法2，<div ><div>awdfad</div></div>I E9以上。

（水平垂直居中）

（1）定宽元素：100px; height:80px; position:absolute; left:50%; top:50%; margin:-40px 0 0 -50px; background-color: blanchedalmond; 要让DIV水平和垂直居中，必需知道该DIV得宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该DIV分别左移和上移，左移和上移的大小就是该DIV宽度和高度的一半。

（2）不定宽元素：方法1，position: absolute;left:50%;top:50%;transform: translate(-50%,-50%); 。（IE9以上兼容，适合移动端）方法2，display: flex;justify-content: center;align-items: center;（IE9以上兼容，适合移动端，测试有问题）。方法3，<div ><div >sdscsddd</div></div> （测试有问题）

Js实现水平垂直居中：（IE中可以，Chrome只是垂直居中）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="http://t.zoukankan.com/js/jquery-3.1.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
   $(window).resize(function(){
       $(".mydiv").css({
           position:"absolute",
           left:($(window).width()-$(".mydiv").outerWidth())/2,
           top:($(window).height()-$(".mydiv").outerHeight())/2,
       });
   });
    $(function(){
        $(window).resize();
    })
</script>
</body>
</html>

（二）多列布局

（一列定宽+一列自适应）

（1）float+margin：左边左浮动，右边的左外边界与左边元素宽度一致。
    <style type="text/css">
        .left{
            float:left;
            100px;
            background-color: antiquewhite;
        }
        .right{
            margin-left:100px;
          background-color: aqua;
        }
    </style>

<body>
<div>
    <div class="left"><p>left</p></div>
    <div class="right"><p>right</p><p>right</p></div>
</div>
</body>

（2）float+overflow：左边元素左浮动，并设置宽度，及右外边界为0；右边元素设置overflow属性，值为hidden。

    <style type="text/css"> 
        .left{ 
            float:left; 
            100px; 
            background-color: antiquewhite; 
            margin-right:0px; 
        } 
        .right{ 
            overflow:hidden; 
            background-color: aqua; 
        } 
    </style> 
 
<body> 
<div> 
    <div class="left"><p>left</p></div> 
    <div class="right"><p>right</p><p>right</p></div> 
</div> 
</body> 
ps：overflow属性规定当内容溢出时元素框发生的事情。其属性值有：visible（默认值，内容不会被裁剪，会呈现在元素框之外）、hidden（内容会被裁剪，且其余内容是不可见的）、scroll（内容会被裁剪，但浏览器会显示滚动条以方便查看其余内容）、auto（如果内容被裁剪，则浏览器会显示滚动条方便查看其余内容）、inherit（规定从父元素继承overflow属性值）。

（3）flex：父元素设置display：flex；左边设置宽度和右外边界margin为0,；右元素设置flex为1。
    <style type="text/css">
       .parent{
           display: flex;
           display:-webkit-box;
       }
        .left{
            100px;
            background-color: antiquewhite;
            margin-right:0px;
        }
        .right{
           flex: 1;
            -webkit-box:1;
            background-color: aqua;
        }
    </style>
<div class="parent">
    <div class="left"><p>left</p></div>
    <div class="right"><p>righsddst</p><p>risdfddsssdght</p></div>
</div>

或

    <style type="text/css">
        .mydiv{
            display:flex;//Opera12.1，Firefox20+，
            display:-webkit-box;//Safari3.1-6，iOS 6-
            display:-moz-box;// IE9-，
            display:-ms-flexbox;//IE10，
            display:-webkit-flex;//Chrome
            height:60px;
        }
        .mydiv div{
            background-color: blue;
            flex:1; //Opera12.1，Firefox20+，
            -webkit-box-flex:1; //Safari3.1-6，iOS 6-
            -moz-box-flex:1; // IE9-，
            -webkit-flex:1; //Chrome
            -ms-flex:1; //IE10

        }
        .mydiv div+div{
            margin-left:10px;
        }
    </style>
<div class="mydiv">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="div4">4</div>
</div>

ps：chrome52.0、IE11、Firefox48.0、Opera44.0、 Safari5.1.7

（多列定宽+一列自适应）

定宽列样式基本相同。

（1）float+overflow：

    <style type="text/css">
        .left,.center{
            float: left;
            100px;
            background-color: antiquewhite;
            margin-right:0px;
        }
        .right{
            overflow: hidden;
            background-color: aqua;
        }
    </style>
<div class="parent">
    <div class="left"><p>left</p></div>
    <div class="center"><p>center</p></div>
    <div class="right"><p>righsddst</p><p>risdfddsssdght</p></div>
</div>

（一列不定宽+一列自适应）

（1）float+overflow:左边左浮动，右边overflow为hidden。

    <style type="text/css">
        .left{
            float:left;
            background-color: antiquewhite;
            margin-right:0px;
        }
        .right{
            overflow: hidden;
            background-color: aqua;
        }
    </style>

<body>
<div class="parent">
    <div class="left"><p>leftleft</p></div>
    <div class="right"><p>righsddst</p><p>risdfddsssdght</p></div>
</div>

（2）flex：父元素display设为flex；左元素设置右外边界为0，右元素flex为1

<style type="text/css">
        .parent{
            display: flex;
            display: -webkit-box;
        }
        .left{

            background-color: antiquewhite;
            margin-right:0px;
        }
        .right{
            flex:1;
            -webkit-box:1;
            background-color: aqua;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="left"><p>leftleft</p></div>
    <div class="right"><p>righsddst</p><p>risdfddsssdght</p></div>
</div>

（多列不定宽+一列自适应）

跟不定宽一列样式基本相同。

（1）float+overflow:

    <style type="text/css">
        .left{
            float: left;
            background-color: antiquewhite;
            margin-right:0px;
        }
        .center{
            float: left;
            background-color: aquamarine;
            margin-right:0;
        }
        .right{
            overflow: hidden;
            background-color: aqua;
        }
    </style>

<div class="parent">
    <div class="left"><p>left</p></div>
    <div class="center"><p>center</p></div>
    <div class="right"><p>righsddst</p><p>risdfddsssdght</p></div>
</div>

（三）等列布局

（1）flex：

    <style type="text/css">
        .mydiv{
            display:flex;
            display:-webkit-box;
            height:60px;
        }
        .mydiv div{
            background-color: blue;
            flex:1;
            -webkit-box:1;
        }
        .mydiv div+div{
            margin-left:10px;
        }
    </style>

<div class="mydiv">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="div4">4</div>
</div>
（2）float+margin-left：

<style type="text/css">
        .div1{
            float:left;
            background-color: aqua;
            100px;
        }
        .div2{
            float:left;
            margin-left:6px;
            background-color: antiquewhite;
            100px;
        }
      .div3{
          float:left;
          margin-left:6px;
          background-color: blueviolet;
          100px;
      }
      .div4{
          float:left;
          margin-left:6px;
          background-color: chartreuse;
          100px;
      }
    </style>
<div class="mydiv">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="div4">4</div>
</div>

（3）百分比

<style type="text/css">
        .div1{
            background-color: chartreuse;
            float:left;
            20%;
        }
        .div2{
            background-color: aqua;
            margin-left:6.6%;
            float:left;
            20%;
        }
        .div3{
            background-color: blueviolet;
            margin-left:6.6%;
            float:left;
            20%;
        }
       .div4{
            background-color: coral;
            margin-left:6.6%;
            float:left;
            20%;
        }
    </style>
<div class="mydiv">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="div4">4</div>
</div>

或

<style type="text/css">
       .div1{
           background-color: chartreuse;
           float:left;
           25%;
       }
       .div2{
           background-color: aqua;
           /*margin-left:6.6%;*/
           float:left;
           25%;
       }
       .div3{
           background-color: blueviolet;
           /*margin-left:6.6%;*/
           float:left;
           25%;
       }
       .div4{
           background-color: coral;
           /*margin-left:6.6%;*/
           float:left;
           25%;
       }
    </style>
<div class="mydiv">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="div4">4</div>
</div>

或

<style type="text/css">
       .mydiv{
           margin-left:-20px;
       }
        .div1{
            background-color: chartreuse;
            float:left;
            25%;
            padding-left:20px;
            box-sizing:border-box;
        }
        .div2{
            background-color: aqua;
            float:left;
            25%;
            padding-left:20px;
            box-sizing:border-box;
        }
        .div3{
            background-color: blueviolet;
            float:left;
            25%;
            padding-left:20px;
            box-sizing:border-box;
        }
        .div4{
            background-color: coral;
            float:left;
            25%;
            padding-left:20px;
            box-sizing:border-box;
        }
    </style>
<div class="mydiv">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="div4">4</div>
</div>

或

    <style type="text/css">
         .div1{
           background-color: aqua;
            float:left;
            calc(25% - 15px);
            -webkit-calc(25% - 15px);
            -moz-calc(25% - 15px);
              }
        .div2{
            float:left;
            margin-left:20px;
            background-color: antiquewhite;
            calc(25% - 15px);
            -webkit-calc(25% - 15px);
            -moz-calc(25% - 15px);

        }
        .div3{
            float:left;
            margin-left:20px;
            background-color: blue;
            calc(25% - 15px);
            -webkit-calc(25% - 15px);
            -moz-calc(25% - 15px);
        }
        .div4{
            float:left;
            margin-left:20px;
            background-color: cyan;
            calc(25% - 15px);
            -webkit-calc(25% - 15px);
            -moz-calc(25% - 15px);
        }
    </style>
<div class="mydiv">
    <div class="div1"><p>1</p></div>
    <div class="div2"><p>1</p></div>
    <div class="div3"><p>1</p></div>
    <div class="div4"><p>1</p></div>
</div>

Ps：Safari5.1.7不支持calc（）

Ps：calc（）：可以计算元素的长度，可以使用百分比、em、px、rem等。Width:calc(表达式)；可以通过+、-、*、/运算符；可以使用百分比、px、em、rem；运算符+、-其前后必须有空格。

Ps：box-sizing属性值有content-box/border-box/inherit。其中，content-box，宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。border-box为元素设定的宽度和高度决定了元素的边框盒，即为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。inherit规定从父元素继承bo-sizing属性值。

（四）内容不同时，背景等高

（1）flex：默认等高

    <style type="text/css">
        .parent{
            display:flex;
        }
        .left{
            100px;
           background-color: blueviolet;
        }
        .right{
            flex:1;
            background-color: antiquewhite;
        }
    </style>

<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

（2）float伪等高

<style type="text/css">
        .parent{
            overflow:hidden;
        }
        .left,.right{
            padding-bottom:9999px;
            margin-bottom:-9999px;
        }
        .left{
            float:left;
            100px;
            margin-right:6px;
            background-color: coral;
        }
        .right{
            overflow: hidden;
            background-color: aquamarine;
        }
    </style>
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

3-盒子模型

网页中的元素可以看作一个盒子模型，而盒子模型包括content/padding/border/margin/四部分。盒子模型主要有两类，即W3C盒子模型和IE盒子模型。其中，W3C盒子模型给定的width不包括padding/border；而IE盒子模型的给定的width已经包含 padding/border。height类似。

eg.一个盒子模型margin为20px，border为1px，padding为10px，content宽为200px，高为50px。

如果用W3C盒子模型解释，则这个盒子需要占据的位置为宽：200+10*2+1*2+20*2=262px，高为：50+10*2+1*2+20*2=12px，盒子的实际大小为：宽200+10*2+1*2=222px，高50+10*2+1*2=72px。
如果用IE盒子模型解释，则这个盒子需要占据的位置为宽：200+20*2=240px，高为：50+20*2=70px；盒子的实际大小：宽200px，高50px。

4-兼容性问题

Safari 5.1.7不支持calc（），而flex需要css hack解决

5-H5 canvas

<canvas> 标签定义图形，比如图表和其他图像。<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

canvas元素绘制图像的两种方法：context.fill()//填充 context.stroke()//绘制边框

绘图的样式：context.fillStyle//填充的样式 context.strokeStyle//边框样式

context.lineWidth//图形边框宽度

eg.

矩形：

<canvas id="myCanvas"></canvas>

<script type="text/javascript">

var canvas=document.getElementById('myCanvas');

var ctx=canvas.getContext('2d');

ctx.fillStyle='blue';

ctx.fillRect(0,0,60,66);

</script>

圆：

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.fillStyle="#FF0000";

cxt.beginPath();

cxt.arc(70,18,15,0,Math.PI*2,true);

cxt.closePath();

cxt.fill();

线条：

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.moveTo(10,10);//定义线条开始坐标

cxt.lineTo(150,50);//定义线条结束坐标

cxt.lineTo(10,50);

cxt.stroke();//stroke（）方法绘制线条

渐变色：

创建渐变线条：createLinerGradient(x,y,x1,y1)

创建一个径向/圆渐变：createRadialGradient(x,y,r,x1,y1,r1);

//创建一个线性渐变，使用渐变填充矩形

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

//创建渐变

var grd=cxt.createLinearGradient(0,0,175,50);//渐变色

grd.addColorStop(0,"#FF0000"); //指定颜色停止，参数用坐标描述，0至1.

grd.addColorStop(1,"#00FF00");

//填充渐变

cxt.fillStyle=grd;

cxt.fillRect(0,0,175,50);

//创建一个径向/圆渐变，使用渐变填充矩形

var c=document.getElementById("myCanvas");

var

ctx=c.getContext("2d");

// 创建渐变

vargrd=ctx.createRadialGradient(75,50,5,90,60,100);

grd.addColorStop(0,"red"); grd.addColorStop(1,"white");

// 填充渐变

ctx.fillStyle=grd;

ctx.fillRect(10,10,150,80);

图像：把一幅图像放到画布上，drawImage（image，x，y）

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

var

img=document.getElementById("scream");

ctx.drawImage(img,10,10);

ps：canvas左上角的左标为（0,0）

圆：

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.beginPath(); //arc(x,y,r,start,stop)

ctx.arc(95,50,40,0,2*Math.PI);

ctx

.stroke()

使用 canvas 绘制文本:

font - 定义字体

fillText(text,x,y) - 在 canvas 上绘制实心的文本

strokeText(text,x,y) - 在 canvas 上绘制空心的文本

eg.

实心文本：

var c=document.getElementById("myCanvas");

var

ctx=c.getContext("2d");

ctx

.font="30px Arial";

ctx.fillText("Hello World",10,50);

空心文本：

var c=document.getElementById("myCanvas");

var

ctx=c.getContext("2d");

ctx.font="30px Arial";

ctx

.strokeText("Hello World",10,50);

大多数 Canvas 绘图 API 都没有定义在 <canvas> 元素本身上，而是定义在通过画布的 getContext() 方法获得的一个”绘图环境”对象上。

Canvas API 也使用了路径的表示法。但是，路径由一系列的方法调用来定义，如调用 beginPath() 和 arc() 方法。一旦定义了路径，其他的方法，如 fill()，都是对此路径操作。绘图环境的各种属性，比如 fillStyle，说明了这些操作如何使用。

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

6-Localstorage、sessionstorage、cookie

H5中的webstorage包括了两种存储方式：sessionStorage和localStorage。存储空间相对较大，仅仅是为了本地存储数据而生，更多接口，独立的存储空间

sessionStorage：会话级别的存储，会话结束数据消失，

localStorage：持久化的本地存储，除非主动删除数据，否则数据不会过期，

cookie：存储空间小，与服务器进行交互，作为http的一部分而存在，

7-性能优化

减少http请求：

² css精灵：将多个图片合并到一个单独的图片中。

<div style=”background-image:url(‘a_lot_of_imgs.gif’); background-position:-260px -90px ; 26px; height:24px;”>

</div>

<style type="text/css">
        #navbar{
            31px;
            height:31px;
            display:inline;
            float:left;
            background-image: url(/images/66.gif);
        }
        .home{
            background-position: 0 0;
            margin-right:4px;
          margin-left:4px;
        }
        .gifts{
            background-position: -32px 0;
            margin-right:4px;
        }
        .cart{
            background-position: -64px 0;
            margin-right: 4px;
        }
        .settings{
            background-position: -96px 0;
            margin-right:4px;
        }
        .help{
            background-position: -128px 0;
            margin-right:4px;
        }
    </style>
<div >
    <a href="javascript:alert('home')" title="Home"><span class="home"></span></a>
    <a href="javascript:alert('gifts')" title="Gifts"><span class="gifts"></span></a>
    <a href="javascript:alert('cart')" title="Cart"><span class="cart"></span></a>
    <a href="javascript:alert('settings')" title="Settings"><span class="settings"></span></a>
    <a href="javascript:alert('help')" title="Help"><span class="help"></span></a>
</div>

² 图片地图：在一个图片上关联多个超链接的图片。包括服务器端图片地图（将所有点击提交到同一个目标URL，向其传递用户点击的x、y坐标，web应用程序根据该x、y坐标映射为适当的操作。）与客户端图片地图（将用户的点击映射到一个操作，无需向后端应用程序发送请求。映射通过HTML的map标签实现。）两种。

<img usemap="#map1" border=0 src="http://t.zoukankan.com/images/66.gif?t=1196816255"/>
<map name="map1">
    <area shape="rect" coords="0 0 31 31" href="http://t.zoukankan.com/home.html" title="home">
    <area shape="rect" coords="36 0 66 31" href="http://t.zoukankan.com/gifts.html" title="gifts">
    <area shape="rect" coords="71 0 101 31" href="http://t.zoukankan.com/cart.html" title="cart">
    <area shape="rect" coords="106 0 136 31" href="http://t.zoukankan.com/settings.html" title="settings">
    <area shape="rect" coords="141 0 171 31" href="http://t.zoukankan.com/help.html" title="help">
</map>

² 内联图片：通过使用data:URL模式可以在web页面中包含图片但无需额外的http请求。

² 合并样式及脚本文件、

使用内容发布网络

内容发布网络（CDN）是一组分布在多个不同地理位置的web服务器，用于更加有效地向用户发布内容。

添加Expires头

长久的Expires头，可以使组件存在于缓存，避免不必要的http请求，其可以用于图片、脚本、样式表等

Expires：Mon，15 Apr 2024 20:00:00 GMT

Cache-Control： max-age=315360000 Cache-Control使用max-age指令指定组件被缓存多久，以秒为单位。Cache-Control具有优先权。

压缩组件

通过减小http响应的大小来减少响应时间。

Web客户端可以通过http请求中的Accept-Encoding头来表示对压缩的支持。Accept-Encoding： gzip，deflate

Web服务器通过响应中的Content-Encoding头来通知web客户端。Content-Encoding：gzip

压缩对象：html文档、样式表、脚本

如果是浏览器通过代理发送请求，可以选择在web服务器的响应头中添加Vary头，web服务器可以告诉代理根据一个或多个请求头来改变缓存的响应。Vary：Accept-Encoding

将样式表放在顶部

为了避免无样式内容闪烁及白屏

将脚本放在底部
避免css表达式

css表达式导致频繁的求值操作，可以通过一次性表达式与事件处理器来取代css表达式。

使用外部JavaScript和css

主要源于外部文件可以缓存

减少DNS查询

Dns查找可以被缓存起来提高性能。

精简JavaScript

精简，从代码中移除不必要的字符以减小大小。混淆，同样移除注释和空白，还可能改写代码，将较长的变量名改为更短的变量名。

避免重定向

重定向指将用户从一个URL重新路由到另一个URL，301,302常用的两种重定向方式。

删除重复脚本

重复脚本的产生可能是由于不同团队贡献资源时，可能同时提供了相同的脚本，这可能导致不必要的http请求和执行JavaScript浪费的时间。

=》脚本管理模块

配置ETag

Etag：实体标签，是web服务器和浏览器用于确认缓存组件有效性的一种机制。Etag可以用于检测浏览器缓存中的组件与原始服务器上的组件是否匹配。（实体，组件的另一种称呼）Etag为验证实体提供了比最新修改日期更为灵活的机制。

Etag问题：通常使用组件的某些属性来构造它，这些属性对于特定的、寄宿了网站的服务器来说是唯一的。当浏览器从一台服务器上获取了原始组件，然后再向另外一台不同的服务器发起条件GET请求时，Etag是不会匹配的。这样将会降低有效性验证的成功率，也降低了代理缓存的效率。=》配置或移除Etag

使用ajax可缓存

确保ajax请求遵守性能指导，尤其应具有长久的Expires头

8-文档类型

² HTML5：<!doctype>

² HTML 4.01:

Ø  HTML 4.01 Strict: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Ø  HTML 4.01 Transitional: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">

Ø  HTML 4.01 Frameset: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"  "http://www.w3.org/TR/html4/frameset.dtd">

² XHTML 1.0：

Ø  XHTML 1.0 Strict: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Ø  XHTML 1.0 Transitional：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Ø  XHTML 1.0 Frameset: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

9-行内元素、块元素、空标签

行内元素：

不占据一整行，随内容而定
不可以设置宽高，也不可以设置行高，其宽度随着内容增加，高度随字体大小而改变。
可以设置外边界，但是只有左、右外边界起作用。
可以设置内边界，但是只有左、右内边界起作用
<a>、<b>、<br>、<em>、<font>、<i>、<select>、<input>、<label>、<span>、<strong>、、、

块元素：

总是在新行上开始，占据一整行；
高度，行高以及外边距和内边距都可控制；
宽带始终是与浏览器宽度一样，与内容无关；
它可以容纳内联元素和其他块元素。
<div>、<dl>、<dt>、<dd>、<form>、<h1>、<ol>、<p>、<ul>、、、

空标签：

<br> 、<hr>、<img>

前端知识小总结2

相关文章

【php5权威编程-1】

background-size cover和contain的用法详解

解决绝对定位div position: absolute 后面的&lt;a&gt; Link不能点击

自定义View的实现流程

CSS3 基础(1)——选择器详解

Java服务端极光推送整合Ios、Android

最新文章

随机推荐

思享工具箱导航

JSON工具

格式化转换

加解密编码

文本数字

网络

站长

计算

其他

对照列表

前端知识小总结2

相关文章

【php5权威编程-1】

background-size cover和contain的用法详解

解决绝对定位div position: absolute 后面的&amp;lt;a&amp;gt; Link不能点击

自定义View的实现流程

CSS3 基础(1)——选择器详解

Java服务端极光推送整合Ios、Android

最新文章

随机推荐

思享工具箱导航

JSON工具

格式化转换

加解密编码

文本数字

网络

站长

计算

其他

对照列表

解决绝对定位div position: absolute 后面的<a> Link不能点击