css优化

1 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？ 标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin 2 box-sizing属性？ 用来控制元素的盒子模型的解析模式，默认为content-box context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽 border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽 3 CSS选择器有哪些？哪些属性可以继承？ CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=”external”]）、伪类选择器（a:hover, li:nth-child） 可继承的属性：font-size, font-family, color 不可继承的样式：border, padding, margin, width, height 优先级（就近原则）：

一、什么是重绘Repaint和重排 重绘:当元素的一部分属性发生改变，如外观、背景、颜色等不会引起布局变化，只需要浏览器根据元素的新属性重新绘制 ，使元素呈现新的外观叫做重绘。 重排（回流）:当render树中的一部分或者全部因为大小边距等问题发生改变而需要DOM树重新计算的过程重绘不一定需要重排（比如颜色的改变），重排必然导致重绘（比如改变网页位置） 常见的重绘元素 color border-style visibility background text-decoration background-image background-position background-repeat outline-color outline outline-style border-radius outline-width box-shadow background-size 1.添加、删除可见的dom 2.元素的位置改变 3.元素的尺寸改变(外边距、内边距、边框厚度、宽高、等几何属性) 4.页面渲染初始化 5.浏览器窗口大小改变 7.改变文字大小 8.添加/删除样式表 9.激活伪类，如:hover 10.操作class属性 11.内容的改变，(用户在输入框中写入内容也会) 常见的重排元素 width height padding margin display border-width

从输入 URL 到页面加载完成，完整的链路 http层面优化 DNS 解析: DNS 实现域名到IP的映射。通过域名访问站点，每次请求都要做DNS解析。目前每次DNS解析，通常在200ms以下。一般采用DNS Prefetch 一种DNS 预解析技术，当你浏览网页时，浏览器会在加载网页时对网页中的域名进行解析缓存，这样在你单击当前网页中的连接时就无需进行DNS的解析，减少用户等待时间，提高用户体验。 <link rel="dns-prefetch" href="www.baidu.com" /> 只有部分浏览器支持 TCP 连接： 采用http2.0，可以复用tcp通道，采用二进制格式而非文本格式，使用报头压缩，HTTP/2降低了开销，支持cache push 浏览器并发 基于端口跟线程切换开销，浏览器不可能无限的并发请求。chrome的并发为6，超过限制数目的请求就会被阻塞； 对于某些静态资源，图片等等，我们可以对其URL分散处理 ，不同的资源域名(部署在cdn上)。 http请求次数 减少http的请求次数，将多个请求合并成同一个，减少http的开销 webpack 充分利用webpack提供给我们的能力，利用DllPlugin与commonPlugins等插件对我们代码进行 优化，文件的分割与合并，公共代码的提取，长缓存等策略，webpack是个很好的东西，值得大家仔细研究

今天给朋友们分享一到三年前端最全的面试题（其中包括HTML，CSS，JS，React，Vue，NodeJS，版本仓库的使用，互联网基础知识）。 面试流程，以及电话面试，HR面试的模拟问题以及面试礼仪： 请看此链接： 面试流程以及面试技巧全分析(不管你有几年经验看了以后都会提高你的面试成功几率) HTML,CSS面试题： 请讲一下HTML5的特点。 你知道的语义化的标签有哪些？ CSS3新增了哪些特性？ 请讲一下CSS3动画的优点，你是怎么使用的？ 请讲一下圣杯布局和双飞翼布局。你还知道哪些布局？ 如何写宽高自适应的APP？ 答案：请访问： 前端项目自适应屏幕的技巧 如何更改input的样式？ 答案：请访问： 更改input的样式 div+css的布局较table布局有什么优点？ grid布局有过了解么？ 答案： CSS新布局之display: grid;详细介绍 img的alt与title有何异同？strong与em的异同？ 请描述一下渐进增强与优雅降级。 知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式么？ 一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更高的体验。 答案：使用精灵图，将小规格的图片整合为一张精灵图，减少浏览器请求次数。 CSS有哪些选择器？ 答案： 最全CSS知识整理 CSS中可以通过哪些属性

