css优化

jQuery常规选择器

懵懂的女人 提交于 2020-02-01 03:52:31
jQuery最核心的组成部分就是:选择器引擎。它继承了CSS的语法,可以对DOM元素的标签名、属性名、状态等进行快速准确的选择,并且不必担心浏览器的兼容性。jQuery选择器实现了CSS1~CSS3的大部分规则之外,还实现了一些自定义的选择器,用于各种特殊状态的选择。 一.简单选择器(ID选择器) 在使用jQuery选择器时,我们首先必须使用“$()”函数来包装我们的CSS 规则。而CSS规则作为参数传递到jQuery对象内部后,再返回包含页面中对应元素的jQuery对象。随后,我们就可以对这个获取到的DOM节点进行行为操作了。 #box { //使用ID选择器的CSS规则 color:red; //添加一个样式color:red } 在jQuery选择器里,我们使用如下的方式获取同样的结果: $(function () { $('#box').css('color','blue'); //添加一个行为css('color','blue'),这个行为是添加样式 }); 那么除了ID选择器之外,还有两种基本的选择器,分别为:元素标签名和类(class): (1)元素名选择器获取所有div元素的DOM对象,CSS模式:div {} ,jQuery模式:$('div') <body> <div>常规选择器</div> <div>常规选择器</div> <div>常规选择器</div> <

CSS学习笔记01 CSS简介

旧街凉风 提交于 2020-02-01 03:49:24
1、CSS定义 CSS 指层叠样式表 (Cascading Style Sheets),是一种样式表语言,用来描述 HTML 或 XML(包括如 SVG、XHTML 之类的 XML 分支语言)文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。 2、为何使用CSS 网页是由HTML标签组成的,那么这些标签会根据浏览器的默认方式进行排版与样式的渲染,如果想要更改这些默认的样式,推荐用CSS,因为这样不仅实现了内容与表现分离的问题,而且更易于维护。 3、CSS语法 CSS 语法由两个主要的部分构成:选择器,以及一条或多条声明。 selector {declaration1; declaration2; ... declarationN } 其中每条声明由一个属性和一个值组成。 selector {property: value} 下面这个例子中,h1 是选择器,color 和 font-size 是属性,red 和 14px 是值。 h1 {color:red; font-size:14px;} 这张图形象的表示了上面代码的结构 CSS对空格和大小写都不敏感,也就是说大小写均可,是否包含空格不会影响 CSS 在浏览器中的工作效果 /* 属性为大小,值为小写,并且冒号后面有多个空格 */ .box { COLOR: blue; } /* 建议写法 */

前端开发面试题及答案

↘锁芯ラ 提交于 2020-02-01 02:44:58
一、你能描述一下渐进增强和优雅降级之间的不同吗? 如果提到了特性检测,可以加分。 检测浏览器,渐进增强就是让牛b的浏览器的效果更好,优雅降级就是让2b的浏览器在功能ok的情况下效果一般。 二、线程与进程的区别 一个程序至少有一个进程,一个进程至少有一个线程. 线程的划分尺度小于进程,使得多线程程序的并发性高。 另外,进程在执行过程中拥有独立的内存单元,而多个线程共享内存,从而极大地提高了程序的运行效率。 线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行,必须依存在应用程序中,由应用程序提供多个线程执行控制。 从逻辑角度来看,多线程的意义在于一个应用程序中,有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用,来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。 三、请解释一下什么是“语义化的 HTML”。 语义化的好处:1:去掉或样式丢失的时候能让页面呈现清晰的结构: html本身是没有表现的,我们看到例如<h1>是粗体,字体大小2em,加粗;<strong>是加粗的,不要认为这是html的表现,这些其实html默认的css样式在起作用,所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点,但是浏览器都有有默认样式

前端开发面试题及答案

