前端面试题综合篇

综合技巧相关

如何给你的团队制定编码规范？

• 使用eslint插件
• 编写风格规范文档
• 命名统一英文命名
• 统一大小写

渐进增强和优雅降级分别是什么意思？

渐进增强

先实现基本的功能，考虑兼容性，一步一步的完整开发

优雅降级

先实现比较完整的功能，在考虑对兼容性的适配

你会如何解决特定浏览器的样式问题？

• 优雅降级，渐进增强
• 使用IE条件注释
• 属性Hack写法
• html5shiv.js让老的IE支持HTML5标签，Respond.js让老的IE支持媒体查询
• 使用CSS reset或者CSS normalize来保证浏览器的统一性

如何优化网页的打印样式？

• 准备两套CSS，一套正常显示，一套打印的时候显示
• 少用浮动元素
• 隐藏不必要的内容
• 使用媒体查询@media print { CSS }

浏览器及网页渲染

从url输入到页面展现发生了什么？

1. DNS 解析:将域名解析成 IP 地址
2. TCP 连接：TCP 三次握手
3. 发送 HTTP 请求
4. 服务器处理请求并返回 HTTP 报文
5. 浏览器解析渲染页面
6. 断开连接：TCP 四次挥手

简述页面渲染的流程

1. 解析html以构建dom树
2. 构建render树
3. 布局render树
4. 绘制render树

网页出现长时间的白屏可能的原因是什么？如何优化？

问题原因

• js放在head加载
• html页面架构不合理

如何优化?

• 把功能性的js放到body的最后面
• 降低http请求，使用gziy压缩
• 图片使用懒加载