这里是修真院前端小课堂，每篇分享文从 【 浏览器如何渲染页面？】 ​ 1.背景介绍 浏览器渲染页面的大致过程： 从浏览器地址栏的请求链接开始，浏览器通过DNS解析查到域名映射的IP地址，成功之后浏览器端向此IP地址取得连接，成功连接之后，浏览器端将请求头信息 通过HTTP协议向此IP地址所在服务器发起请求，服务器接受到请求之后等待处理，最后向浏览器端发回响应，此时在HTTP协议下，浏览器从服务器接收到 text/html类型的代码，浏览器开始显示此html，并获取其中内嵌资源地址，然后浏览器再发起请求来获取这些资源，并在浏览器的html中显示 2.知识剖析 浏览器解析的大概的工作流程可以归纳为以下几个步骤 用户输入网址（假设是个 HTML 页面，第一次访问，无缓存情况），浏览器向服务器发出HTTP请求，服务器返回 HTML 文件； （善用缓存，减少HTTP请求，减轻服务器压力） 浏览器载入 HTML 代码，发现 head 内有一个 link 引用外部 CSS 文件,则浏览器立即发送CSS文件请求，获取浏览器返回的CSS文件； （CSS文件合并，减少HTTP请求） 浏览器继续载入 HTML 中 body 部分的代码，并且 CSS 文件已经拿到手了，可以开始渲染页面了；CSS文件需要放置最上面，避免网页重新渲染。 浏览器在代码中发现一个 img 标签引用了一张图片，向服务器发出请求

什么是响应式设计？ iOS 和 Android 的发布，智能手机、平板电脑、智能家电等新设备层出不穷，极大便利了我们的生活，但面对形形色色的终端设备，千差万别的屏幕分辨率，给网页设计带来了新的挑战，我们无法估计用户的终端设备和网络状况，更不可能为每种设备都专门设计一套网站，如何实现 Web UI 在多终端中的适配呢？2010 年 Ethan Marcotte 曾经在 A List Apart 发表过一篇文章"Responsive Web Design"，响应式网页设计提供了一种设计方法，可以使同一网站在智能手机、桌面电脑，以及介于这两者之间的任意设备上完美显示。这种方法能够根据用户的屏幕尺寸，合理地为现有及将来的各种设备提最佳的浏览体验。 http://mediaqueri.es/ 这是一个响应式设计创意收集网站，可以在上面查看到很多响应式设计实例，较多的网站都应用了 Mobile First 设计思想，先针对小视口设备进行设计，然后逐步对大视口设计进行渐进增强支持。 图 1. Froont 响应式设计网站截屏 这也意味着设计思维的转换，不应再执着于布局、线框等的具体大小，而应该考虑如何使用流体元素。与其根据不同设备的大小来设计页面，更着重考虑如何针对内容进行设计。抛弃像素，抛弃固定宽度，先从小屏幕进行设计，然后逐步增强针对大屏幕的设计 当然也需要引导客户

说正事儿。准备在近期的几篇里集中翻译学习一下"响应式Web设计"的相关话题，包括概念、实践方式、案例及观点讨论等方面。相比于从前做的文档译文，这些文章篇幅要长的多(甚至要加分页了！)，今天放上的这篇几乎花掉了两天的"闲暇时间"；对耐力是个考验，努力提高喽。废话结束，here we go. 眼下，几乎每个新客户都希望他们的网站可以有专门的移动设备版本。最完美的情况呐，就是为iPhone、iPad、黑莓、Kindle……各自打造一款——页面分辨率还必须兼容任何设备。谁知道未来5年内我们还需要为多少新发明的设备设计开发不同版本的页面？这种疯狂什么时候算个头？ 在Web设计和开发领域，很快的，我们将会无法跟上设备与分辨率革新的步伐。对于多数网站来说，为每种新设备及分辨率创建其独立的版本根本就是不切实际的；结果就是，我们将会赢得使用某些设备的用户群，而失去那些使用其他设备的用户。不过，或许会有另外一种方式，可以帮助我们避免这种情况的发生。 响应式Web设计(Responsive Web design)的理念是，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率