若如初见. 提交于 2020-02-01 02:44:29
一、你能描述一下渐进增强和优雅降级之间的不同吗? 如果提到了特性检测,可以加分。 检测浏览器,渐进增强就是让牛b的浏览器的效果更好,优雅降级就是让2b的浏览器在功能ok的情况下效果一般。 二、线程与进程的区别 一个程序至少有一个进程,一个进程至少有一个线程. 线程的划分尺度小于进程,使得多线程程序的并发性高。 另外,进程在执行过程中拥有独立的内存单元,而多个线程共享内存,从而极大地提高了程序的运行效率。 线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行,必须依存在应用程序中,由应用程序提供多个线程执行控制。 从逻辑角度来看,多线程的意义在于一个应用程序中,有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用,来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。 三、请解释一下什么是“语义化的 HTML”。 语义化的好处:1:去掉或样式丢失的时候能让页面呈现清晰的结构: html本身是没有表现的,我们看到例如<h1>是粗体,字体大小2em,加粗;<strong>是加粗的,不要认为这是html的表现,这些其实html默认的css样式在起作用,所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点,但是浏览器都有有默认样式

如何通过优化网站提高网页打开速度

眉间皱痕 提交于 2020-01-25 21:52:31
网页打开速度慢的所造成的影响很重大的,因此站长对于网页打开速度的在意程度也是不断的在加重。但是站长不知道除了外部环境(带宽速度)会影响网页的打开速度之外,网站内部也是存在有影响因素的,不过站长可以通过优化从而提高网页的打开速度。所以香港葵芳IDC小编今天就为大家科普下,优化网页打开速度的内容有哪些。 ​ ​ 1、缩小Javascript和CSS文件 ​ ​ 如果你的网站大约有50-60%!的(MISSING)用户是第一次访客,那么这些人会下载Javascript和CSS,如果这些文件很大浏览器会下载很长时间。使用压缩工具可以减少Javascript和CSS尽一半的文件大小。同时,使用香港服务器时,我们要开启缓存机制,使用户首次访问时,将图片、CSS和Javascript在其浏览器缓存,这样他们下一次访问就特别快。Apache Web服务器,可以使用mod_cache模块开启缓存。 ​ ​ 2、减少HTTP请求 ​ ​ 葵芳IDC小编告诉你浏览器会花费80%!的(MISSING)时间获取外部元件,包括脚本、样式表、图像等,只有20%!的(MISSING)时间用来加载内容,每个网站都会有许多HTTP请求,由于只有2个HTTP请求可以在同一时间传送,所以请求一旦过多就会造成延迟。通过Yslow等网站性能评分工具可以查看你的网站HTTP请求数,可以看到JS、CSS和CSS引用的图片文件过多

性能优化浅谈

守給你的承諾、 提交于 2020-01-25 02:50:00
不知不觉已经正式上班大半年了,去年的这个时候刚开博客不久,希望能伴随自己成长。在大半年的学习和工作中,自己也在一步步的开始沉静,越加觉得自己才疏学浅,也倍感前端知识博大精深。 这次总结主要关于性能优化探索心得。水平很浅,只是说说自己的学习收获。 ************这里开始了************* 看过的前端开发书籍都在说这四个字,性能优化的字面解释是:不影响系统运行正确性的前提下,使之运行地更快,完成特定功能所需的时间更短。这句话可以看出性能优化的目的:更快的速度、更少的时间。 1)性能优化有什么意义? 谷歌的数据表明,一个有10条数据0.4秒可以加载完的页面,在变成30条数据加载时间为0.9秒后,流量和广告收入减少了20%。当谷歌地图的首页文件大小从100kb减少到70~80kb时,流量在第一周涨了10%,接下来的三周涨了25%。腾讯的前端工程师根据长期的数据监控也发现页面的一秒钟延迟会造成9.4%的PV的下降,8.3%跳出率的增加以及3.5%转化率的下降。这两家公司都是行业的翘楚,具有极其巨大的用户群,这些数据足够让我们重视性能优化。近八成的用户可以忍受的响应时间为5秒,500PC的主站打开资源加载完毕的时间为5.67s,QQ彩票为12.75s,网易彩票为16.79,看到这里还是很骄傲的*_*。   2)如何优化? 资料显示和浏览器调试分析发现

CSS normalize.css

人走茶凉 提交于 2020-01-20 16:50:41
CSS Reset 类库,为跨浏览器兼容做准备(也可以直接运用jd网站的初始化) normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset,Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上。 你值得拥有。。 ​ - 保护有用的浏览器默认样式而不是完全去掉它们 ​ - 一般化的样式:为大部分HTML元素提供 ​ - 修复浏览器自身的bug并保证各浏览器的一致性 ​ - 优化CSS可用性:用一些小技巧 ​ - 解释代码:用注释和详细的文档来 地址: http://necolas.github.io/normalize.css/ npm install normalize.css 来源: CSDN 作者: 快乐de馒头 链接: https://blog.csdn.net/chunxiaqiudong5/article/details/104048976

