css优化

网页内容 1.1 减少http请求次数 1.1.1 捆绑文件 通过一些现成的库将多个脚本文件捆绑成一个文件，将多个样式表文件捆绑成一个文件，以此来减少文件的下载次数。 1.1.2 CSS Sprites 把多个图片拼成一副图片，然后通过CSS来控制需要显示图片的位置（ CSS Sprites Generator ） 1.1.3 Inline images 通过Base64编码的字符串将图片内嵌到网页文本中。（但是只适合用于小图标，大一点的图片就免了） 1.2 减少DNS查询次数 DNS（Domain Name System，域名系统） 1.3 避免页面跳转 1.4 缓存Ajax 1.5 延迟加载 这里讨论延迟加载需要我们知道我们的网页最初加载需要的最小内容集是什么。剩下的内容就可以推到延迟加载的集合中。 Javascript是典型的可以延迟加载内容。一个比较激进的做法是开发网页时先确保网页在没有Javascript的时候也可以基本工作，然后通过延迟加载脚本来完成一些高级的功能。 1.6 提前加载 与延迟加载目的相反，提前加载的是为了提前加载接下来网页中访问的资源，下面是提前加载的类型 无条件提前加载：当前网页加载完成后，马上去下载一些其他的内容。例如google会在页面加载成功之后马上去下载一个所有结果中会用到的image sprite。 1.7 减少DOM元素数量

在讲前端性能优化前，先了解下一个网站在浏览器端是如何渲染的 1、首先输入url地址 2、浏览器根据url向服务器发送http请求 3、服务器端接收请求并返回html代码返回浏览器 4、浏览器接收html代码并解析生成页面 5、解析页面过程 　　a、HTML文档生成DOM和CSS生成CSSOM 　　b、DOM和CSSOM生成RenderTree 　　c、有了RenderTree知道了浏览器中有那些节点，各个节点的CSS定义绘制成layout render tree 　　d、有了layout render tree 浏览器使用浏览器UI绘制每个节点生成 paint render tree 资源的合并和压缩 　　减少http请求，减少请求资源的大小 　　 html压缩 　　　　html压缩是压缩文本中空格，制表符，换行符，注释等 　　 css压缩 　　　　无效代码删除 　　　　代码合并 　　js的压缩和混乱 　　　　无效字符删除，注释 　　　　代码语义的缩减和优化 　　　　代码保护 　　 文件合并 　　　　减少http请求 　　　　问题 　　　　　　首屏加载慢 　　　　　　缓存失效问题 　　　　方案 　　　　　　公共库合并 　　　　　　不同页面的合并 　　 开启gzip 图片先关优化 　　 png8/png24/png32之间的区别 　　　　png8 支持透明，文件大小小 　　　

　　先让我们看看一张网页是怎么来的，也就是从用户输入完一个网址点下“ENTER”键到整个页面加载出来中间发生了什么。首先我们了解下HTTP过程： 一、寻找IP（每一步都是在上一步没找到的情况下进行的） 本地阶段： 1、浏览器搜索自身缓存； 2、搜索操作系统自身的DNS缓存； 3、地区本地HOST文件； 4、浏览器发送DNS系统调用； 路由阶段： 1、宽带运营商服务器查看本地缓存； 2、运营商服务器发起一个迭代DNS解析请求； com -> baidu.com -> www.baidu.com 3、运营商服务器把结果返回给操作系统内核同时缓存起来； 4、操作系统内核把结果返回个浏览器 浏览器得到IP了。 二、建立连接并获取内容 1、发起HTTP三次握手，建立TCP/IP连接； 2、发起HTTP请求； 3、服务器端读取数据库并处理数据后返回页面内容； 这样获得了一个页面，但是页面的js文件、css文件、图片都要经过这样的过程！ 4、渲染页面； 我们写baidu.com和www.baidu.com同样都会跳转到百度首页，但是baidu.com是经过了一次301页面跳转到www.baidu.com的，多了一次DNS查询； 常见状态码： 1xx 请求已接受 2xx 处理完毕 3xx 重定向 4xx 客户端错误 5xx 服务器端错误 200 OK成功 400 客户端语法错误 401