原文: 前端深入之css篇|link和@import到底有什么区别？ 写在前面 在真正的前端开发中，我们很少去写行内样式和内嵌样式，通常都是去引用外部样式。 而在我们学习之初的外部样式表都是用 link 引入的，但是当后来我们学习的逐渐深入，发现 @import 也可以引入样式。那么同样是引入外部样式，这两者有什么区别呢，下面请跟随我来详细了解一下 link 和 @import 的区别吧！ 区别 <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" rev="stylesheet" href="myCss.css" type="text/css" > <style type="text/css" > @import url("./myCss.css"); </style> </head> </html> 这就是两种引用方式的常见用法，可以很清晰的看出 1、从属关系：link是html的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等；而@import是css的语法，只有导入样式表的作用。 2、加载顺序：页面被加载时，link会和html同时被加载而；@import引入的 CSS 将在页面加载完毕后被加载。 3、兼容性：@import是 CSS2.1 才有的语法，所以只能在 IE5以上

1、减少页面HTTP请求数量 　　2、使用CDN(Content Delivery Network)网络加速 　　3、添加文件过期或缓存头 　　4、服务器开启gzip压缩 　　5、css格式定义放置在文件头部 　　6、Javascript脚本放在文件末尾 　　7、避免使用CSS脚本(CSS Expressions) 　　8、css、javascript改由外部调用 　　9、压缩Javascript、CSS代码 　　10、避免采用301、302转向 　　11、养成良好的开发维护习惯，尽量避免脚本重复调用 　　12、配置ETags 　　13、Ajax采用缓存调用 　　14、合理使用Flush 　　15、Ajax调用尽量采用GET方法调用 　　16、尽可能减少DCOM元素 　　17、使用多域名负载网页内的多个文件、图片 　　18、缩减iframe的使用，如无必要，尽量不要使用 　　19、优化图片文件 　　20、当页面内容庞大到一定程度，可以采用分页的方式展现，或者taobao的那种翻页后载入方式。 来源： https://www.cnblogs.com/lazb/p/11732160.html

转自：http://www.2cto.com/kf/201604/498725.html 网站的划分一般为二：前端和后台。我们可以理解成后台是用来实现网站的功能的，比如：实现用户注册，用户能够为文章发表评论等等。而前端呢？其实应该是属于功能的表现。并且影响用户访问体验的绝大部分来自前端页面。 而我们建设网站的目的是什么呢？不就是为了让目标人群来访问吗？所以我们可以理解成前端才是真正和用户接触的。除了后台需要在性能上做优化外，其实前端的页面更需要在性能优化上下功夫，只有这样才能给我们的用户带来更好的用户体验。就好像，好多人问，男人在找女朋友的时候是不是只看外表，一些智慧的男人给出了这样的回答：脸蛋和身材决定了我是否想去了解她的思想，思想决定了我是否会一票否决她的脸蛋和身材。同理，网站也是这样，网站前端的用户体验决定了用户是否想要去使用网站的功能，而网站的功能决定了用户是否会一票否决前端体验。 不仅仅如此，如果前端优化得好，他不仅可以为企业节约成本，他还能给用户带来更多的用户，因为增强的用户体验。说了这么多，那么我们应该如何对我们前端的页面进行性能优化呢？ 一般说来，web前端指网站业务逻辑之前的部分，包括浏览器加载、网站视图模型、图片服务、CDN服务等，主要优化手段有浏览器访问、使用反向代理才、CDN等。 浏览器访问优化 浏览器请求处理流程如下图： 1、减少http请求，合理设置