谈谈性能优化问题

代码层面：避免使用CSS表达式，避免使用CSS Filter，避免使用高级选择器，通配选择器。

缓存利用：缓存Ajax，使用CDN，使用外部js和css文件以便缓存，添加Expires头，服务端配置Etag，减少DNS查找等

请求数量：合并样式和脚本，使用css图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载。

请求带宽：压缩文件，开启GZIP，

代码层面的优化

• 用hash-table来优化查找

• 少用全局变量

• 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能

• 用setTimeout来避免页面失去响应

• 缓存DOM节点查找的结果

• 避免使用CSS Expression

• 避免全局查询

• 避免使用with(with会创建自己的作用域，会增加作用域链长度)

• 多个变量声明合并

• 避免图片和iFrame等的空Src。空Src会重新加载当前页面，影响速度和效率

• 尽量避免写在HTML标签中写Style属性

移动端性能优化

• 尽量使用css3动画，开启硬件加速。
• 适当使用touch事件代替click事件。
• 避免使用css3渐变阴影效果。
• 可以用transform: translateZ(0)来开启硬件加速。
• 不滥用Float。Float在渲染时计算量比较大，尽量减少使用
• 不滥用Web字体。Web字体需要下载，解析，重绘当前页面，尽量减少使用。
• 合理使用requestAnimationFrame动画代替setTimeout
• CSS中的属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）会触发GPU渲染，请合理使用。过渡使用会引发手机过耗电增加
• PC端的在移动端同样适用

web前端开发性能优化

内容方面：

1.减少 HTTP 请求 (Make Fewer HTTP Requests)

2.减少 DOM 元素数量 (Reduce the Number of DOM Elements)

3.使得 Ajax 可缓存 (Make Ajax Cacheable)

针对HTML：

1.语义化HTML：好处在于可以使代码简洁清晰，支持不同设备，利于搜索引擎，便于团队开发；

2. 减少DOM节点：加速页面渲染；

3.给图片加上正确的宽高值，可以减少页面重绘，同时防止图片缩放；

4. 防止src属性和link的href属性为空。当值为空时，浏览器很可能会把当前页面当成其属性值加载；

5.正确的闭合标签：如避免使用<div />，浏览器会多一个将它解析成<div\><div\>的过程；

6.链接为目录或首页的地址后面加”/”，如http://www.5icool.org/；

7.用LINK而不用@import方式导入样式；

8. 样式放在页头，JS放在页尾；

9.缩小favicon.ico并缓存；

针对CSS：

1.把 CSS 放到代码页上端 (Put Stylesheets at the Top)

2.从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)

3.精简 JavaScript 与 CSS (Minify JavaScript and CSS)，能简写就简写

4.避免 CSS 表达式 (Avoid CSS Expressions)

5. 通过CSSSprites把同类图片合成一张，减少图片请求； 

6. 减少查询层级：如.header .logo要好过.header .top .logo；

7. 减少查询范围：如.header>li要好过.header li；

8. 避免TAG标签与CLASS或ID并存：如a.top、button#submit；

9. 删除重复的CSS；

针对JavaScript ：

1. 脚本放到 HTML 代码页底部 (Put Scripts at the Bottom)

2. 从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)

3. 精简 JavaScript 与 CSS (Minify JavaScript and CSS)

4. 移除重复脚本 (Remove Duplicate Scripts)

5. 尽量少用全局变量；

6. 使用事件代理绑定事件，如将事件绑定在body上进行代理；

7.避免频繁操作DOM节点；

8.不使用EVAL；

9.减少对象查找，如a.b.c.d这种查找方式非常耗性能，尽可能把它定义在变量里；

10. 类型转换：把数字转换成字符串使用”” + 1，浮点数转换成整型使用Math.floor()或者Math.round()；

11. 对字符串进行循环操作，譬如替换、查找，应使用正则表达式； 

针对服务器：

1. 尽量合并CSS、JS文件，或将其直接写在页面上，减少HTTP请求；

2. 压缩CSS、JS文件，缩短文件传输时间；

3. 避免404错误：特别要避免给404指定一个停摆页面，否则所有404错误都将会加载一次页面；

4.一般要求减少DNS查询次数，如同一个页面的请求资源尽量少的使用不同的主机名，这可以减少网站并行下载的数量，但很多网站为了加速下载资源其实是特意用了多个主机名，这里要做一个权衡；

5.使用CDN加速，使用户从离自己最近的服务器下载文件；

6.减少Cookie的大小，使用无cookie的域，客户端请求静态文件的时候，减少 Cookie 的反复传输对主域名的影响；

7. 为文件头指定Expires，使内容具有缓存性；

8. 使用gzip压缩内容； 

面向图片(Image)：

1.优化图片

2 不要在 HTML 中使用缩放图片

3 使用恰当的图片格式

4 使用 CSS Sprites 技巧对图片优化

优化图像：

1、不用图片，尽量用css3代替。 比如说要实现修饰效果，如半透明、边框、圆角、阴影、渐变等，在当前主流浏览器中都可以用CSS达成。

2、 使用矢量图SVG替代位图。对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持SVG了，所以可放心使用！

3.、使用恰当的图片格式。我们常见的图片格式有JPEG、GIF、PNG。

基本上，内容图片多为照片之类的，适用于JPEG。

而修饰图片通常更适合用无损压缩的PNG。

GIF基本上除了GIF动画外不要使用。且动画的话，也更建议用video元素和视频格式，或用SVG动画取代。

4、按照HTTP协议设置合理的缓存。

5、使用字体图标webfont、CSS Sprites等。

6、用CSS或JavaScript实现预加载。

7、WebP图片格式能给前端带来的优化。WebP支持无损、有损压缩，动态、静态图片，压缩比率优于GIF、JPEG、JPEG2000、PG等格式，非常适合用于网络等图片传输。

浏览器渲染页面流程

1.解析HTML文件，创建DOM树。

   自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。

2.解析CSS。优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式；

3.将CSS与DOM合并，构建渲染树（Render Tree）

4.布局和绘制，重绘（repaint）和重排（reflow）

注：

one. js延迟加载的方式有哪些？

• defer和async
• 动态创建DOM方式（用得最多）
• 按需异步载入js 

two.简述你怎样对网站的文件和资源进行优化：

• 文件合并
• 文件最小化/文件压缩
• 使用CDN托管
• 缓存的使用