前端知识点

2016-11-07 18:47:13   0  举报





仅支持查看

AI智能生成

前端知识点涵盖了网页设计和开发的各个方面，包括HTML、CSS和JavaScript等核心技术。HTML用于创建网页的结构，定义了各种标签来表示文本、图像、链接等内容；CSS则负责网页的样式和布局，通过选择器和应用属性值来控制元素的外观；而JavaScript是一种脚本语言，可以实现网页的交互功能，如表单验证、动画效果等。此外，前端开发还涉及到响应式设计、浏览器兼容性、性能优化等方面的知识。掌握这些知识点可以帮助开发者构建出美观、易用且高效的网页应用。

前端开发

作者其他创作

大纲/内容

优化问题

网站文件和资源进行优化

文件合并<br>文件最小化、文件压缩<br>使用CDN托管<br>缓存的使用

减少页面加载时间的方法

优化图片

图像格式的选择

优化CSS

标明高度和宽度

减少http请求，合并文件，合并图片

FOUC 无样式内容闪烁

<span style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px; background-color: rgb(211, 244, 239);"><style type="text/css" media="all">@import "../fouc.css";</style> </span>

<div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">解决方法简单的出奇，只要在<head>之间加入一个<link>或者<script>元素就可以了。</div>

性能优化问题

<div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">1. 减少http请求次数：CSS Sprites, JS、CSS 源码压缩、图片大小控制合适；网页 Gzip，CDN 托管，data 缓存，图片服务器</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">2. 前端模板 JS + 数据，减少由于HTML标签导致的带宽浪费，前端用变量保存 AJAX 请求结果，每次操作本地变量，不用请求，减少请求次数</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">3. 用 innerHTML 代替 DOM 操作，减少 DOM 操作次数，优化 javascript 性能</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">4. 当需要设置的样式很多时设置 className 而不是直接操作 style</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">5. 少用全局变量、缓存DOM节点查找的结果。减少 IO 读取操作</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">6. 避免使用 CSS Expression（css表达式)又称 Dynamic properties(动态属性)</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">7. 图片预加载，将样式表放在顶部，将脚本放在底部，加上时间戳</div>

页面重构

编写css，让页面结构更合理，提升用户体验，实现良好的页面效果和提升性能

前端概念

<div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">前端是最贴近用户的程序员，比后端、数据库、产品经理、运营、安全都近。</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">1. 实现界面交互</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">2. 提升用户体验</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">3. 有了Node.js，前端可以实现服务端的一些事情</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;"><br></div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">前景：</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">1. 前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">2. 参与项目，快速高质量完成实现效果图，精确到1px；</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">3. 与团队成员，UI设计，产品经理的沟通；</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">4. 做好的页面结构，页面重构和用户体验；</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">5. 处理hack，兼容、写出优美的代码格式；</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">6. 针对服务器的优化、拥抱最新前端技术。</div>

新的技术

<div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">1. Node.js</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">2. Mongodb</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">3. npm</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">4. MVVM</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">5. MEAN</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">6. three.js</div><div style="color: rgb(51, 51, 51); font-family: arial, STHeiti, 'Microsoft YaHei', 宋体; font-size: 14px; line-height: 21px;">7. React</div>

框架

jquery

yui

prototype

dojo

ext.js

Mootools

轻量级

modernizr

underscore.js

backbone.js

raphael.js