html css 知识集锦

2018-03-01 鲁鲁槟 收藏

一、css

1.1、哀悼日网站全站变灰CSS代码

这种效果是用纯CSS来实现的。

filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);

如果你想全站变灰,代码如下

*{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

如果你想只对于网站图片来实现灰度,代码如下

img{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

如果只想针对部分图片,代码如下

/*这段代码只会对于class位grey的图片*/
img.grey{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

这是互联网行业的哀悼方式。

1.2、在 html 中引入 css

①、行内式

行内式是在标记的 style 属性中设定 css 样式。这种方式没有体现出 css 的优势,不推荐使用。

<div style="width:200px"></div>

②、嵌入式

嵌入式是将 css 样式集中写在网页的 <head></head> 标签对的 <style></style> 标签对中。格式如下:

<head> <style type="text/css"> ...此处写CSS样式 </style> </head>

缺点是对于一个包含很多网页的网站,在每个网页中使用嵌入式,进行修改样式时非常麻烦。单一网页可以考虑使用嵌入式。

③、导入式

将一个独立的 .css 文件引入 html 文件中,导入式使用 css 规则引入外部 css 文件,<style> 标记也是写在 <head> 标记中,使用的语法如下:

<style type="text/css"> @import"mystyle.css"; 此处要注意.css文件的路径 </style>

导入式会在整个网页装载完后再装载 css 文件,因此这就导致了一个问题,如果网页比较大则会儿出现先显示无样式的页面,闪烁一下之后,再出现网页的样式。这是导入式固有的一个缺陷。

④、链接式

也是将一个 .css 文件引入到 html 文件中,但它与导入式不同的是链接式使用 html 规则引入外部 css 文件,它在网页的 <head></head> 标签对中使用 <link> 标记来引入外部样式表文件,使用语法如下:

<link href="mystyle.css" type="text/css"/>

使用链接式时与导入式不同的是它会以网页文件主体装载前装载 css 文件,因此显示出来的网页从一开始就是带样式的效果的,它不会像导入式那样先显示无样式的网页,然后再显示有样式的网页,这是链接式的优点。

⑤、总结

一般来说,做网站时把样式多写在多个样式表文件中,因此我们先用链接式引入一个总的 css 文件,然后在这个 css 文件中在使用导入式来引入其他的 css 文件。

但如果通过 JavaScrip 来动态引入 css 文件则只能使用嵌入式。

1.3、css 样式表中的样式覆盖顺序

有时候在写CSS的过程中,某些限制总是不起作用,这就涉及了CSS样式覆盖的问题,如下

①、样式表的元素选择器选择越精确,则其中的样式优先级越高

id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式

#navigator {  
    height: 100%;  
    width: 200;  
    position: absolute;  
    left: 0;  
    border: solid 2 #EEE;  
}  
  
.current_block {  
    border: solid 2 #AE0;  
}

上例中,#navigator的样式优先级大于.current_block的优先级,及时.current_block是最新添加的,也不起作用。

②、对于相同类型选择器制定的样式,在样式表文件中,越靠后的优先级越高

.class1 {  
    color: black;  
}  
  
.class2 {  
    color: red;  
}

注意,这里是样式表文件中越靠后的优先级越高,而不是在元素class出现的顺序。比如.class2 在样式表中出现在.class1之后。而某个元素指定class时采用 class="class2 class1"这种方式指定,此时虽然class1在元素中指定时排在class2的后面,但因为在样式表文件中class1处于class2前面,此时仍然是class2的优先级更高,color的属性为red,而非black。

③、如果要让某个样式的优先级变高,可以使用!important来指定

.class1 {  
    color: black !important;  
}  
  
.class2 {  
    color: red;  
}

此时class将使用black,而非red。

1.4、css3 实现文本溢出显示省略号

①、介绍

css3 实现文本单行文本溢出显示省略号、2行文本溢出显示省略号

②、演示(点击)

③、代码

<style type="text/css">
    .test {
        text-overflow: ellipsis; //显示省略符号来代表被修剪的文本
        overflow: hidden; //内容会被修剪,并且其余内容是不可见的
        white-space: nowrap; //规定段落中的文本不进行换行
        width: 226px;
    }
</style>
<div class="test">css3实现单行文本溢出显示省略号、css3实现单行文本溢出显示省略号</div>


<style type="text/css">
    .test{
            overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box; //将对象作为弹性伸缩盒子模型显示
        width: 126px;
        -webkit-box-orient: vertical; //从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式)
        -webkit-line-clamp: 2; //这个属性不是css的规范属性,需要组合上面两个属性,表示显示的行数
    }
</style>
<div class="test">css3实现2行文本溢出显示省略号、css3实现2行文本溢出显示省略号</div>

1.5、阿里巴巴 iconfont 怎么是正确的使用方式

①、新建项目

A、首先在 Iconfont-阿里巴巴矢量图标库上面将你需要的图标点击购物车按钮“添加入库”

01.png

2、选择完所有要用的图标后“存储为项目”,给它命名。

②、使用项目

A、方法一

在“图标管理”-“图标应用项目”中找到这个项目,获取在线链接,把里面的代码复制到CSS中

02.png

在HTML中需要使用到图标时,使用iconfont类名

<style type="text/css">
    @font-face {
      font-family: "iconfont";  /* project id 531221 */
      src: url("//at.alicdn.com/t/font_531221_udvt5sbawcdi.eot");
      src: url("//at.alicdn.com/t/font_531221_udvt5sbawcdi.eot?#iefix") format("embedded-opentype"),
      url("//at.alicdn.com/t/font_531221_udvt5sbawcdi.woff") format("woff"),
      url("//at.alicdn.com/t/font_531221_udvt5sbawcdi.ttf") format("truetype"),
      url("//at.alicdn.com/t/font_531221_udvt5sbawcdi.svg#iconfont") format("svg");
    }
    .iconfont{
        font-family:"iconfont";
    }
</style>
<i class="iconfont">&#xe60b;</i>

里面写上你想用的图标下面的Unicode

然后你可以通过控制iconfont类的属性改变图标的样式,比如:

.iconfont{
    font-family:"iconfont";
    font-size:16px;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 
    -moz-osx-font-smoothing: 
    padding-left:20px
}

就可以在页面中引用和修改了。

B、方法二

找到项目,选择“下载至本地”,会得到以下文件

05.png

浏览器打开 demo_unicode.html 可以看到每个图标的Unicode,把 iconfont.css 里的代码复制到 css 里面,把下面四个字体文件放到 css 可以引用到的文件夹里就可以了。

C、两种方法的差异

添加图标时:方法一需要重新生成一次链接覆盖css、方法二重新把所有图标再下载一遍覆盖原来的文件

1.6、HTML5对手机页面长按会粘贴复制禁用的解决方法

直接在CSS 文件中添加下面的代码,就可以实现了在手机端禁止粘贴复制的功能:

*{   
    -webkit-touch-callout:none;  /*系统默认菜单被禁用*/   
    -webkit-user-select:none; /*webkit浏览器*/   
    -khtml-user-select:none; /*早期浏览器*/   
    -moz-user-select:none;/*火狐*/   
    -ms-user-select:none; /*IE10*/   
    user-select:none;   
}

在添加完这段代码后,在IOS 上会有问题的,这个时候你会发现input 框无法正在输入了内容了;造成这个原因就是 -webkit-user-select:none; 这个属性造成的。

解决这个方法 就是 在css 文件中同时设置一下input 的属性,如下所示:

input {      
     -webkit-user-select:auto; /*webkit浏览器*/     
}

1.7、IOS下移除按钮原生样式 -webkit-appearance

IOS环境下的按钮都是经过美化的,但通常我们在设计web app的时候不需要这些看上去老土的样式,所以,去除这些显得很有必要。

下面这句代码就是重置这些样式的:

-webkit-appearance: none;

通常,我们在写移动端的web开发时,会 style.css 中添加以下 CSS 代码来:

input[type=button]{
    -webkit-appearance:none;
    outline:none
}

1.8、css 实现关闭按钮 X

<style>
  .close {
    background: orange;
    color: red;
    border-radius: 12px;
    line-height: 20px;
    text-align: center;
    height: 20px;
    width: 20px;
    font-size: 18px;
    padding: 1px;
    top: -10px;
    right: -10px;
    position: absolute;
}
.close::before {
    content: "\2716";
}
</style>
<body>
	<div style="height: 100px; width: 100px; border: 1px solid black; position: relative;">
    <span class="close"></span>
</div>

1.9、CSS中英文换行问题

  • word-break:break-all;只对英文起作用,以字母作为换行依据

  • word-wrap:break-word; 只对英文起作用,以单词作为换行依据

  • white-space:pre-wrap; 只对中文起作用,强制换行

  • white-space:nowrap; 强制不换行,都起作用

语法:word-break : normal | break-all | keep-all参数:

  • normal:依照亚洲语言和非亚洲语言的文本规则,允许在字内换行

  • break-all:该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本

  • keep-all : 与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本

二、html

2.1、a href 如何跳到指定页面中指定的 div

其中一页

<a href="aaa.html#y">我跳</a>

另一页aaa的锚点

<a id="y"></a>

yii2中

<?= Html::a("我跳",["aaa","#"=>"comment"])?>

2.2、input 属性为 number,maxlength 不起作用如何解决?

①、问题来源

<input type="text" maxlength="6"> 效果 ok <span class="redactor-invisible-space">
<span class="redactor-invisible-space">
</span><span class="redactor-invisible-space"><input type="number" maxlength="6"> 当 input type = number 时,长度可以无限输入。</span></span>

②、解决方案:oninput 事件,当长度超过时截取

<input type="number" oninput="if(value.length>6)value=value.slice(0,6)"/>

2.3、&#65279 导致页面顶部空白一行解决方法

①、问题

模板文件生成 html 文件之后会在 body 开头处加入一个可见的控制符 ,导致页面头部会出现一个空白行。

原因是页面的编码是UTF-8 + BOM。

②、分析

这种编码方式一般会在windows操作系统中出现,比如WINDOWS自带的记事本等软件,在保存一个以UTF-8编码的文件时,会在文件开始的地方插入三个不可见的字符(0xEF 0xBB 0xBF,即BOM)。

它是一串隐藏的字符,用于让记事本等编辑器识别这个文件是否以UTF-8编码。

对于一般的文件,这样并不会产生什么麻烦。但对于 PHP来说,BOM是个大麻烦。

因为PHP并不会忽略BOM,所以在读取、包含或者引用这些文件时,会把BOM作为该文件开头正文的一部分。

根据嵌入式语言的特点,这串字符将被直接执行(显示)出来。

由此造成即使页面的 top padding 设置为0,也无法让整个网页紧贴浏览器顶部,因为在html一开头有这3个隐藏字符 !

③、解决

用 Editplus、Sublime Text、Dreamweaver 等编辑器,选择将文件以编码保存为 UTF-8 without BOM。

下图是 Sublime Text:

2.4、Bootsnipp —— html 片段库

①、介绍

Bootsnipp是一个HTML片段库,与Bootstrap结合使用,并且不需要添加其他库。

片段包括:注册和登陆表单,日历,类似Gmail的e-mail界面,media player界面,甚至更多。

②、使用

使用十分简单,引入html、css、jQuery等即可。接下来你的界面会十分好看。

2.5、获取和制作网站 icon

①、利用Google提供的服务获取网站icon

注意:Google需要翻墙。。。。。。

输出如下:

或者通过审核元素找到favicon.ico的存放位置

②、利用比特虫轻松制作网页icon

选择图片和尺码,轻松制作网页图标

2.6、点击启用 flash

①、问题来源

浏览默认没有启用 flash,但你的网站需要启用 flash,你可以在页面中加入以下代码

/**
 * 判断浏览器是否有flash
 */
function hasFalsh(){
 var hasFlash = false;
 try {
     hasFlash = Boolean(new ActiveXObject("ShockwaveFlash.ShockwaveFlash"));
 } catch(exception) {
     hasFlash = ("undefined" != typeof navigator.mimeTypes["application/x-shockwave-flash"]);
 }
 return hasFlash;
}

②、代码

A、方法一

<div class="zclip" id="zclip-ZeroClipboardMovie_1" style="position: absolute;width: 114px; height: 21px; z-index: 99;">
    <embed id="ZeroClipboardMovie_1" lay-src="/Public/static/zclip/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="114" height="21" name="ZeroClipboardMovie_1" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=1&width=114&height=21" wmode="transparent">
</div>

B、方法二

<a href="http://get.adobe.com/flashplayer">点击此处</a>

③、效果预览

A、方法一






B、方法二

点击此处

2.7、为什么上传文件的表单里面要加一个属性 ENCTYPE = MULTIPART/FORM-DAT

①、enctype 的三个属性值

enctype 这个属性管理的是表单的 MIME 编码。共有三个值可选:

A、application/x-www-form-urlencoded

该值是默认值,作用是设置表单传输的编码。

例如我们在 ajax 中见过 xmlHttp.setRequestHeader("Content-Type","application/x-www-form- urlencoded");

如果不写会报错的,但是在 html 的 form 表单里是可以不写 enctype=application/x-www-form-urlencoded,因为默认的 html 表单就是这种传输编码类型的。

B、multipart/form-data

该值是用来制定传输数据的特殊类型的,主要就是我们上传的非文本的内容,比如图片或是 mp3 等等。

C、text/plain

该值是纯文本传输的意思,在发邮件的时候要设置这种编码类型,否则会出现接收时编码混乱的问题。

网络上经常拿 text/plain 和 text/html 做比较,其实这两个很好区分,前者用来传输纯文本文件,后者则是传递 html 代码的编码类型,在发送头文件时才用得上。

A和C都不能用于上传文件,只有 multipart/form-data 才能完整的传递文件数据。

②、MIME

A、简介

上面提到的 MIME,它的英文全称是“Multipurpose Internet Mail Extensions" 多功能 Internet 邮件扩充服务,它是一种多用途网际邮件扩充协议。

在1992 年最早应用于电子邮件系统,但后来也应用到浏览器。

服务器会将它们发送的多媒体数据的类型告诉浏览器,而通知手段就是说明该多媒体数据的 MIME 类型,从而让浏览器知道接收到的信息哪些是 mp3 文件,哪些是 Shockwave 文件等等。

服务器将 MIME 标志符放入传送的数据中来告诉浏览器使用哪种插件读取相关文件。

B、含义

简单说,MIME类型就是设定某种扩展名的文件用一种应用程序来打开的方式类型,当该扩展名文件被访问的时候,浏览器会自动使用指定应用程序来打开。

多用于指定一些客户端自定义的文件名,以及一些媒体文件打开方式。

C、作用

浏览器接收到文件后,会进入插件系统进行查找,查找出哪种插件可以识别读取接收到的文件。如果浏览器不清楚调用哪种插件系统,它可能会告诉用户缺少某插件,

或者直接选择某现有插件来试图读取接收到的文件,后者可能会导致系统的崩溃。

传输的信息中缺少 MIME 标识可能导致的情况很难估计,因为某些计算机系统可能不会出现什么故障,但某些计算机可能就会因此而崩溃。

D、常见的MIME类型

超文本标记语言文本 .html,.html text/html
普通文本 .txt text/plain
RTF文本 .rtf application/rtf
GIF图形 .gif image/gif
JPEG图形 .jpeg,.jpg image/jpeg
au声音文件 .au audio/basic
MIDI音乐文件 mid,.midi audio/midi,audio/x-midi
RealAudio音乐文件 .ra, .ram audio/x-pn-realaudio
MPEG文件 .mpg,.mpeg video/mpeg
AVI文件 .avi video/x-msvideo
GZIP文件 .gz application/x-gzip
TAR文件 .tar application/x-tar

E、IANA

Internet 中有一个专门组织 IANA 来确认标准的 MIME 类型,但 Internet 发展的太快,很多应用程序等不及 IANA 来确认他们使用的 MIME 类型为标准类型。

因此他们使用在类别中以 x-开头 的方法标识这个类别还没有成为标准,例如:x-gzip,x-tar等。事实上这些类型运用的很广泛,已经成为了事实标准。

只要客户机和服务器共同承认这个 MIME 类型,即使它是不标准的类型也没有关系,客户程序就能根据 MIME 类型,采用具体的处理手段来处理数据。

而 Web 服务器和浏览器(包括操作系统)中,缺省都设置了标准的和常见的 MIME 类型,只有对于不常见的 MIME 类型,才需要同时设置服务器和客户浏览器,以进行识别。

2.8、字符编码 ASCII、GB2312、Unicode、UTF-8的区别

我们已经讲过了,字符串也是一种数据类型,但是,字符串比较特殊的是还有一个编码问题。

因为计算机只能处理数字,如果要处理文本,就必须先把文本转换为数字才能处理。最早的计算机在设计时采用8个比特(bit)作为一个字节(byte),所以,一个字节能表示的最大的整数就是255(二进制11111111=十进制255),如果要表示更大的整数,就必须用更多的字节。比如两个字节可以表示的最大整数是65535,4个字节可以表示的最大整数是4294967295

由于计算机是美国人发明的,因此,最早只有127个字符被编码到计算机里,也就是大小写英文字母、数字和一些符号,这个编码表被称为ASCII编码,比如大写字母A的编码是65,小写字母z的编码是122

但是要处理中文显然一个字节是不够的,至少需要两个字节,而且还不能和ASCII编码冲突,所以,中国制定了GB2312编码,用来把中文编进去。

你可以想得到的是,全世界有上百种语言,日本把日文编到Shift_JIS里,韩国把韩文编到Euc-kr里,各国有各国的标准,就会不可避免地出现冲突,结果就是,在多语言混合的文本中,显示出来会有乱码。

0.png

因此,Unicode应运而生。Unicode把所有语言都统一到一套编码里,这样就不会再有乱码问题了。

Unicode标准也在不断发展,但最常用的是用两个字节表示一个字符(如果要用到非常偏僻的字符,就需要4个字节)。现代操作系统和大多数编程语言都直接支持Unicode。

现在,捋一捋ASCII编码和Unicode编码的区别:ASCII编码是1个字节,而Unicode编码通常是2个字节。

字母A用ASCII编码是十进制的65,二进制的01000001

字符0用ASCII编码是十进制的48,二进制的00110000,注意字符"0"和整数0是不同的;

汉字已经超出了ASCII编码的范围,用Unicode编码是十进制的20013,二进制的01001110 00101101

你可以猜测,如果把ASCII编码的A用Unicode编码,只需要在前面补0就可以,因此,A的Unicode编码是00000000 01000001

新的问题又出现了:如果统一成Unicode编码,乱码问题从此消失了。但是,如果你写的文本基本上全部是英文的话,用Unicode编码比ASCII编码需要多一倍的存储空间,在存储和传输上就十分不划算。

所以,本着节约的精神,又出现了把Unicode编码转化为“可变长编码”的UTF-8编码。UTF-8编码把一个Unicode字符根据不同的数字大小编码成1-6个字节,常用的英文字母被编码成1个字节,汉字通常是3个字节,只有很生僻的字符才会被编码成4-6个字节。如果你要传输的文本包含大量英文字符,用UTF-8编码就能节省空间:

字符ASCIIUnicodeUTF-8
A0100000100000000 0100000101000001
x01001110 0010110111100100 10111000 10101101

从上面的表格还可以发现,UTF-8编码有一个额外的好处,就是ASCII编码实际上可以被看成是UTF-8编码的一部分,所以,大量只支持ASCII编码的历史遗留软件可以在UTF-8编码下继续工作。

搞清楚了ASCII、Unicode和UTF-8的关系,我们就可以总结一下现在计算机系统通用的字符编码工作方式:

在计算机内存中,统一使用Unicode编码,当需要保存到硬盘或者需要传输的时候,就转换为UTF-8编码。

用记事本编辑的时候,从文件读取的UTF-8字符被转换为Unicode字符到内存里,编辑完成后,保存的时候再把Unicode转换为UTF-8保存到文件:

0 (1).png

浏览网页的时候,服务器会把动态生成的Unicode内容转换为UTF-8再传输到浏览器:

0 (2).png

所以你看到很多网页的源码上会有类似<meta charset="UTF-8" />的信息,表示该网页正是用的UTF-8编码。

2.9、html 页面加载和解析流程

①、浏览器加载和渲染 html 的顺序

A. IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。

B. 在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完)。

C. 如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载。

D. 样式表在下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以前已经渲染的)重新进行渲染。

