前端雅虎性能优化14条
1.减少HTTP请求
2.使用CDN
3.添加Expires头
4.压缩组件
5.将样式表放在头部
6.将脚本放在底部
7.避免CSS表达式
8.使用外部的js和css
9.减少DNS查找
10.精简js
11.避免重定向
12.删除重复脚本
13.配置ETag
14.使Ajax可缓存
如何对网站的文件和图片进行优化
1.减少http请求:
1)合并 JavaScript和CSS文件、
2)使用CSS Sprites、图像映射 （Image Map）和使用Data URI 来编码图片。
2 .文件最小化/文件压缩:目的是直接减少文件下载的体积；常用的工具是 YUI Compressor。
3 .使用CDN托管(参考博客地址https://juejin.cn/post/6844903977495035917)
一个页面上有大量的图片(电商网站和摄影网站),加载很慢,你有什么办法优化图片的加载,给用户更好的用户体验
1)图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端
的距离与页面的距离，如果前者小于后者，优先加载。
2)如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先 下载。
3)如果图片为css 图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64 等技术。
4)如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图以提高用户体验。
5)如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩， 图片压缩后大小与展示一致。
项目中图片处理的相关优化,项目中用到的优化方案,图片大小达到多少时处理(替代图片的方式)
1)css样式代 替图片例如：半透明、圆角、阴影、高光、渐变等。这些效果主流的浏览器都能够完美支持， 而对于那些低端浏览器，
我们并不会完全抛弃他们，“渐进增强”则是一个很好的解决方案。
2)精灵图CSSSprites，将同类型的图标或按钮等背景图合到一张大图中，减少页面请求。
字体图标 IconFont，将图标做成字体文件。优点是图标支持多个尺寸，兼容所有浏览 器，减少页面请求等。
美中不足的是只支持纯色的 icon。
3)SVG，对于绝大多数图案、图标 等，矢量图更小，且可缩放而无需生成多套图。
现在主流浏览器都支持SVG了，所以可放心使用！
4)Base64将图片转化为 base64编码格式，资源内嵌于CSS 或HTML 中
不必单独请求。Base64 有专门的转码工具
5)图片响应式通常图片加都是可以通过 lazy加载的形式来的，那么可以在加载的时候来判断屏幕的尺寸来达到加载大图还是小图 的目的来达到优化。
web语义化
（1）HTML语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；
（2）即使在没有样式CSS 的情况下也能以一种文档格式显示，并且是容易阅读的；
（3） 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，有利于SEO；
（4）使阅读源代码的人更容易将网站分块，便于阅读、维护和理解。
web攻击技术
1.sql注入:用户的输入被直接动态拼装sql语句时,可能用户恶意输入被拼到sql语句上,而造成一些恶意操作,比如删除一些关键信息
2.跨站脚本攻击:
想办法让你在某个网站上执行我的js文件就是跨站脚本攻击
反射型。 url中的值，服务端处理之后成了XSS代码到页面上。
存储型。 XSS代码会被数据库或其他方式存起来。比如留言板，你留的言包含恶意脚本，被存数据库了。而目标用户打开了相关页面。
你的留言被查出来并显示。浏览器发现XSS代码，且当成正常html与js解析，就引起了XSS攻击。
dom XSS。不需要服务端的直接参与，依靠浏览器端的dom解析。 尽量少用eval函数。
一般情况下，XSS攻击代码会加载一个的文件。这样的好处是攻击代码可以控制。只要自己修改了恶意脚本，被攻击者也会受到不同的攻击。
比如盗取cookie。
]
渐进增强和优雅降级
优雅降级和渐进增强印象中是随着css3 流出来的一个概念。由于低级浏览器不支持
css3，但 css3 的效果又太优秀不忍放弃，
所以在高级浏览中使用 css3 而低级浏览器只保证
最基本的功能。咋一看两个概念差不多，都是在关注不同浏览器下的不同体验，
关键的区别
是他们所侧重的内容，以及这种不同造成的工作流程的差异。
“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。
“渐进增强”观点则认为应关注于内容本身。
介绍下重绘和回流,以及如何进行优化
回流：当render tree中的一部分(或全部)因为元素的尺寸，布局，隐藏等改变而需要重新构建，就是回流。回流后会进行重绘。
出现回流的现象:
1、页面渲染初始化
2、添加、删除可见的DOM元素
3、元素尺寸、位置变化
4、窗口resize
重绘：当只是元素的外观，风格变化，不影响布局的，重新渲染的过程就叫重绘。
浏览器对回流重绘优化:
浏览器都会优化重绘和回流的操作。浏览器会把所有会引起回流、重绘的操作放入1个队列中，
等队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会flush队列，进行一个批处理。
这样就会让多次的回流、重绘变成一次回流重绘。
另外，当我们取一些属性值时，类似offsetWidth、clientWidth、width等，会导致浏览器提前flush队列，
只为了取到正确的值，即便是队列里的操作不影响所取的值。
减少回流、重绘
1、修改样式和添加DOM元素时，批量处理。
2、取offsetWidth等属性值，缓存到变量，少去取值。
3、将元素脱离文档流。
网站总体性能的优化
1.减少http请求次数:css Sprites,JS,CSS源码压缩,图片大小控制合适:网页压缩,CDN托管等,data缓存,图片服务器
2.前端模版js+数据,减少由于html标签导致的宽带浪费,前端用变量保存ajax请求结果,每次操作本地变量,不用请求,减少请求次数
3.用innerHTML代替DOM操作,减少DOM操作次数,优化JavaScript性能
4.当需要设置的样式很多时设置className而不是直接操作style
5.少用全局变量,缓存DOM节点查找的结果,减少IO读取操作
6图片预加载,将样式表放在顶部,脚本放在底部,加上时间戳
7.避免在页面的主体布局中使用table,table要等其中的内容完全下载之后才会显示出来,比div+css慢很多