前端开发 css、less编写规范

好久不见. 提交于 2020-01-20 01:02:21
壹 ❀ 引 早在大半年前,我在负责整理定义了前端组JavaScript开发规范与less、css样式开发规范。一直想将两个规范整理成文章,但在整理了JavaScript规范后,我花了较多的时间在学习JavaScript基础知识,所以对于样式规范一直处于放置状态。直到上周我收到了一条关于JavaScript规范的评论,提醒了我样式规范不能再拖了,那么在放假前花点时间整理一遍作为复习也算不错。 说在前面,本文虽然作为规范但对于less与css写法也给出了部分建议,所以在阅读本规范前建议读者先掌握less基本用法,而对于规范这里也只是给出建议,毕竟适合自己的才是最好的,本文开始。 贰 ❀ 命名规范 贰 ❀ 壹 class、id命名 JavaScript变量我们推荐使用小驼峰,但样式命名得做点改变,这里我们推荐使用 - 分隔符拼接。 /* good */ #foo-bar;.foo-bar /* bad */ #fooBar;.fooBar 贰 ❀ 贰 less变量命名 我们知道less提供了样式变量可供复用,对于多单词变量命名推荐采用 @ 开头并以 - 分隔符拼接的命名方式。 /* good */ @border-color:#fff; /* bad */ @borderColor: #fff; 贰 ❀ 叁 less函数命名 除了变量,less还提供了函数用于复用多属性class样式类

html/css面试题(3)

点点圈 提交于 2020-01-19 21:06:20
一、一次完整的HTTP事务是怎么一个过程 域名解析 --> 发起TCP的3次握手 --> 建立TCP连接后发起http请求 --> 服务器响应http请求,浏览器得到html代码 --> 浏览器解析html代码,并请求html代码中的资源(如js、css、图片等) --> 浏览器对页面进行渲染呈现给用户 二、HTTPS是如何实现加密 HTTP 协议(HyperText Transfer Protocol,超文本传输协议):是 客户端浏览器 或其他程序与Web服务器之间的 应用层 通信协议 。 https 是一种http与SSL证书共同协作构建的 网络协议 ,https优势就在于能够保证 网络传输高效 的同时,可以很好的维护网络传输过程的 安全 。 如何进行https加密? 这涉及到了对 SSL证书的申请 ,不同类型的网站所需的 SSL证书类型不同 ,申请这一数字证书需要想 数字证书颁发机构验证域名的所有权 以及公司相关的信息,这也是为什么网站部署了SSL证书之后就拥有了一个安全可信的形象。完成申请之后,根据申请证书的教程,完成下载以及安装。这就实现了对http到https的转变,即完成了 https加密 。 三、浏览器是如何渲染页面的 先简要概述浏览器渲染的步骤: 1. 处理HTML标记 并 构建DOM树 2. 处理CSS标记 并构建 CSSOM树 3

高手传授十八般CSS技巧

无人久伴 提交于 2020-01-18 12:46:35
一、使用css缩写   使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》,这里就不展开描述。    二、明确定义单位,除非值为0   忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width="100",但是在CSS中,你必须给一个准确的单位,比如:width:100px width:100em。只有两个例外情况可以不定义单位:行高和0值。除此以外,其他值都必须紧跟单位,注意,不要在数值和单位之间加空格。    三、区分大小写   当在XHTML中使用CSS,CSS里定义的元素名称是区分大小写的。为了避免这种错误,我建议所有的定义名称都采用小写。   class和id的值在HTML和XHTML中也是区分大小写的,如果你一定要大小写混合写,请仔细确认你在CSS的定义和XHTML里的标签是一致的。    四、取消class和id前的元素限定   当你写给一个元素定义class或者id,你可以省略前面的元素限定,因为ID在一个页面里是唯一的,而clas s可以在页面中多次使用。你限定某个元素毫无意义。例如:   div#content { /* declarations */ }   fieldset.details { /* declarations */ }   可以写成   #content { /*