1.　　请减少HTTP请求　　 　　 基本原理： 　　在浏览器(客户端)和服务器发生通信时，就已经消耗了大量的时间，尤其是在网络情况比较糟糕的时候，这个问题尤其的突出。 　　一个正常HTTP请求的流程简述：如在浏览器中输入"www.xxxxxx.com"并按下回车，浏览器再与这个URL指向的服务器建立连接，然后浏览器才能向服务器发送请求信息，服务器在接受到请求的信息后再返回相应的信息，浏览器接收到来自服务器的应答信息后，对这些数据解释执行。 　　 而当我们请求的网页文件中有很多图片、CSS、JS甚至音乐等信息时，将会频繁的与服务器建立连接，与释放连接，这必定会造成资源的浪费，且每个HTTP请求都会对服务器和浏览器产生性能负担。 　　网速相同的条件下，下载一个100KB的图片比下载两个50KB的图片要快。所以， 请减少HTTP请求。 　　 解决办法： 　　合并图片（css sprites），合并CSS和JS文件；图片较多的页面也可以使用 lazyLoad 等技术进行 优化 。 2.　　请正确理解 Repaint 和 Reflow　　 　　注：Repaint 和 Reflow 也就是重绘和重排，请允许我在这卖弄下我有限认识的那么几个英语单词...囧 　　 基本原理： 　　R epaint(重绘)就是在一个元素的外观被改变，但没有改变布局(宽高)的情况下发生，如改变visibility

前言 这几天，第三轮全站优化结束，测试项目在2G首屏载入速度取得了一些优化成绩，对比下来有10s左右的差距： 这次优化工作结束后，已经是第三次大规模折腾公司框架了，这里将一些自己知道的移动端的建议提出来分享下，希望对各位有用 文中有误请您提出，以免误人自误 技术选型 单页or多页 spa（single page application）也就是我们常常说的web应用程序webapp，被认为是业内的发展趋势，主要有两个优点： ① 用户体验好 ② 可以更好的降低服务器压力 但是单页有几个致命的缺点： ① SEO支持不好，往往需要单独写程序处理SEO问题 ② webapp本身的内存管理难，Javascript、Css非常容易互相影响 当然，这里不是说多页便不能有好的用户体验，不能降低服务器压力；多页也会有变量污染的问题发生，但造成webapp依旧是“发展趋势”，而没有大规模应用的主要原因是： webapp模式门槛较高，很容易玩坏 其实webapp的最大问题与上述几点没有关系，实际上阻碍webapp的是技术门槛与手机性能，硬件方面不必多说，这里主要说技术门槛。 webapp做的好，可以玩动画，可以玩真正意义上的预加载，可以玩无缝页面切换，从某些方面甚至可以媲美原生APP，这也是webapp受到追捧的原因。 但是，以上很容易被玩坏！因为webapp模式不可避免的需要用到框架

文章目录 理论题 前端页面有哪三层构成，分别是什么？作用是什么？ JavaScript 的组成 对BFC规范的理解 线程与进程的区别 什么叫优雅降级和渐进增强？ 请解释一下 JavaScript 的同源策略 一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。 闭包是什么，有什么特性，对页面有什么影响？ 网站重构的理解 检测浏览器版本版本有哪些方式 区分什么是“客户区坐标”、“页面坐标”、“屏幕坐标”？ 描述浏览器的渲染过程，DOM 树和渲染树的区别 如何进一步检测引用数据类型 documen.write和 innerHTML 的区别？ 在JavaScript中使用innerHTML的缺点是什么？ 把 Script 标签 放在页面的最底部的body封闭之前 和封闭之后有什么区别？浏览器会如何解析它们？ DOM操作——怎样添加、移除、移动、复制、创建和查找节点。 split() join() 的区别 数组方法pop() push() unshift() shift() JavaScript有几种类型的值？ Javascript如何实现继承？ javascript创建对象的几种方式？ Javascript作用域链? 谈谈This对象的理解。 说明this几种不同的使用场景 什么是window对象? 什么是document对象?