E. JS、CSS中如有重定义,后定义函数将覆盖前定义函数。

②、js 的加载

A. 不能并行下载和解析(阻塞下载)。

B. 当引用了 JS 的时候,浏览器发送1个 js request 就会一直等待该 request 的返回。因为浏览器需要1个稳定的 DOM 树结构,而 JS 中很有可能有代码直接改变了 DOM 树结构,比如使用 document.write 或 appendChild,甚至是直接使用的 location.href 进行跳转,浏览器为了防止出现 JS 修改 DOM 树,需要重新构建 DOM 树的情况,所以就会阻塞其他的下载和呈现。

③、html 页面加载和解析流程(举例)

A. 用户输入网址(假设是个 html 页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件。

B. 浏览器开始载入 html 代码,发现 <head> 标签内有一个 <link> 标签引用外部 css 文件。

C. 浏览器又发出 css 文件的请求,服务器返回这个 css 文件。

D. 浏览器继续载入 html 中 <body> 部分的代码,并且 css 文件已经拿到手了,可以开始渲染页面了。

E. 浏览器在代码中发现一个 <img> 标签引用了一张图片,向服务器发出请求。此时浏览器不会等到图片下载完,而是继续渲染后面的代码。

F. 服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排布,因此浏览器需要回过头来重新渲染这部分代码。

G. 浏览器发现了一个包含一行 Javascript 代码的 <script> 标签,赶快运行它。

G. Javascript 脚本执行了这条语句,它命令浏览器隐藏掉代码中的某个 <style>(style.display=”none”)。杯具啊,突然就少了这么一个元素,浏览器不得不重新渲染这部分代码。

I. 终于等到了 </html> 的到来,浏览器泪流满面……

J. 等等,还没完,用户点了一下界面中的“换肤”按钮,Javascript 让浏览器换了一下 <link> 标签的 css 路径。

K. 浏览器召集了在座的各位 <div><span><ul><li> 们,“大伙儿收拾收拾行李,咱得重新来过……”,浏览器向服务器请求了新的 css 文件,重新渲染页面。

④、如何加快 html 页面加载速度

A. 页面减肥:a. 页面的肥瘦是影响加载速度最重要的因素。b. 删除不必要的空格、注释。
c. 将 inline 的 script 和 css 移到外部文件。d. 可以使用 HTML Tidy 来给 HTML 减肥,还可以使用一些压缩工具来给 JavaScript 减肥

B. 减少文件数量:a. 减少页面上引用的文件数量可以减少 HTTP 连接数。b. 许多 JavaScript、CSS 文件可以合并最好合并,人家财帮子都把自己的 JavaScript. functions 和 Prototype.js 合并到一个 base.js 文件里去了。

C. 减少域名查询:a. DNS 查询和解析域名也是消耗时间的,所以要减少对外部 JavaScript、CSS、图片等资源的引用,不同域名的使用越少越好。

D. 缓存重用数据:a. 对重复使用的数据进行缓存。

E. 优化页面元素加载顺序:a. 首先加载页面最初显示的内容和与之相关的 JavaScript 和 CSS,然后加载 HTML 相关的东西,像什么不是最初显示相关的图片、flash、视频等很肥的资源就最后加载。

F. 减少 inline JavaScript 的数量:a. 浏览器 parser 会假设 inline JavaScript 会改变页面结构,所以使用 inline JavaScript 开销较大。b. 不要使用 document.write() 这种输出内容的方法,使用现代 W3C DOM 方法来为现代浏览器处理页面内容。

G. 使用现代 css 和合法的标签:a. 使用现代 css 来减少标签和图像,例如使用现代 css+文字完全可以替代一些只有文字的图片。b. 使用合法的标签避免浏览器解析 html 时做“error correction”等操作,还可以被 html Tidy来给 html 减肥。

H. Chunk your content:a. 不要使用嵌套 table,而使用非嵌套 table 或者 div。将基于大块嵌套的 table 的 layout 分解成多个小 table,这样就不需要等到整个页面(或大table)内容全部加载完才显示。

I. 指定图像和 table 的大小:a. 如果浏览器可以立即决定图像或 table 的大小,那么它就可以马上显示页面而不要重新做一些布局安排的工作。b. 这不仅加快了页面的显示,也预防了页面完成加载后布局的一些不当的改变。c. image 使用 height 和 width。

2.10、H5禁止手机自带键盘弹出

$("#xx").focus(function(){
    document.activeElement.blur();
});

三、2018 Web 前端技术展望

1、未来许多年里,没有什么可以改变或者减少 React 的使用和普及。

2、今年,GraphQL 将会取代很多的 REST 接口。

3、随着离线功能和无缝移动体验的发展,web 应用会越来越原生化。

4、HTML 5.3 即将到来。

5、请关注 turbo,这是一个快速的 NPM 客户端。

6、推荐学习和使用 CSS transforms 3d、CSS transitions、CSS flexbox、CSS filters 和 CSS grid。

7、JavaScript 的使用将继续增长,不会出现任何放缓。

8、还在等待 Web Assembly 达到峰值,这可能需要借助一些工具。

9、通用、同构的 JavaScript 解决方案继续发展,例如 next.js 和 Sapper。

10、Web 组件仍然等待着开发者的大力支持。

11、我相信在不久的将来 PostCSS、CSSnext 和 CSS in JS 会成为 CSS 预处理器 的最终解决方案。

12、旧的以服务器为中心的应用模式再次显现,但是有了一些新的变化。SPA 应用逐渐变得不再那么受欢迎。人们将会减少单页面应用的复杂性,转向 pjax(一种 SPA 和服务器端渲染的结合。可参考 https://stimulusjs.org)。

13、渐进式 Web 应用希望能引起注意。如果它没有这么做的话,我担心它永远不会了。至少不会以现在的这种形式。

14、在人工智能和神经网络的基础上创造的聊天机器人将会继续发展,帮助人们进行更多的在线聊天。我非常好奇它能带来什么,但无疑这是 2018 年 web 发展的趋势

15、Vue.js 使用可能会超过 Angular

16、AR/AV、 AI 和聊天机器人将会继续发展,各行其是。

17、JavaScript 的 Symbol 语法和 Generators 语法可能会被大多数前端开发者忽略

18、越来越多的开发者将脱离原生的 JavaScript 去 尝试 其他的衍生的语言。但是就像离婚一样,人们只会转移问题而很少真正的解决它。偏好和价值只会被重排,历史将会重演。

19、在激烈的竞争中,Webpack 4 将会发布,并且会更好

20、对 UI 组件树理想的 CSS 解决方案的持续探索仍将继续,不会停止。

21、状态管理得到了重置,人们尝试简化它。希望今年是像 mobx 这样的解决方案能够发光的一年。


暂时还没有评论,快来抢沙发吧~

发表评论

您需要登录后才可以评论。登录 | 立即注册
阅读 526