1. 谈谈你对前端性能优化的理解

  • 对数据进行异步加载

  • 开启GZip,精简JavaScript,移除重复脚本,图像优化,将icon做成字体

  • 使用CDN,使用外部JavaScript和CSS,添加Expires头,减少DNS查找,配置ETag,使AjaX可缓存

1. html部分

  • 要避免代码的深层级嵌套。因为层级越深的节点在初始化时更占内存。

  • 尽量不要使用h5摒弃的iframe标签,因为在页面加载的时候iframe标签会阻塞父文档onload事件的触发,这恰恰影响了初始化UI

  • 诸如img、link、script等元素的src或href属性的值不为空,因为就算我们写为src=""浏览器仍会发送http请求

  • 为页面中的图片设置宽高,这样做的好处是在页面加载完前就完成了布局,如若未指定宽高,在图片加载后还要调整其大小,影响时间。

  • 在html文档开始就指定文档字符集,这样做的目的是在有助于浏览器加载时就能立即解析html代码

2. css部分:

  • 将样式表置顶,这样做的好处是文档加载完毕之前样式就已经加载完,不用等页面加载完毕后再重新加载样式

  • 避免使用css表达式,避免重定向

  • 使用外部css并且精简css,移除无用的css样式

  • 用link来代替@important

3. js部分

  • 将脚本置底,避免script标签加载的时候页面等待加载

  • 使用外部脚本以及精简后的去除重复的脚本

  • 尽量减少dom访问,在《高性能JavaScript》中这么比喻:“把DOM看成一个岛屿,把JavaScript(ECMAScript)看成另一个岛屿,两者之间以一座收费桥连接”。所以每次访问DOM都会教一个过桥费,而访问的次数越多,交的费用也就越多。所以一般建议尽量减少过桥次数。

  • 使用json格式来进行数据交换,因为JSON是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式。同时,JSON是 JavaScript原生格式,这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。

2. 网站重构的理解

重构:在不改变外部行为的前提下,简化结构、添加可读性,而在网站前端保持一致的行为。

  • 使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)

  • 对于移动平台的优化,针对于SEO进行优化

  • 减少代码间的耦合,让代码保持弹性

  • 压缩或合并或拆分JS、CSS、image等前端资源

3. 对前端界面工程师这个职位是怎么样理解的?

  • 前端是最贴近用户的程序员,前端的能力就是能让产品从 90分进化到 100 分,甚至更好

  • 参与项目,快速高质量完成实现效果图,精确到1px;

  • 与团队成员,UI设计,产品经理的沟通;

  • 做好的页面结构,页面重构和用户体验;

  • 处理hack,兼容、写出优美的代码格式;

  • 针对服务器的优化、拥抱最新前端技术

3. 平时如何管理你的项目?

a. 先期团队必须确定好全局样式(globe.css),编码模式(utf-8) 等;

b. 编写习惯必须一致(例如都是采用继承式的写法,单样式都写成一行);

c. 标注样式编写人,各模块都及时标注(标注关键样式调用的地方);

d. 页面进行标注(例如 页面 模块 开始和结束);

e. CSS跟HTML 分文件夹并行存放,命名都得统一(例如style.css);

f. JS 分文件夹存放 命名以该JS功能为准的英文翻译。

g. 图片采用整合的 images.png png8 格式文件使用 尽量整合在一起使用方便将来的管理

20.如何管理前端团队?

请自行根据自己情况做回答,这个没有标准答案。

21.最近在学什么?能谈谈你未来3,5年给自己的规划吗?

请自行根据自己情况做回答,这个没有标准答案。

Copyright © webMrYang.top 2019 all right reserved,powered by Gitbook该文件修订时间: 2019-08-08 11:39:34

results matching ""

    No results matching ""