HTML --css笔记: 一.css引入方式 1.行内式(不推荐使用): 直接在标签里面加style-css样式,这样是可以添加,但是会出现很同样标签,所以一般不推荐 和使用这样的方式去添加css样式. 使用方法: <p style="color:green">这里放设置文本</p> 直接在标签属性添加style-css样式 2.内接样式(页面较小的时候使用哟 ***): 内接样式是针对页面比较小的情况,才会使用. 使用方法:就可以直接在head 标签里面添加:<style> 直接在这里写cass样式</style> 3.外接样式: (1) 链接式 *** 这个是常用的方式,链接式一般都是会另外写一个文件,然后通过link 样式文件进来. 使用方法:<link rel="stylesheet" href="这里放cass文件"> (2) 导入式 同样也是另外写css文件然后导入,不建议使用,因为页面css加载不出来时候,会显示 html 的页面,有加载延迟 导入式是使用方法: @import url("这里放css文件") 二.选择器 *** 注意点: css优先级,指的是浏览器加载 cass 样式的先后顺序 *** 1.基本选择器 (1) 标签选择器 直接使用标签名来做选择器,而不是在另外设置属性,调用属性的( 值 ) 使用方法:直接标签来写在里面,任何标签都是可以找到的.

看到一篇不错的文章，拿来收藏和分享。 原文：http://mp.weixin.qq.com/s/UFTfdE7LYhHquWEzwZKLCQ Web前端技术由 html、css和 javascript 三大部分构成，是一个庞大而复杂的技术体系，其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入，然后不断地接触和学习新的知识点，因此对于初学者很难理清楚整个体系的脉络结构。本文将对Web前端知识体系进行简单的梳理，对应的每个知识点点到为止，不作详细介绍。目的是帮助大家审查自己的知识结构是否完善，如有遗漏或不正确的地方，希望共勉。 一、JAVASCRIPT 篇 0、基础语法 Javascript 基础语法包括：变量声明、数据类型、函数、控制语句、内置对象等。 在ES5 中，变量声明有两种方式，分别是 var 和 function ，var 用于声明普通的变量，接收任意类型，function用于声明函数。另外，ES6 新增了 let、const、import 和 class 等四个命令，分别用以声明 普通变量、静态变量、模块 和 类 。 JS数据类型共有六种，分别是 String、Number、Boolean、Null、Undefined 和 Object 等， 另外，ES6新增了 Symbol 类型。其中，Object 是引用类型，其他的都是原始类型

1.内联CSS 　　内联CSS也可称为行内CSS或者行级CSS，它直接在标签内部引入，显著的优点是十分的便捷、高效；但是同时也造成了不能够重用样式的缺点，如果代码行数到达一定长度不建议采用。通常内联CSS作为测试使用， 可以查找代码中bug 。 1 <body> 2 <div style="width: 65px;height: 20px;border: 1px solid;">测试元素</div> 3 </body> 2.页级CSS 　　页级CSS也可称为内部CSS，整体是放在head标签里边的，在style标签里边定义样式，作用范围和字面意思相同，仅限于本页面的元素；如果你写的代码超过了几百行，想想每次把代码页拉到最上边都很烦，所以它在可维护性方面较差。 1 <head> 2 <meta charset="utf-8" /> 3 <title>测试</title> 4 <style type="text/css"> 5 div { 6 width: 65px; 7 height: 20px; 8 border: 1px solid; 9 background: greenyellow; 10 } 11 </style> 12 </head> 3. 外联CSS 　　外联CSS也可称为外部CSS，在实际的项目中通常使用此种方式，它只在页面中使用link或者@import引入即可

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 一、实现合并和压缩多个JS和CSS文件的代码 HTML： <link rel="stylesheet" type="text/css" href="cssmin.php? get=base,style1,style2,global&path=css/&v=20131023 " /> <script type="text/javascript" src="jsmin.php? get=jquery-1.6.4.min.js,minjquery.js,minjquery.ui.js,test.js,global.js&path=js/&v=20131023 "></script> PHP： 代码如下 //输出JS header ("Content-type:Application/x-javascript; Charset: utf-8"); if(isset($_GET)) { $files = explode(",", $_GET['get']); $str = ''; foreach ($files as $key => $val){ $str .= file_get_contents($_GET['path'].$val); } $str = str_replace("\t", "", $str); /